/* ================================================================
FAMILLE DE SAUVETEURS — fds-styles.css
Version 1.0 — Design moderne, familial, rassurant
TABLE DES MATIÈRES :
1. Variables CSS (couleurs, typographies, espacements)
2. Reset & base
3. Utilitaires
4. Container
5. Boutons
6. Badges & eyebrows
7. Animations reveal
8. Header & Navigation
9. Menu mobile
10. Hero / Slider
11. Section Médias
12. Section "À propos / initiation"
13. Section "Ce que vous allez apprendre"
14. Section Tarif
15. Section Trousse familiale
16. Section Carte formateurs
17. Section Fondateur
18. Section Podcast
19. Section Franchise
20. Section Professionnels
21. Section Partenaires
22. Footer
23. Responsive
MODIFIER LES COULEURS : Changer les variables dans :root
================================================================ */
/* ----------------------------------------------------------------
1. VARIABLES CSS
---------------------------------------------------------------- */
:root {
/* Couleurs principales — MODIFIER ICI pour changer la charte */
--fds-green: #58B957;
--fds-green-light: #EEF8EE;
--fds-green-dark: #3d9a3c;
--fds-blue: #20A8E0;
--fds-blue-light: #E8F6FD;
--fds-blue-dark: #1587b7;
--fds-orange: #FF902E;
--fds-orange-light: #FFF3E8;
--fds-orange-dark: #e07520;
/* Neutres */
--fds-dark: #111827;
--fds-dark-2: #1F2937;
--fds-gray-600: #4B5563;
--fds-gray-400: #9CA3AF;
--fds-gray-200: #E5E7EB;
--fds-gray-100: #F3F4F6;
--fds-bg: #F8FCFF;
--fds-white: #FFFFFF;
/* Typographies */
--fds-font-title: 'Poppins', 'Nunito Sans', system-ui, sans-serif;
--fds-font-body: 'Inter', 'Lato', system-ui, sans-serif;
/* Espacements */
--fds-section-py: 80px;
--fds-container-max: 1240px;
--fds-container-px: 24px;
--fds-radius: 12px;
--fds-radius-lg: 20px;
--fds-radius-xl: 32px;
/* Ombres */
--fds-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--fds-shadow: 0 4px 20px rgba(0,0,0,.08);
--fds-shadow-lg: 0 8px 40px rgba(0,0,0,.12);
--fds-shadow-card: 0 2px 16px rgba(32,168,224,.10);
/* Transitions */
--fds-transition: .25s ease;
--fds-transition-slow: .4s ease;
/* Header */
--fds-header-h: 72px;
}
/* ----------------------------------------------------------------
2. RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--fds-font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--fds-dark);
background-color: var(--fds-white);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--fds-font-title);
line-height: 1.25;
font-weight: 700;
color: var(--fds-dark);
}
a {
color: inherit;
text-decoration: none;
transition: color var(--fds-transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
font-family: inherit;
border: none;
background: none;
}
input, textarea {
font-family: inherit;
font-size: 1rem;
}
/* Focus visible pour accessibilité */
:focus-visible {
outline: 3px solid var(--fds-blue);
outline-offset: 3px;
border-radius: 4px;
}
/* ----------------------------------------------------------------
3. UTILITAIRES
---------------------------------------------------------------- */
.fds-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.fds-highlight {
color: var(--fds-green);
position: relative;
display: inline;
}
.fds-highlight::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--fds-green), var(--fds-blue));
border-radius: 2px;
opacity: .4;
}
/* ----------------------------------------------------------------
4. CONTAINER
---------------------------------------------------------------- */
.fds-container {
width: 100%;
max-width: var(--fds-container-max);
margin-inline: auto;
padding-inline: var(--fds-container-px);
}
/* ----------------------------------------------------------------
5. BOUTONS
---------------------------------------------------------------- */
.fds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border-radius: 50px;
font-family: var(--fds-font-title);
font-weight: 600;
font-size: .95rem;
line-height: 1;
cursor: pointer;
transition:
background var(--fds-transition),
color var(--fds-transition),
border-color var(--fds-transition),
box-shadow var(--fds-transition),
transform var(--fds-transition);
white-space: nowrap;
text-decoration: none;
border: 2px solid transparent;
}
.fds-btn:hover {
transform: translateY(-2px);
}
.fds-btn:active {
transform: translateY(0);
}
/* Primary — Vert */
.fds-btn--primary {
background: var(--fds-green);
color: var(--fds-white);
border-color: var(--fds-green);
box-shadow: 0 4px 16px rgba(88,185,87,.30);
}
.fds-btn--primary:hover {
background: var(--fds-green-dark);
border-color: var(--fds-green-dark);
box-shadow: 0 6px 24px rgba(88,185,87,.40);
}
/* Outline */
.fds-btn--outline {
background: transparent;
color: var(--fds-dark);
border-color: var(--fds-gray-200);
}
.fds-btn--outline:hover {
border-color: var(--fds-green);
color: var(--fds-green);
}
/* Ghost */
.fds-btn--ghost {
background: transparent;
color: var(--fds-blue);
border-color: transparent;
padding-inline: 8px;
text-decoration: underline;
text-underline-offset: 3px;
}
.fds-btn--ghost:hover {
color: var(--fds-blue-dark);
transform: none;
}
/* Large */
.fds-btn--lg {
padding: 15px 32px;
font-size: 1rem;
}
/* Full width */
.fds-btn--full {
width: 100%;
}
/* ----------------------------------------------------------------
6. BADGES & EYEBROWS
---------------------------------------------------------------- */
.fds-badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 50px;
font-size: .8rem;
font-weight: 600;
font-family: var(--fds-font-title);
letter-spacing: .02em;
text-transform: uppercase;
}
.fds-badge--green {
background: var(--fds-green-light);
color: var(--fds-green-dark);
}
.fds-badge--blue {
background: var(--fds-blue-light);
color: var(--fds-blue-dark);
}
.fds-badge--orange {
background: var(--fds-orange-light);
color: var(--fds-orange-dark);
}
.fds-eyebrow {
display: block;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--fds-green);
margin-bottom: 12px;
font-family: var(--fds-font-title);
}
/* ----------------------------------------------------------------
7. SECTION HEADERS & ANIMATIONS REVEAL
---------------------------------------------------------------- */
.fds-section-header {
text-align: center;
max-width: 680px;
margin-inline: auto;
margin-bottom: 56px;
}
.fds-section-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
margin-bottom: 16px;
line-height: 1.2;
}
.fds-section-desc {
color: var(--fds-gray-600);
font-size: 1.05rem;
line-height: 1.7;
}
/* Animations reveal au scroll */
.fds-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .6s ease, transform .6s ease;
}
.fds-reveal.fds-visible {
opacity: 1;
transform: translateY(0);
}
.fds-reveal--delay-1 { transition-delay: .1s; }
.fds-reveal--delay-2 { transition-delay: .2s; }
.fds-reveal--delay-3 { transition-delay: .3s; }
/* ----------------------------------------------------------------
8. HEADER STICKY
---------------------------------------------------------------- */
.fds-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
height: var(--fds-header-h);
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--fds-transition), box-shadow var(--fds-transition), background var(--fds-transition);
}
.fds-header.fds-header--scrolled {
border-color: var(--fds-gray-200);
box-shadow: var(--fds-shadow);
}
.fds-header__inner {
height: 100%;
display: flex;
align-items: center;
gap: 24px;
}
/* Logo */
.fds-header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.fds-header__logo img {
height: 44px;
width: auto;
display: block;
}
/* Fallback texte logo si image absente */
.fds-header__logo-text {
font-family: var(--fds-font-title);
font-weight: 800;
font-size: 1.1rem;
color: var(--fds-dark);
white-space: nowrap;
/* Masquer si image logo chargée — décommenter si besoin */
/* display: none; */
}
.fds-header__logo-text .fds-logo-famille { color: var(--fds-green); }
.fds-header__logo-text .fds-logo-sauveteurs { color: var(--fds-blue); }
/* Nav principale */
.fds-nav {
flex: 1;
display: flex;
justify-content: center;
}
.fds-nav__list {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
}
.fds-nav__link {
padding: 8px 12px;
border-radius: 8px;
font-size: .875rem;
font-weight: 500;
color: var(--fds-gray-600);
white-space: nowrap;
transition: color var(--fds-transition), background var(--fds-transition);
}
.fds-nav__link:hover,
.fds-nav__link.fds-active {
color: var(--fds-dark);
background: var(--fds-gray-100);
}
/* CTA header */
.fds-header__cta {
flex-shrink: 0;
font-size: .875rem;
padding: 10px 20px;
}
/* Burger */
.fds-burger {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
margin-left: auto;
border-radius: 8px;
}
.fds-burger:hover { background: var(--fds-gray-100); }
.fds-burger__bar {
display: block;
width: 22px;
height: 2px;
background: var(--fds-dark);
border-radius: 2px;
transition: transform var(--fds-transition), opacity var(--fds-transition);
}
.fds-burger.fds-open .fds-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fds-burger.fds-open .fds-burger__bar:nth-child(2) { opacity: 0; }
.fds-burger.fds-open .fds-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ----------------------------------------------------------------
9. MENU MOBILE
---------------------------------------------------------------- */
.fds-mobile-menu {
position: fixed;
top: var(--fds-header-h);
left: 0;
width: 100%;
max-height: calc(100vh - var(--fds-header-h));
background: var(--fds-white);
border-top: 1px solid var(--fds-gray-200);
box-shadow: var(--fds-shadow-lg);
padding: 16px var(--fds-container-px) 24px;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform .3s ease, opacity .3s ease, visibility .3s;
overflow-y: auto;
z-index: 999;
}
.fds-mobile-menu.fds-open {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.fds-mobile-menu__list {
display: flex;
flex-direction: column;
gap: 4px;
}
.fds-mobile-menu__link {
display: block;
padding: 12px 16px;
border-radius: 10px;
font-weight: 500;
color: var(--fds-dark);
font-size: 1rem;
}
.fds-mobile-menu__link:hover {
background: var(--fds-gray-100);
color: var(--fds-green);
}
.fds-mobile-menu__cta-item {
margin-top: 12px;
}
/* ----------------------------------------------------------------
10. HERO / SLIDER
---------------------------------------------------------------- */
.fds-hero {
position: relative;
padding-top: var(--fds-header-h);
overflow: hidden;
}
.fds-hero__slider {
position: relative;
min-height: calc(100vh - var(--fds-header-h));
overflow: hidden;
}
.fds-hero__slide {
position: absolute;
inset: 0;
width: 100%;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateX(40px);
transition: opacity .6s ease, transform .6s ease, visibility .6s;
pointer-events: none;
}
.fds-hero__slide--active {
position: relative;
width: 100%;
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
/* Backgrounds dégradés */
.fds-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.fds-hero__bg--1 { background: linear-gradient(135deg, #F0FBF0 0%, #E8F6FD 50%, #FFF6EE 100%); }
.fds-hero__bg--2 { background: linear-gradient(135deg, #E8F6FD 0%, #F0FBF0 60%, #FFF6EE 100%); }
.fds-hero__bg--3 { background: linear-gradient(135deg, #FFF6EE 0%, #E8F6FD 50%, #F0FBF0 100%); }
/* Blobs décoratifs */
.fds-hero__blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .5;
pointer-events: none;
}
.fds-hero__blob--green {
width: 400px;
height: 400px;
background: rgba(88,185,87,.25);
top: -100px;
left: -100px;
}
.fds-hero__blob--blue {
width: 350px;
height: 350px;
background: rgba(32,168,224,.20);
bottom: 0;
right: 10%;
}
.fds-hero__blob--orange {
width: 280px;
height: 280px;
background: rgba(255,144,46,.18);
top: 20%;
right: -50px;
}
.fds-hero__blob--top-right { top: -80px; right: -80px; left: auto; bottom: auto; }
.fds-hero__blob--bottom-left { bottom: -80px; left: -80px; top: auto; right: auto; }
.fds-hero__blob--bottom-center { bottom: -80px; left: 50%; transform: translateX(-50%); top: auto; }
/* Inner hero */
.fds-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
min-height: calc(100vh - var(--fds-header-h));
padding-block: 80px;
}
.fds-hero__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.fds-hero__title {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
color: var(--fds-dark);
}
.fds-hero__title em {
font-style: normal;
color: var(--fds-green);
}
.fds-hero__subtitle {
font-size: 1.1rem;
color: var(--fds-gray-600);
line-height: 1.7;
max-width: 520px;
}
.fds-hero__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
/* Stats hero */
.fds-hero__stats {
display: flex;
align-items: center;
gap: 20px;
margin-top: 8px;
padding: 16px 24px;
background: rgba(255,255,255,.8);
backdrop-filter: blur(8px);
border-radius: var(--fds-radius-lg);
border: 1px solid rgba(255,255,255,.9);
box-shadow: var(--fds-shadow-sm);
max-width: fit-content;
}
.fds-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.fds-hero__stat strong {
font-size: 1.5rem;
font-weight: 800;
color: var(--fds-dark);
font-family: var(--fds-font-title);
line-height: 1;
}
.fds-hero__stat span {
font-size: .75rem;
color: var(--fds-gray-400);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .05em;
}
.fds-hero__stat-sep {
width: 1px;
height: 32px;
background: var(--fds-gray-200);
}
/* Checklist hero */
.fds-hero__checklist {
display: flex;
flex-direction: column;
gap: 8px;
}
.fds-hero__checklist li {
display: flex;
align-items: center;
gap: 10px;
font-size: .95rem;
color: var(--fds-gray-600);
font-weight: 500;
}
.fds-hero__checklist li svg {
color: var(--fds-green);
flex-shrink: 0;
}
/* Régions hero */
.fds-hero__regions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.fds-hero__regions span {
padding: 4px 12px;
background: rgba(255,255,255,.8);
border: 1px solid var(--fds-gray-200);
border-radius: 50px;
font-size: .8rem;
font-weight: 500;
color: var(--fds-dark);
}
/* Visual hero (image) */
.fds-hero__visual {
display: flex;
justify-content: center;
align-items: center;
}
.fds-hero__img-wrap {
position: relative;
border-radius: var(--fds-radius-xl);
overflow: hidden;
box-shadow: var(--fds-shadow-lg);
max-width: 520px;
width: 100%;
aspect-ratio: 7/6;
background: var(--fds-gray-100);
}
.fds-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fds-hero__img-badge {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--fds-white);
border-radius: var(--fds-radius);
padding: 10px 16px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--fds-shadow);
font-family: var(--fds-font-title);
font-size: .8rem;
font-weight: 600;
color: var(--fds-dark);
}
.fds-hero__img-badge svg { color: var(--fds-green); }
/* Slider controls */
.fds-slider-controls {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 20px 0 32px;
background: var(--fds-white);
}
.fds-slider-prev,
.fds-slider-next {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--fds-gray-100);
color: var(--fds-gray-600);
transition: background var(--fds-transition), color var(--fds-transition), transform var(--fds-transition);
}
.fds-slider-prev:hover,
.fds-slider-next:hover {
background: var(--fds-green);
color: var(--fds-white);
transform: scale(1.1);
}
.fds-slider-dots {
display: flex;
gap: 8px;
}
.fds-slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--fds-gray-200);
transition: background var(--fds-transition), width var(--fds-transition);
padding: 0;
}
.fds-slider-dot--active {
width: 24px;
border-radius: 4px;
background: var(--fds-green);
}
/* ----------------------------------------------------------------
11. SECTION MÉDIAS
---------------------------------------------------------------- */
.fds-media {
background: var(--fds-white);
padding: 32px 0;
border-top: 1px solid var(--fds-gray-100);
border-bottom: 1px solid var(--fds-gray-100);
overflow: hidden;
}
.fds-media__label {
text-align: center;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--fds-gray-400);
margin-bottom: 24px;
}
.fds-media__track {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 24px 48px;
}
.fds-media__item {
display: flex;
align-items: center;
filter: grayscale(1);
opacity: .5;
transition: filter var(--fds-transition), opacity var(--fds-transition), transform var(--fds-transition);
}
.fds-media__item:hover {
filter: grayscale(0);
opacity: 1;
transform: scale(1.05);
}
.fds-media__item img {
max-height: 44px;
width: auto;
object-fit: contain;
}
/* ----------------------------------------------------------------
12. SECTION "INITIATION EN FAMILLE" — fond vert sombre + mascotte
---------------------------------------------------------------- */
.fds-about {
padding-block: var(--fds-section-py);
background: linear-gradient(135deg, #E8F6FD 0%, #F0FAFF 60%, #EBF8FD 100%);
position: relative;
overflow: hidden;
}
.fds-about::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 500px; height: 500px;
border-radius: 50%;
background: rgba(32,168,224,.06);
pointer-events: none;
}
.fds-about__split {
display: grid;
grid-template-columns: 1fr 400px;
gap: 64px;
align-items: center;
}
.fds-about__title {
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
font-weight: 800;
line-height: 1.2;
color: var(--fds-dark);
margin-bottom: 16px;
font-family: var(--fds-font-title);
}
.fds-about__highlight { color: var(--fds-blue); }
.fds-about__desc {
font-size: 1.05rem;
color: var(--fds-gray-600);
line-height: 1.7;
margin-bottom: 36px;
}
.fds-about__features {
display: flex;
flex-direction: column;
gap: 20px;
}
.fds-about__feature {
display: flex;
align-items: flex-start;
gap: 16px;
}
.fds-about__feature-icon-wrap {
width: 50px; height: 50px;
border-radius: 14px;
background: var(--fds-white);
border: 1.5px solid var(--fds-blue-light);
box-shadow: var(--fds-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--fds-blue);
flex-shrink: 0;
}
.fds-about__feature h3 {
font-size: 1rem;
font-weight: 700;
color: var(--fds-dark);
margin-bottom: 4px;
font-family: var(--fds-font-title);
}
.fds-about__feature p {
font-size: .875rem;
color: var(--fds-gray-600);
line-height: 1.6;
}
.fds-about__bottom-stats {
display: flex;
margin-top: 40px;
padding-top: 32px;
border-top: 1.5px solid rgba(32,168,224,.2);
}
.fds-about__bottom-stat {
flex: 1;
padding: 0 20px;
border-right: 1.5px solid rgba(32,168,224,.2);
}
.fds-about__bottom-stat:first-child { padding-left: 0; }
.fds-about__bottom-stat:last-child { border-right: none; }
.fds-about__bottom-stat strong {
display: block;
font-size: 2rem;
font-weight: 800;
color: var(--fds-blue);
font-family: var(--fds-font-title);
}
.fds-about__bottom-stat span {
font-size: .8rem;
color: var(--fds-gray-400);
}
.fds-about__right { position: relative; }
.fds-about__mascot-wrap {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
height: 480px;
}
.fds-about__mascot {
max-height: 440px;
width: auto;
animation: fds-float 4s ease-in-out infinite;
filter: drop-shadow(0 24px 48px rgba(32,168,224,.25));
}
@keyframes fds-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-16px); }
}
.fds-about__bubble {
position: absolute;
top: 24px; right: -8px;
background: var(--fds-white);
color: var(--fds-dark);
border-radius: 20px 20px 4px 20px;
padding: 14px 20px;
font-size: .9rem;
font-weight: 700;
box-shadow: var(--fds-shadow-lg);
line-height: 1.4;
white-space: nowrap;
font-family: var(--fds-font-title);
}
.fds-about__badge-float {
position: absolute;
background: var(--fds-white);
border-radius: 50px;
padding: 8px 14px;
font-size: .8rem;
font-weight: 600;
box-shadow: var(--fds-shadow);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font-family: var(--fds-font-title);
}
.fds-about__badge-float--1 {
bottom: 80px; left: -16px;
color: var(--fds-green-dark);
animation: fds-float 4s ease-in-out infinite .8s;
}
.fds-about__badge-float--1 svg { color: var(--fds-green); }
.fds-about__badge-float--2 {
bottom: 160px; right: -12px;
color: var(--fds-orange-dark);
animation: fds-float 4s ease-in-out infinite 1.6s;
}
.fds-about__badge-float--2 svg { color: #F59E0B; }
/* ----------------------------------------------------------------
13. SECTION "CE QUE VOUS ALLEZ APPRENDRE" — format curriculum
---------------------------------------------------------------- */
.fds-learn {
padding-block: var(--fds-section-py);
background: #FFF8F2;
position: relative;
overflow: hidden;
}
.fds-learn__mascot-deco {
position: absolute;
bottom: 0; right: 40px;
width: 200px;
opacity: .9;
pointer-events: none;
animation: fds-float 5s ease-in-out infinite .5s;
filter: drop-shadow(0 12px 24px rgba(0,0,0,.15));
}
.fds-learn__modules {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-bottom: 48px;
border: 1.5px solid rgba(0,0,0,.07);
border-radius: var(--fds-radius-lg);
overflow: hidden;
background: var(--fds-white);
}
.fds-learn__module {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px 28px;
border-bottom: 1.5px solid rgba(0,0,0,.07);
border-right: 1.5px solid rgba(0,0,0,.07);
transition: background var(--fds-transition);
}
.fds-learn__module:nth-child(even) { border-right: none; }
.fds-learn__module:nth-last-child(-n+2) { border-bottom: none; }
.fds-learn__module:hover { background: #FFF8F2; }
.fds-learn__module-num {
font-size: 2.2rem;
font-weight: 900;
color: var(--fds-orange);
line-height: 1;
min-width: 52px;
opacity: .35;
font-family: var(--fds-font-title);
}
.fds-learn__module-body h3 {
font-size: .95rem;
font-weight: 700;
color: var(--fds-dark);
margin-bottom: 4px;
font-family: var(--fds-font-title);
}
.fds-learn__module-body p {
font-size: .84rem;
color: var(--fds-gray-600);
line-height: 1.55;
}
.fds-learn__cta {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
/* ----------------------------------------------------------------
13b. SECTION TÉMOIGNAGES
---------------------------------------------------------------- */
.fds-testimonials {
padding-block: var(--fds-section-py);
background: var(--fds-white);
overflow: hidden;
}
.fds-testimonials__track-wrap { position: relative; }
.fds-testimonials__track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
cursor: grab;
}
.fds-testimonials__track:active { cursor: grabbing; }
.fds-testimonials__track::-webkit-scrollbar { display: none; }
.fds-testimonials__card {
flex: 0 0 340px;
scroll-snap-align: start;
background: var(--fds-bg);
border-radius: var(--fds-radius-xl);
padding: 32px 28px;
border: 1.5px solid var(--fds-gray-100);
transition: box-shadow var(--fds-transition), transform var(--fds-transition);
}
.fds-testimonials__card:hover {
box-shadow: var(--fds-shadow-lg);
transform: translateY(-4px);
}
.fds-testimonials__stars {
display: flex;
gap: 3px;
color: #F59E0B;
margin-bottom: 16px;
}
.fds-testimonials__quote {
font-size: .95rem;
line-height: 1.75;
color: var(--fds-gray-600);
font-style: italic;
margin-bottom: 24px;
}
.fds-testimonials__author { display: flex; align-items: center; gap: 12px; }
.fds-testimonials__avatar {
width: 46px; height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 800;
flex-shrink: 0;
font-family: var(--fds-font-title);
}
.fds-testimonials__avatar--green { background: var(--fds-green-light); color: var(--fds-green-dark); }
.fds-testimonials__avatar--blue { background: var(--fds-blue-light); color: var(--fds-blue-dark); }
.fds-testimonials__avatar--orange { background: var(--fds-orange-light); color: var(--fds-orange-dark); }
.fds-testimonials__name {
font-weight: 700; font-size: .9rem;
color: var(--fds-dark);
font-family: var(--fds-font-title);
}
.fds-testimonials__location { font-size: .8rem; color: var(--fds-gray-400); margin-top: 2px; }
.fds-testimonials__nav {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 32px;
}
.fds-testimonials__btn {
width: 40px; height: 40px;
border-radius: 50%;
border: 1.5px solid var(--fds-gray-200);
background: var(--fds-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color var(--fds-transition), background var(--fds-transition), color var(--fds-transition);
color: var(--fds-dark);
}
.fds-testimonials__btn:hover {
border-color: var(--fds-green);
background: var(--fds-green-light);
color: var(--fds-green-dark);
}
.fds-testimonials__dots { display: flex; gap: 6px; align-items: center; }
.fds-testimonials__dot {
width: 8px; height: 8px;
border-radius: 4px;
background: var(--fds-gray-200);
transition: all .3s ease;
cursor: pointer;
}
.fds-testimonials__dot--active { width: 24px; background: var(--fds-green); }
/* ----------------------------------------------------------------
14. SECTION TARIF
---------------------------------------------------------------- */
.fds-tarif {
padding-block: var(--fds-section-py);
background: linear-gradient(135deg, var(--fds-blue-light) 0%, var(--fds-green-light) 100%);
}
.fds-tarif__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 24px;
align-items: start;
max-width: 900px;
margin-inline: auto;
}
.fds-tarif__card {
background: var(--fds-white);
border-radius: var(--fds-radius-xl);
padding: 40px;
box-shadow: var(--fds-shadow-lg);
border: 2px solid var(--fds-green);
position: relative;
}
.fds-tarif__badge {
position: absolute;
top: -14px;
left: 32px;
background: var(--fds-green);
color: var(--fds-white);
padding: 5px 16px;
border-radius: 50px;
font-size: .8rem;
font-weight: 700;
font-family: var(--fds-font-title);
letter-spacing: .03em;
}
.fds-tarif__icon {
width: 64px;
height: 64px;
background: var(--fds-green-light);
color: var(--fds-green);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.fds-tarif__card h3 {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 16px;
}
.fds-tarif__price {
margin-bottom: 24px;
}
.fds-tarif__price-amount {
font-size: 2.5rem;
font-weight: 800;
color: var(--fds-green);
font-family: var(--fds-font-title);
display: block;
line-height: 1;
}
.fds-tarif__price-detail {
font-size: .875rem;
color: var(--fds-gray-400);
display: block;
margin-top: 6px;
}
.fds-tarif__features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.fds-tarif__features li {
display: flex;
align-items: center;
gap: 10px;
font-size: .95rem;
color: var(--fds-dark);
}
.fds-tarif__features li svg { color: var(--fds-green); flex-shrink: 0; }
.fds-tarif__ideal {
background: var(--fds-bg);
border-radius: var(--fds-radius);
padding: 16px 20px;
margin-bottom: 28px;
}
.fds-tarif__ideal > span {
font-size: .8rem;
font-weight: 700;
color: var(--fds-gray-400);
text-transform: uppercase;
letter-spacing: .05em;
display: block;
margin-bottom: 8px;
}
.fds-tarif__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fds-tarif__tags span {
padding: 4px 12px;
border-radius: 50px;
background: var(--fds-white);
border: 1px solid var(--fds-green);
color: var(--fds-green);
font-size: .8rem;
font-weight: 600;
}
.fds-tarif__actions {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Addon trousse */
.fds-tarif__addon {
background: var(--fds-white);
border-radius: var(--fds-radius-xl);
padding: 32px 28px;
box-shadow: var(--fds-shadow);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.fds-tarif__addon-icon {
width: 56px;
height: 56px;
background: var(--fds-orange-light);
color: var(--fds-orange);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.fds-tarif__addon h3 {
font-size: 1.1rem;
font-weight: 700;
}
.fds-tarif__addon p {
font-size: .9rem;
color: var(--fds-gray-600);
line-height: 1.6;
}
.fds-tarif__addon-price {
font-size: 2rem;
font-weight: 800;
color: var(--fds-orange);
font-family: var(--fds-font-title);
}
/* ----------------------------------------------------------------
15. SECTION TROUSSE FAMILIALE
---------------------------------------------------------------- */
.fds-trousse {
padding-block: var(--fds-section-py);
background: var(--fds-orange-light);
}
.fds-trousse__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.fds-trousse__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.fds-trousse__features {
display: flex;
flex-direction: column;
gap: 12px;
}
.fds-trousse__features li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: .95rem;
color: var(--fds-dark);
line-height: 1.5;
}
.fds-trousse__features li svg { color: var(--fds-orange); flex-shrink: 0; margin-top: 2px; }
.fds-trousse__price-tag {
font-size: 2.5rem;
font-weight: 800;
color: var(--fds-orange);
font-family: var(--fds-font-title);
}
.fds-trousse__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.fds-trousse__actions .fds-btn--primary {
background: var(--fds-orange);
border-color: var(--fds-orange);
box-shadow: 0 4px 16px rgba(255,144,46,.30);
}
.fds-trousse__actions .fds-btn--primary:hover {
background: var(--fds-orange-dark);
border-color: var(--fds-orange-dark);
}
.fds-trousse__actions .fds-btn--outline {
border-color: var(--fds-orange);
color: var(--fds-orange);
}
.fds-trousse__actions .fds-btn--outline:hover {
background: var(--fds-white);
}
/* Galerie trousse */
.fds-trousse__gallery {
display: flex;
flex-direction: column;
gap: 16px;
}
.fds-trousse__img-main {
border-radius: var(--fds-radius-xl);
overflow: hidden;
box-shadow: var(--fds-shadow-lg);
aspect-ratio: 4/3;
background: var(--fds-gray-100);
}
.fds-trousse__img-main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.fds-trousse__img-main:hover img { transform: scale(1.03); }
.fds-trousse__img-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.fds-trousse__img-secondary img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--fds-radius);
box-shadow: var(--fds-shadow-sm);
}
/* ----------------------------------------------------------------
16. SECTION CARTE FORMATEURS
---------------------------------------------------------------- */
.fds-map-section {
padding-block: var(--fds-section-py);
background: var(--fds-bg);
}
.fds-map-search {
max-width: 520px;
margin-inline: auto;
margin-bottom: 40px;
}
.fds-map-search__wrap {
position: relative;
display: flex;
align-items: center;
}
.fds-map-search__wrap > svg {
position: absolute;
left: 16px;
color: var(--fds-gray-400);
pointer-events: none;
}
.fds-map-search__input {
width: 100%;
padding: 14px 48px 14px 48px;
border: 2px solid var(--fds-gray-200);
border-radius: 50px;
font-size: 1rem;
background: var(--fds-white);
transition: border-color var(--fds-transition), box-shadow var(--fds-transition);
color: var(--fds-dark);
}
.fds-map-search__input:focus {
outline: none;
border-color: var(--fds-blue);
box-shadow: 0 0 0 3px rgba(32,168,224,.15);
}
.fds-map-search__input::placeholder { color: var(--fds-gray-400); }
.fds-map-search__clear {
position: absolute;
right: 16px;
color: var(--fds-gray-400);
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
transition: background var(--fds-transition), color var(--fds-transition);
}
.fds-map-search__clear:hover {
background: var(--fds-gray-100);
color: var(--fds-dark);
}
/* Layout carte */
.fds-map-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 32px;
align-items: start;
}
/* Container SVG */
.fds-map-container {
background: var(--fds-white);
border-radius: var(--fds-radius-xl);
padding: 24px;
box-shadow: var(--fds-shadow);
position: relative;
}
.fds-map-legend {
display: flex;
gap: 24px;
margin-bottom: 16px;
}
.fds-map-legend__item {
display: flex;
align-items: center;
gap: 8px;
font-size: .85rem;
color: var(--fds-gray-600);
}
.fds-map-legend__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--fds-gray-200);
}
.fds-map-legend__dot--active { background: var(--fds-blue); }
.fds-france-svg {
width: 100%;
min-height: 420px;
}
/* SVG map styling (appliqué aux paths du vrai SVG) */
#fds-france-svg svg {
width: 100%;
height: auto;
}
#fds-france-svg .fds-dept {
fill: #FFD0A0;
stroke: var(--fds-white);
stroke-width: 1;
cursor: pointer;
transition: fill .2s ease;
}
#fds-france-svg .fds-dept--active {
fill: var(--fds-blue);
cursor: pointer;
}
#fds-france-svg .fds-dept--active:hover {
fill: var(--fds-blue-dark);
transform-origin: center;
}
#fds-france-svg .fds-dept--highlighted {
fill: var(--fds-orange);
}
/* Placeholder SVG */
.fds-map-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
}
.fds-map-placeholder-svg {
width: 100%;
max-width: 400px;
height: auto;
}
.fds-map-placeholder-text {
font-size: .85rem;
color: var(--fds-gray-600);
text-align: center;
background: var(--fds-blue-light);
padding: 12px 20px;
border-radius: var(--fds-radius);
line-height: 1.6;
}
.fds-map-placeholder-text code {
background: rgba(32,168,224,.15);
padding: 1px 6px;
border-radius: 4px;
font-family: monospace;
font-size: .8rem;
color: var(--fds-blue-dark);
}
/* Tooltip carte */
.fds-map-tooltip {
position: fixed;
background: var(--fds-white);
border-radius: var(--fds-radius);
padding: 12px 16px;
box-shadow: var(--fds-shadow-lg);
border: 1px solid var(--fds-gray-200);
z-index: 500;
max-width: 260px;
pointer-events: none;
}
.fds-map-tooltip__dept {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--fds-gray-400);
margin-bottom: 8px;
}
.fds-map-tooltip__formateur {
border-top: 1px solid var(--fds-gray-100);
padding-top: 8px;
margin-top: 8px;
}
.fds-map-tooltip__formateur:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.fds-map-tooltip__name {
font-weight: 700;
font-size: .9rem;
color: var(--fds-dark);
display: block;
}
.fds-map-tooltip__tel,
.fds-map-tooltip__email {
font-size: .8rem;
color: var(--fds-blue);
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
}
.fds-map-tooltip__page {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
padding: 6px 12px;
background: var(--fds-green);
color: var(--fds-white);
border-radius: 50px;
font-size: .78rem;
font-weight: 600;
text-decoration: none;
transition: background var(--fds-transition);
}
.fds-map-tooltip__page:hover { background: var(--fds-green-dark); }
/* ----------------------------------------------------------------
CAROUSEL PHOTOS
---------------------------------------------------------------- */
.fds-photos {
padding-block: var(--fds-section-py);
background: var(--fds-dark);
overflow: hidden;
}
.fds-photos .fds-eyebrow {
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.2);
}
.fds-photos .fds-section-title { color: var(--fds-white); }
.fds-photos .fds-highlight { color: var(--fds-green); }
.fds-photos .fds-section-desc { color: rgba(255,255,255,.65); }
.fds-photos__wrap {
position: relative;
}
.fds-photos__track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.fds-photos__track::-webkit-scrollbar { display: none; }
.fds-photos__slide {
flex: 0 0 calc(33.333% - 11px);
scroll-snap-align: start;
border-radius: var(--fds-radius-lg);
overflow: hidden;
position: relative;
aspect-ratio: 4/3;
background: var(--fds-dark-2);
}
.fds-photos__slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
display: block;
}
.fds-photos__slide:hover img { transform: scale(1.05); }
.fds-photos__caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,.7));
color: var(--fds-white);
font-size: .85rem;
font-weight: 600;
padding: 24px 16px 12px;
font-family: var(--fds-font-title);
}
.fds-photos__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.15);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(255,255,255,.25);
color: var(--fds-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--fds-transition);
z-index: 2;
}
.fds-photos__btn:hover { background: rgba(255,255,255,.28); }
.fds-photos__btn--prev { left: -20px; }
.fds-photos__btn--next { right: -20px; }
.fds-photos__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
.fds-photos__dot {
width: 8px; height: 8px;
border-radius: 4px;
background: rgba(255,255,255,.25);
border: none;
cursor: pointer;
transition: all .3s ease;
padding: 0;
}
.fds-photos__dot--active {
width: 24px;
background: var(--fds-green);
}
/* Liste formateurs */
.fds-formateurs-list {
background: var(--fds-white);
border-radius: var(--fds-radius-xl);
padding: 24px 20px;
box-shadow: var(--fds-shadow);
max-height: 560px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--fds-gray-200) transparent;
}
.fds-formateurs-list::-webkit-scrollbar { width: 4px; }
.fds-formateurs-list::-webkit-scrollbar-track { background: transparent; }
.fds-formateurs-list::-webkit-scrollbar-thumb { background: var(--fds-gray-200); border-radius: 2px; }
.fds-formateurs-list__title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 16px;
color: var(--fds-dark);
}
.fds-formateurs-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Carte formateur individuelle (générée par JS) */
.fds-formateur-card {
border: 1.5px solid var(--fds-gray-100);
border-radius: var(--fds-radius);
padding: 14px 16px;
transition: border-color var(--fds-transition), box-shadow var(--fds-transition);
cursor: pointer;
}
.fds-formateur-card:hover,
.fds-formateur-card.fds-formateur-card--active {
border-color: var(--fds-blue);
box-shadow: 0 2px 12px rgba(32,168,224,.12);
}
.fds-formateur-card__dept {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--fds-blue);
margin-bottom: 4px;
}
.fds-formateur-card__name {
font-weight: 700;
font-size: .9rem;
color: var(--fds-dark);
margin-bottom: 6px;
}
.fds-formateur-card__contact {
display: flex;
flex-direction: column;
gap: 3px;
}
.fds-formateur-card__contact a {
font-size: .8rem;
color: var(--fds-blue);
display: flex;
align-items: center;
gap: 6px;
transition: color var(--fds-transition);
}
.fds-formateur-card__contact a:hover { color: var(--fds-blue-dark); }
.fds-formateur-card__contact a svg { flex-shrink: 0; }
/* ----------------------------------------------------------------
17. SECTION FONDATEUR
---------------------------------------------------------------- */
.fds-founder {
padding-block: var(--fds-section-py);
background: var(--fds-white);
}
.fds-founder__inner {
display: grid;
grid-template-columns: 400px 1fr;
gap: 64px;
align-items: center;
}
.fds-founder__photo {
position: relative;
}
.fds-founder__img-wrap {
border-radius: var(--fds-radius-xl);
overflow: hidden;
box-shadow: var(--fds-shadow-lg);
aspect-ratio: 3/4;
background: var(--fds-gray-100);
}
.fds-founder__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fds-founder__badge {
position: absolute;
bottom: -16px;
right: -16px;
background: var(--fds-green);
color: var(--fds-white);
border-radius: var(--fds-radius);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
font-size: .8rem;
font-weight: 600;
font-family: var(--fds-font-title);
box-shadow: var(--fds-shadow);
line-height: 1.4;
}
.fds-founder__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.fds-founder__quote {
background: var(--fds-bg);
border-left: 4px solid var(--fds-green);
border-radius: 0 var(--fds-radius) var(--fds-radius) 0;
padding: 24px 28px;
font-size: 1.05rem;
color: var(--fds-gray-600);
line-height: 1.75;
font-style: italic;
}
.fds-founder__text {
font-size: 1rem;
color: var(--fds-gray-600);
line-height: 1.7;
}
.fds-founder__signature {
display: flex;
flex-direction: column;
gap: 4px;
}
.fds-founder__signature strong {
font-size: 1.1rem;
font-weight: 700;
color: var(--fds-dark);
font-family: var(--fds-font-title);
}
.fds-founder__signature span {
font-size: .875rem;
color: var(--fds-gray-400);
}
/* ----------------------------------------------------------------
18. SECTION PODCAST
---------------------------------------------------------------- */
.fds-podcast {
padding-block: var(--fds-section-py);
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: var(--fds-white);
}
.fds-podcast .fds-eyebrow { color: var(--fds-green); }
.fds-podcast .fds-section-title { color: var(--fds-white); }
.fds-podcast .fds-highlight { color: var(--fds-blue); }
.fds-podcast .fds-highlight::after { background: var(--fds-blue); }
.fds-podcast__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 64px;
align-items: center;
}
.fds-podcast__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.fds-podcast__content p {
font-size: 1.05rem;
color: rgba(255,255,255,.7);
line-height: 1.7;
max-width: 480px;
}
.fds-podcast__platforms {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.fds-podcast__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 50px;
font-weight: 600;
font-size: .9rem;
font-family: var(--fds-font-title);
transition: transform var(--fds-transition), box-shadow var(--fds-transition);
text-decoration: none;
}
.fds-podcast__btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.fds-podcast__btn--spotify {
background: #1DB954;
color: var(--fds-white);
}
.fds-podcast__btn--apple {
background: #fc3c44;
color: var(--fds-white);
}
.fds-podcast__btn--deezer {
background: #A238FF;
color: var(--fds-white);
}
/* Artwork podcast */
.fds-podcast__artwork {
position: relative;
width: 240px;
}
.fds-podcast__artwork img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: var(--fds-radius-xl);
box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
/* Ondes animées */
.fds-podcast__wave {
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
gap: 3px;
height: 32px;
}
.fds-podcast__wave span {
display: block;
width: 4px;
border-radius: 2px;
background: var(--fds-green);
animation: fds-wave 1.2s ease-in-out infinite;
}
.fds-podcast__wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.fds-podcast__wave span:nth-child(2) { height: 20px; animation-delay: .1s; }
.fds-podcast__wave span:nth-child(3) { height: 28px; animation-delay: .2s; }
.fds-podcast__wave span:nth-child(4) { height: 24px; animation-delay: .3s; }
.fds-podcast__wave span:nth-child(5) { height: 32px; animation-delay: .4s; }
.fds-podcast__wave span:nth-child(6) { height: 24px; animation-delay: .5s; }
.fds-podcast__wave span:nth-child(7) { height: 20px; animation-delay: .6s; }
.fds-podcast__wave span:nth-child(8) { height: 10px; animation-delay: .7s; }
@keyframes fds-wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(.4); }
}
/* ----------------------------------------------------------------
19. SECTION FRANCHISE
---------------------------------------------------------------- */
.fds-franchise {
padding-block: var(--fds-section-py);
background: var(--fds-bg);
}
.fds-franchise__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.fds-franchise__content {
display: flex;
flex-direction: column;
gap: 24px;
}
.fds-franchise__content p {
font-size: 1.05rem;
color: var(--fds-gray-600);
line-height: 1.7;
}
.fds-franchise__conditions h3 {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--fds-gray-400);
margin-bottom: 12px;
}
.fds-franchise__conditions ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.fds-franchise__conditions li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .95rem;
color: var(--fds-dark);
line-height: 1.5;
}
.fds-franchise__conditions li svg {
color: var(--fds-green);
flex-shrink: 0;
margin-top: 2px;
}
.fds-franchise__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Benefits */
.fds-franchise__benefits {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.fds-franchise__benefit {
display: flex;
align-items: flex-start;
gap: 16px;
background: var(--fds-white);
border-radius: var(--fds-radius-lg);
padding: 20px;
box-shadow: var(--fds-shadow-sm);
transition: transform var(--fds-transition), box-shadow var(--fds-transition);
}
.fds-franchise__benefit:hover {
transform: translateY(-2px);
box-shadow: var(--fds-shadow);
}
.fds-franchise__benefit-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--fds-green-light);
color: var(--fds-green);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fds-franchise__benefit div {
display: flex;
flex-direction: column;
gap: 4px;
}
.fds-franchise__benefit strong {
font-size: .95rem;
font-weight: 700;
color: var(--fds-dark);
}
.fds-franchise__benefit span {
font-size: .875rem;
color: var(--fds-gray-600);
line-height: 1.5;
}
/* ----------------------------------------------------------------
20. SECTION PROFESSIONNELS
---------------------------------------------------------------- */
.fds-pro {
padding-block: var(--fds-section-py);
background: var(--fds-white);
}
.fds-pro__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 40px;
}
.fds-pro__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px 16px;
background: var(--fds-bg);
border-radius: var(--fds-radius-lg);
border: 1.5px solid var(--fds-gray-100);
text-align: center;
transition: border-color var(--fds-transition), box-shadow var(--fds-transition), transform var(--fds-transition);
cursor: default;
}
.fds-pro__item:hover {
border-color: var(--fds-blue);
box-shadow: var(--fds-shadow-card);
transform: translateY(-3px);
}
.fds-pro__item svg { color: var(--fds-blue); }
.fds-pro__item span {
font-size: .9rem;
font-weight: 600;
color: var(--fds-dark);
line-height: 1.4;
}
.fds-pro__cta {
text-align: center;
}
/* ----------------------------------------------------------------
21. SECTION PARTENAIRES
---------------------------------------------------------------- */
.fds-partners {
padding-block: var(--fds-section-py);
background: var(--fds-bg);
}
.fds-partners__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
align-items: center;
}
.fds-partners__item {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 16px;
background: var(--fds-white);
border-radius: var(--fds-radius);
border: 1px solid var(--fds-gray-100);
filter: grayscale(1);
opacity: .6;
transition: filter var(--fds-transition), opacity var(--fds-transition), transform var(--fds-transition), box-shadow var(--fds-transition);
min-height: 80px;
}
.fds-partners__item:hover {
filter: grayscale(0);
opacity: 1;
transform: translateY(-3px);
box-shadow: var(--fds-shadow);
}
.fds-partners__item img {
max-height: 48px;
width: auto;
object-fit: contain;
}
/* ----------------------------------------------------------------
22. FOOTER
---------------------------------------------------------------- */
.fds-footer {
background: var(--fds-dark);
color: rgba(255,255,255,.8);
}
.fds-footer__top {
padding-block: 64px 40px;
}
.fds-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 48px;
align-items: start;
}
.fds-footer__brand {
display: flex;
flex-direction: column;
gap: 16px;
}
.fds-footer__logo-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.fds-footer__logo-link img {
height: 40px;
width: auto;
/* display: none; si pas d'image logo */
}
.fds-footer__logo-text {
font-family: var(--fds-font-title);
font-weight: 800;
font-size: 1rem;
color: var(--fds-white);
}
.fds-footer__logo-text span:first-child { color: var(--fds-green); }
.fds-footer__logo-text span:last-child { color: var(--fds-blue); }
.fds-footer__tagline {
font-size: .875rem;
font-weight: 600;
color: rgba(255,255,255,.5);
text-transform: uppercase;
letter-spacing: .05em;
}
.fds-footer__mission {
font-size: .875rem;
color: rgba(255,255,255,.6);
line-height: 1.65;
max-width: 300px;
}
.fds-footer__social {
display: flex;
gap: 10px;
}
.fds-footer__social-link {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255,255,255,.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.6);
transition: background var(--fds-transition), color var(--fds-transition), transform var(--fds-transition);
}
.fds-footer__social-link:hover {
background: var(--fds-green);
color: var(--fds-white);
transform: translateY(-2px);
}
.fds-footer__nav-title {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--fds-white);
margin-bottom: 16px;
}
.fds-footer__nav ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.fds-footer__nav a {
font-size: .875rem;
color: rgba(255,255,255,.6);
transition: color var(--fds-transition), padding-left var(--fds-transition);
}
.fds-footer__nav a:hover {
color: var(--fds-white);
padding-left: 4px;
}
.fds-footer__contact-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.fds-footer__contact-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: .875rem;
color: rgba(255,255,255,.6);
}
.fds-footer__contact-list li svg { color: var(--fds-green); flex-shrink: 0; }
.fds-footer__contact-list a {
color: rgba(255,255,255,.6);
}
.fds-footer__contact-list a:hover { color: var(--fds-white); }
.fds-footer__newsletter h4 {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.5);
margin-bottom: 10px;
}
.fds-footer__form {
display: flex;
gap: 0;
}
.fds-footer__form input {
flex: 1;
padding: 10px 14px;
border: 1.5px solid rgba(255,255,255,.15);
border-right: none;
border-radius: 8px 0 0 8px;
background: rgba(255,255,255,.06);
color: var(--fds-white);
font-size: .875rem;
transition: border-color var(--fds-transition);
}
.fds-footer__form input::placeholder { color: rgba(255,255,255,.3); }
.fds-footer__form input:focus { outline: none; border-color: var(--fds-green); }
.fds-footer__form .fds-btn--primary {
border-radius: 0 8px 8px 0;
padding: 10px 18px;
font-size: .875rem;
}
/* Footer bottom */
.fds-footer__bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-block: 20px;
}
.fds-footer__bottom .fds-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.fds-footer__bottom p {
font-size: .8rem;
color: rgba(255,255,255,.4);
}
.fds-footer__bottom nav {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.fds-footer__bottom a {
font-size: .8rem;
color: rgba(255,255,255,.4);
transition: color var(--fds-transition);
}
.fds-footer__bottom a:hover { color: var(--fds-white); }
/* ================================================================
23. RESPONSIVE
================================================================ */
/* Tablette large — ≤ 1100px */
@media (max-width: 1100px) {
.fds-nav { display: none; }
.fds-header__cta { display: none; }
.fds-burger { display: flex; }
.fds-hero__inner {
grid-template-columns: 1fr;
text-align: center;
padding-block: 60px;
min-height: auto;
}
.fds-hero__content { align-items: center; }
.fds-hero__stats { flex-direction: row; }
.fds-hero__subtitle { margin-inline: auto; }
.fds-hero__visual { display: none; }
.fds-about__split { grid-template-columns: 1fr; gap: 40px; }
.fds-about__right { display: none; }
.fds-photos__slide { flex: 0 0 calc(50% - 8px); }
.fds-photos__btn--prev { left: -8px; }
.fds-photos__btn--next { right: -8px; }
.fds-learn__modules { grid-template-columns: 1fr; }
.fds-learn__module:nth-child(even) { border-right: 1.5px solid rgba(0,0,0,.07); }
.fds-learn__mascot-deco { display: none; }
.fds-tarif__layout { grid-template-columns: 1fr; max-width: 560px; }
.fds-trousse__inner { grid-template-columns: 1fr; gap: 40px; }
.fds-map-layout { grid-template-columns: 1fr; }
.fds-formateurs-list { max-height: 400px; }
.fds-founder__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.fds-podcast__inner { grid-template-columns: 1fr; gap: 40px; }
.fds-podcast__visual { display: flex; justify-content: center; }
.fds-franchise__inner { grid-template-columns: 1fr; }
.fds-pro__grid { grid-template-columns: repeat(3, 1fr); }
.fds-partners__grid { grid-template-columns: repeat(3, 1fr); }
.fds-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* Tablette — ≤ 768px */
@media (max-width: 768px) {
:root { --fds-section-py: 56px; }
.fds-hero__slider { min-height: auto; }
.fds-hero__inner { padding-block: 48px; }
.fds-hero__stats { flex-direction: column; align-items: flex-start; padding: 12px 16px; gap: 12px; }
.fds-hero__stat-sep { width: 100%; height: 1px; }
.fds-photos__slide { flex: 0 0 calc(100% - 0px); }
.fds-about__bottom-stats { flex-direction: column; gap: 16px; }
.fds-about__bottom-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); padding: 0 0 16px 0; }
.fds-about__bottom-stat:last-child { border-bottom: none; padding-bottom: 0; }
.fds-learn__modules { grid-template-columns: 1fr; }
.fds-learn__module { border-right: none !important; }
.fds-testimonials__card { flex: 0 0 290px; }
.fds-trousse__img-secondary { grid-template-columns: 1fr 1fr; }
.fds-founder__inner { grid-template-columns: 1fr; gap: 32px; }
.fds-founder__photo { max-width: 320px; margin-inline: auto; }
.fds-pro__grid { grid-template-columns: repeat(2, 1fr); }
.fds-partners__grid { grid-template-columns: repeat(2, 1fr); }
.fds-footer__grid { grid-template-columns: 1fr; }
.fds-footer__bottom .fds-container { flex-direction: column; align-items: center; text-align: center; }
.fds-footer__bottom nav { justify-content: center; }
}
/* Mobile — ≤ 480px */
@media (max-width: 480px) {
:root { --fds-section-py: 48px; --fds-container-px: 16px; }
.fds-hero__title { font-size: 1.75rem; }
.fds-hero__actions { flex-direction: column; }
.fds-hero__actions .fds-btn { width: 100%; }
.fds-testimonials__card { flex: 0 0 260px; padding: 24px 20px; }
.fds-pro__grid { grid-template-columns: 1fr 1fr; }
.fds-partners__grid { grid-template-columns: repeat(2, 1fr); }
.fds-podcast__platforms { flex-direction: column; }
.fds-podcast__btn { justify-content: center; }
.fds-franchise__actions { flex-direction: column; }
.fds-franchise__actions .fds-btn { width: 100%; }
.fds-learn__cta { flex-direction: column; align-items: center; }
.fds-tarif__card { padding: 28px 20px; }
.fds-media__track { gap: 16px 32px; }
}
/* Réduction mouvements (accessibilité) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.fds-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/**
* ================================================================
* FAMILLE DE SAUVETEURS — fds-scripts.js
* Version 1.0 — JavaScript vanilla, aucune dépendance externe
*
* SOMMAIRE :
* 1. Données formateurs — MODIFIER ICI pour mettre à jour le réseau
* 2. Utilitaires
* 3. Header sticky
* 4. Navigation mobile (burger)
* 5. Slider Hero
* 6. Animations reveal au scroll
* 7. Carte interactive des formateurs
* 8. Génération liste formateurs
* 9. Recherche département
* 10. Initialisation
* 11. Année footer
* ================================================================
*/
/* ----------------------------------------------------------------
1. DONNÉES FORMATEURS
----------------------------------------------------------------
COMMENT MODIFIER :
- Ajouter un formateur : copier un objet et l'ajouter au tableau
- Modifier : changer les valeurs directement
- departements : tableau de codes de départements (string)
Ex: ["34"] ou ["64", "65"] si couvre plusieurs départements
- Chaque élément de "departements" doit correspondre à un
attribut data-code ou id du path SVG de la carte France
---------------------------------------------------------------- */
const FDS_FORMATEURS = [
{
departements: ["34"],
zone: "Hérault (34)",
nom: "Kevin ROCAMORA",
telephone: "06.58.05.13.11",
email: "formation@familledesauveteurs.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-herault-34/"
},
{
departements: ["2A"],
zone: "Corse du Sud (2A)",
nom: "Mathilde MINET",
telephone: "07.88.73.90.06",
email: "familledesauveteurs2a@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-corse-2a/"
},
{
departements: ["64", "40"],
zone: "Pyrénées Atlantiques Est (64) / Landes (40)",
nom: "Sacha PRIMIEROLLO",
telephone: "06.41.28.79.56",
email: "familledesauveteurs40@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-les-landes-40-et-pyrenees-atlantiques-64/"
},
{
departements: ["18"],
zone: "Cher (18)",
nom: "Jérôme JANDA",
telephone: "06.10.63.15.78",
email: "familledesauveteurs18@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-cher-18/"
},
{
departements: ["69"],
zone: "Rhône (69)",
nom: "Yanis BADAOUI",
telephone: "06.85.25.77.44",
email: "familledesauveteurs69@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-rhone-69/"
},
{
departements: ["66"],
zone: "Pyrénées-Orientales (66)",
nom: "Audrey ROCA",
telephone: "06.51.00.51.57",
email: "familledesauveteurs66@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-pyrenees-orientales-66/"
},
{
departements: ["91"],
zone: "Essonne (91)",
nom: "Kevin MOLLICONE",
telephone: "06.22.98.55.39",
email: "familledesauveteurs91@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-essonne-91/"
},
{
departements: ["78"],
zone: "Yvelines (78)",
nom: "Caroline LETESSIER",
telephone: "06.22.43.03.03",
email: "familledesauveteurs78@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-yvelines-78/"
},
{
departements: ["54"],
zone: "Meurthe-et-Moselle (54)",
nom: "Christelle FRIZZERO",
telephone: "06.06.43.21.78",
email: "familledesauveteurs54@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-meurthe-et-moselle-54/"
},
{
departements: ["73"],
zone: "Savoie (73)",
nom: "Lionel THILL",
telephone: "06.50.05.34.89",
email: "familledesauveteurs73@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-savoie-73/"
},
{
departements: ["33"],
zone: "Gironde (33)",
nom: "Laetitia MIAILHE SEIGNEZ",
telephone: "06.33.00.68.34",
email: "familledesauveteurs33@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-gironde-33/"
},
{
departements: ["31"],
zone: "Haute Garonne (31)",
nom: "Floriane ABADIE",
telephone: "06.79.37.09.80",
email: "familledesauveteurs31@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-haute-garonne-31/"
},
{
departements: ["21"],
zone: "Côte d'Or (21)",
nom: "Florie SKOWRONEK",
telephone: "06.47.51.19.83",
email: "familledesauveteurs21@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-cote-dor-21/"
},
{
departements: ["63"],
zone: "Puy-de-Dôme (63)",
nom: "William ROBERT",
telephone: "06.74.14.51.31",
email: "familledesauveteurs63@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-puy-de-dome-63/"
},
{
departements: ["56"],
zone: "Morbihan (56)",
nom: "David MALGOGNE",
telephone: "06.58.63.62.84",
email: "familledesauveteurs56@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-morbihan-56/"
},
{
departements: ["85"],
zone: "Vendée (85)",
nom: "Hélène VUE",
telephone: "07.68.05.93.48",
email: "familledesauveteurs85@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-vendee-85/"
},
{
departements: ["43"],
zone: "Haute-Loire (43)",
nom: "Coralie RIFFARD",
telephone: "06.41.93.44.12",
email: "familledesauveteurs43@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-haute-loire-43/"
},
{
departements: ["14"],
zone: "Calvados (14)",
nom: "Claire COHARD",
telephone: "06.49.02.68.36",
email: "familledesauveteurs14@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-calvados-14/"
},
{
departements: ["77"],
zone: "Seine-et-Marne (77)",
nom: "Christopher ROCHÉ",
telephone: "07.67.59.89.29",
email: "familledesauveteurs77@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-seine-et-marne-77/"
},
{
departements: ["44"],
zone: "Loire-Atlantique (44)",
nom: "Virginie TRAINEAU",
telephone: "06.63.73.48.39",
email: "familledesauveteurs44@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-loire-atlantique-44/"
},
{
departements: ["92"],
zone: "Hauts-de-Seine (92)",
nom: "Niora MOREIRA",
telephone: "06.10.67.82.18",
email: "familledesauveteurs92@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-hauts-de-seine-92/"
},
{
departements: ["38"],
zone: "Isère (38)",
nom: "Kelly CHAMPINOT",
telephone: "06.42.32.88.94",
email: "familledesauveteurs38@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-isere-38/"
},
{
departements: ["2B"],
zone: "Haute-Corse (2B)",
nom: "Thomas FONTENAY",
telephone: "06.36.56.74.60",
email: "familledesauveteurs2b@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-haute-corse-2b/"
},
{
departements: ["35"],
zone: "Ille-et-Vilaine (35)",
nom: "Edouard GUERIN",
telephone: "06.78.07.15.85",
email: "familledesauveteurs35@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-ile-et-vilaine-35/"
},
{
departements: ["11"],
zone: "Aude (11)",
nom: "Coralie CANAGUIER",
telephone: "06.88.74.31.57",
email: "familledesauveteurs11@gmail.com",
url: "https://familledesauveteurs.com/famille-de-sauveteurs-aude-11/"
},
{
departements: ["29"],
zone: "Finistère (29)",
nom: "Coralie PERRAULT",
telephone: "07.86.71.30.04",
email: "familledesauveteurs29@gmail.com"
},
{
departements: ["80"],
zone: "Somme (80)",
nom: "Florine LAURIN",
telephone: "06.79.64.51.49",
email: "familledesauveteurs80@gmail.com"
},
{
departements: ["59"],
zone: "Nord (59)",
nom: "Aline DURIEUX",
telephone: "06.46.52.06.01",
email: "familledesauveteurs59@gmail.com"
},
{
departements: ["37"],
zone: "Indre et Loire (37)",
nom: "Cécile TISCORNIA",
telephone: "07.66.78.07.57",
email: "familledesauveteurs37@gmail.com"
},
{
departements: ["64", "65"],
zone: "Pyrénées Atlantiques Ouest (64) / Hautes-Pyrénées (65)",
nom: "Camille LACQUE",
telephone: "07.85.12.12.55",
email: "familledesauveteurs65@gmail.com"
},
{
departements: ["13"],
zone: "Bouches-du-Rhône (13)",
nom: "Estelle SUDUL",
telephone: "06.88.12.80.94",
email: "familledesauveteurs13@gmail.com"
},
{
departements: ["30"],
zone: "Gard (30)",
nom: "Jeannie ANDRÉ",
telephone: "06.35.10.86.54",
email: "familledesauveteurs30@gmail.com"
}
];
/* ----------------------------------------------------------------
2. UTILITAIRES
---------------------------------------------------------------- */
/**
* Normalise une chaîne pour la recherche :
* supprime accents, met en minuscules
*/
function fdsNormalize(str) {
return String(str)
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase()
.trim();
}
/**
* Échappe le HTML pour éviter les injections XSS
*/
function fdsEscape(str) {
const d = document.createElement('div');
d.appendChild(document.createTextNode(String(str)));
return d.innerHTML;
}
/**
* Icônes SVG inline pour les cartes formateurs
*/
const FDS_ICONS = {
phone: ' ',
email: ' '
};
/* ----------------------------------------------------------------
3. HEADER STICKY
---------------------------------------------------------------- */
function fdsInitHeader() {
const header = document.getElementById('fds-header');
if (!header) return;
let lastScroll = 0;
window.addEventListener('scroll', function () {
const currentScroll = window.scrollY;
if (currentScroll > 20) {
header.classList.add('fds-header--scrolled');
} else {
header.classList.remove('fds-header--scrolled');
}
lastScroll = currentScroll;
}, { passive: true });
// Marquer le lien actif selon la section visible
const sections = document.querySelectorAll('section[id], footer[id]');
const navLinks = document.querySelectorAll('.fds-nav__link');
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(function (link) {
const href = link.getAttribute('href');
if (href === '#' + id) {
link.classList.add('fds-active');
} else {
link.classList.remove('fds-active');
}
});
}
});
}, { threshold: 0.3 });
sections.forEach(function (section) {
observer.observe(section);
});
}
/* ----------------------------------------------------------------
4. NAVIGATION MOBILE
---------------------------------------------------------------- */
function fdsInitMobileNav() {
const burger = document.getElementById('fds-burger');
const menu = document.getElementById('fds-mobile-menu');
if (!burger || !menu) return;
function toggleMenu(open) {
const isOpen = open !== undefined ? open : !burger.classList.contains('fds-open');
burger.classList.toggle('fds-open', isOpen);
menu.classList.toggle('fds-open', isOpen);
burger.setAttribute('aria-expanded', String(isOpen));
menu.setAttribute('aria-hidden', String(!isOpen));
document.body.style.overflow = isOpen ? 'hidden' : '';
}
burger.addEventListener('click', function () {
toggleMenu();
});
// Fermer au clic sur un lien
menu.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function () {
toggleMenu(false);
});
});
// Fermer au clic extérieur
document.addEventListener('click', function (e) {
if (menu.classList.contains('fds-open') &&
!menu.contains(e.target) &&
!burger.contains(e.target)) {
toggleMenu(false);
}
});
// Fermer avec Escape
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && menu.classList.contains('fds-open')) {
toggleMenu(false);
burger.focus();
}
});
}
/* ----------------------------------------------------------------
5. SLIDER HERO
---------------------------------------------------------------- */
function fdsInitSlider() {
const slides = document.querySelectorAll('.fds-hero__slide');
const dots = document.querySelectorAll('.fds-slider-dot');
const prevBtn = document.getElementById('fds-slider-prev');
const nextBtn = document.getElementById('fds-slider-next');
if (!slides.length) return;
let current = 0;
let timer = null;
const AUTOPLAY_DELAY = 5000;
function goTo(index) {
// Désactiver le slide actuel
slides[current].classList.remove('fds-hero__slide--active');
slides[current].setAttribute('aria-hidden', 'true');
dots[current].classList.remove('fds-slider-dot--active');
dots[current].setAttribute('aria-selected', 'false');
// Activer le nouveau
current = (index + slides.length) % slides.length;
slides[current].classList.add('fds-hero__slide--active');
slides[current].removeAttribute('aria-hidden');
dots[current].classList.add('fds-slider-dot--active');
dots[current].setAttribute('aria-selected', 'true');
}
function next() { goTo(current + 1); }
function prev() { goTo(current - 1); }
function startAutoplay() {
stopAutoplay();
timer = setInterval(next, AUTOPLAY_DELAY);
}
function stopAutoplay() {
if (timer) { clearInterval(timer); timer = null; }
}
// Boutons
if (nextBtn) {
nextBtn.addEventListener('click', function () {
stopAutoplay();
next();
startAutoplay();
});
}
if (prevBtn) {
prevBtn.addEventListener('click', function () {
stopAutoplay();
prev();
startAutoplay();
});
}
// Dots
dots.forEach(function (dot, i) {
dot.addEventListener('click', function () {
stopAutoplay();
goTo(i);
startAutoplay();
});
});
// Navigation clavier
document.addEventListener('keydown', function (e) {
const heroSlider = document.querySelector('.fds-hero__slider');
if (!heroSlider) return;
const rect = heroSlider.getBoundingClientRect();
if (rect.top > window.innerHeight || rect.bottom < 0) return;
if (e.key === 'ArrowLeft') { stopAutoplay(); prev(); startAutoplay(); }
if (e.key === 'ArrowRight') { stopAutoplay(); next(); startAutoplay(); }
});
// Pause sur hover
const slider = document.querySelector('.fds-hero__slider');
if (slider) {
slider.addEventListener('mouseenter', stopAutoplay);
slider.addEventListener('mouseleave', startAutoplay);
}
// Touch / swipe
let touchStartX = 0;
if (slider) {
slider.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].clientX;
}, { passive: true });
slider.addEventListener('touchend', function (e) {
const diff = touchStartX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) {
stopAutoplay();
if (diff > 0) { next(); } else { prev(); }
startAutoplay();
}
}, { passive: true });
}
// Démarrer l'autoplay
startAutoplay();
}
/* ----------------------------------------------------------------
6. ANIMATIONS REVEAL AU SCROLL
---------------------------------------------------------------- */
function fdsInitReveal() {
const elements = document.querySelectorAll('.fds-reveal');
if (!elements.length) return;
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('fds-visible');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -40px 0px'
});
elements.forEach(function (el) {
observer.observe(el);
});
}
/* ----------------------------------------------------------------
7. CARTE INTERACTIVE DES FORMATEURS
----------------------------------------------------------------
FONCTIONNEMENT AVEC LE VRAI SVG :
Une fois le SVG de France intégré dans #fds-france-svg :
1. Chaque département doit avoir :
- La classe "fds-dept"
- Un attribut data-code="XX" (XX = numéro du département)
Exemple :
2. Si votre SVG utilise des IDs différents (ex: id="dept-34"),
modifiez la fonction mapDeptId() ci-dessous pour adapter
le mapping.
3. Le script coloriera automatiquement les départements
qui ont un formateur avec la classe "fds-dept--active".
RESSOURCES SVG France :
- https://simplemaps.com/resources/svg-fr
- https://github.com/gregoiredavid/france-geojson
- https://www.amcharts.com/svg-maps/?map=france (légal si usage non commercial)
---------------------------------------------------------------- */
/**
* Adapter ici si votre SVG utilise un format d'ID différent.
* Par défaut on cherche data-code="XX"
* Si votre SVG a des IDs comme "dept-34", adapter ainsi :
* function mapDeptId(code) { return 'dept-' + code.toLowerCase(); }
*/
function mapDeptId(code) {
// Format par défaut : data-code="34"
return code;
}
/* Index rapide : code département → formateur(s) */
const FDS_DEPT_INDEX = {};
FDS_FORMATEURS.forEach(function (formateur) {
formateur.departements.forEach(function (code) {
const key = code.toUpperCase();
if (!FDS_DEPT_INDEX[key]) {
FDS_DEPT_INDEX[key] = [];
}
FDS_DEPT_INDEX[key].push(formateur);
});
});
function fdsInitMap() {
const svgContainer = document.getElementById('fds-france-svg');
const tooltip = document.getElementById('fds-map-tooltip');
if (!svgContainer || !tooltip) return;
// Colorier les départements actifs
function coloriserDepts() {
// Sélectionne tous les paths dont l'id commence par "FR"
const allDepts = svgContainer.querySelectorAll('path[id^="FR"]');
allDepts.forEach(function (path) {
// Extrait le code département : "FR34" → "34", "FR2A" → "2A"
const code = path.id.replace('FR', '').toUpperCase();
// Ajoute la classe CSS et l'attribut data-code (requis par attachEvents)
path.classList.add('fds-dept');
path.setAttribute('data-code', code);
// Colorie en bleu si un formateur existe pour ce département
if (FDS_DEPT_INDEX[code]) {
path.classList.add('fds-dept--active');
}
});
}
// Afficher le tooltip
function showTooltip(e, formateurs, deptName) {
let html = '' + fdsEscape(deptName) + '
';
formateurs.forEach(function (f) {
html += '';
});
tooltip.innerHTML = html;
tooltip.style.display = 'block';
positionTooltip(e);
}
function hideTooltip() {
tooltip.style.display = 'none';
}
function positionTooltip(e) {
const margin = 12;
const tw = tooltip.offsetWidth;
const th = tooltip.offsetHeight;
const vw = window.innerWidth;
const vh = window.innerHeight;
let x = e.clientX + margin;
let y = e.clientY + margin;
if (x + tw > vw - margin) { x = e.clientX - tw - margin; }
if (y + th > vh - margin) { y = e.clientY - th - margin; }
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
}
// Attacher les événements aux paths SVG
function attachEvents() {
const depts = svgContainer.querySelectorAll('.fds-dept--active');
depts.forEach(function (path) {
const code = (path.getAttribute('data-code') || '').toUpperCase();
const formateurs = FDS_DEPT_INDEX[code];
if (!formateurs) return;
const deptName = 'Département ' + code;
// Desktop : hover
path.addEventListener('mouseenter', function (e) {
showTooltip(e, formateurs, deptName);
highlightCard(code);
});
path.addEventListener('mousemove', function (e) {
positionTooltip(e);
});
path.addEventListener('mouseleave', function () {
hideTooltip();
});
// Clic : ouvre la page du formateur dans un nouvel onglet
path.addEventListener('click', function (e) {
e.stopPropagation();
var pageUrl = null;
for (var i = 0; i < formateurs.length; i++) {
if (formateurs[i].url) { pageUrl = formateurs[i].url; break; }
}
if (pageUrl) {
window.open(pageUrl, '_blank', 'noopener,noreferrer');
} else {
// Formateur sans page : affiche le tooltip de contact
if (tooltip.style.display === 'block') {
hideTooltip();
} else {
showTooltip(e, formateurs, deptName);
highlightCard(code);
}
}
});
// Accessibilité clavier
path.setAttribute('tabindex', '0');
path.setAttribute('role', 'button');
var firstUrl = formateurs.find(function(f){ return f.url; });
path.setAttribute('aria-label', deptName + ' — ' + formateurs.map(function(f){ return f.nom; }).join(', ') + (firstUrl ? ' — Ouvrir la page formateur' : ''));
path.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
path.click();
}
});
});
// Fermer tooltip au clic extérieur
document.addEventListener('click', function () {
hideTooltip();
});
}
coloriserDepts();
attachEvents();
// Observer le SVG si chargé dynamiquement (ex: fetch)
const mutationObs = new MutationObserver(function () {
coloriserDepts();
attachEvents();
});
mutationObs.observe(svgContainer, { childList: true, subtree: true });
}
/* ----------------------------------------------------------------
8. GÉNÉRATION LISTE FORMATEURS
---------------------------------------------------------------- */
function fdsHighlightCard(code) {
const cards = document.querySelectorAll('.fds-formateur-card');
cards.forEach(function (card) {
card.classList.remove('fds-formateur-card--active');
});
const target = document.querySelector('[data-dept-code="' + code + '"]');
if (target) {
target.classList.add('fds-formateur-card--active');
target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
// Rendre highlightCard accessible globalement pour la carte SVG
function highlightCard(code) {
fdsHighlightCard(code);
}
function fdsRenderFormateurs(list) {
const grid = document.getElementById('fds-formateurs-grid');
if (!grid) return;
if (!list.length) {
grid.innerHTML = 'Aucun formateur trouvé pour cette recherche.
';
return;
}
grid.innerHTML = list.map(function (f) {
const mainDept = f.departements[0];
return '';
}).join('');
// Clic sur une carte → highlight sur la carte SVG
grid.querySelectorAll('.fds-formateur-card').forEach(function (card) {
card.addEventListener('click', function () {
const code = card.getAttribute('data-dept-code');
if (!code) return;
// Highlight SVG
const svgDepts = document.querySelectorAll('.fds-dept--active');
svgDepts.forEach(function (p) { p.classList.remove('fds-dept--highlighted'); });
const svgDept = document.querySelector('.fds-dept[data-code="' + code + '"]');
if (svgDept) { svgDept.classList.add('fds-dept--highlighted'); }
fdsHighlightCard(code);
});
card.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); }
});
});
}
/* ----------------------------------------------------------------
9. RECHERCHE DÉPARTEMENT
---------------------------------------------------------------- */
function fdsInitSearch() {
const input = document.getElementById('fds-dept-search');
const clearBtn = document.getElementById('fds-search-clear');
if (!input) return;
/* Mots-clés de recherche pour chaque formateur */
const searchData = FDS_FORMATEURS.map(function (f) {
return {
formateur: f,
keywords: fdsNormalize(
f.zone + ' ' +
f.nom + ' ' +
f.departements.join(' ')
)
};
});
function doSearch(query) {
const q = fdsNormalize(query);
if (!q) {
fdsRenderFormateurs(FDS_FORMATEURS);
if (clearBtn) clearBtn.style.display = 'none';
return;
}
if (clearBtn) clearBtn.style.display = 'flex';
const results = searchData
.filter(function (item) { return item.keywords.includes(q); })
.map(function (item) { return item.formateur; });
// Dédupliquer (un formateur peut apparaître une fois même si plusieurs depts matchent)
const seen = new Set();
const unique = results.filter(function (f) {
if (seen.has(f.nom)) return false;
seen.add(f.nom);
return true;
});
fdsRenderFormateurs(unique);
}
let debounceTimer;
input.addEventListener('input', function () {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function () {
doSearch(input.value);
}, 250);
});
if (clearBtn) {
clearBtn.addEventListener('click', function () {
input.value = '';
doSearch('');
input.focus();
});
}
// Rendu initial
fdsRenderFormateurs(FDS_FORMATEURS);
}
/* ----------------------------------------------------------------
10. SMOOTH SCROLL pour les ancres
---------------------------------------------------------------- */
function fdsInitSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
anchor.addEventListener('click', function (e) {
const targetId = this.getAttribute('href').slice(1);
if (!targetId) return;
const target = document.getElementById(targetId);
if (!target) return;
e.preventDefault();
const headerH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--fds-header-h')) || 72;
const top = target.getBoundingClientRect().top + window.scrollY - headerH - 16;
window.scrollTo({ top: top, behavior: 'smooth' });
});
});
}
/* ----------------------------------------------------------------
11. ANNÉE FOOTER
---------------------------------------------------------------- */
function fdsSetYear() {
const el = document.getElementById('fds-year');
if (el) { el.textContent = new Date().getFullYear(); }
}
/* ----------------------------------------------------------------
CAROUSEL TÉMOIGNAGES
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
CAROUSEL PHOTOS
---------------------------------------------------------------- */
function fdsInitPhotos() {
var track = document.getElementById('fds-photos-track');
if (!track) return;
var dots = document.querySelectorAll('#fds-photos-dots .fds-photos__dot');
var prevBtn = document.getElementById('fds-photos-prev');
var nextBtn = document.getElementById('fds-photos-next');
var slides = track.querySelectorAll('.fds-photos__slide');
var current = 0;
var autoTimer;
var visibleCount = window.innerWidth < 768 ? 1 : window.innerWidth < 1100 ? 2 : 3;
function getSlideWidth() {
return slides[0] ? slides[0].offsetWidth + 16 : 0;
}
function goTo(index) {
if (index < 0) index = slides.length - 1;
if (index >= slides.length) index = 0;
current = index;
track.scrollTo({ left: current * getSlideWidth(), behavior: 'smooth' });
dots.forEach(function (d, i) {
d.classList.toggle('fds-photos__dot--active', i === current);
});
}
if (prevBtn) prevBtn.addEventListener('click', function () { goTo(current - 1); resetAuto(); });
if (nextBtn) nextBtn.addEventListener('click', function () { goTo(current + 1); resetAuto(); });
dots.forEach(function (d, i) { d.addEventListener('click', function () { goTo(i); resetAuto(); }); });
function resetAuto() {
clearInterval(autoTimer);
autoTimer = setInterval(function () { goTo(current + 1); }, 4000);
}
resetAuto();
}
function fdsInitTestimonials() {
var track = document.getElementById('fds-testimonials-track');
if (!track) return;
var dots = document.querySelectorAll('#fds-test-dots .fds-testimonials__dot');
var prevBtn = document.getElementById('fds-test-prev');
var nextBtn = document.getElementById('fds-test-next');
var cards = track.querySelectorAll('.fds-testimonials__card');
var current = 0;
var autoTimer;
function getCardWidth() {
if (!cards[0]) return 0;
return cards[0].offsetWidth + 24;
}
function goTo(index) {
if (index < 0) index = cards.length - 1;
if (index >= cards.length) index = 0;
current = index;
track.scrollTo({ left: current * getCardWidth(), behavior: 'smooth' });
dots.forEach(function (d, i) {
d.classList.toggle('fds-testimonials__dot--active', i === current);
});
}
if (prevBtn) prevBtn.addEventListener('click', function () { goTo(current - 1); resetAuto(); });
if (nextBtn) nextBtn.addEventListener('click', function () { goTo(current + 1); resetAuto(); });
dots.forEach(function (d, i) {
d.addEventListener('click', function () { goTo(i); resetAuto(); });
});
function resetAuto() {
clearInterval(autoTimer);
autoTimer = setInterval(function () { goTo(current + 1); }, 5000);
}
resetAuto();
var isDragging = false, startX = 0, scrollLeft = 0;
track.addEventListener('mousedown', function (e) {
isDragging = true; startX = e.pageX - track.offsetLeft; scrollLeft = track.scrollLeft;
});
track.addEventListener('mouseleave', function () { isDragging = false; });
track.addEventListener('mouseup', function () { isDragging = false; });
track.addEventListener('mousemove', function (e) {
if (!isDragging) return;
e.preventDefault();
track.scrollLeft = scrollLeft - (e.pageX - track.offsetLeft - startX);
});
}
/* ----------------------------------------------------------------
INITIALISATION
---------------------------------------------------------------- */
document.addEventListener('DOMContentLoaded', function () {
fdsInitHeader();
fdsInitMobileNav();
fdsInitSlider();
fdsInitReveal();
fdsInitMap();
fdsInitSearch();
fdsInitSmoothScroll();
fdsSetYear();
fdsInitTestimonials();
fdsInitPhotos();
});
/**
* ================================================================
* INSTRUCTIONS D'INTÉGRATION DE LA CARTE SVG DANS WORDPRESS
* ================================================================
*
* OPTION A — Intégration directe (recommandée)
* --------------------------------------------
* 1. Téléchargez un fichier SVG de France par départements.
* Ressources gratuites :
* - Recherchez "france departements SVG" sur GitHub
* - Chaque département doit avoir un identifiant unique
*
* 2. Ouvrez le fichier SVG dans un éditeur texte.
*
* 3. Pour chaque département (path/polygon), ajoutez :
* - class="fds-dept"
* - data-code="XX" (XX = numéro de département, ex: "34")
* Exemple :
*
* 4. Copiez le SVG complet dans le div#fds-france-svg
* dans le fichier fds-index.html, à la place du placeholder.
*
* OPTION B — Chargement AJAX (si SVG trop volumineux)
* ----------------------------------------------------
* Remplacez le placeholder dans #fds-france-svg par :
* Chargement de la carte...
*
* Puis ajoutez ce code dans fds-scripts.js (avant l'init) :
*
* fetch('/wp-content/themes/VOTRE-THEME/france-depts.svg')
* .then(r => r.text())
* .then(svgText => {
* const container = document.getElementById('fds-france-svg');
* container.innerHTML = svgText;
* // Relancer l'init map après injection
* coloriserDepts();
* attachEvents();
* });
*
* OPTION C — Alternative sans SVG (grille de boutons département)
* ---------------------------------------------------------------
* Si l'intégration SVG pose problème dans WordPress,
* utilisez la grille de cartes formateurs (déjà présente sur la page).
* La recherche par département fonctionne sans la carte.
* Masquez simplement #fds-france-svg avec display:none dans le CSS.
*
* ================================================================
* INTÉGRATION WORDPRESS
* ================================================================
*
* MÉTHODE 1 — Page WordPress avec éditeur classique ou Gutenberg
* - Créer une nouvelle page
* - Passer en mode "Éditeur HTML" (bloc personnalisé HTML)
* - Coller le contenu du BODY de fds-index.html (tout sauf , , )
* - Note : ne pas inclure le CSS ni