/**
* BOOSTACADEMY.AI - Blocs Structurels
* Header, Footer, Hero, Sections...
*
* Depend de : variables.css, base.css, components.css
*/
/* ===========================================
HEADER
Lignes 10-130
=========================================== */
/*
* HTML: voir /components/header.html
*
* Structure:
*
*/
.header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
@media (min-width: 1024px) {
.header__inner {
height: 80px;
}
}
/* Logo */
.header__logo {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo span {
color: var(--color-text);
}
/* Navigation */
.header__nav {
display: none;
}
@media (min-width: 1024px) {
.header__nav {
display: block;
}
}
.header__menu {
display: flex;
align-items: center;
gap: var(--space-8);
}
.header__link {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--color-text-body);
text-decoration: none;
transition: color var(--transition-fast);
}
.header__link:hover,
.header__link.is-active {
color: var(--color-primary);
}
/* Actions desktop (telephone + CTA) */
.header__actions {
display: none;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.header__actions {
display: flex;
}
}
/* Telephone desktop */
.header__phone {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text);
text-decoration: none;
font-size: var(--text-sm);
font-weight: var(--font-medium);
transition: color var(--transition-fast);
}
.header__phone:hover {
color: var(--color-primary);
}
.header__phone svg {
color: var(--color-primary);
flex-shrink: 0;
}
/* Sur tablet: juste l'icone */
@media (min-width: 768px) and (max-width: 1023px) {
.header__phone span {
display: none;
}
}
/* Sur desktop: tout afficher */
@media (min-width: 1024px) {
.header__phone span {
display: inline;
}
}
/* CTA desktop */
.header__cta {
display: none;
}
@media (min-width: 768px) {
.header__cta {
display: inline-flex;
}
}
/* CTA mobile (dans le nav) */
.header__cta-mobile {
display: none;
}
/* Contact mobile (telephone + CTA dans le menu burger) */
.header__mobile-contact {
display: none;
padding: var(--space-6) 0 0;
margin-top: var(--space-4);
border-top: 1px solid var(--color-neutral-200);
}
.header__mobile-phone {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-decoration: none;
margin-bottom: var(--space-4);
}
.header__mobile-phone svg {
flex-shrink: 0;
}
/* Burger Menu (mobile) */
.header__burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: var(--space-2);
background: none;
border: none;
cursor: pointer;
}
@media (min-width: 1024px) {
.header__burger {
display: none;
}
}
.header__burger-line {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text);
border-radius: var(--radius-full);
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
/* Burger animation when open */
.header__burger[aria-expanded="true"] .header__burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.header__burger[aria-expanded="true"] .header__burger-line:nth-child(2) {
opacity: 0;
}
.header__burger[aria-expanded="true"] .header__burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ===========================================
MOBILE NAV OVERLAY
=========================================== */
@media (max-width: 1023px) {
.header__nav {
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-white);
padding: var(--space-6);
transform: translateX(100%);
transition: transform var(--transition-base);
}
.header__nav.is-open {
display: block;
transform: translateX(0);
}
.header__menu {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.header__link {
display: block;
padding: var(--space-4) 0;
font-size: var(--text-lg);
border-bottom: 1px solid var(--color-border);
}
/* Contact mobile (telephone + CTA) in mobile nav */
.header__nav.is-open .header__mobile-contact {
display: block;
}
.header__nav.is-open .header__cta-mobile {
display: block;
}
}
/* ===========================================
FOOTER
Lignes 195-310
=========================================== */
/*
* HTML: voir /components/footer.html
*
* Structure:
*
*/
.footer {
background-color: var(--color-neutral-900);
color: var(--color-neutral-300);
padding: var(--space-12) 0 var(--space-6);
}
.footer a {
color: var(--color-neutral-300);
text-decoration: none;
transition: color var(--transition-fast);
}
.footer a:hover {
color: white;
}
/* Grid layout - 6 colonnes responsive */
.footer__grid {
display: grid;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
@media (min-width: 480px) {
.footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
}
@media (min-width: 1200px) {
.footer__grid {
grid-template-columns: 2fr repeat(5, 1fr);
gap: var(--space-10);
}
}
/* Lien "Tous les..." en accent */
.footer__nav-list .footer-link--all {
color: var(--color-primary);
font-weight: var(--font-medium);
}
/* Brand column */
.footer__logo {
display: inline-block;
font-size: var(--text-xl);
font-weight: var(--font-bold);
margin-bottom: var(--space-4);
text-decoration: none;
}
.footer__logo-boost {
color: white;
}
.footer__logo-academy {
color: var(--color-primary);
}
.footer__tagline {
font-size: var(--text-sm);
line-height: 1.6;
margin-bottom: var(--space-6);
max-width: 280px;
}
/* Contact info */
.footer__contact {
font-style: normal;
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.footer__contact a,
.footer__contact span {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
}
.footer__contact svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Social links */
.footer__social {
display: flex;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-neutral-700);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.footer__social a:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.footer__social svg {
width: 20px;
height: 20px;
}
/* Labels */
.footer__labels {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.footer__label {
font-size: var(--text-xs);
background-color: var(--color-neutral-800);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}
/* Navigation columns */
.footer__nav-title {
color: white;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.footer__nav-subtitle {
color: var(--color-neutral-400);
font-size: var(--text-xs);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: var(--space-4);
margin-bottom: var(--space-2);
}
.footer__nav-subtitle:first-of-type {
margin-top: 0;
}
.footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer__nav-list li {
margin-bottom: var(--space-2);
}
.footer__nav-list a {
font-size: var(--text-sm);
}
/* NDA declaration */
.footer__nda {
border-top: 1px solid var(--color-neutral-800);
padding-top: var(--space-6);
margin-bottom: var(--space-6);
text-align: center;
}
.footer__nda p {
font-size: var(--text-xs);
color: var(--color-neutral-500);
}
.footer__nda strong {
color: var(--color-neutral-300);
}
.footer__nda em {
display: block;
margin-top: var(--space-1);
}
/* Bottom bar */
.footer__bottom {
border-top: 1px solid var(--color-neutral-800);
padding-top: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: center;
font-size: var(--text-xs);
color: var(--color-neutral-500);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__bottom a {
color: var(--color-primary);
}
.footer__made-with {
font-size: var(--text-sm);
color: var(--color-neutral-400);
}
.footer__claude-link {
color: var(--color-neutral-300);
text-decoration: none;
border-bottom: 1px dotted var(--color-neutral-500);
transition: color var(--transition-fast);
}
.footer__claude-link:hover {
color: white;
}
/* ===========================================
HERO - Style Lovable (fond gradient)
=========================================== */
/*
* HTML: voir /components/block-hero.html
*
* Variantes:
* - .block-hero (default) : Hero avec fond gradient
* - .block-hero--center : Hero centre (landing pages)
* - .block-hero--compact : Hero compact (pages interieures)
*/
.block-hero {
background: linear-gradient(180deg, #FFF5F5 0%, #FFF0F3 40%, #FFFFFF 100%);
padding: var(--space-12) 0 var(--space-16);
text-align: center;
}
@media (min-width: 768px) {
.block-hero {
padding: var(--space-16) 0 var(--space-20);
}
}
@media (min-width: 1024px) {
.block-hero {
padding: var(--space-20) 0 var(--space-24);
}
}
.block-hero__grid {
display: grid;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 1024px) {
.block-hero__grid {
grid-template-columns: 55% 45%;
gap: var(--space-8);
text-align: left;
}
}
/* Sur grands écrans, le titre peut chevaucher le blob */
@media (min-width: 1280px) {
.block-hero__grid {
grid-template-columns: 60% 40%;
}
}
.block-hero__content {
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 2; /* Au-dessus du blob */
}
@media (min-width: 1024px) {
.block-hero__content {
margin: 0;
}
}
.block-hero__content .badge {
margin-bottom: var(--space-4);
}
.block-hero__title {
font-size: var(--text-3xl);
font-weight: var(--font-extrabold);
line-height: var(--leading-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
}
.block-hero__title .text-accent {
color: var(--color-primary);
}
@media (min-width: 768px) {
.block-hero__title {
font-size: var(--text-4xl);
}
}
@media (min-width: 1024px) {
.block-hero__title {
font-size: var(--text-5xl);
}
}
.block-hero__lead {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-hero__lead {
font-size: var(--text-xl);
}
}
.block-hero__sublead {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.block-hero__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-8);
align-items: center;
}
/* Boutons sur une ligne dès tablet */
@media (min-width: 768px) {
.block-hero__actions {
flex-direction: row;
flex-wrap: nowrap;
gap: var(--space-4);
justify-content: center;
}
/* Empêcher le retour à la ligne dans les boutons */
.block-hero__actions .btn {
white-space: nowrap;
flex-shrink: 0;
}
}
@media (min-width: 1024px) {
.block-hero__actions {
justify-content: flex-start;
}
}
/* Proof / Stats */
.block-hero__proof {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
justify-content: center;
}
@media (min-width: 1024px) {
.block-hero__proof {
justify-content: flex-start;
}
}
.block-hero__stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.block-hero__stat-value {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-primary);
}
.block-hero__stat-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* Visual - Blobs organiques (pas d'image)
* Inspiré Dieter Rams : une forme suffit
* Jessica Walsh : la forme respire, elle vit
* Paula Scher : audace dans la douceur
*/
.block-hero__visual {
display: none;
position: relative;
height: 100%;
min-height: 400px;
}
@media (min-width: 1024px) {
.block-hero__visual {
display: block;
}
}
/* Blob principal - forme organique douce */
.block-hero__visual::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%, -50%);
width: 500px;
height: 480px;
background: linear-gradient(
135deg,
rgba(255, 205, 210, 0.7) 0%,
rgba(255, 235, 238, 0.5) 50%,
rgba(255, 245, 245, 0.3) 100%
);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
filter: blur(2px);
animation: blob-breathe 8s ease-in-out infinite;
}
/* Blob secondaire - accent plus petit */
.block-hero__visual::after {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 180px;
height: 160px;
background: linear-gradient(
45deg,
rgba(229, 57, 53, 0.15) 0%,
rgba(255, 205, 210, 0.3) 100%
);
border-radius: 45% 55% 35% 65% / 60% 40% 60% 40%;
filter: blur(1px);
animation: blob-float 10s ease-in-out infinite;
animation-delay: -2s;
}
/* Animation respiration - subtile, premium */
@keyframes blob-breathe {
0%, 100% {
transform: translate(-30%, -50%) scale(1) rotate(0deg);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
}
25% {
transform: translate(-32%, -48%) scale(1.02) rotate(1deg);
border-radius: 55% 45% 60% 40% / 50% 50% 50% 50%;
}
50% {
transform: translate(-28%, -52%) scale(1.01) rotate(-1deg);
border-radius: 70% 30% 55% 45% / 40% 60% 40% 60%;
}
75% {
transform: translate(-31%, -49%) scale(1.03) rotate(0.5deg);
border-radius: 58% 42% 65% 35% / 55% 45% 55% 45%;
}
}
/* Animation flottement - pour le blob secondaire */
@keyframes blob-float {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.8;
}
50% {
transform: translateY(-15px) scale(1.05);
opacity: 1;
}
}
/* Responsive - blobs plus petits sur tablet */
@media (min-width: 1024px) and (max-width: 1279px) {
.block-hero__visual::before {
width: 400px;
height: 380px;
}
.block-hero__visual::after {
width: 140px;
height: 120px;
}
}
/* Grand écran - blobs plus grands */
@media (min-width: 1440px) {
.block-hero__visual::before {
width: 600px;
height: 560px;
}
.block-hero__visual::after {
width: 220px;
height: 200px;
right: 5%;
}
}
/* Si on veut désactiver les animations (accessibilité) */
@media (prefers-reduced-motion: reduce) {
.block-hero__visual::before,
.block-hero__visual::after {
animation: none;
}
}
/* Variante CENTER */
.block-hero--center .block-hero__content {
text-align: center;
margin: 0 auto;
}
.block-hero--center .block-hero__actions {
justify-content: center;
}
.block-hero--center .block-hero__proof {
justify-content: center;
}
/* Blobs pour pages outils (hero center) */
.block-hero--center {
position: relative;
overflow: hidden;
}
.block-hero--center::before {
content: '';
position: absolute;
top: 20%;
right: -10%;
width: 450px;
height: 420px;
background: linear-gradient(
135deg,
rgba(255, 180, 180, 0.5) 0%,
rgba(255, 205, 210, 0.3) 50%,
rgba(255, 235, 238, 0.1) 100%
);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
filter: blur(2px);
pointer-events: none;
z-index: 0;
animation: blob-breathe-center 14s ease-in-out infinite;
}
.block-hero--center::after {
content: '';
position: absolute;
bottom: 10%;
left: -8%;
width: 300px;
height: 280px;
background: linear-gradient(
225deg,
rgba(255, 180, 180, 0.4) 0%,
rgba(255, 205, 210, 0.2) 100%
);
border-radius: 45% 55% 60% 40% / 55% 45% 50% 50%;
filter: blur(2px);
pointer-events: none;
z-index: 0;
animation: blob-drift-slow 18s ease-in-out infinite;
}
@keyframes blob-breathe-center {
0%, 100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-20px, 15px) scale(1.04);
}
}
.block-hero--center .container {
position: relative;
z-index: 1;
}
@media (max-width: 1023px) {
.block-hero--center::before {
width: 280px;
height: 260px;
right: -15%;
}
.block-hero--center::after {
width: 180px;
height: 160px;
left: -12%;
}
}
/* Variante COMPACT */
.block-hero--compact {
padding: var(--space-8) 0;
background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 100%);
}
@media (min-width: 768px) {
.block-hero--compact {
padding: var(--space-10) 0;
}
}
.block-hero--compact .block-hero__title {
font-size: var(--text-2xl);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-hero--compact .block-hero__title {
font-size: var(--text-3xl);
}
}
.block-hero--compact .block-hero__lead {
font-size: var(--text-base);
margin-bottom: 0;
}
/* ===========================================
INTRO
=========================================== */
/*
* HTML: voir /components/block-intro.html
*
* Variantes:
* - .block-intro (default) : Intro centree
* - .block-intro--left : Intro alignee a gauche
*/
.block-intro {
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.block-intro {
padding: var(--space-16) 0;
}
}
.block-intro__content {
max-width: var(--container-md);
margin: 0 auto;
text-align: center;
}
.block-intro__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.block-intro__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
.block-intro__title {
font-size: var(--text-3xl);
}
}
.block-intro__text {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin-bottom: var(--space-6);
}
.block-intro__content > .btn {
margin-top: var(--space-2);
}
/* Variante LEFT */
.block-intro--left .block-intro__content {
text-align: left;
margin: 0;
}
/* ===========================================
BLOCK POURQUOI CETTE FORMATION
=========================================== */
/*
* Bloc d'identification emotionnelle pour les fiches formation
* Design cohérent Boost Academy : fond blanc, cards arrondies, pas de barre verticale
* Structure: eyebrow + title + accroche + pain_points (ul) + promesse
*/
.block-pourquoi {
padding: var(--space-8) 0;
/* Pas de background ici - la section parent gère le fond via ::before */
}
@media (min-width: 768px) {
.block-pourquoi {
padding: var(--space-10) 0;
}
}
/* Dans le layout formation, pas de container car déjà dans la grille */
.page-formation__content .block-pourquoi {
padding: var(--space-8) 0;
}
.page-formation__content .block-pourquoi .container {
padding: 0;
max-width: none;
}
.block-pourquoi__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
margin-bottom: var(--space-2);
}
.block-pourquoi__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-6);
line-height: var(--leading-tight);
}
@media (min-width: 768px) {
.block-pourquoi__title {
font-size: var(--text-3xl);
}
}
/* Accroche : question impactante */
.block-pourquoi__accroche {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-8);
line-height: var(--leading-relaxed);
}
@media (min-width: 768px) {
.block-pourquoi__accroche {
font-size: var(--text-xl);
}
}
/* Pain points : puces colorees, style moderne */
.block-pourquoi__pain-points {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.block-pourquoi__pain-points li {
font-size: var(--text-base);
color: var(--color-text-body);
line-height: var(--leading-relaxed);
padding-left: var(--space-6);
position: relative;
}
/* Puce ronde coloree */
.block-pourquoi__pain-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 8px;
height: 8px;
background-color: var(--color-primary);
opacity: 0.4;
border-radius: 50%;
}
@media (min-width: 768px) {
.block-pourquoi__pain-points li {
font-size: var(--text-lg);
}
}
/* Promesse : callout positif, style distinct du bloc Impact */
.block-pourquoi__promesse {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--color-primary-dark, #0f5a47);
line-height: var(--leading-relaxed);
padding: var(--space-4) var(--space-5);
background: linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.04) 100%);
border: 1px solid rgba(22, 163, 74, 0.15);
border-radius: var(--radius-lg);
margin-top: var(--space-4);
}
/* Icone check elegante */
.block-pourquoi__promesse::before {
content: "✓";
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
background: var(--color-primary);
color: white;
font-size: 12px;
font-weight: var(--font-bold);
border-radius: 50%;
margin-top: 2px;
}
@media (min-width: 768px) {
.block-pourquoi__promesse {
font-size: var(--text-lg);
padding: var(--space-5) var(--space-6);
}
}
/* ===========================================
GRID
=========================================== */
/*
* HTML: voir /components/block-grid.html
*
* Classes de grille: .grid-2, .grid-3, .grid-4
* Variantes: .block-grid--alt (fond gris)
*/
.block-grid {
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.block-grid {
padding: var(--space-16) 0;
}
}
.block-grid--alt {
background-color: var(--color-bg-alt);
}
.block-grid__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-grid__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-grid__title {
font-size: var(--text-3xl);
}
}
.block-grid__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.block-grid__footer {
text-align: center;
margin-top: var(--space-10);
}
/* Grid layouts */
.grid-2,
.grid-3,
.grid-4 {
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Feature Card (pour grilles d'avantages) */
.feature-card {
text-align: center;
padding: var(--space-6);
}
.feature-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--color-primary-light);
border-radius: var(--radius-lg);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.feature-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.feature-card__text {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
/* ===========================================
DOUBLE COLUMN
=========================================== */
/*
* HTML: voir /components/block-double.html
*
* Variantes:
* - .block-double (default) : Image a droite
* - .block-double--reverse : Image a gauche
* - .block-double--alt : Fond gris
*/
.block-double {
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.block-double {
padding: var(--space-16) 0;
}
}
.block-double--alt {
background-color: var(--color-bg-alt);
}
.block-double__grid {
display: grid;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 1024px) {
.block-double__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
}
.block-double__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.block-double__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
.block-double__title {
font-size: var(--text-3xl);
}
}
.block-double__text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin-bottom: var(--space-6);
}
.block-double__content .list-check {
margin-bottom: var(--space-6);
}
.block-double__logos {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
align-items: center;
margin-bottom: var(--space-6);
}
.block-double__logos img {
height: 40px;
width: auto;
opacity: 0.7;
transition: opacity var(--transition-fast);
}
.block-double__logos img:hover {
opacity: 1;
}
.block-double__visual img {
width: 100%;
height: auto;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
/* Variante REVERSE */
@media (min-width: 1024px) {
.block-double--reverse .block-double__visual {
order: -1;
}
}
/* ===========================================
CTA BAND
=========================================== */
/*
* HTML: voir /components/block-cta.html
*
* Variantes:
* - .block-cta (default) : Fond primary
* - .block-cta--dark : Fond sombre
* - .block-cta--light : Fond clair
*/
.block-cta {
background-color: var(--color-primary);
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.block-cta {
padding: var(--space-16) 0;
}
}
.block-cta__content {
text-align: center;
max-width: var(--container-md);
margin: 0 auto;
}
.block-cta__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-white);
margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
.block-cta__title {
font-size: var(--text-3xl);
}
}
.block-cta__text {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--space-6);
}
.block-cta__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
justify-content: center;
align-items: center;
}
@media (min-width: 768px) {
.block-cta__actions {
flex-direction: row;
gap: var(--space-4);
}
}
/* Bouton ghost sur fond colore (visible en blanc) */
.block-cta .btn-ghost {
color: var(--color-white);
border: 2px solid rgba(255, 255, 255, 0.5);
background-color: transparent;
}
.block-cta .btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: var(--color-white);
}
/* Variante DARK */
.block-cta--dark {
background-color: var(--color-neutral-900);
}
/* Variante LIGHT */
.block-cta--light {
background-color: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.block-cta--light .block-cta__title {
color: var(--color-text);
}
.block-cta--light .block-cta__text {
color: var(--color-text-body);
}
/* ===========================================
FAQ
=========================================== */
/*
* HTML: voir /components/block-faq.html
*
* Variantes:
* - .block-faq (default) : Fond blanc
* - .block-faq--alt : Fond gris
*/
.block-faq {
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.block-faq {
padding: var(--space-16) 0;
}
}
.block-faq--alt {
background-color: var(--color-bg-alt);
}
.block-faq__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-faq__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-faq__title {
font-size: var(--text-3xl);
}
}
.block-faq__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.block-faq__list {
max-width: var(--container-md);
margin: 0 auto;
}
/* FAQ Item (using details/summary) */
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) 0;
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--color-text);
cursor: pointer;
list-style: none;
}
.faq-item__question::-webkit-details-marker {
display: none;
}
.faq-item__question span {
flex: 1;
}
.faq-item__icon {
flex-shrink: 0;
color: var(--color-text-muted);
transition: transform var(--transition-fast);
}
.faq-item[open] .faq-item__icon {
transform: rotate(180deg);
}
.faq-item__answer {
padding-bottom: var(--space-5);
}
.faq-item__answer p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
}
/* FAQ Items as grid cards */
.block-faq__list--grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
max-width: 100%;
}
@media (min-width: 768px) {
.block-faq__list--grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
}
@media (min-width: 1024px) {
.block-faq__list--grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Block FAQ Item - Card style */
.block-faq__item {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.block-faq__item:last-child {
margin-bottom: 0;
}
.block-faq__item:hover {
border-color: var(--color-neutral-300);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.block-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
cursor: pointer;
list-style: none;
background: var(--color-white);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.block-faq__question:hover {
background: var(--color-neutral-100);
}
.block-faq__question::-webkit-details-marker {
display: none;
}
.block-faq__question span {
flex: 1;
}
.block-faq__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-primary);
transition: transform var(--transition-fast);
}
.block-faq__item[open] .block-faq__icon {
transform: rotate(180deg);
}
.block-faq__item[open] .block-faq__question {
color: var(--color-primary);
}
.block-faq__answer {
padding: var(--space-5) var(--space-6);
background: var(--color-neutral-50);
border-top: 1px solid var(--color-border);
}
.block-faq__answer p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
margin: 0;
}
/* ===========================================
TESTIMONIALS
=========================================== */
/*
* HTML: voir /components/block-testimonials.html
*
* Variantes:
* - .block-testimonials (default) : Grille
* - .block-testimonials--featured : Un temoignage mis en avant
*/
.block-testimonials {
padding: var(--space-12) 0;
background-color: var(--color-bg-alt);
}
@media (min-width: 768px) {
.block-testimonials {
padding: var(--space-16) 0;
}
}
.block-testimonials__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-testimonials__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-testimonials__title {
font-size: var(--text-3xl);
}
}
.block-testimonials__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
/* Card Temoignage (deja dans components.css, ajouts specifiques) */
.card-temoignage__stars {
display: flex;
gap: var(--space-1);
color: #FBBF24;
margin-bottom: var(--space-4);
}
/* Variante FEATURED */
.block-testimonials--featured {
background-color: var(--color-white);
}
.testimonial-featured {
max-width: var(--container-md);
margin: 0 auto;
text-align: center;
}
.testimonial-featured__quote {
position: relative;
margin-bottom: var(--space-8);
}
.testimonial-featured__quote-icon {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
color: var(--color-primary);
}
.testimonial-featured__quote blockquote {
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
color: var(--color-text);
font-style: italic;
}
@media (min-width: 768px) {
.testimonial-featured__quote blockquote {
font-size: var(--text-2xl);
}
}
.testimonial-featured__author {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
text-align: left;
}
.testimonial-featured__photo {
width: 80px;
height: 80px;
border-radius: var(--radius-full);
object-fit: cover;
}
.testimonial-featured__name {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.testimonial-featured__role {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.testimonial-featured__formation {
font-size: var(--text-sm);
color: var(--color-primary);
margin-top: var(--space-1);
}
/* ===========================================
BREADCRUMB
=========================================== */
/*
* HTML: voir /components/breadcrumb.html
*/
.breadcrumb {
padding: var(--space-4) 0;
background-color: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
}
.breadcrumb__item {
display: flex;
align-items: center;
}
.breadcrumb__link {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb__link:hover {
color: var(--color-primary);
}
.breadcrumb__separator {
color: var(--color-neutral-400);
display: flex;
align-items: center;
}
.breadcrumb__item--current span {
color: var(--color-text);
font-weight: var(--font-medium);
}
/* ===========================================
HERO FORMATION
Bloc specifique pages formation
=========================================== */
/*
* HTML: voir /components/block-hero-formation.html
*
* Structure specifique pour les pages formation :
* - Lien retour catalogue
* - Badges categorie
* - Titre + description
* - Note + meta
* - Tags metiers
*/
.block-hero-formation {
background: linear-gradient(135deg, #FEF3F2 0%, #FEE2E2 50%, #FECACA 100%);
padding: var(--space-6) 0 var(--space-10);
position: relative;
overflow: hidden;
}
/* Decorative element */
.block-hero-formation::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
@media (min-width: 768px) {
.block-hero-formation {
padding: var(--space-8) 0 var(--space-12);
}
.block-hero-formation::before {
width: 700px;
height: 700px;
}
}
/* Lien retour */
.block-hero-formation__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
margin-bottom: var(--space-6);
transition: color var(--transition-fast);
}
.block-hero-formation__back:hover {
color: var(--color-primary);
}
.block-hero-formation__back svg {
transition: transform var(--transition-fast);
}
.block-hero-formation__back:hover svg {
transform: translateX(-4px);
}
/* Grid layout pour sidebar */
.block-hero-formation__grid {
display: block;
}
@media (min-width: 1024px) {
.block-hero-formation__grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--space-10);
align-items: start;
}
}
/* Contenu */
.block-hero-formation__content {
max-width: 700px;
}
/* Badges */
.block-hero-formation__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
/* Titre */
.block-hero-formation__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
.block-hero-formation__title {
font-size: var(--text-3xl);
}
}
@media (min-width: 1024px) {
.block-hero-formation__title {
font-size: var(--text-4xl);
}
}
/* Description */
.block-hero-formation__desc {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin-bottom: var(--space-5);
}
/* Note / Rating */
.block-hero-formation__rating {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.block-hero-formation__stars {
display: flex;
gap: 2px;
color: #FBBF24;
}
.block-hero-formation__rating-value {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.block-hero-formation__rating-count {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* Meta infos */
.block-hero-formation__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.block-hero-formation__meta li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-body);
}
.block-hero-formation__meta svg {
color: var(--color-text-muted);
flex-shrink: 0;
}
/* Prix dans meta */
.block-hero-formation__meta-price {
font-weight: var(--font-normal);
color: var(--color-text);
}
.block-hero-formation__meta-price svg {
color: var(--color-text-muted); /* Euro pas en rouge */
}
/* Prochaine session - meme style que les autres meta */
.block-hero-formation__session {
/* Herite du style .block-hero-formation__meta li */
}
.block-hero-formation__session strong {
color: var(--color-primary);
font-weight: var(--font-semibold);
}
/* Tags metiers */
.block-hero-formation__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* ===========================================
FEATURED TESTIMONIAL (hero)
Témoignage en vedette dans le hero
=========================================== */
.block-hero-formation__testimonial {
margin-top: var(--space-8);
padding: var(--space-5);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
position: relative;
}
.block-hero-formation__testimonial::before {
content: '"';
position: absolute;
top: var(--space-3);
left: var(--space-4);
font-size: 3rem;
line-height: 1;
color: var(--color-primary);
opacity: 0.2;
font-family: Georgia, serif;
}
.block-hero-formation__testimonial-quote {
font-size: var(--text-base);
font-style: italic;
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin-bottom: var(--space-4);
padding-left: var(--space-6);
}
.block-hero-formation__testimonial-author {
display: flex;
align-items: center;
gap: var(--space-3);
}
.block-hero-formation__testimonial-avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
object-fit: cover;
border: 2px solid var(--color-primary-light);
}
.block-hero-formation__testimonial-info {
flex: 1;
}
.block-hero-formation__testimonial-name {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: 2px;
}
.block-hero-formation__testimonial-role {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.block-hero-formation__testimonial-stars {
display: flex;
gap: 2px;
color: #FBBF24;
}
.block-hero-formation__testimonial-stars svg {
width: 14px;
height: 14px;
}
/* ===========================================
TRUST BAR
Barre de confiance sous le hero
=========================================== */
.block-trust-bar {
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
padding: var(--space-5) 0;
}
.block-trust-bar__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-6);
}
@media (min-width: 768px) {
.block-trust-bar__inner {
gap: var(--space-10);
}
}
.block-trust-bar__item {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-body);
}
.block-trust-bar__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-alt);
border-radius: var(--radius-full);
color: var(--color-primary);
}
.block-trust-bar__icon svg {
width: 20px;
height: 20px;
}
.block-trust-bar__stat {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-text);
display: block;
line-height: 1.2;
}
.block-trust-bar__label {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Variante inline pour le layout formation */
.block-trust-bar--inline {
background: transparent;
border: none;
padding: var(--space-6) 0;
margin: var(--space-6) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.block-trust-bar--inline .block-trust-bar__inner {
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--space-4);
}
@media (min-width: 768px) {
.block-trust-bar--inline .block-trust-bar__inner {
gap: var(--space-6);
}
}
.block-trust-bar--inline .block-trust-bar__item {
font-size: var(--text-xs);
}
.block-trust-bar--inline .block-trust-bar__icon {
width: 32px;
height: 32px;
}
.block-trust-bar--inline .block-trust-bar__icon svg {
width: 16px;
height: 16px;
}
.block-trust-bar--inline .block-trust-bar__stat {
font-size: var(--text-sm);
}
/* ===========================================
STICKY CTA MOBILE
Barre fixe en bas sur mobile
=========================================== */
.sticky-cta-mobile {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--color-white);
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
padding: var(--space-3) var(--space-4);
z-index: 100;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.sticky-cta-mobile.is-visible {
transform: translateY(0);
}
@media (min-width: 1024px) {
.sticky-cta-mobile {
display: none;
}
}
.sticky-cta-mobile__price {
display: flex;
flex-direction: column;
}
.sticky-cta-mobile__price-value {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
line-height: 1.2;
}
.sticky-cta-mobile__price-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.sticky-cta-mobile .btn {
flex-shrink: 0;
}
/* ===========================================
PAGE FORMATION - Alternating sections
=========================================== */
.page-formation section:nth-child(odd) {
background-color: var(--color-white);
}
.page-formation section:nth-child(even) {
background-color: var(--color-bg-alt);
}
/* Override pour sections avec leur propre background */
.page-formation .block-hero-formation,
.page-formation .block-cta,
.page-formation .block-grid--alt {
background: inherit;
}
.page-formation .block-hero-formation {
background: linear-gradient(135deg, #FEF3F2 0%, #FEE2E2 50%, #FECACA 100%);
}
.page-formation .block-cta {
background: linear-gradient(135deg, var(--color-primary) 0%, #DC2626 100%);
}
/* ===========================================
SIDEBAR FORMATION
Bloc sticky a droite
=========================================== */
/*
* HTML: voir /components/block-sidebar-formation.html
*
* Sidebar sticky avec :
* - Prix + financement
* - Sessions disponibles
* - CTA principal
* - Inclus dans la formation
*/
.block-sidebar-formation {
margin-top: var(--space-8);
}
@media (min-width: 1024px) {
.block-sidebar-formation {
margin-top: 0;
}
}
.block-sidebar-formation__sticky {
background-color: var(--color-white);
border: none;
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
@media (min-width: 1024px) {
.block-sidebar-formation__sticky {
position: sticky;
top: 100px;
}
}
/* Prix - highlighted */
.block-sidebar-formation__price {
text-align: center;
padding: var(--space-5);
margin: calc(-1 * var(--space-6));
margin-bottom: var(--space-5);
background: linear-gradient(135deg, var(--color-primary) 0%, #DC2626 100%);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.block-sidebar-formation__price-label {
display: block;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--space-1);
}
.block-sidebar-formation__price-value {
display: block;
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--color-white);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.block-sidebar-formation__price-note {
display: block;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.8);
margin-top: var(--space-1);
}
/* Financement */
.block-sidebar-formation__financing {
margin-bottom: var(--space-5);
}
.block-sidebar-formation__financing-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.block-sidebar-formation__financing-options {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* Participants */
.block-sidebar-formation__participants {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-body);
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
}
.block-sidebar-formation__participants svg {
color: var(--color-text-muted);
}
/* Sessions */
.block-sidebar-formation__sessions {
margin-bottom: var(--space-5);
}
.block-sidebar-formation__sessions-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.block-sidebar-formation__sessions-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.block-sidebar-formation__sessions-list li {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
font-size: var(--text-sm);
}
.block-sidebar-formation__sessions-list svg {
color: var(--color-text-muted);
flex-shrink: 0;
}
.block-sidebar-formation__sessions-list span:not(.badge) {
flex: 1;
}
.block-sidebar-formation__sessions-list .badge {
font-size: var(--text-xs);
}
/* CTA + Download */
.block-sidebar-formation .btn {
margin-bottom: var(--space-3);
}
.block-sidebar-formation__download {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
margin-bottom: var(--space-5);
}
.block-sidebar-formation__download:hover {
background-color: var(--color-primary-light);
border-color: var(--color-primary);
}
/* Inclus */
.block-sidebar-formation__includes {
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
margin-bottom: var(--space-5);
}
.block-sidebar-formation__includes-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
/* Liste check compacte */
.list-check--compact {
gap: var(--space-2);
}
.list-check--compact li {
font-size: var(--text-sm);
padding-left: var(--space-6);
}
.list-check--compact li::before {
width: 16px;
height: 16px;
top: 2px;
}
/* Pourquoi */
.block-sidebar-formation__why {
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.block-sidebar-formation__why-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.block-sidebar-formation__why-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.block-sidebar-formation__why-list li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-body);
}
.block-sidebar-formation__why-list svg {
color: var(--color-success);
flex-shrink: 0;
margin-top: 2px;
}
/* ===========================================
OUTILS
Grille d'icones des outils IA
=========================================== */
/*
* HTML: voir /components/block-outils.html
*/
.block-outils {
padding: var(--space-12) 0;
/* Pas de background ici - la section parent gère le fond via ::before */
}
@media (min-width: 768px) {
.block-outils {
padding: var(--space-16) 0;
}
}
.block-outils__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-outils__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-outils__title {
font-size: var(--text-3xl);
}
}
.block-outils__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.block-outils__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-6);
}
@media (min-width: 1024px) {
.block-outils__grid {
gap: var(--space-8);
}
}
.block-outils__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-4);
}
.block-outils__icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-alt);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.block-outils__item:hover .block-outils__icon {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.block-outils__icon img {
width: 56px;
height: 56px;
object-fit: contain;
}
/* Liens outils - maillage interne */
.block-outils__link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
}
.block-outils__link:hover .block-outils__name {
color: var(--color-primary);
}
.block-outils__name {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-1);
}
.block-outils__desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ===========================================
IMPACT
Stats cards ROI / resultats
=========================================== */
/*
* HTML: voir /components/block-impact.html
*/
.block-impact {
padding: var(--space-12) 0;
/* Pas de background ici - la section parent gère le fond via ::before */
}
@media (min-width: 768px) {
.block-impact {
padding: var(--space-16) 0;
}
}
.block-impact__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-impact__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-impact__title {
font-size: var(--text-3xl);
}
}
.block-impact__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.block-impact__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.block-impact__grid {
gap: var(--space-6);
}
}
.block-impact__card {
background-color: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
text-align: center;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.block-impact__card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.block-impact__card--highlight {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.block-impact__value {
display: block;
font-size: var(--text-3xl);
font-weight: var(--font-extrabold);
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--space-1);
}
@media (min-width: 768px) {
.block-impact__value {
font-size: var(--text-4xl);
}
}
.block-impact__card--highlight .block-impact__value {
color: var(--color-white);
}
.block-impact__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.block-impact__card--highlight .block-impact__label {
color: var(--color-white);
}
.block-impact__desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: var(--leading-normal);
}
.block-impact__card--highlight .block-impact__desc {
color: rgba(255, 255, 255, 0.8);
}
/* --- Future Pacing Scenarios — Style Pull Quote Editorial --- */
.block-impact__scenarios {
max-width: 65ch; /* Regle Bringhurst: 45-75 caracteres, ideal 66 */
margin: 0 auto;
}
.block-impact__scenario {
position: relative;
padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
background-color: var(--color-gray-50, #f9fafb);
border-left: 3px solid var(--color-primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
/* Guillemet decoratif discret */
.block-impact__scenario::before {
content: "\201C";
position: absolute;
top: var(--space-4);
left: var(--space-3);
font-size: 2rem;
line-height: 1;
color: var(--color-primary);
opacity: 0.3;
font-family: Georgia, serif;
}
.block-impact__scenario-text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text);
font-style: italic;
margin: 0 0 var(--space-4) 0; /* Espacement visible entre paragraphes */
text-align: left;
}
/* Dernier paragraphe: plus d'espace avant l'attribution */
.block-impact__scenario-text:last-of-type {
margin-bottom: var(--space-6);
}
.block-impact__scenario-title {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
text-align: right; /* Attribution a droite = signature */
}
.block-impact__scenario-title::before {
content: "— ";
}
@media (min-width: 768px) {
.block-impact__scenario {
padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10);
}
.block-impact__scenario::before {
font-size: 2.5rem;
top: var(--space-5);
left: var(--space-4);
}
.block-impact__scenario-text {
font-size: var(--text-lg);
}
}
/* ===========================================
PROGRAMME
Programme de formation par jours
=========================================== */
.block-programme {
padding: var(--space-12) 0;
/* Pas de background ici - la section parent gère le fond via ::before */
}
@media (min-width: 768px) {
.block-programme {
padding: var(--space-16) 0;
}
}
.block-programme__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-programme__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.block-programme__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-programme__title {
font-size: var(--text-3xl);
}
}
.block-programme__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
/* Programme container */
.programme {
max-width: var(--container-lg);
margin: 0 auto;
}
/* Programme Jour */
.programme__jour {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-5);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
.programme__jour {
padding: var(--space-6);
}
}
.programme__jour:last-child {
margin-bottom: 0;
}
.programme__jour-title {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-text);
}
@media (min-width: 768px) {
.programme__jour-title {
margin-bottom: var(--space-6);
font-size: var(--text-xl);
}
}
.programme__jour-badge {
background: var(--color-primary);
color: white;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
white-space: nowrap;
}
/* Programme Session (matin/apres-midi) */
.programme__session {
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
overflow: hidden;
}
.programme__session:last-child {
margin-bottom: 0;
}
.programme__session-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--color-bg-alt);
cursor: pointer;
list-style: none;
}
@media (min-width: 768px) {
.programme__session-header {
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
}
}
.programme__session-header::-webkit-details-marker {
display: none;
}
.programme__session-icon {
width: 28px;
height: 28px;
color: var(--color-primary);
flex-shrink: 0;
}
.programme__session-icon svg {
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
.programme__session-icon {
width: 32px;
height: 32px;
}
}
.programme__session-info {
flex: 1;
min-width: 0;
}
.programme__session-time {
display: block;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.programme__session-title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
}
@media (min-width: 768px) {
.programme__session-title {
font-size: var(--text-lg);
}
}
.programme__session-duration {
background: var(--color-primary-light, #FEE2E2);
color: var(--color-primary);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-medium);
white-space: nowrap;
}
@media (min-width: 768px) {
.programme__session-duration {
font-size: var(--text-sm);
}
}
.programme__chevron {
width: 20px;
height: 20px;
color: var(--color-text-muted);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.programme__session[open] .programme__chevron {
transform: rotate(180deg);
}
/* Programme Modules */
.programme__modules {
list-style: none;
padding: var(--space-4);
margin: 0;
}
@media (min-width: 768px) {
.programme__modules {
padding: var(--space-4) var(--space-5);
}
}
.programme__module {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-neutral-100);
}
.programme__module:last-child {
border-bottom: none;
padding-bottom: 0;
}
.programme__module:first-child {
padding-top: 0;
}
.programme__module-time {
font-size: var(--text-sm);
color: var(--color-text-muted);
min-width: 45px;
flex-shrink: 0;
}
.programme__module-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--color-primary);
}
.programme__module-icon svg {
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
.programme__module-icon {
width: 20px;
height: 20px;
}
}
.programme__module-title {
flex: 1;
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.5;
}
@media (min-width: 768px) {
.programme__module-title {
font-size: var(--text-base);
}
}
/* Lignes speciales: Pause dejeuner & Fin de formation */
.programme__module--break,
.programme__module--end {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--color-neutral-200);
border-bottom: none;
}
.programme__module--break .programme__module-title {
color: var(--color-text-muted);
font-style: italic;
}
.programme__module--break .programme__module-icon {
color: var(--color-warning);
}
/* Echanges libres - bonus discret mais valorisant */
.programme__module--bonus {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--color-neutral-200);
}
.programme__module--bonus .programme__module-title {
color: var(--color-primary);
font-weight: 500;
font-style: italic;
}
.programme__module--bonus .programme__module-icon {
color: var(--color-primary);
opacity: 0.7;
}
/* -------------------------------------------
FORMAT PROGRAMME DETAILLE (avec contenu)
------------------------------------------- */
.programme__module-block {
padding: var(--space-4);
margin-bottom: var(--space-3);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
}
.programme__module-block:hover {
border-color: var(--color-primary-200);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.programme__module-block--break {
background: var(--color-gray-50);
border-style: dashed;
}
.programme__module-header {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.programme__module-block .programme__module-time {
min-width: 50px;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
}
.programme__module-block .programme__module-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--color-primary-50);
border-radius: var(--radius-full);
color: var(--color-primary);
}
.programme__module-block .programme__module-icon svg {
width: 14px;
height: 14px;
}
.programme__module-block .programme__module-title {
flex: 1;
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.programme__module-duration {
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-gray-100);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
}
.programme__module-contenu {
margin-top: var(--space-3);
padding-left: calc(50px + var(--space-3) + 28px + var(--space-3));
list-style: none;
}
.programme__module-contenu li {
position: relative;
padding-left: var(--space-4);
margin-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
}
.programme__module-contenu li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background: var(--color-primary-200);
border-radius: var(--radius-full);
}
@media (min-width: 768px) {
.programme__module-header {
flex-wrap: nowrap;
}
.programme__module-block .programme__module-time {
min-width: 60px;
}
}
/* ===========================================
LIVRABLES
Bloc "Vous repartez avec" en bas du programme
=========================================== */
.block-livrables {
margin-top: var(--space-8);
padding: var(--space-6);
background: linear-gradient(135deg, var(--color-primary-50, #eef2ff) 0%, var(--color-white) 100%);
border: 1px solid var(--color-primary-100, #e0e7ff);
border-radius: var(--radius-xl);
}
.block-livrables__header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.block-livrables__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-lg);
color: var(--color-white);
}
.block-livrables__icon svg {
width: 20px;
height: 20px;
}
.block-livrables__title {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-text);
}
.block-livrables__list {
display: grid;
gap: var(--space-3);
}
@media (min-width: 768px) {
.block-livrables__list {
grid-template-columns: repeat(2, 1fr);
}
}
.block-livrables__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
background-color: var(--color-white);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.block-livrables__item-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--color-primary-50, #eef2ff);
border-radius: var(--radius-md);
color: var(--color-primary);
}
.block-livrables__item-icon svg {
width: 16px;
height: 16px;
}
.block-livrables__item-content {
flex: 1;
min-width: 0;
}
.block-livrables__item-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-1);
}
.block-livrables__item-desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: var(--leading-snug);
}
/* ===========================================
FORMATEUR
Presentation du formateur - Design epure
Card blanche sobre, photo portrait a gauche
=========================================== */
/*
* HTML: voir /components/block-formateur.html
*/
.block-formateur {
padding: var(--space-12) 0;
background-color: var(--color-bg-alt);
}
@media (min-width: 768px) {
.block-formateur {
padding: var(--space-16) 0;
}
}
.block-formateur__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-formateur__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.block-formateur__header .block-formateur__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
}
@media (min-width: 768px) {
.block-formateur__header .block-formateur__title {
font-size: var(--text-3xl);
}
}
/* Card principale - sobre et legere */
.block-formateur__grid {
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: var(--container-lg);
margin: 0 auto;
padding: var(--space-8);
background-color: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) {
.block-formateur__grid {
flex-direction: row;
align-items: flex-start;
gap: var(--space-10);
padding: var(--space-10);
}
}
/* Zone photo - simple et alignee */
.block-formateur__visual {
flex-shrink: 0;
display: flex;
justify-content: center;
}
@media (min-width: 768px) {
.block-formateur__visual {
justify-content: flex-start;
}
}
/* Photo portrait moderee */
.block-formateur__photo {
width: 140px;
height: 175px;
border-radius: var(--radius-lg);
object-fit: cover;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
.block-formateur__photo {
width: 160px;
height: 200px;
}
}
/* Zone contenu */
.block-formateur__content {
flex: 1;
min-width: 0;
}
/* Nom du formateur */
.block-formateur__name {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-1);
}
@media (min-width: 768px) {
.block-formateur__name {
font-size: var(--text-2xl);
}
}
/* Role */
.block-formateur__role {
font-size: var(--text-base);
color: #B71C1C; /* Rouge foncé - ratio 7.2:1 WCAG AAA */
font-weight: var(--font-semibold); /* Plus lisible */
margin-bottom: var(--space-4);
}
/* Bio */
.block-formateur__bio {
margin-bottom: var(--space-6);
}
.block-formateur__bio p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin-bottom: var(--space-4);
}
.block-formateur__bio p:last-child {
margin-bottom: 0;
}
/* Credentials - grille propre */
.block-formateur__credentials {
margin-bottom: var(--space-6);
}
.block-formateur__credentials-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
}
@media (min-width: 480px) {
.block-formateur__credentials-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.block-formateur__credentials-list {
grid-template-columns: repeat(3, 1fr);
}
}
.block-formateur__credentials-list li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-body);
}
.block-formateur__credentials-list li svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--color-success);
}
/* Expertise */
.block-formateur__expertise {
margin-bottom: var(--space-6);
}
.block-formateur__expertise-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.block-formateur__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* Social */
.block-formateur__social {
display: flex;
gap: var(--space-3);
}
.block-formateur__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
color: var(--color-text-muted);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.block-formateur__social-link:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* ===========================================
PREREQUIS
2 cards cote a cote
=========================================== */
/*
* HTML: voir /components/block-prerequis.html
*/
.block-prerequis {
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.block-prerequis {
padding: var(--space-16) 0;
}
}
.block-prerequis__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-prerequis__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
}
@media (min-width: 768px) {
.block-prerequis__title {
font-size: var(--text-3xl);
}
}
.block-prerequis__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.block-prerequis__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.block-prerequis__card {
background-color: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
transition: box-shadow var(--transition-fast);
}
.block-prerequis__card:hover {
box-shadow: var(--shadow-md);
}
.block-prerequis__card-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
}
.block-prerequis__card-icon--who {
background-color: var(--color-primary-light);
color: var(--color-primary);
}
.block-prerequis__card-icon--skills {
background-color: var(--color-success-light);
color: var(--color-success);
}
.block-prerequis__card-title {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.block-prerequis__card-desc {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-5);
}
.block-prerequis__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.block-prerequis__list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-base);
color: var(--color-text-body);
}
.block-prerequis__list svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--color-primary);
}
.block-prerequis__list--skills svg {
color: var(--color-success);
}
.block-prerequis__note {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.block-prerequis__note svg {
color: var(--color-primary);
flex-shrink: 0;
}
/* Grid 3 colonnes pour section prerequis avec transformation */
.block-prerequis__grid--three {
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.block-prerequis__grid--three {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.block-prerequis__grid--three {
grid-template-columns: repeat(3, 1fr);
}
}
/* Card transformation - effet visuel distinct */
.block-prerequis__card--transformation {
background: linear-gradient(135deg, var(--color-white) 0%, #f8f4ff 100%);
border-color: var(--color-accent);
}
.block-prerequis__card-icon--transform {
background-color: #f3e8ff;
color: var(--color-accent);
}
/* Liste de transformation (aversion a la perte) */
.prerequis-transformation {
margin-top: 0;
}
.prerequis-transformation__title,
.prerequis-transformation__subtitle {
display: none; /* Cache le titre/sous-titre si present dans le HTML genere */
}
.prerequis-transformation__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.prerequis-transformation__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-base);
color: var(--color-text-body);
text-decoration: line-through;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 2px;
}
.prerequis-transformation__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-accent);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: var(--font-bold);
border-radius: 50%;
margin-top: 2px;
}
.prerequis-transformation__text {
flex: 1;
}
/* ===========================================
PAGE FORMATION LAYOUT V3
Sections pleine largeur + Sidebar sticky
=========================================== */
/*
* VARIABLES LAYOUT
* Centralisées pour faciliter les ajustements
*/
:root {
--sidebar-width: 340px;
--sidebar-gap: 48px;
--sidebar-top-offset: 120px; /* Plus d'espace haut quand sticky */
--container-narrow: 800px;
--section-padding-y: 64px;
--section-padding-y-full: 80px;
}
/* ============================================
ZONE AVEC SIDEBAR STICKY
Layout 2 colonnes : main (sections) + sidebar
============================================ */
.formation-with-sticky {
position: relative;
/* overflow géré au niveau html/body pour éviter scroll horizontal */
}
/* Layout principal 2 colonnes */
.formation-sticky-layout {
display: block;
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 0 var(--space-6);
}
@media (min-width: 1024px) {
.formation-sticky-layout {
display: grid;
grid-template-columns: 1fr var(--sidebar-width);
gap: var(--sidebar-gap);
align-items: start;
}
}
/* Tablet : sidebar plus étroite */
@media (min-width: 1024px) and (max-width: 1199px) {
:root {
--sidebar-width: 300px;
--sidebar-gap: 32px;
}
}
/* ============================================
COLONNE PRINCIPALE (SECTIONS)
============================================ */
.formation-sticky-main {
min-width: 0;
}
/* ============================================
SECTIONS PLEINE LARGEUR
Fond de bord à bord via pseudo-élément
============================================ */
.formation-section {
position: relative;
padding: var(--section-padding-y) 0;
/* PAS de overflow: hidden ici - casse les fonds pleine largeur (-100vw) */
}
/* Pseudo-élément pour le fond pleine largeur */
.formation-section::before {
content: '';
position: absolute;
/* Étend le fond bien au-delà du container pour couvrir tout le viewport */
/* On utilise des marges larges car le calcul 50vw ne fonctionne pas */
/* quand l'élément n'est pas centré (cas du grid avec sidebar) */
left: -100vw;
right: -100vw;
top: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
/* Fond Hero (dégradé rose) */
.formation-section--hero::before {
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 50%, #FECACA 100%);
}
/* Texture subtile sur le hero */
.formation-section--hero::after {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
@media (min-width: 768px) {
.formation-section--hero::after {
width: 700px;
height: 700px;
}
}
/* Fond blanc (par défaut) */
.formation-section--white::before {
background: #FFFFFF;
}
/* Fond gris */
.formation-section--gray::before {
background: #F3F4F6;
}
/* Hero : padding spécifique */
.formation-section--hero {
padding-top: var(--space-6);
padding-bottom: var(--space-10);
}
@media (min-width: 768px) {
.formation-section--hero {
padding-top: var(--space-8);
padding-bottom: var(--space-12);
}
}
/* Pas de padding top sur la première section si ce n'est pas le hero */
.formation-section:first-child:not(.formation-section--hero) {
padding-top: 0;
}
/* ============================================
SIDEBAR STICKY
La carte blanche qui suit le scroll
============================================ */
.formation-sticky-sidebar {
display: none;
}
@media (min-width: 1024px) {
.formation-sticky-sidebar {
display: block;
/* CRUCIAL: Étendre la sidebar sur toute la hauteur de la colonne */
/* Sans ça, la sidebar = hauteur du contenu = pas de place pour sticky */
align-self: stretch;
/* Décalage initial pour aligner avec le titre, pas le breadcrumb */
padding-top: 120px;
}
}
/* Carte sidebar sticky */
.formation-sticky-card {
position: sticky;
top: var(--sidebar-top-offset);
background: var(--color-bg, #FFFFFF);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
z-index: 10;
margin-bottom: var(--space-12); /* Coussin d'air avant zone basse */
}
/* CTA sidebar : passe en rouge apres scroll hors du hero */
.sidebar-cta-main {
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.formation-sticky-sidebar.is-scrolled .sidebar-cta-main {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}
.formation-sticky-sidebar.is-scrolled .sidebar-cta-main:hover {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
}
/* ============================================
ZONE BASSE - PLEINE LARGEUR, SANS SIDEBAR
============================================ */
.formation-zone-basse {
/* Pas de sidebar, sections pleine largeur */
}
/* Sections pleine largeur */
.formation-section-full {
width: 100%;
padding: var(--section-padding-y-full) 0;
background: #FFFFFF;
}
.formation-section-full--alt {
background: #F3F4F6;
}
.formation-section-full--cta {
background: #FEF2F2;
color: var(--color-text);
}
/* Container dans les sections pleine largeur */
.formation-section-full > .container {
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Container étroit pour centrer le contenu */
.container--narrow {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Titres centrés dans zone basse */
.formation-section-full .section-eyebrow,
.formation-section-full .section-title,
.formation-section-full .section-subtitle {
text-align: center;
}
.formation-section-full .section-eyebrow {
color: #B71C1C; /* Rouge foncé - ratio 7.2:1 WCAG AAA */
font-size: var(--text-xs);
font-weight: var(--font-bold); /* Plus gras pour meilleure lisibilité */
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.formation-section-full .section-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
.formation-section-full .section-title {
font-size: var(--text-3xl);
}
}
.formation-section-full .section-subtitle {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-10);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1023px) {
.formation-sticky-sidebar {
margin-top: var(--space-8);
}
.formation-sticky-card {
position: relative;
top: auto;
}
}
@media (max-width: 767px) {
:root {
--section-padding-y: 48px;
--section-padding-y-full: 48px;
}
.container--narrow {
max-width: 100%;
}
}
/* ============================================
LEGACY CLASSES (compatibilité)
============================================ */
/* Anciennes classes gardées pour compatibilité */
.formation-zone-haute {
/* Redirige vers le nouveau système */
}
.formation-layout {
display: block;
}
@media (min-width: 1024px) {
.formation-layout {
display: grid;
grid-template-columns: 1fr var(--sidebar-width);
gap: var(--sidebar-gap);
align-items: start;
}
}
.formation-layout--no-sidebar {
display: block;
}
@media (min-width: 1024px) {
.formation-layout--no-sidebar {
display: block;
max-width: none;
}
}
.formation-main {
min-width: 0;
}
.formation-main--full {
max-width: 100%;
}
.formation-sidebar {
display: none;
}
@media (min-width: 1024px) {
.formation-sidebar {
display: block;
}
}
.formation-sidebar__inner {
position: sticky;
top: var(--sidebar-top-offset);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6);
box-shadow: var(--shadow-md);
}
/* Section avec fond gris (legacy) */
.formation-section--bg {
position: relative;
}
.formation-section--bg::before {
content: '';
position: absolute;
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
top: 0;
bottom: 0;
background: var(--color-bg-alt);
z-index: -1;
}
/* ============================================
LEGACY COMPATIBILITY
Classes gardées pour pages existantes
============================================ */
.page-formation {
/* Container principal */
}
.page-formation__layout {
display: block;
}
@media (min-width: 1024px) {
.page-formation__layout {
display: grid;
grid-template-columns: 1fr var(--sidebar-width);
gap: var(--sidebar-gap);
align-items: start;
}
}
.page-formation__content {
min-width: 0;
}
.page-formation__sidebar {
display: none;
}
@media (min-width: 1024px) {
.page-formation__sidebar {
display: block;
position: sticky;
top: var(--sidebar-top-offset);
max-height: calc(100vh - 120px);
overflow-y: auto;
}
}
/* Objectifs section specific */
.page-formation__objectifs {
max-width: var(--container-md);
margin: var(--space-8) auto 0;
}
.page-formation__objectifs .list-check {
display: grid;
gap: var(--space-4);
}
@media (min-width: 768px) {
.page-formation__objectifs .list-check {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4) var(--space-8);
}
}
/* Supprime le padding top du hero formation dans ce contexte */
.page-formation .block-hero-formation {
padding-top: 0;
}
/* ===========================================
HERO COMPACT
Variante pour pages internes
=========================================== */
.block-hero--compact {
padding: var(--space-10) 0 var(--space-8);
background-color: var(--color-bg-alt);
}
@media (min-width: 768px) {
.block-hero--compact {
padding: var(--space-12) 0 var(--space-10);
}
}
.block-hero--compact .block-hero__title {
font-size: var(--text-3xl);
margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
.block-hero--compact .block-hero__title {
font-size: var(--text-4xl);
}
}
.block-hero__content--center {
text-align: center;
max-width: var(--container-md);
margin: 0 auto;
}
/* ===========================================
BLOCK FILTERS
Barre de filtres pour catalogue
=========================================== */
.block-filters {
padding: var(--space-6) 0;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 72px;
z-index: 90;
}
.block-filters__bar {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (min-width: 1024px) {
.block-filters__bar {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.block-filters__group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.block-filters__group .form-group {
margin-bottom: 0;
}
.block-filters__group .form-select {
min-width: 180px;
}
@media (max-width: 767px) {
.block-filters__group .form-select {
min-width: 100%;
flex: 1 1 calc(50% - var(--space-3));
}
}
.block-filters__group .form-group--checkbox {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
}
.block-filters__meta {
display: flex;
align-items: center;
gap: var(--space-4);
}
.block-filters__count {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.block-filters__count strong {
color: var(--color-text);
font-weight: var(--font-semibold);
}
/* Screen reader only label */
.form-label--sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===========================================
BLOCK CATALOGUE
Grille formations avec etat vide
=========================================== */
.block-catalogue {
padding: var(--space-10) 0 var(--space-16);
}
.block-catalogue__empty {
text-align: center;
padding: var(--space-16) var(--space-4);
}
.block-catalogue__empty svg {
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.block-catalogue__empty p {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
/* Pagination */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-10);
}
.pagination__prev,
.pagination__next {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-muted);
transition: all var(--transition-fast);
}
.pagination__prev:hover,
.pagination__next:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.pagination__current {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===========================================
PAGE CONTENT
Layout pour pages simples
=========================================== */
.page-content {
padding: var(--space-10) 0 var(--space-16);
}
.container--narrow {
max-width: var(--container-md);
}
/* Prose - typographie pour contenu libre */
.prose {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
}
.prose h2 {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-top: var(--space-10);
margin-bottom: var(--space-4);
}
.prose h3 {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.prose h4 {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.prose p {
margin-bottom: var(--space-4);
}
.prose ul,
.prose ol {
margin-bottom: var(--space-4);
padding-left: var(--space-6);
}
.prose li {
margin-bottom: var(--space-2);
}
.prose ul li {
list-style-type: disc;
}
.prose ol li {
list-style-type: decimal;
}
.prose a {
color: var(--color-primary);
text-decoration: underline;
}
.prose a:hover {
color: var(--color-primary-hover);
}
.prose strong {
font-weight: var(--font-semibold);
color: var(--color-text);
}
.prose blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-4);
margin: var(--space-6) 0;
font-style: italic;
color: var(--color-text-muted);
}
.prose table {
width: 100%;
border-collapse: collapse;
margin: var(--space-6) 0;
}
.prose th,
.prose td {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
text-align: left;
}
.prose th {
background-color: var(--color-bg-alt);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.prose hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
/* Date mise a jour */
.page-content__updated {
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===========================================
BLOCK CONTACT
Layout 2 colonnes formulaire + infos
=========================================== */
.block-contact {
padding: var(--space-10) 0 var(--space-16);
}
.block-contact__grid {
display: grid;
gap: var(--space-10);
}
@media (min-width: 1024px) {
.block-contact__grid {
grid-template-columns: 1fr 380px;
gap: var(--space-12);
}
}
/* Formulaire */
.block-contact__form-title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.block-contact__form-desc {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
/* Card formulaire */
.card--form {
background-color: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
@media (min-width: 768px) {
.card--form {
padding: var(--space-8);
}
}
/* Message succes */
.form-success {
text-align: center;
padding: var(--space-8) var(--space-4);
}
.form-success svg {
color: var(--color-success);
margin-bottom: var(--space-4);
}
.form-success h3 {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.form-success p {
color: var(--color-text-muted);
}
/* Note formulaire */
.form-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-4);
text-align: center;
}
/* HubSpot Form Container */
.contact-form__hubspot {
min-height: 400px;
}
/* HubSpot Form Styling Overrides */
.hs-form-frame input,
.hs-form-frame textarea,
.hs-form-frame select {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-family: var(--font-sans);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
background-color: var(--color-white);
}
.hs-form-frame input:focus,
.hs-form-frame textarea:focus,
.hs-form-frame select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.hs-form-frame label {
display: block;
font-weight: var(--font-medium);
margin-bottom: var(--space-2);
color: var(--color-text);
font-size: var(--text-sm);
}
.hs-form-frame .hs-form-field {
margin-bottom: var(--space-4);
}
.hs-form-frame .hs-button {
background: var(--color-primary);
color: white;
padding: var(--space-3) var(--space-6);
border: none;
border-radius: var(--radius-md);
font-weight: var(--font-semibold);
font-size: var(--text-base);
cursor: pointer;
transition: background var(--transition-fast);
width: 100%;
}
.hs-form-frame .hs-button:hover {
background: var(--color-primary-dark);
}
.hs-form-frame .hs-error-msgs {
color: var(--color-error);
font-size: var(--text-sm);
margin-top: var(--space-1);
}
.hs-form-frame .hs-richtext {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
/* Masquer le titre redondant du formulaire HubSpot */
.hs-form-frame h2,
.hs-form-frame .form-title,
.contact-form__hubspot > h2:first-child {
display: none;
}
/* Infos contact */
.block-contact__info {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.block-contact__card {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--color-bg-alt);
border-radius: var(--radius-lg);
}
.block-contact__card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary-light);
border-radius: var(--radius-md);
color: var(--color-primary);
flex-shrink: 0;
}
.block-contact__card-content {
flex: 1;
}
.block-contact__card-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-1);
}
.block-contact__card-link {
font-size: var(--text-base);
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-medium);
}
.block-contact__card-link:hover {
text-decoration: underline;
}
.block-contact__card-address {
font-size: var(--text-sm);
color: var(--color-text-body);
font-style: normal;
line-height: var(--leading-relaxed);
}
.block-contact__card-text {
font-size: var(--text-sm);
color: var(--color-text-body);
}
/* Social contact */
.block-contact__social {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.block-contact__social-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.block-contact__social-links {
display: flex;
gap: var(--space-3);
}
.block-contact__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
color: var(--color-text-muted);
transition: all var(--transition-fast);
}
.block-contact__social-link:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* ===========================================
SECTION LOCATION / ZONE D'INTERVENTION
=========================================== */
.block-location {
padding: var(--space-16) 0;
background: white;
}
.location-header {
text-align: center;
margin-bottom: var(--space-12);
}
.location-header h2 {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--color-text);
}
.location-grid {
display: grid;
gap: var(--space-12);
align-items: center;
}
@media (min-width: 1024px) {
.location-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
}
/* Carte de France */
.location-map {
position: relative;
max-width: 400px;
margin: 0 auto;
}
.france-map {
width: 100%;
height: auto;
}
.france-map__shape {
fill: var(--color-bg-alt);
stroke: var(--color-neutral-300);
stroke-width: 2;
}
.france-map__sea {
stroke: var(--color-primary-light);
}
.france-map__connections line {
stroke: var(--color-primary);
opacity: 0.3;
}
.france-map__marker-pulse {
fill: var(--color-primary);
opacity: 0.2;
animation: pulse-location 2s ease-in-out infinite;
}
.france-map__marker-dot {
fill: var(--color-primary);
}
.france-map__marker-label {
font-size: 14px;
font-weight: 600;
fill: var(--color-text);
}
@keyframes pulse-location {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.3); opacity: 0.1; }
}
.location-map__badge {
position: absolute;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
background: white;
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-medium);
box-shadow: var(--shadow-md);
}
/* Modes de formation */
.location-modes {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.location-mode {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
border: 1px solid transparent;
transition: all var(--transition-fast);
}
.location-mode:hover {
border-color: var(--color-neutral-200);
box-shadow: var(--shadow-sm);
}
.location-mode--highlight {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.1) 100%);
border-color: rgba(239, 68, 68, 0.2);
}
.location-mode__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.location-mode__icon--local {
background: var(--color-primary-light);
color: var(--color-primary);
}
.location-mode__icon--travel {
background: #E0F2FE;
color: #0284C7;
}
.location-mode__icon--visio {
background: #DCFCE7;
color: #16A34A;
}
.location-mode__content h3 {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-1);
color: var(--color-text);
}
.location-mode__location {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.location-mode__detail {
font-size: var(--text-sm);
color: var(--color-text-body);
}
.badge--hot {
background: var(--color-primary);
color: white;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
}
/* CTA alt variant (fond clair = texte sombre) */
.block-cta--alt {
background-color: var(--color-bg-alt);
}
.block-cta--alt .block-cta__title {
color: var(--color-text);
}
.block-cta--alt .block-cta__text {
color: var(--color-text-body);
}
/* ===========================================
PAGE CONTACT — REFONTE DUAL LAYOUT
=========================================== */
/* Section principale */
.block-contact-dual {
padding: var(--space-12) 0 var(--space-16);
background: linear-gradient(180deg,
rgba(254, 242, 242, 0.6) 0%,
rgba(254, 242, 242, 0.8) 40%,
rgba(255, 255, 255, 1) 100%
);
min-height: calc(100vh - 200px);
}
/* Grid deux colonnes */
.contact-dual {
display: grid;
gap: var(--space-8);
align-items: start;
}
@media (min-width: 1024px) {
.contact-dual {
grid-template-columns: 1fr auto 1fr;
gap: var(--space-12);
}
}
/* Header commun */
.contact-dual__header {
margin-bottom: var(--space-6);
}
.contact-dual__header h1,
.contact-dual__header h2 {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
margin-bottom: var(--space-2);
color: var(--color-text);
}
.contact-dual__header p {
color: var(--color-text-muted);
font-size: var(--text-base);
}
/* Colonne Formulaire */
.contact-dual__form {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-md);
}
.contact-form-wrapper {
min-height: 350px;
}
/* Masquer le branding HubSpot gratuit */
.hs-form-frame a[href*="hubspot"],
.hs-form-frame .hs-form__virality-link,
.hs-form-frame div:has(> a[href*="hubspot"]),
.hs-form-frame [class*="virality"],
.hs-form-frame footer,
.hs-form-frame .legal-consent-container + div {
display: none !important;
}
/* Styles formulaire HubSpot */
.hs-form-frame input[type="text"],
.hs-form-frame input[type="email"],
.hs-form-frame input[type="tel"],
.hs-form-frame textarea,
.hs-form-frame select {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-family: inherit;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hs-form-frame input:focus,
.hs-form-frame textarea:focus,
.hs-form-frame select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.hs-form-frame label {
display: block;
font-weight: var(--font-medium);
font-size: var(--text-sm);
margin-bottom: var(--space-2);
color: var(--color-text);
}
.hs-form-frame .hs-button,
.hs-form-frame input[type="submit"] {
width: 100%;
background: var(--color-primary);
color: white;
padding: var(--space-4) var(--space-6);
border: none;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--font-semibold);
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.hs-form-frame .hs-button:hover,
.hs-form-frame input[type="submit"]:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
/* Séparateur vertical */
.contact-dual__divider {
display: none;
}
@media (min-width: 1024px) {
.contact-dual__divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.contact-dual__divider::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: linear-gradient(
to bottom,
transparent,
var(--color-neutral-300) 20%,
var(--color-neutral-300) 80%,
transparent
);
}
.contact-dual__divider span {
background: rgba(254, 242, 242, 0.9);
padding: var(--space-3) var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
position: relative;
z-index: 1;
}
}
/* Séparateur mobile (horizontal) */
@media (max-width: 1023px) {
.contact-dual__divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin: var(--space-4) 0;
}
.contact-dual__divider::before,
.contact-dual__divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-neutral-300);
}
.contact-dual__divider span {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
}
/* Colonne Appel */
.contact-dual__call {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Card avatar + CTA */
.contact-call-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.contact-call-card {
flex-direction: row;
text-align: left;
gap: var(--space-6);
}
}
.contact-call-card__avatar {
flex-shrink: 0;
}
.contact-call-card__avatar img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--color-primary-light);
box-shadow: var(--shadow-md);
}
/* Placeholder avatar */
.contact-call-card__avatar-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: white;
border: 4px solid white;
box-shadow: var(--shadow-md);
}
.contact-call-card__intro {
font-size: var(--text-base);
line-height: 1.6;
margin-bottom: var(--space-4);
color: var(--color-text-body);
}
.contact-call-card__intro strong {
color: var(--color-primary);
}
.contact-call-card__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
animation: subtle-pulse 3s ease-in-out infinite;
}
@keyframes subtle-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3); }
50% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5); }
}
/* Séparateur "ou appelez" */
.contact-call-separator {
display: flex;
align-items: center;
gap: var(--space-4);
}
.contact-call-separator::before,
.contact-call-separator::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-neutral-200);
}
.contact-call-separator span {
font-size: var(--text-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
/* Téléphone direct */
.contact-call-phone {
text-align: center;
padding: var(--space-4);
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
}
.contact-call-phone__number {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.contact-call-phone__number:hover {
color: var(--color-primary-dark);
}
.contact-call-phone__hours {
display: block;
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
/* Modes mini (sur place / chez vous / visio) */
.contact-modes-mini {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid var(--color-neutral-200);
}
.contact-modes-mini__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.contact-modes-mini__item svg {
color: var(--color-primary);
flex-shrink: 0;
}
.contact-modes-mini__item em {
font-style: normal;
opacity: 0.7;
}
.contact-modes-mini__item--highlight {
color: var(--color-text);
font-weight: var(--font-medium);
}
.contact-modes-mini__item--highlight .badge {
margin-left: auto;
}
/* ===========================================
BLOC CONFIANCE E-E-A-T
=========================================== */
.contact-trust {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--color-neutral-200);
}
.contact-trust h4 {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.contact-trust__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.contact-trust__item {
font-size: var(--text-xs);
}
.contact-trust__label {
display: block;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.contact-trust__value {
color: var(--color-text);
font-weight: var(--font-medium);
}
/* Stats en ligne */
.contact-trust__stats {
display: flex;
gap: var(--space-4);
padding: var(--space-3);
background: var(--color-bg-alt);
border-radius: var(--radius-md);
}
.contact-trust__stat {
flex: 1;
text-align: center;
}
.contact-trust__stat strong {
display: block;
font-size: var(--text-lg);
color: var(--color-primary);
font-weight: var(--font-bold);
}
.contact-trust__stat span {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
@media (max-width: 640px) {
.contact-trust__grid {
grid-template-columns: 1fr;
}
.contact-trust__stats {
flex-direction: column;
gap: var(--space-2);
}
}
/* Badge petit */
.badge--small {
font-size: var(--text-xs);
padding: 2px var(--space-2);
background: var(--color-primary);
color: white;
border-radius: var(--radius-sm);
}
/* ===========================================
RÉASSURANCE INLINE
=========================================== */
.block-reassurance-inline {
padding: var(--space-6) 0;
background: white;
border-top: 1px solid var(--color-neutral-200);
}
.reassurance-inline {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-6);
}
@media (min-width: 768px) {
.reassurance-inline {
gap: var(--space-10);
}
}
.reassurance-inline li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
}
.reassurance-inline svg {
color: var(--color-success);
flex-shrink: 0;
}
.reassurance-inline__badge {
display: flex;
gap: var(--space-2);
}
.badge--outline {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
}
/* Responsive Contact Dual */
@media (max-width: 1023px) {
.block-contact-dual {
padding: var(--space-8) 0 var(--space-12);
}
.contact-dual__form,
.contact-dual__call {
padding: var(--space-6);
}
.contact-call-card__avatar-placeholder {
width: 100px;
height: 100px;
font-size: var(--text-2xl);
}
}
@media (max-width: 640px) {
.contact-dual__header h1,
.contact-dual__header h2 {
font-size: var(--text-xl);
}
.contact-call-phone__number {
font-size: var(--text-lg);
}
.reassurance-inline {
flex-direction: column;
gap: var(--space-3);
}
}
/* ===========================================
FORMATIONS HERO
=========================================== */
.formations-hero {
padding: var(--space-8) 0 var(--space-6);
text-align: center;
background: linear-gradient(180deg,
rgba(254, 242, 242, 0.6) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.formations-hero__title {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-3);
line-height: 1.2;
}
@media (min-width: 768px) {
.formations-hero__title {
font-size: var(--text-4xl);
}
}
.formations-hero__subtitle {
font-size: var(--text-lg);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.formations-hero__description {
font-size: var(--text-base);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
/* ===========================================
FORMATIONS TOGGLE (Par métier / Catalogue / Par outil)
Effet slider avec indicateur glissant
=========================================== */
.formations-toggle {
display: inline-flex;
align-items: center;
background-color: var(--color-bg-alt);
border-radius: var(--radius-full);
padding: var(--space-1);
gap: 0;
position: relative;
}
/* Indicateur glissant (slider) */
.formations-toggle__slider {
position: absolute;
top: var(--space-1);
left: var(--space-1);
height: calc(100% - var(--space-2));
background-color: var(--color-primary);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
pointer-events: none;
}
.formations-toggle__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-muted);
background-color: transparent;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: color var(--transition-fast);
position: relative;
z-index: 1;
}
.formations-toggle__btn:hover {
color: var(--color-text);
}
.formations-toggle__btn.is-active {
color: var(--color-white);
}
.formations-toggle__btn svg {
flex-shrink: 0;
}
/* ===========================================
FILTRES FORMATIONS - Section principale
=========================================== */
.formations-filters {
padding: var(--space-6) 0;
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
}
.formations-filters__bar {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (min-width: 768px) {
.formations-filters__bar {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
@media (min-width: 1024px) {
.formations-filters__bar {
flex-wrap: nowrap;
}
}
.formations-filters__search {
position: relative;
flex: 1;
min-width: 200px;
}
.formations-filters__search svg {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
pointer-events: none;
}
.formations-filters__input {
width: 100%;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
font-size: var(--text-base);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.formations-filters__input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}
.formations-filters__dropdowns {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
@media (min-width: 768px) {
.formations-filters__dropdowns {
flex-wrap: nowrap;
}
}
.formations-filters__select {
padding: var(--space-3) var(--space-8) var(--space-3) var(--space-3);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-body);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
appearance: none;
cursor: pointer;
transition: border-color var(--transition-fast);
min-width: 160px;
}
.formations-filters__select:focus {
outline: none;
border-color: var(--color-primary);
}
.formations-filters__count {
font-size: var(--text-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
.formations-filters__count span {
font-weight: var(--font-bold);
color: var(--color-primary);
}
.formations-filters__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
}
.formations-filters__tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-body);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
}
.formations-filters__tag:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.formations-filters__tag.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
/* ===========================================
FILTRES FORMATIONS - Labels
=========================================== */
.formations-filters__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.formations-filters__label--desktop {
display: none;
}
@media (min-width: 1024px) {
.formations-filters__label--desktop {
display: block;
margin-bottom: 0;
margin-right: var(--space-4);
white-space: nowrap;
}
}
/* ===========================================
SECTION FILTRES METIER
=========================================== */
.formations-filters-metier {
padding: var(--space-6) 0;
background: white;
border-bottom: 1px solid var(--color-neutral-200);
}
.formations-filters-metier.is-hidden,
.block-metiers-grid.is-hidden,
.block-metiers-index.is-hidden,
.block-outils-index.is-hidden,
.formations-filters-thematiques.is-hidden,
.formations-grid-section.is-hidden {
display: none;
}
.formations-filters-metier__grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
}
/* ===========================================
BARRE STICKY THEMATIQUES
=========================================== */
.formations-filters-thematiques {
position: sticky;
top: 70px;
z-index: 90;
background: white;
border-bottom: 1px solid var(--color-neutral-200);
padding: var(--space-4) 0;
margin-top: var(--space-4);
}
.formations-filters-thematiques__wrapper {
display: flex;
align-items: center;
}
.formations-filters-thematiques__scroll {
display: flex;
gap: var(--space-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
margin-right: -16px;
padding-right: 16px;
}
.formations-filters-thematiques__scroll::-webkit-scrollbar {
display: none;
}
/* Fade indicator on mobile */
@media (max-width: 1023px) {
.formations-filters-thematiques__wrapper {
position: relative;
}
.formations-filters-thematiques__wrapper::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
background: linear-gradient(90deg, transparent, white);
pointer-events: none;
}
}
/* Desktop: flex-wrap */
@media (min-width: 1024px) {
.formations-filters-thematiques__scroll {
flex-wrap: wrap;
overflow-x: visible;
margin-right: 0;
padding-right: 0;
}
}
/* ===========================================
FILTER PILLS
=========================================== */
.filter-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-full);
background: white;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.filter-pill:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.filter-pill.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.filter-pill.is-active:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.filter-pill svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Counter in thematique pills */
.filter-pill__count {
font-size: var(--text-xs);
opacity: 0.8;
margin-left: var(--space-1);
}
.filter-pill.is-active .filter-pill__count {
opacity: 1;
}
/* Disabled pill (0 results) */
.filter-pill.is-disabled {
opacity: 0.4;
pointer-events: none;
}
/* ===========================================
FORMATIONS GRID SECTION
=========================================== */
.formations-grid-section {
padding: var(--space-8) 0 var(--space-12);
}
.formations-grid__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-6);
}
.formations-count {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.formations-count strong {
color: var(--color-text);
font-weight: var(--font-semibold);
}
/* View toggle (grid/list) */
.formations-view-toggle {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1);
background: var(--color-neutral-100);
border-radius: var(--radius-lg);
}
.view-btn {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
border: none;
background: transparent;
border-radius: var(--radius-md);
color: var(--color-text-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.view-btn:hover {
color: var(--color-text);
}
.view-btn.is-active {
background: white;
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.view-btn svg {
width: 18px;
height: 18px;
}
/* Formations grid */
.formations-grid {
padding: var(--space-8) 0 var(--space-16);
}
.formations-grid__list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 640px) {
.formations-grid__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.formations-grid__list {
grid-template-columns: repeat(3, 1fr);
}
}
/* List view */
.formations-grid.is-list {
grid-template-columns: 1fr;
}
/* Empty state */
.formations-empty {
grid-column: 1 / -1;
text-align: center;
padding: var(--space-12) var(--space-6);
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
}
.formations-empty svg {
width: 64px;
height: 64px;
margin-bottom: var(--space-4);
opacity: 0.5;
color: var(--color-text-muted);
}
.formations-empty p {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
/* ===========================================
FORMATION CARD
=========================================== */
.formation-card {
display: flex;
flex-direction: column;
background: white;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
transition: all var(--transition-fast);
}
.formation-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.formation-card.is-hidden {
display: none;
}
.formation-card__badge,
.formation-card__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.formation-card__badge .badge,
.formation-card__badges .badge {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
}
/* Badge catégorie */
.badge--category {
background: var(--color-primary-light);
color: var(--color-primary);
}
/* Badge niveau */
.badge--niveau {
font-weight: var(--font-medium);
}
.badge--niveau-debutant {
background: #D1FAE5;
color: #065F46;
}
.badge--niveau-intermediaire {
background: #FEF3C7;
color: #92400E;
}
.badge--niveau-avance {
background: #FEE2E2;
color: #991B1B;
}
/* Metier tags container (after excerpt, before meta) */
.formation-card__metiers {
display: none; /* Hidden by default (catalogue view) */
overflow-x: auto;
white-space: nowrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
padding-bottom: var(--space-1);
position: relative;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.formation-card__metiers::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* Fade indicator for scroll overflow */
.formation-card__metiers.has-overflow::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: var(--space-1);
width: 32px;
background: linear-gradient(to right, transparent, var(--color-background));
pointer-events: none;
}
/* Metier tag - discreet style */
.metier-tag {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-muted);
background: var(--color-gray-100);
border-radius: var(--radius-full);
white-space: nowrap;
flex-shrink: 0;
}
/* Vue "Par métier" : masquer niveau, afficher métiers */
.view-metier .badge--niveau {
display: none;
}
.view-metier .formation-card__metiers {
display: flex;
}
.formation-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-2);
line-height: 1.3;
}
.formation-card__title a {
color: inherit;
text-decoration: none;
}
.formation-card__title a:hover {
color: var(--color-primary);
}
.formation-card__excerpt {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: var(--space-4);
flex-grow: 1;
}
.formation-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.formation-card__meta span {
display: flex;
align-items: center;
gap: var(--space-1);
}
.formation-card__meta svg {
width: 14px;
height: 14px;
}
.formation-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
transition: gap var(--transition-fast);
}
.formation-card__link:hover {
gap: var(--space-3);
}
.formation-card__link svg {
width: 16px;
height: 16px;
}
/* Animation for cards when filtering */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.formation-card.is-visible {
animation: fadeInUp 0.3s ease forwards;
}
/* ===========================================
BREADCRUMB - Style Lovable
=========================================== */
.breadcrumb {
padding: var(--space-3) 0;
background-color: transparent;
border-bottom: none;
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb__item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.breadcrumb__item a {
display: flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb__item a:hover {
color: var(--color-primary);
}
.breadcrumb__item a svg {
width: 1em;
height: 1em;
}
.breadcrumb__item svg {
width: 16px;
height: 16px;
color: var(--color-neutral-400);
}
.breadcrumb__item--current span {
color: var(--color-text);
font-weight: var(--font-medium);
}
.breadcrumb--center {
display: flex;
justify-content: center;
}
.breadcrumb--center .breadcrumb__list {
justify-content: center;
}
/* ===========================================
BENEFITS BLOCK
Bloc benefices pour pages categories
=========================================== */
.block-benefits {
background-color: var(--color-white);
padding: var(--space-8) 0;
border-bottom: 1px solid var(--color-border);
}
.block-benefits__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
max-width: 1000px;
margin: 0 auto;
}
.block-benefits__item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--color-bg-alt);
border-radius: var(--radius-lg);
}
.block-benefits__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, #DC2626 100%);
border-radius: var(--radius-md);
color: var(--color-white);
}
.block-benefits__icon svg {
width: 24px;
height: 24px;
}
.block-benefits__text {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--color-text);
line-height: var(--leading-relaxed);
}
/* ===========================================
CATALOGUE ENHANCEMENTS
Titre et footer pour pages categories
=========================================== */
.block-catalogue__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
text-align: center;
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-catalogue__title {
font-size: var(--text-3xl);
}
}
.block-catalogue__footer {
text-align: center;
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
/* ===========================================
CATEGORY TABS - Horizontal scrollable
=========================================== */
.category-tabs {
position: sticky;
top: 72px;
z-index: 40;
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-6);
padding: var(--space-3) 0;
}
.category-tabs__inner {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: 0 var(--space-4);
margin: 0 calc(-1 * var(--space-4));
scrollbar-width: none;
-ms-overflow-style: none;
}
.category-tabs__inner::-webkit-scrollbar {
display: none;
}
.category-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-full);
white-space: nowrap;
cursor: pointer;
transition: all var(--transition-fast);
}
.category-tab:hover {
color: var(--color-text);
background: var(--color-neutral-50);
}
.category-tab.is-active {
color: var(--color-primary);
background: var(--color-primary-light);
border-color: var(--color-primary);
}
.category-tab__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-1);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
background: var(--color-neutral-100);
border-radius: var(--radius-full);
}
.category-tab.is-active .category-tab__count {
background: var(--color-primary);
color: var(--color-white);
}
/* Onglet vide (aucune formation dans ce filtre) */
.category-tab.is-empty {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.category-tab.is-empty:hover {
background: transparent;
color: var(--color-text-light);
}
/* ===========================================
VIEW TOGGLE - Grid/List
=========================================== */
.view-toggle {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1);
background: var(--color-neutral-100);
border-radius: var(--radius-lg);
}
.view-toggle__btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--color-text-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.view-toggle__btn:hover {
color: var(--color-text);
}
.view-toggle__btn.is-active {
background: var(--color-white);
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.view-toggle__btn svg {
width: 18px;
height: 18px;
}
/* Toolbar with count + toggle */
.block-catalogue__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
flex-wrap: wrap;
gap: var(--space-3);
}
.block-catalogue__toolbar .block-catalogue__count {
margin-bottom: 0;
}
/* ===========================================
LIST VIEW - Compact cards
=========================================== */
.block-catalogue__grid.is-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.block-catalogue__grid.is-list .card-formation {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: center;
gap: var(--space-2) var(--space-4);
padding: var(--space-4);
}
@media (min-width: 768px) {
.block-catalogue__grid.is-list .card-formation {
grid-template-columns: auto 1fr auto auto;
grid-template-rows: 1fr;
}
}
.block-catalogue__grid.is-list .card-formation__badge {
margin-bottom: 0;
order: 1;
}
@media (min-width: 768px) {
.block-catalogue__grid.is-list .card-formation__badge {
order: 0;
}
}
.block-catalogue__grid.is-list .card-formation__title {
font-size: var(--text-base);
margin: 0;
grid-column: 1 / -1;
order: 0;
}
@media (min-width: 768px) {
.block-catalogue__grid.is-list .card-formation__title {
grid-column: auto;
order: 1;
}
}
.block-catalogue__grid.is-list .card-formation__desc {
display: none;
}
.block-catalogue__grid.is-list .card-formation__meta {
margin: 0;
order: 2;
}
.block-catalogue__grid.is-list .card-formation__actions {
margin: 0;
padding: 0;
border: none;
order: 3;
}
/* ===========================================
LOAD MORE / PAGINATION
=========================================== */
.load-more {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-8);
padding-top: var(--space-6);
}
.load-more__btn {
min-width: 200px;
}
.load-more__info {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.load-more__progress {
width: 200px;
height: 4px;
background: var(--color-neutral-100);
border-radius: var(--radius-full);
overflow: hidden;
}
.load-more__progress-bar {
height: 100%;
background: var(--color-primary);
transition: width var(--transition-base);
}
/* ===========================================
BLOCK INTRO - Photo + Content
=========================================== */
.block-intro {
padding: var(--space-16) 0;
}
.block-intro__grid {
display: grid;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 768px) {
.block-intro__grid {
grid-template-columns: 300px 1fr;
gap: var(--space-12);
}
}
.block-intro__image {
text-align: center;
}
.block-intro__image img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--shadow-lg);
border: 4px solid var(--color-white);
}
@media (min-width: 768px) {
.block-intro__image img {
width: 280px;
height: 280px;
}
}
.block-intro__content h2 {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
margin: var(--space-3) 0 var(--space-4);
}
.block-intro__lead {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.block-intro__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-6);
}
.block-intro__badges .badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* ===========================================
BLOCK TIMELINE
=========================================== */
.block-timeline {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.timeline {
max-width: 700px;
margin: var(--space-10) auto 0;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-border);
}
@media (min-width: 768px) {
.timeline::before {
left: 50%;
transform: translateX(-50%);
}
}
.timeline__item {
position: relative;
padding-left: 60px;
padding-bottom: var(--space-8);
}
@media (min-width: 768px) {
.timeline__item {
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: var(--space-4);
text-align: right;
}
.timeline__item:nth-child(even) {
direction: rtl;
}
.timeline__item:nth-child(even) .timeline__content {
direction: ltr;
text-align: left;
}
}
.timeline__year {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background: var(--color-primary);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-weight: var(--font-bold);
z-index: 1;
}
@media (min-width: 768px) {
.timeline__year {
position: static;
grid-column: 2;
margin: 0 auto;
}
}
.timeline__content h3 {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-2);
}
.timeline__content p {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
@media (min-width: 768px) {
.timeline__content {
text-align: left;
}
.timeline__item:nth-child(even) .timeline__content {
grid-column: 3;
}
}
/* ===========================================
BLOCK DUO
=========================================== */
.block-duo {
padding: var(--space-16) 0;
}
.block-duo__grid {
display: grid;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 768px) {
.block-duo__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
}
.block-duo__content h2 {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
margin: var(--space-3) 0 var(--space-4);
}
.block-duo__lead {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.block-duo__list {
list-style: none;
padding: 0;
margin: var(--space-6) 0;
}
.block-duo__list li {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
}
.block-duo__images {
display: flex;
gap: var(--space-4);
justify-content: center;
}
.block-duo__img {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.block-duo__img {
width: 180px;
height: 180px;
}
}
/* ===========================================
BLOCK STATS
=========================================== */
.block-stats {
padding: var(--space-16) 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
}
.block-stats .section-title {
color: var(--color-white);
}
.block-stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-top: var(--space-10);
}
@media (min-width: 768px) {
.block-stats__grid {
grid-template-columns: repeat(5, 1fr);
}
}
.stat-card {
text-align: center;
padding: var(--space-6);
}
.stat-card__value {
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
line-height: 1;
margin-bottom: var(--space-2);
}
.stat-card__label {
font-size: var(--text-sm);
opacity: 0.9;
}
/* ===========================================
BLOCK CLIENTS
=========================================== */
.block-clients {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-clients__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
margin-top: var(--space-10);
}
@media (min-width: 768px) {
.block-clients__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.client-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-6);
background: var(--color-white);
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.client-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.client-card svg {
color: var(--color-primary);
}
.client-card span {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
}
/* ===========================================
BLOCK PHILOSOPHY
=========================================== */
.block-philosophy {
padding: var(--space-16) 0;
}
.block-philosophy__content {
display: grid;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 768px) {
.block-philosophy__content {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
}
.block-philosophy__text h2 {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
margin-bottom: var(--space-4);
}
.ratio-block {
display: flex;
gap: var(--space-4);
justify-content: center;
}
.ratio-block__item {
width: 140px;
height: 140px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.ratio-block__item--practice {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
}
.ratio-block__item--theory {
background: var(--color-neutral-100);
color: var(--color-text);
}
.ratio-block__value {
font-size: var(--text-3xl);
font-weight: var(--font-extrabold);
line-height: 1;
}
.ratio-block__label {
font-size: var(--text-sm);
margin-top: var(--space-1);
}
/* ===========================================
BLOCK METHOD
=========================================== */
.block-method {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-method__grid {
display: grid;
gap: var(--space-6);
margin-top: var(--space-10);
}
@media (min-width: 768px) {
.block-method__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.method-card {
background: var(--color-white);
padding: var(--space-8);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.method-card__number {
width: 48px;
height: 48px;
background: var(--color-primary);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
font-weight: var(--font-bold);
margin-bottom: var(--space-4);
}
.method-card__title {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
margin-bottom: var(--space-3);
}
.method-card__desc {
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.method-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.method-card__list li {
position: relative;
padding-left: var(--space-5);
padding-top: var(--space-2);
padding-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.method-card__list li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--color-primary);
border-radius: 50%;
}
.method-card__highlight {
margin-top: var(--space-4);
padding: var(--space-3);
background: var(--color-primary-light);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary-dark);
}
/* ===========================================
BLOCK PILLARS
=========================================== */
.block-pillars {
padding: var(--space-16) 0;
}
.block-pillars__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-top: var(--space-10);
}
@media (min-width: 768px) {
.block-pillars__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.pillar-card {
text-align: center;
padding: var(--space-6);
}
.pillar-card__icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
background: var(--color-primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.pillar-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-2);
}
.pillar-card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===========================================
BLOCK COMPARISON
=========================================== */
.block-comparison {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-comparison__grid {
display: grid;
gap: var(--space-6);
margin-top: var(--space-10);
}
@media (min-width: 768px) {
.block-comparison__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.comparison-card {
padding: var(--space-8);
border-radius: var(--radius-xl);
}
.comparison-card--negative {
background: var(--color-white);
border: 1px solid var(--color-border);
}
.comparison-card--positive {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
}
.comparison-card__title {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-xl);
font-weight: var(--font-semibold);
margin-bottom: var(--space-4);
}
.comparison-card--negative .comparison-card__title svg {
color: var(--color-error);
}
.comparison-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.comparison-card__list li {
position: relative;
padding-left: var(--space-6);
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.comparison-card--negative .comparison-card__list li::before {
content: '\2717';
position: absolute;
left: 0;
color: var(--color-error);
font-weight: var(--font-bold);
}
.comparison-card--positive .comparison-card__list li::before {
content: '\2713';
position: absolute;
left: 0;
font-weight: var(--font-bold);
}
/* ===========================================
BLOCK PROMISE
=========================================== */
.block-promise {
padding: var(--space-16) 0;
}
.block-promise__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.block-promise__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
margin-bottom: var(--space-6);
}
.block-promise__quote {
font-size: var(--text-xl);
font-style: italic;
color: var(--color-text-muted);
padding: var(--space-8);
background: var(--color-neutral-50);
border-radius: var(--radius-xl);
border-left: 4px solid var(--color-primary);
margin: 0;
}
/* ===========================================
BLOCK FORMAT
=========================================== */
.block-format {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-format__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-top: var(--space-10);
}
@media (min-width: 768px) {
.block-format__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.format-card {
background: var(--color-white);
padding: var(--space-6);
border-radius: var(--radius-xl);
text-align: center;
box-shadow: var(--shadow-sm);
}
.format-card__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-4);
background: var(--color-primary-light);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.format-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-2);
}
.format-card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===========================================
SECTION TITLES
=========================================== */
.section-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
text-align: center;
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.section-title {
font-size: var(--text-3xl);
}
}
.section-subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
text-align: center;
}
/* ===========================================
PAGE NAVIGATION (Sticky Sommaire)
=========================================== */
.page-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--color-white);
box-shadow: var(--shadow-md);
z-index: 100;
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.page-nav.is-visible {
transform: translateY(0);
}
.page-nav .container {
padding: var(--space-3) var(--space-4);
}
.page-nav__list {
display: flex;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.page-nav__list::-webkit-scrollbar {
display: none;
}
.page-nav__link {
display: block;
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-muted);
text-decoration: none;
white-space: nowrap;
border-radius: var(--radius-full);
transition: all 0.2s ease;
}
.page-nav__link:hover {
color: var(--color-primary);
background: var(--color-primary-light);
}
.page-nav__link.is-active {
color: var(--color-white);
background: var(--color-primary);
}
@media (min-width: 768px) {
.page-nav .container {
padding: var(--space-4);
}
.page-nav__list {
justify-content: center;
gap: var(--space-4);
}
.page-nav__link {
padding: var(--space-3) var(--space-6);
font-size: var(--text-base);
}
}
/* ===========================================
FORMATION HERO V2 - Formateur intégré (pas carte)
=========================================== */
.formation-hero__formateur {
display: flex;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-5);
margin-top: var(--space-5);
}
.formation-hero__formateur-photo {
width: 64px;
height: 64px;
border-radius: var(--radius-full);
object-fit: cover;
border: 3px solid var(--color-white);
box-shadow: var(--shadow-md);
flex-shrink: 0;
}
.formation-hero__formateur-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.formation-hero__formateur-label {
font-size: var(--text-xs);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--font-semibold);
}
.formation-hero__formateur-name {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.formation-hero__formateur-title {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.formation-hero__formateur-bio {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-2);
line-height: 1.5;
}
@media (min-width: 768px) {
.formation-hero__formateur {
gap: var(--space-5);
}
.formation-hero__formateur-photo {
width: 72px;
height: 72px;
}
.formation-hero__formateur-name {
font-size: var(--text-lg);
}
}
/* ===========================================
FORMATION HERO V2 - Stats intégrés
Chiffres clés dans le hero sur le dégradé
=========================================== */
.formation-hero__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 768px) {
.formation-hero__stats {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
}
.formation-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-4);
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-lg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.formation-hero__stat-icon {
width: 24px;
height: 24px;
color: var(--color-primary);
margin-bottom: var(--space-2);
}
.formation-hero__stat-icon svg {
width: 100%;
height: 100%;
}
.formation-hero__stat-number {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-text);
line-height: 1;
}
@media (min-width: 768px) {
.formation-hero__stat-number {
font-size: var(--text-xl);
}
}
.formation-hero__stat-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-top: var(--space-1);
}
/* ===========================================
FORMATION HERO V2 - WRAPPER PLEINE LARGEUR
Le fond dégradé va de bord à bord de l'écran
=========================================== */
.formation-hero-wrapper {
background: linear-gradient(135deg, #FEF3F2 0%, #FEE2E2 50%, #FECACA 100%);
position: relative;
overflow: hidden;
padding: var(--space-4) 0 var(--space-8);
}
.formation-hero-wrapper::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
@media (min-width: 768px) {
.formation-hero-wrapper {
padding: var(--space-6) 0 var(--space-10);
}
.formation-hero-wrapper::before {
width: 700px;
height: 700px;
}
}
@media (min-width: 1024px) {
.formation-hero-wrapper {
padding: var(--space-8) 0 var(--space-12);
}
}
/* Breadcrumb dans le Hero */
.formation-hero__breadcrumb {
margin-bottom: var(--space-4);
}
.formation-hero__breadcrumb .breadcrumb__list {
padding: 0;
margin: 0;
}
.formation-hero__breadcrumb .breadcrumb__link {
color: var(--color-text-muted);
}
.formation-hero__breadcrumb .breadcrumb__link:hover {
color: var(--color-primary);
}
/* Grid layout Hero : Main + Sidebar */
.formation-hero__grid {
display: block;
}
@media (min-width: 1024px) {
.formation-hero__grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--space-10);
align-items: start;
}
}
/* Main content du Hero (gauche) */
.formation-hero__main {
max-width: 700px;
}
/* Sidebar Hero (carte blanche) - SEULE carte visible */
.formation-hero__sidebar {
display: none;
}
@media (min-width: 1024px) {
.formation-hero__sidebar {
display: block;
position: sticky;
top: 100px;
background: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: var(--space-6);
}
}
/* Stats Bar pleine largeur en bas du Hero */
.formation-hero__stats-bar {
margin-top: var(--space-8);
}
@media (min-width: 768px) {
.formation-hero__stats-bar {
margin-top: var(--space-10);
}
}
/* ===========================================
HERO FORMATION - Tags Links (SEO)
=========================================== */
.block-hero-formation__tags-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
.block-hero-formation__tags-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-right: var(--space-1);
}
.pill--link {
display: inline-block;
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text);
background: var(--color-white);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-full);
text-decoration: none;
transition: all 0.2s ease;
}
.pill--link:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
@media (min-width: 768px) {
.block-hero-formation__tags-links {
gap: var(--space-3);
margin-top: var(--space-6);
}
.pill--link {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
}
/* ===========================================
SIDEBAR FORMATION - Phone Section
=========================================== */
.block-sidebar-formation__phone {
padding: var(--space-4);
background: var(--color-neutral-50);
border-radius: var(--radius-lg);
text-align: center;
margin-top: var(--space-4);
}
.block-sidebar-formation__phone-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0 0 var(--space-2);
}
.block-sidebar-formation__phone-number {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.block-sidebar-formation__phone-number:hover {
color: var(--color-primary-dark);
}
.block-sidebar-formation__phone-number svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.block-sidebar-formation__phone-reassurance {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: var(--space-2) 0 0;
}
/* ===========================================
BLOCK FINANCEMENT
=========================================== */
.block-financement {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-financement__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-financement__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.block-financement__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin: 0;
}
@media (min-width: 768px) {
.block-financement__title {
font-size: var(--text-3xl);
}
}
.block-financement__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.block-financement__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.block-financement__card {
background: var(--color-white);
padding: var(--space-6);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
text-align: center;
transition: box-shadow 0.2s ease;
}
.block-financement__card:hover {
box-shadow: var(--shadow-md);
}
.block-financement__card-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
background: var(--color-primary-light);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.block-financement__card-icon svg {
width: 32px;
height: 32px;
}
.block-financement__card-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin: 0 0 var(--space-2);
}
.block-financement__card-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
line-height: 1.6;
}
.block-financement__note {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-top: var(--space-8);
padding: var(--space-5);
background: var(--color-neutral-50);
border-radius: var(--radius-lg);
border: 1px solid var(--color-neutral-200);
}
.block-financement__note svg {
flex-shrink: 0;
color: var(--color-neutral-400);
margin-top: 2px;
}
.block-financement__note p {
margin: 0;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
}
.block-financement__note strong {
color: var(--color-text);
font-weight: var(--font-medium);
}
/* ===========================================
BLOCK FAQ (Formation)
=========================================== */
.block-faq-formation {
padding: var(--space-16) 0;
}
.block-faq-formation__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-faq-formation__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.block-faq-formation__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin: 0;
}
@media (min-width: 768px) {
.block-faq-formation__title {
font-size: var(--text-3xl);
}
}
.block-faq-formation__list {
max-width: 800px;
margin: 0 auto;
}
.block-faq-formation__item {
border-bottom: 1px solid var(--color-neutral-200);
}
.block-faq-formation__item:last-child {
border-bottom: none;
}
.block-faq-formation__item summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) 0;
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
cursor: pointer;
list-style: none;
}
.block-faq-formation__item summary::-webkit-details-marker {
display: none;
}
.block-faq-formation__item summary::after {
content: '+';
font-size: var(--text-xl);
font-weight: var(--font-normal);
color: var(--color-primary);
transition: transform 0.2s ease;
}
.block-faq-formation__item[open] summary::after {
content: '−';
}
.block-faq-formation__item summary:hover {
color: var(--color-primary);
}
.block-faq-formation__answer {
padding: 0 0 var(--space-5);
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.7;
}
@media (min-width: 768px) {
.block-faq-formation__item summary {
font-size: var(--text-lg);
padding: var(--space-6) 0;
}
}
/* ===========================================
BLOCK FORMATEUR - Credentials
=========================================== */
.block-formateur__credentials {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--color-neutral-200);
}
.block-formateur__credentials-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 var(--space-4);
}
.block-formateur__credentials-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 480px) {
.block-formateur__credentials-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.block-formateur__credentials-list {
grid-template-columns: repeat(3, 1fr);
}
}
.block-formateur__credentials-list li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-body);
line-height: var(--leading-relaxed);
}
.block-formateur__credentials-list li svg {
width: 16px;
height: 16px;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 3px;
}
/* ===========================================
BLOCK TEMOIGNAGES (Formation Page)
=========================================== */
.block-temoignages-formation {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-temoignages-formation__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-temoignages-formation__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.block-temoignages-formation__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin: 0;
}
@media (min-width: 768px) {
.block-temoignages-formation__title {
font-size: var(--text-3xl);
}
}
.block-temoignages-formation__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.block-temoignages-formation__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.block-temoignages-formation__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.temoignage-card {
background: var(--color-white);
padding: var(--space-6);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.temoignage-card__stars {
display: flex;
gap: 2px;
margin-bottom: var(--space-4);
color: #fbbf24;
}
.temoignage-card__stars svg {
width: 18px;
height: 18px;
}
.temoignage-card__quote {
font-size: var(--text-base);
color: var(--color-text);
line-height: 1.7;
margin: 0 0 var(--space-4);
font-style: italic;
}
.temoignage-card__author {
display: flex;
align-items: center;
gap: var(--space-3);
}
.temoignage-card__avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--color-neutral-200);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-muted);
}
.temoignage-card__info {
display: flex;
flex-direction: column;
}
.temoignage-card__name {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
}
.temoignage-card__role {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ===========================================
PAGE "COMMENT CE SITE A ETE CREE"
=========================================== */
/* Page hero centered */
.page-hero--centered {
text-align: center;
padding: var(--space-12) 0 var(--space-8);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, rgba(239, 68, 68, 0.08) 100%);
}
@media (min-width: 768px) {
.page-hero--centered {
padding: var(--space-16) 0 var(--space-12);
}
}
.page-hero__label {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.page-hero__lead {
font-size: var(--text-lg);
color: var(--color-text-muted);
max-width: 700px;
margin: var(--space-4) auto 0;
line-height: 1.7;
}
@media (min-width: 768px) {
.page-hero__lead {
font-size: var(--text-xl);
}
}
/* Content sections */
.content-section {
padding: var(--space-12) 0;
}
@media (min-width: 768px) {
.content-section {
padding: var(--space-16) 0;
}
}
.content-section--alt {
background-color: var(--color-bg-alt);
}
.content-section h2 {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
.content-section h2 {
font-size: var(--text-3xl);
margin-bottom: var(--space-8);
}
}
.content-section p {
font-size: var(--text-base);
line-height: 1.8;
color: var(--color-text-body);
margin-bottom: var(--space-4);
}
/* Container narrow */
.container--narrow {
max-width: 800px;
}
/* Options comparison */
.options-comparison {
display: grid;
gap: var(--space-4);
margin: var(--space-8) 0;
}
@media (min-width: 768px) {
.options-comparison {
grid-template-columns: 1fr 1fr;
}
}
.option {
padding: var(--space-6);
border-radius: var(--radius-lg);
}
.option ul {
margin: 0;
padding: 0;
list-style: none;
}
.option ul li {
padding: var(--space-2) 0;
padding-left: var(--space-6);
position: relative;
}
.option ul li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-size: contain;
}
.option--rejected {
background: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200);
}
.option--rejected ul li {
color: var(--color-text-muted);
text-decoration: line-through;
}
.option--rejected ul li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.option--chosen {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.1) 100%);
border: 2px solid var(--color-primary);
}
.option--chosen ul li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.option__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.option--rejected .option__label {
color: var(--color-text-muted);
}
.option--chosen .option__label {
color: var(--color-primary);
}
/* Pullquote */
.pullquote {
font-size: var(--text-lg);
font-style: italic;
color: var(--color-text);
border-left: 4px solid var(--color-primary);
padding-left: var(--space-6);
margin: var(--space-8) 0;
}
@media (min-width: 768px) {
.pullquote {
font-size: var(--text-xl);
}
}
/* Tools grid */
.tools-grid {
display: grid;
gap: var(--space-6);
margin: var(--space-8) 0;
}
@media (min-width: 768px) {
.tools-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.tool-card {
text-align: center;
padding: var(--space-6);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.tool-card__icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
background: rgba(239, 68, 68, 0.1);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.tool-card__icon svg {
width: 32px;
height: 32px;
}
.tool-card h3 {
font-size: var(--text-xl);
margin-bottom: var(--space-1);
}
.tool-card__role {
font-size: var(--text-sm);
color: var(--color-primary);
font-weight: var(--font-semibold);
margin-bottom: var(--space-3);
}
.tool-card p:last-child {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
.tools-note {
text-align: center;
padding: var(--space-4);
background: var(--color-bg-alt);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-text-body);
}
/* Process timeline */
.process-timeline {
position: relative;
padding-left: var(--space-12);
}
.process-timeline::before {
content: '';
position: absolute;
left: 14px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-neutral-200);
}
.timeline-item {
position: relative;
padding-bottom: var(--space-8);
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-item__marker {
position: absolute;
left: calc(-1 * var(--space-12) + 2px);
width: 28px;
height: 28px;
background: var(--color-primary);
color: white;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-bold);
font-size: var(--text-sm);
}
.timeline-item__content h3 {
font-size: var(--text-xl);
margin-bottom: var(--space-1);
}
.timeline-item__duration {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.timeline-item__content p:not(.timeline-item__duration) {
font-size: var(--text-base);
line-height: 1.7;
color: var(--color-text-body);
}
.timeline-item__example {
margin-top: var(--space-4);
padding: var(--space-4);
background: var(--color-neutral-900);
border-radius: var(--radius-md);
}
.timeline-item__example .example-label {
font-size: var(--text-xs);
color: var(--color-neutral-400);
margin-bottom: var(--space-2);
}
.timeline-item__example code {
display: block;
color: var(--color-neutral-100);
font-size: var(--text-sm);
font-family: var(--font-mono, 'Consolas', 'Monaco', monospace);
white-space: pre-wrap;
line-height: 1.6;
}
/* Learnings grid */
.learnings-grid {
display: grid;
gap: var(--space-4);
}
@media (min-width: 768px) {
.learnings-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.learning-card {
padding: var(--space-5);
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--color-neutral-200);
}
.learning-card__icon {
font-size: var(--text-2xl);
margin-bottom: var(--space-2);
display: block;
}
.learning-card h3 {
font-size: var(--text-lg);
margin-bottom: var(--space-2);
}
.learning-card p {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
line-height: 1.6;
}
/* Stats showcase */
.stats-showcase {
display: grid;
gap: var(--space-4);
margin: var(--space-8) 0;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.stats-showcase {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.stats-showcase {
grid-template-columns: repeat(6, 1fr);
}
}
.stat-item {
text-align: center;
padding: var(--space-5);
background: var(--color-bg-alt);
border-radius: var(--radius-lg);
}
.content-section--alt .stat-item {
background: white;
}
.stat-item__value {
display: block;
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.stat-item__value {
font-size: var(--text-3xl);
}
}
.stat-item__label {
display: block;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text);
}
@media (min-width: 768px) {
.stat-item__label {
font-size: var(--text-sm);
}
}
.stat-item__note {
display: block;
font-size: 10px;
color: var(--color-text-muted);
margin-top: var(--space-1);
}
@media (min-width: 768px) {
.stat-item__note {
font-size: var(--text-xs);
}
}
.stats-disclaimer {
text-align: center;
padding: var(--space-4);
background: rgba(239, 68, 68, 0.05);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-text-body);
}
/* FAQ list */
.faq-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.faq-item {
background: white;
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.faq-item summary {
padding: var(--space-4) var(--space-5);
font-weight: var(--font-semibold);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '+';
flex-shrink: 0;
font-size: var(--text-xl);
color: var(--color-primary);
transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-item p {
padding: 0 var(--space-5) var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-base);
line-height: 1.7;
margin: 0;
}
/* CTA centered card */
.cta-card--centered {
text-align: center;
max-width: 700px;
margin: 0 auto;
padding: var(--space-8);
}
.cta-card--centered h2 {
font-size: var(--text-2xl);
margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
.cta-card--centered h2 {
font-size: var(--text-3xl);
}
}
.cta-card--centered p {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.cta-card__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 768px) {
.cta-card__actions {
flex-direction: row;
justify-content: center;
}
}
/* ===========================================
BLOCK INTRO - Benefices (for Metier pages)
=========================================== */
.block-intro__benefices {
margin-top: var(--space-8);
padding: var(--space-6);
background: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.block-intro__benefices-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin: 0 0 var(--space-4);
}
.block-intro__benefices-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
}
@media (min-width: 768px) {
.block-intro__benefices-list {
grid-template-columns: repeat(2, 1fr);
}
}
.block-intro__benefices-list li {
position: relative;
padding-left: var(--space-6);
font-size: var(--text-base);
color: var(--color-text-body);
}
.block-intro__benefices-list li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: contain;
}
/* ===========================================
BLOCK RELATED - Liens vers autres pages
=========================================== */
.block-related {
padding: var(--space-12) 0;
}
.block-related--alt {
background: var(--color-neutral-50);
}
.block-related__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
text-align: center;
margin: 0 0 var(--space-2);
}
@media (min-width: 768px) {
.block-related__title {
font-size: var(--text-3xl);
}
}
.block-related__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-8);
}
.block-related__grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.block-related__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.block-related__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.related-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-white);
border-radius: var(--radius-lg);
text-decoration: none;
text-align: center;
border: 1px solid var(--color-neutral-200);
transition: all 0.2s ease;
}
.related-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.related-card__icon {
width: 48px;
height: 48px;
background: var(--color-primary-light);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.related-card__icon svg {
width: 24px;
height: 24px;
}
.related-card__name {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
}
@media (min-width: 768px) {
.related-card__name {
font-size: var(--text-base);
}
}
.related-card.is-current {
border-color: var(--color-primary);
background: var(--color-primary-light);
pointer-events: none;
}
.related-card.is-current .related-card__name {
color: var(--color-primary);
}
/* ===========================================
HERO LEAD ACCENT
=========================================== */
.block-hero__lead--accent {
color: var(--color-primary);
font-weight: var(--font-medium);
}
/* ===========================================
BLOCK INTRO - Details (for Category pages)
=========================================== */
.block-intro__details {
display: grid;
gap: var(--space-6);
margin-top: var(--space-8);
}
@media (min-width: 768px) {
.block-intro__details {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
}
.block-intro__detail {
padding: var(--space-6);
background: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.block-intro__detail h3 {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.block-intro__detail p {
font-size: var(--text-base);
color: var(--color-text-body);
line-height: 1.7;
margin: 0;
}
/* ===========================================
BLOCK METIERS INDEX - Catalogue page (alphabetique)
=========================================== */
.block-metiers-index {
padding: var(--space-10) 0;
background: var(--color-neutral-50);
}
.block-metiers-index__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
text-align: center;
margin: 0 0 var(--space-2);
color: var(--color-text);
}
@media (min-width: 768px) {
.block-metiers-index__title {
font-size: var(--text-3xl);
}
}
.block-metiers-index__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-6);
}
/* ===========================================
BLOCK OUTILS INDEX - Vue par outil
=========================================== */
.block-outils-index {
padding: var(--space-10) 0;
background: var(--color-neutral-50);
}
.block-outils-index__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
text-align: center;
margin: 0 0 var(--space-2);
color: var(--color-text);
}
@media (min-width: 768px) {
.block-outils-index__title {
font-size: var(--text-3xl);
}
}
.block-outils-index__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-6);
}
/* Grille des outils */
.outils-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 640px) {
.outils-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.outils-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
}
@media (min-width: 1024px) {
.outils-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* Carte outil */
.outil-card {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-5);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-decoration: none;
transition: all var(--transition-fast);
border: 1px solid var(--color-neutral-200);
}
.outil-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary-light);
}
.outil-card__logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--space-3);
}
.outil-card__name {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
text-align: center;
margin-bottom: var(--space-1);
}
.outil-card__count {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ===========================================
BLOCK METIERS GRID - Catalogue page (legacy)
=========================================== */
.block-metiers-grid {
padding: var(--space-8) 0;
background: var(--color-neutral-50);
}
.block-metiers-grid__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
text-align: center;
margin: 0 0 var(--space-2);
color: var(--color-text);
}
@media (min-width: 768px) {
.block-metiers-grid__title {
font-size: var(--text-3xl);
}
}
.block-metiers-grid__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
text-align: center;
margin: 0 0 var(--space-6);
}
.metiers-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
.metiers-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.metiers-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
}
@media (min-width: 1024px) {
.metiers-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.metier-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
background: var(--color-white);
border-radius: var(--radius-lg);
text-decoration: none;
text-align: center;
border: 1px solid var(--color-neutral-200);
transition: all 0.2s ease;
}
.metier-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.metier-card__icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light);
border-radius: var(--radius-md);
color: var(--color-primary);
}
.metier-card__icon svg {
width: 20px;
height: 20px;
}
.metier-card__nom {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
line-height: 1.3;
}
.metier-card__count {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ===========================================
METIERS INDEX ALPHABETIQUE
Navigation par lettre avec aliases
=========================================== */
/* Barre de navigation alphabetique */
.metiers-alphabet-nav {
margin-bottom: var(--space-8);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 80px;
background: var(--color-bg);
z-index: 10;
}
.metiers-alphabet-nav__letters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
}
.metiers-alphabet-nav__letter {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
font-size: var(--text-sm);
font-weight: var(--font-bold);
color: var(--color-text);
background: var(--color-neutral-100);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-fast);
}
.metiers-alphabet-nav__letter:hover {
background: var(--color-primary);
color: white;
transform: translateY(-2px);
}
/* Sections par lettre */
.metiers-alphabet-sections {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.metiers-alphabet-section {
scroll-margin-top: 140px;
}
.metiers-alphabet-section__letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: white;
background: var(--color-primary);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
}
.metiers-alphabet-section__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-3);
}
/* Item metier dans l'index */
.metiers-alphabet-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-fast);
}
.metiers-alphabet-item:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
background: var(--color-neutral-50);
}
.metiers-alphabet-item__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--color-primary-light);
border-radius: var(--radius-md);
color: var(--color-primary);
flex-shrink: 0;
}
.metiers-alphabet-item__icon svg {
width: 18px;
height: 18px;
}
.metiers-alphabet-item__name {
flex: 1;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
line-height: 1.3;
}
.metiers-alphabet-item__arrow {
color: var(--color-text-muted);
font-weight: var(--font-normal);
margin: 0 var(--space-1);
}
.metiers-alphabet-item__count {
font-size: var(--text-xs);
color: var(--color-text-muted);
background: var(--color-neutral-100);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
flex-shrink: 0;
}
/* Mobile */
@media (max-width: 767px) {
.metiers-alphabet-nav__letter {
width: 32px;
height: 32px;
font-size: var(--text-xs);
}
.metiers-alphabet-section__grid {
grid-template-columns: 1fr;
}
}
/* ===========================================
FORMATION STAR (mise en avant)
=========================================== */
.formation-star-section {
padding: var(--space-8) 0;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(251, 191, 36, 0.1) 100%);
margin-bottom: var(--space-6);
}
.formation-star__title {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-xl);
margin-bottom: var(--space-6);
color: var(--color-text);
}
.star-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* Grille pour 2 cards star */
.formation-star__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.formation-star__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.formation-card--star {
background: var(--color-white);
border: 1px solid var(--color-neutral-200);
border-left: 4px solid #F59E0B;
box-shadow: var(--shadow-md);
padding: var(--space-5);
border-radius: var(--radius-xl);
position: relative;
display: flex;
flex-direction: column;
}
/* Label en haut de card (Pour votre métier, Incontournable) */
.formation-card__star-label {
display: inline-block;
padding: var(--space-1) var(--space-3);
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
color: var(--color-neutral-800);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
margin-bottom: var(--space-3);
width: fit-content;
}
/* Couleurs par type de card */
.formation-card--star[data-type="metier"] {
border-left-color: #F59E0B;
}
.formation-card--star[data-type="metier"] .formation-card__star-label {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
color: var(--color-neutral-800);
}
.formation-card--star[data-type="transversale"] {
border-left-color: var(--color-primary);
}
.formation-card--star[data-type="transversale"] .formation-card__star-label {
background: var(--color-primary);
color: white;
}
/* Tooltip */
.formation-card__star-badge::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: var(--color-neutral-900);
color: white;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--font-normal);
white-space: normal;
width: 280px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 100;
box-shadow: var(--shadow-lg);
line-height: 1.4;
}
.formation-card__star-badge::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: var(--color-neutral-900);
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.formation-card__star-badge:hover::after,
.formation-card__star-badge:hover::before {
opacity: 1;
visibility: visible;
}
.formation-card--star .formation-card__title {
font-size: var(--text-xl);
margin-bottom: var(--space-3);
}
.formation-card--star .formation-card__title a {
color: var(--color-text);
text-decoration: none;
}
.formation-card--star .formation-card__title a:hover {
color: var(--color-primary);
}
.formation-card--star .formation-card__excerpt {
color: var(--color-text-muted);
margin-bottom: var(--space-4);
line-height: 1.6;
}
.formation-card--star .formation-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.formation-card--star .formation-card__duration,
.formation-card--star .formation-card__modalite {
display: flex;
align-items: center;
gap: var(--space-1);
}
.formation-card--star .formation-card__cta {
width: 100%;
}
@media (min-width: 768px) {
.formation-card--star .formation-card__cta {
width: auto;
}
}
/* ===========================================
BLOCK FORCES (Pages outils)
=========================================== */
.block-forces {
padding: var(--space-12) 0;
background: var(--color-neutral-50);
}
.block-forces__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
text-align: center;
margin-bottom: var(--space-8);
}
.block-forces__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.block-forces__item {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-6);
background: white;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-sm);
}
.block-forces__item-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.block-forces__item-name {
font-weight: var(--font-semibold);
color: var(--color-text);
}
.block-forces__usages {
text-align: center;
}
.block-forces__usages h3 {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-4);
}
.block-forces__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
}
.block-forces__tag {
padding: var(--space-2) var(--space-4);
background: white;
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-full);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===========================================
OUTILS BUTTONS (Mur de boutons)
=========================================== */
.outils-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-4);
}
.outil-button {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-6);
background: white;
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-lg);
text-decoration: none;
transition: all 0.2s;
}
.outil-button:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.outil-button.is-current {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.outil-button__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.outil-button__name {
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-1);
}
.outil-button__count {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* Hero editeur badge */
.block-hero__editeur {
display: inline-block;
padding: var(--space-1) var(--space-3);
background: var(--color-primary-light);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--font-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
/* ===========================================
SIDEBAR CONTACT (sticky)
=========================================== */
.sidebar-contact {
position: sticky;
top: 100px;
background: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-xl);
overflow: hidden;
}
.sidebar-contact__inner {
padding: var(--space-6);
}
.sidebar-contact__header {
text-align: center;
margin-bottom: var(--space-6);
}
.sidebar-contact__title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.sidebar-contact__subtitle {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.sidebar-contact__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sidebar-contact__divider {
height: 1px;
background: var(--color-neutral-200);
margin: var(--space-5) 0;
}
.sidebar-contact__phone {
text-align: center;
}
.sidebar-contact__phone-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.sidebar-contact__phone-number {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-primary);
text-decoration: none;
}
.sidebar-contact__phone-number:hover {
text-decoration: underline;
}
.sidebar-contact__phone-mention {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.sidebar-contact__badges {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.sidebar-contact__badge {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.sidebar-contact__badge svg {
color: var(--color-warning);
flex-shrink: 0;
}
/* Mobile : masquer sidebar, afficher sticky bottom bar */
@media (max-width: 1023px) {
.sidebar-contact {
display: none;
}
}
/* ===========================================
MOBILE STICKY BAR
=========================================== */
.mobile-sticky-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
border-top: 1px solid var(--color-neutral-200);
padding: var(--space-3) var(--space-4);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
z-index: 100;
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.mobile-sticky-bar.is-visible {
transform: translateY(0);
}
.mobile-sticky-bar__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
max-width: 600px;
margin: 0 auto;
}
/* Bouton telephone - CTA primaire sur mobile */
.mobile-sticky-bar__phone {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
flex: 1;
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-decoration: none;
border-radius: var(--radius-md);
}
.mobile-sticky-bar__phone svg {
flex-shrink: 0;
}
/* Bouton devis - CTA secondaire sur mobile */
.mobile-sticky-bar__cta {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
text-decoration: none;
border-radius: var(--radius-md);
}
@media (max-width: 1023px) {
.mobile-sticky-bar {
display: block;
}
}
/* ===========================================
BLOC MODALITES & TARIF
=========================================== */
.block-modalites {
padding: var(--space-16) 0;
background: var(--color-neutral-50);
}
.block-modalites__header {
text-align: center;
margin-bottom: var(--space-10);
}
.block-modalites__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.block-modalites__title {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--color-text);
}
.block-modalites__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
.block-modalites__grid {
grid-template-columns: 1fr 1fr;
}
}
/* Colonne Infos */
.block-modalites__infos {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.block-modalites__item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--color-neutral-200);
}
.block-modalites__item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: var(--radius-md);
}
.block-modalites__item-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.block-modalites__item-label {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
}
.block-modalites__item-value {
font-size: var(--text-base);
color: var(--color-text);
}
/* Colonne Tarif */
.block-modalites__tarif {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.block-modalites__tarif-card {
background: white;
border-radius: var(--radius-xl);
border: 2px solid var(--color-primary);
padding: var(--space-6);
}
.block-modalites__tarif-type {
text-align: center;
}
.block-modalites__tarif-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.block-modalites__tarif-price {
display: block;
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-1);
}
.block-modalites__tarif-price--intra {
font-size: var(--text-xl);
}
.block-modalites__tarif-price small {
font-size: var(--text-base);
font-weight: var(--font-normal);
color: var(--color-text-muted);
}
.block-modalites__tarif-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.block-modalites__tarif-divider {
height: 1px;
background: var(--color-neutral-200);
margin: var(--space-5) 0;
}
/* Financement */
.block-modalites__financement {
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--color-neutral-200);
padding: var(--space-5);
}
.block-modalites__financement-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.block-modalites__financement-title svg {
color: var(--color-primary);
}
.block-modalites__financement-list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-3) 0;
}
.block-modalites__financement-list li {
position: relative;
padding-left: var(--space-5);
margin-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text);
}
.block-modalites__financement-list li::before {
content: '\2713';
position: absolute;
left: 0;
color: var(--color-success);
font-weight: bold;
}
.block-modalites__financement-help {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-style: italic;
}
/* Actions */
.block-modalites__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
/* ===========================================
BLOCK CONTACT + TRUST SIGNALS (E-E-A-T)
Formulaire + Infos entreprise sur pages formations
=========================================== */
.block-contact-trust {
background: var(--color-neutral-100);
padding: var(--space-12) 0;
}
.block-contact-trust__grid {
display: grid;
gap: var(--space-8);
}
@media (min-width: 1024px) {
.block-contact-trust__grid {
grid-template-columns: 1.2fr 1fr;
gap: var(--space-12);
align-items: start;
}
}
/* Colonne formulaire */
.block-contact-trust__form {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.block-contact-trust__form {
padding: var(--space-8);
}
}
.block-contact-trust__form-header {
margin-bottom: var(--space-6);
text-align: center;
}
.block-contact-trust__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.block-contact-trust__subtitle {
font-size: var(--text-base);
color: var(--color-text-muted);
max-width: 400px;
margin: 0 auto;
}
.block-contact-trust__form-wrapper {
min-height: 300px;
}
/* Colonne Trust signals */
.block-contact-trust__trust {
position: sticky;
top: 100px;
}
.block-contact-trust__trust-inner {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.block-contact-trust__section {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-5);
border: 1px solid var(--color-border);
}
.block-contact-trust__section-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.block-contact-trust__section-title svg {
color: var(--color-primary);
flex-shrink: 0;
}
/* Adresse */
.block-contact-trust__address {
font-style: normal;
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.6;
margin-bottom: var(--space-3);
}
.block-contact-trust__address strong {
font-weight: var(--font-semibold);
color: var(--color-text);
}
.block-contact-trust__phone,
.block-contact-trust__email {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
margin-bottom: var(--space-2);
transition: color 0.2s ease;
}
.block-contact-trust__phone:hover,
.block-contact-trust__email:hover {
color: var(--color-primary-dark);
}
.block-contact-trust__phone svg,
.block-contact-trust__email svg {
flex-shrink: 0;
}
/* Legal infos */
.block-contact-trust__legal {
list-style: none;
padding: 0;
margin: 0;
}
.block-contact-trust__legal li {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-neutral-100);
}
.block-contact-trust__legal li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.block-contact-trust__legal-label {
display: block;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-1);
}
.block-contact-trust__legal-value {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text);
font-family: var(--font-mono, monospace);
}
.block-contact-trust__legal-note {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
/* Badges */
.block-contact-trust__badges {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.block-contact-trust__badge {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
padding: var(--space-2) var(--space-3);
background: var(--color-neutral-50);
border-radius: var(--radius-md);
}
.block-contact-trust__badge svg {
color: var(--color-warning);
flex-shrink: 0;
}
/* ===========================================
FORMULAIRE NATIF (remplace HubSpot embed)
=========================================== */
.form-native {
position: relative;
}
/* Respecter l'attribut hidden (override display: flex) */
.form-native [hidden] {
display: none !important;
}
/* Loader */
.form-native__loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-4);
text-align: center;
}
.form-native__spinner {
width: 48px;
height: 48px;
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.form-native__spinner svg {
width: 100%;
height: 100%;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.form-native__loader p {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* Messages succes/erreur */
.form-native__success,
.form-native__error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-4);
text-align: center;
}
.form-native__success svg {
color: var(--color-success);
margin-bottom: var(--space-4);
}
.form-native__success h3 {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.form-native__success p {
color: var(--color-text-muted);
}
.form-native__error svg {
color: var(--color-error);
margin-bottom: var(--space-4);
}
.form-native__error h3 {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.form-native__error p {
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.form-native__error a {
color: var(--color-primary);
font-weight: var(--font-semibold);
}
/* Formulaire */
.form-native__form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.form-native__row {
display: grid;
gap: var(--space-4);
}
@media (min-width: 480px) {
.form-native__row {
grid-template-columns: 1fr 1fr;
}
}
.form-native__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-native__field label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
}
.form-native__field label .required {
color: var(--color-primary);
}
.form-native__field input,
.form-native__field textarea {
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
font-family: inherit;
color: var(--color-text);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-native__field input:focus,
.form-native__field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}
.form-native__field input::placeholder,
.form-native__field textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.6;
}
.form-native__field textarea {
resize: vertical;
min-height: 100px;
}
.form-native__field.is-focused label {
color: var(--color-primary);
}
/* Checkbox consent */
.form-native__consent {
margin-top: var(--space-2);
}
.form-native__checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.form-native__checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.form-native__checkbox .checkmark {
flex-shrink: 0;
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
transition: all 0.2s ease;
position: relative;
margin-top: 2px;
}
.form-native__checkbox input:checked + .checkmark {
background: var(--color-primary);
border-color: var(--color-primary);
}
.form-native__checkbox input:checked + .checkmark::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.form-native__checkbox input:focus + .checkmark {
box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}
.form-native__consent-text a {
color: var(--color-primary);
text-decoration: underline;
}
/* Submit button */
.form-native__submit {
margin-top: var(--space-4);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
}
.form-native__submit .btn__icon {
transition: transform 0.2s ease;
}
.form-native__submit:hover .btn__icon {
transform: translateX(4px);
}
/* ===========================================
BLOC FLUQS (Friction-Inducing Latent Unasked Questions)
Questions latentes non-posées pour réassurance
=========================================== */
/*
* HTML: voir /components/block-fluqs.html
*
* Structure:
*
*/
.block-fluqs {
padding: var(--space-16) 0;
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-white) 100%);
}
.block-fluqs__header {
text-align: center;
margin-bottom: var(--space-12);
}
.block-fluqs__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: var(--color-primary-50);
border-radius: var(--radius-full);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.block-fluqs__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.block-fluqs__title {
font-size: var(--text-3xl);
}
}
.block-fluqs__subtitle {
font-size: var(--text-base);
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
}
/* Grid des items */
.block-fluqs__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.block-fluqs__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
}
@media (min-width: 1024px) {
.block-fluqs__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Item individuel (question + réponse) */
.block-fluqs__item {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: all var(--transition-base);
}
.block-fluqs__item:hover {
border-color: var(--color-primary-100);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* Question (la FLUQ) */
.block-fluqs__question {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.block-fluqs__question-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--color-primary);
margin-top: 2px;
}
.block-fluqs__question-text {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text);
line-height: var(--leading-snug);
margin: 0;
}
/* Réponse */
.block-fluqs__answer {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-left: var(--space-9);
}
.block-fluqs__answer-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-success);
margin-top: 2px;
}
.block-fluqs__answer-text {
font-size: var(--text-base);
color: var(--color-text-body);
line-height: var(--leading-relaxed);
margin: 0;
}
/* Variante compacte pour pages listes */
.block-fluqs--compact {
padding: var(--space-12) 0;
}
.block-fluqs--compact .block-fluqs__header {
margin-bottom: var(--space-8);
}
.block-fluqs--compact .block-fluqs__grid {
gap: var(--space-4);
}
.block-fluqs--compact .block-fluqs__item {
padding: var(--space-4);
}
.block-fluqs--compact .block-fluqs__question-text {
font-size: var(--text-base);
}
.block-fluqs--compact .block-fluqs__answer {
padding-left: var(--space-7);
}
.block-fluqs--compact .block-fluqs__answer-text {
font-size: var(--text-sm);
}
/* ===========================================
BLOB DECORATION SYSTEM
Formes organiques CSS - Signature visuelle Boost Academy
=========================================== */
/*
* Système de blobs réutilisable
*
* Philosophie design :
* - Dieter Rams : moins c'est plus
* - Jessica Walsh : les formes respirent
* - Paula Scher : audace dans la douceur
*
* Usage :
* - Ajouter .has-blob à un conteneur
* - Le blob se positionne automatiquement
* - Variantes : --subtle, --accent, --large
*/
/* Base : tout conteneur avec blob */
.has-blob {
position: relative;
overflow: hidden;
}
/* Blob générique (via pseudo-élément) */
.has-blob::before {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
}
/* Variante : Blob subtil (fond de section) */
.has-blob--subtle::before {
top: -20%;
right: -15%;
width: 400px;
height: 380px;
background: linear-gradient(
135deg,
rgba(255, 205, 210, 0.25) 0%,
rgba(255, 235, 238, 0.15) 50%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
filter: blur(40px);
}
/* Variante : Blob accent (plus visible) */
.has-blob--accent::before {
bottom: -10%;
left: -10%;
width: 350px;
height: 320px;
background: linear-gradient(
45deg,
rgba(229, 57, 53, 0.08) 0%,
rgba(255, 205, 210, 0.15) 100%
);
border-radius: 45% 55% 35% 65% / 60% 40% 60% 40%;
filter: blur(30px);
}
/* Variante : Blob large (pour grandes sections) */
.has-blob--large::before {
top: 50%;
right: -20%;
transform: translateY(-50%);
width: 600px;
height: 550px;
background: linear-gradient(
135deg,
rgba(255, 205, 210, 0.35) 0%,
rgba(255, 235, 238, 0.2) 50%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
filter: blur(60px);
}
/* Animation optionnelle */
.has-blob--animated::before {
animation: blob-drift 20s ease-in-out infinite;
}
@keyframes blob-drift {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(-20px, 10px) scale(1.02);
}
66% {
transform: translate(10px, -15px) scale(0.98);
}
}
/* ===========================================
APPLICATION : Section CTA
=========================================== */
.block-cta {
position: relative;
overflow: hidden;
}
/* Blob décoratif sur les CTA bands */
.block-cta::after {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 300px;
height: 280px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0) 70%
);
border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
pointer-events: none;
z-index: 0;
}
/* Deuxième blob plus petit */
.block-cta::before {
content: '';
position: absolute;
bottom: -20%;
left: 5%;
width: 200px;
height: 180px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0) 70%
);
border-radius: 45% 55% 50% 50% / 50% 50% 45% 55%;
pointer-events: none;
z-index: 0;
}
/* S'assurer que le contenu est au-dessus */
.block-cta .container {
position: relative;
z-index: 1;
}
/* ===========================================
APPLICATION : Hero Formation
Blob visible comme sur page accueil
=========================================== */
/* Blob principal en bas à gauche */
.block-hero-formation::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 400px;
height: 380px;
background: linear-gradient(
225deg,
rgba(255, 180, 180, 0.6) 0%,
rgba(255, 205, 210, 0.4) 50%,
rgba(255, 235, 238, 0.2) 100%
);
border-radius: 55% 45% 60% 40% / 40% 60% 40% 60%;
filter: blur(3px);
pointer-events: none;
z-index: 0;
animation: blob-drift-slow 15s ease-in-out infinite;
}
/* Animation lente pour le blob formation */
@keyframes blob-drift-slow {
0%, 100% {
transform: translate(0, 0) scale(1);
border-radius: 55% 45% 60% 40% / 40% 60% 40% 60%;
}
50% {
transform: translate(20px, -10px) scale(1.03);
border-radius: 45% 55% 50% 50% / 50% 50% 55% 45%;
}
}
/* S'assurer que le contenu est au-dessus */
.block-hero-formation .container {
position: relative;
z-index: 1;
}
/* Responsive */
@media (max-width: 1023px) {
.block-hero-formation::after {
width: 250px;
height: 230px;
bottom: -10%;
left: -15%;
}
}
/* ===========================================
APPLICATION : Footer
=========================================== */
.footer {
position: relative;
overflow: hidden;
}
/* Blob très subtil en haut du footer */
.footer::before {
content: '';
position: absolute;
top: -50px;
right: 10%;
width: 400px;
height: 200px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
pointer-events: none;
z-index: 0;
}
/* Contenu au-dessus */
.footer .container {
position: relative;
z-index: 1;
}
/* ===========================================
APPLICATION : Pages Catalogue/Catégories/Métiers/Outils
Blob visible à droite du hero
=========================================== */
/* Hero des pages listes avec blob */
.formations-hero {
position: relative;
overflow: hidden;
}
/* Blob principal à droite */
.formations-hero::after {
content: '';
position: absolute;
top: 10%;
right: -8%;
width: 500px;
height: 450px;
background: linear-gradient(
135deg,
rgba(255, 180, 180, 0.55) 0%,
rgba(255, 205, 210, 0.35) 50%,
rgba(255, 235, 238, 0.15) 100%
);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
filter: blur(2px);
pointer-events: none;
z-index: 0;
animation: blob-breathe-catalog 12s ease-in-out infinite;
}
/* Second blob plus petit en bas à gauche */
.formations-hero::before {
content: '';
position: absolute;
bottom: -15%;
left: 5%;
width: 200px;
height: 180px;
background: linear-gradient(
45deg,
rgba(229, 57, 53, 0.12) 0%,
rgba(255, 205, 210, 0.25) 100%
);
border-radius: 45% 55% 35% 65% / 60% 40% 60% 40%;
filter: blur(1px);
pointer-events: none;
z-index: 0;
animation: blob-float 14s ease-in-out infinite;
}
@keyframes blob-breathe-catalog {
0%, 100% {
transform: translate(0, 0) scale(1);
border-radius: 62% 38% 70% 30% / 45% 55% 45% 55%;
}
33% {
transform: translate(-15px, 10px) scale(1.02);
border-radius: 55% 45% 60% 40% / 50% 50% 50% 50%;
}
66% {
transform: translate(10px, -8px) scale(0.98);
border-radius: 70% 30% 55% 45% / 40% 60% 40% 60%;
}
}
.formations-hero .container {
position: relative;
z-index: 1;
}
/* Responsive */
@media (max-width: 1023px) {
.formations-hero::after {
width: 300px;
height: 270px;
right: -15%;
top: 5%;
}
.formations-hero::before {
display: none;
}
}
/* ===========================================
RESPONSIVE : Blobs plus petits sur mobile/tablet
=========================================== */
@media (max-width: 1023px) {
.has-blob--subtle::before,
.has-blob--accent::before,
.has-blob--large::before {
display: none;
}
.block-cta::after,
.block-cta::before {
width: 150px;
height: 140px;
}
.block-hero-formation::after {
width: 200px;
height: 180px;
filter: blur(40px);
}
.formations-hero::after {
width: 250px;
height: 220px;
}
}
/* ===========================================
ACCESSIBILITÉ : Réduire les animations
=========================================== */
@media (prefers-reduced-motion: reduce) {
.has-blob--animated::before {
animation: none;
}
}
/* ===========================================
CLS FIX : Réserver l'espace pour éviter les décalages
=========================================== */
/* Images formateur - aspect-ratio pour réserver l'espace */
.formation-hero__formateur-photo {
aspect-ratio: 1 / 1;
content-visibility: auto;
contain-intrinsic-size: 72px 72px;
}
.block-formateur__photo {
aspect-ratio: 4 / 5;
content-visibility: auto;
contain-intrinsic-size: 160px 200px;
}
/* Section hero - hauteur minimum pour éviter CLS */
.formation-section--hero {
min-height: 400px;
}
@media (min-width: 768px) {
.formation-section--hero {
min-height: 500px;
}
}
/* Layout sticky - éviter les sauts */
.formation-with-sticky {
contain: layout style;
}
.formation-sticky-layout {
min-height: 100vh;
}
/* Sidebar - hauteur auto mais pas de saut */
.formation-sticky-sidebar {
contain: layout;
}
/* Mobile sticky bar - ne pas causer de reflow quand cachée */
.mobile-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
transform: translateY(100%);
transition: transform 0.3s ease;
will-change: transform;
contain: layout style;
}
.mobile-sticky-bar.is-visible {
transform: translateY(0);
}