/* ---------- Custom Fonts ---------- */
@font-face {
font-family: 'TANNIMBUS';
src: url('TAN-NIMBUS.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Google Fonts sont chargées via dans chaque page HTML (meilleures performances) */
/* ---------- Variables ---------- */
:root {
/* On déclare gérer clair ET sombre : les navigateurs qui forcent le mode
sombre (Android force-dark, Samsung Internet…) cessent alors leur
inversion algorithmique et laissent notre thème sombre maîtrisé
s'appliquer. Le thème sombre est activé par la classe html.ui-dark
(posée par script.js selon la préférence système). */
color-scheme: light dark;
--violet-deep: #fcdce4;
--violet-mid: #ffe3dd;
--violet-soft: #9b11b5;
--gold: #f49a6d;
--gold-light: #fbc2a7;
--cream: rgba(255,255,255,0.3);
--cream-dark: rgba(255,255,255,0.5);
--white: #ffffff;
--text-dark: #430050;
--title-color: #9b02b9;
--text-light: #430050;
--text-muted: #765063;
--font-serif: 'TANNIMBUS', serif;
--font-sans: 'Quicksand', sans-serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 32px;
--radius-full: 9999px;
--shadow-soft: 0 4px 24px rgba(155, 17, 181, 0.15);
--shadow-gold: 0 4px 24px rgba(244, 154, 109, 0.25);
--transition: .35s cubic-bezier(.4,0,.2,1);
}
/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip !important; scroll-behavior: smooth; font-size: 16px;
/* Fond clair opaque de repli : empêche le "mode sombre" des navigateurs
(Samsung Internet, Android force-dark) de transparaître derrière les
couches semi-transparentes du site. */
background-color: #fcdce4 !important;
background-image: linear-gradient(135deg, #fcdce4 0%, #ffe3dd 100%) !important;
}
/* Thème sombre maîtrisé : défini en toute fin de fichier (voir section
« THÈME SOMBRE MAÎTRISÉ ») pour l'emporter dans la cascade sur les
règles claires !important déclarées plus haut. */
body, .container{ background: transparent !important; }
body {
font-family: var(--font-sans);
color: var(--text-dark);
font-size: 18px;
line-height: 1.6;
text-align: center;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: #2e019f; text-decoration: none; transition: var(--transition); }
a:hover { opacity: 0.8; }
ul { list-style: none; }
/* ---------- Typography ---------- */
h1,h2,h3,h4 {
color: var(--title-color);
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h1 em, h2 em, h3 em, .text-gold {
color: #d4845c !important;
font-style: italic;
text-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Harmonisation avec le titre principal */
}
p {
font-size: 18px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5rem;
}
/* ---------- Utilities ---------- */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.section {
padding: 100px 0;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(255,255,255,0.3);
}
/* Alternance automatique de tons clairs/sombres pour les sections successives */
section:nth-of-type(odd) {
background: rgba(255, 255, 255, 0.78) !important;
}
section:nth-of-type(even) {
background: rgba(255, 255, 255, 0.70) !important;
}
/* Les héros de pages restent très clairs */
.hero, .page-hero {
background: rgba(255, 255, 255, 0.65) !important;
}
.text-center { text-align: center; }
.text-gold { color: #d4845c; }
.divider {
width: 60px; height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
margin: 20px auto;
border-radius: var(--radius-full);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 32px;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: .9rem; font-weight: 500; letter-spacing: .05em;
cursor: pointer; border: none; transition: var(--transition);
text-transform: uppercase;
}
.btn-primary {
background: linear-gradient(135deg, #f49a6d, #fbc2a7);
color: #701d84; /* Violet moyen, moins dur que le noir mais très lisible */
font-weight: 600;
box-shadow: 0 4px 20px rgba(244, 154, 109, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(201,168,76,.45);
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--gold);
color: var(--gold);
}
.btn-outline:hover {
background: var(--gold);
color: var(--violet-deep);
transform: translateY(-2px);
}
.btn-ghost {
background: rgba(255,255,255,.9);
border: 1.5px solid rgba(67, 0, 80, 0.2);
color: #430050;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
background: rgba(255,255,255,.2);
transform: translateY(-2px);
}
/* ---------- NAVIGATION ---------- */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding: 18px 0;
transition: var(--transition);
}
.navbar.scrolled {
background: rgba(255,255,255,.95);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
padding: 12px 0;
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
text-decoration: none;
}
.nav-logo img {
height: 120px;
width: auto;
display: block;
transition: transform .3s ease, height .35s cubic-bezier(.4,0,.2,1);
background: rgba(255, 255, 255, 0.45);
border-radius: 12px;
}
.navbar.scrolled .nav-logo img {
height: 75px;
}
.nav-logo:hover img {
transform: scale(1.05);
}
.nav-links {
display: flex; align-items: center; gap: 36px;
}
.nav-links a {
font-size: .85rem; font-weight: 500; letter-spacing: .08em;
text-transform: uppercase; color: #430050;
position: relative; transition: var(--transition);
}
.nav-links a::after {
content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
height: 1.5px; background: var(--gold);
transform: scaleX(0); transform-origin: right;
transition: transform .3s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { margin-left: 12px; }
/* Hamburger */
.hamburger {
display: none; flex-direction: column; gap: 5px;
cursor: pointer; background: none; border: none; padding: 4px;
}
.hamburger span {
display: block; width: 26px; height: 2px;
background: var(--text-dark); border-radius: 2px;
transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu */
.mobile-menu {
display: none; position: fixed; inset: 0; z-index: 999;
background: rgba(255,255,255,.97);
flex-direction: column; align-items: center; justify-content: center;
gap: 32px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-family: var(--font-serif); font-size: 2rem; color: var(--text-dark);
transition: var(--transition);
}
.mobile-menu a:hover { color: var(--gold); }
/* ---------- HERO ---------- */
.hero {
min-height: 100vh;
background: rgba(255,255,255,0.65) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
position: relative;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: transparent;
}
.hero__badge {
display: inline-block;
background: #ffffff;
border: 1.5px solid var(--gold);
color: #f49a6d;
font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
padding: 8px 22px; border-radius: var(--radius-full);
margin-bottom: 24px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
position: relative; z-index: 5;
}
.hero__inner {
position: relative; z-index: 5;
width: 100%;
}
.hero__title {
margin-bottom: 16px;
text-align: center;
animation: fadeReveal 1.2s ease-out forwards;
}
.title-main {
display: inline-block;
background: linear-gradient(120deg, #430050 0%, #9b11b5 50%, #430050 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: liquidFlow 10s linear infinite;
padding: 0.05em 0.1em;
margin: -0.05em -0.1em;
}
.hero__title em {
font-style: italic;
display: inline-block;
background: linear-gradient(120deg, #d4845c 0%, #ffb84d 30%, #e65c00 70%, #d4845c 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 10px rgba(230, 92, 0, 0.05);
animation:
liquidFlow 8s linear infinite;
padding: 0.12em 0.25em;
margin: -0.12em -0.25em;
}
@keyframes fadeReveal {
0% {
opacity: 0;
filter: blur(8px);
}
100% {
opacity: 1;
filter: blur(0);
}
}
@keyframes liquidFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero__sub {
color: var(--text-muted);
font-size: 1.1rem;
margin: 24px auto 56px;
max-width: 650px;
position: relative;
}
.hero__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
position: relative;
z-index: 10;
}
/* Scroll indicator */
.hero__scroll {
position: absolute; bottom: 36px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center;
gap: 8px; color: var(--text-muted);
font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
animation: bounce 2s infinite;
z-index: 5;
}
/* ---------- JEUX DE LUMIERE HERO (LIQUIDE & PASTELE) ---------- */
.hero-light-blobs {
position: absolute;
inset: -10% !important; /* Dépassement pour masquer les bords déformés par le filtre */
width: 120% !important;
height: 120% !important;
overflow: hidden;
z-index: 1;
pointer-events: none;
opacity: 0.85; /* Rendre le mélange bien visible et harmonieux */
filter: url(#liquid-hero-filter); /* déplacement liquide (flou porté par le canvas enfant) */
transform: translateZ(0); /* Accélération matérielle */
}
.hero-light-blobs .liquid-canvas { filter: blur(15px); } /* flou universel, actif même sans filtre SVG */
.hero__scroll svg { width: 20px; height: 20px; }
@keyframes bounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* ---------- SECTION HEADERS ---------- */
.section-header { margin-bottom: 60px; }
.section-header p {
color: var(--text-muted);
max-width: 600px; margin: 16px auto 0;
}
.section-header--light p { color: var(--text-muted); }
/* ---------- CARDS ---------- */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
}
.card {
background: var(--white);
border-radius: var(--radius-md);
padding: 36px 28px;
box-shadow: var(--shadow-soft);
transition: var(--transition);
position: relative; overflow: hidden;
}
a.card {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
transform: scaleX(0); transform-origin: left;
transition: transform .4s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(59,31,106,.2); }
.card:hover::before { transform: scaleX(1); }
.card--dark {
background: rgba(255,255,255,.4);
border: 1px solid rgba(255,255,255,.5);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.card--dark h3,
.card--dark h4 { color: var(--title-color); }
.card--dark p { color: var(--text-muted); }
.card__icon {
font-size: 2.4rem;
margin-bottom: 20px;
display: block;
}
.card__tags {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
margin-top: auto; /* Push tags to the bottom */
margin-bottom: 16px;
}
.card__tag {
background: rgba(107,63,160,.12);
color: var(--violet-soft);
font-size: .75rem; font-weight: 500; letter-spacing: .05em;
padding: 4px 12px; border-radius: var(--radius-full);
}
.card--dark .card__tag {
background: rgba(212, 132, 92, 0.12);
color: #b25329;
font-weight: 600;
}
.card__more {
margin-top: 8px; /* Fixed margin below tags */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 24px;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: .85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
border: 1.5px solid var(--gold);
color: var(--gold);
align-self: center;
transition: var(--transition);
}
.card:hover .card__more {
background: var(--gold);
color: var(--violet-deep) !important;
}
/* ---------- ABOUT SECTION ---------- */
.about-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 72px; align-items: center;
}
/* Dans les sections about-grid, les paragraphes doivent être
alignés à gauche (le CSS global applique margin: auto qui les centre) */
.about-grid p,
.about-content p {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
.about-img {
position: relative;
display: inline-block;
justify-self: center;
}
.about-img img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 520px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}
.about-stats {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px; margin-top: 40px;
}
.stat {
text-align: center;
background: var(--cream-dark);
padding: 24px 16px;
border-radius: var(--radius-sm);
}
.stat__num {
font-family: var(--font-serif);
font-size: 2.2rem; color: var(--violet-soft);
display: block;
}
.stat__label { font-size: .8rem; color: var(--text-muted); }
/* ---------- TESTIMONIALS ---------- */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.testimonial {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.05);
border-radius: var(--radius-md);
padding: 32px;
box-shadow: var(--shadow-soft);
}
.testimonial__stars { color: var(--gold); font-size: 1.1rem; margin-bottom: 16px; }
.testimonial__text {
color: #430050;
font-style: italic; margin-bottom: 20px;
font-family: var(--font-sans); font-size: 1.1rem;
}
.testimonial__author { color: #430050; opacity: 0.8; font-size: .9rem; font-weight: 600; }
/* ---------- PRICING / FORMATION CARDS ---------- */
.formation-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
max-width: 1100px;
margin-inline: auto;
}
.formation-card {
flex: 1 1 340px;
max-width: 480px;
background: var(--white);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition);
display: flex; flex-direction: column;
}
.formation-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(59,31,106,.2); }
.formation-card--featured {
border: 2px solid var(--gold);
position: relative;
}
.formation-card__badge {
position: absolute; top: 20px; right: 20px;
background: var(--gold); color: var(--violet-deep);
font-size: .7rem; font-weight: 600; letter-spacing: .1em;
padding: 4px 12px; border-radius: var(--radius-full);
text-transform: uppercase;
}
.formation-card__header {
padding: 32px 28px 24px;
background: linear-gradient(135deg, var(--violet-deep), var(--violet-mid));
color: var(--white);
}
.formation-card__header .icon { font-size: 2.2rem; margin-bottom: 12px; }
.formation-card__header h3 {
color: var(--title-color);
margin-bottom: 8px;
font-size: clamp(1.2rem, 2.2vw, 1.45rem);
line-height: 1.35;
overflow-wrap: break-word;
word-wrap: break-word;
}
.formation-card__header p { color: var(--text-muted); font-size: .9rem; }
.formation-card__body {
padding: 28px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.formation-card__features {
display: inline-flex;
flex-direction: column;
gap: 12px;
margin: 0 auto 28px;
text-align: left;
}
.formation-card__feature {
display: flex; align-items: flex-start; gap: 10px;
font-size: .9rem; color: var(--text-dark);
}
.formation-card__feature::before {
content: '✦';
color: var(--gold); flex-shrink: 0; margin-top: 2px;
}
.formation-card__footer { padding: 0 28px 28px; }
/* ---------- RESERVATION PAGE ---------- */
.booking-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 48px; align-items: start;
}
.booking-info { position: sticky; top: 100px; }
.booking-info h2 { margin-bottom: 20px; }
.contact-item {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 20px;
}
.contact-item .icon {
width: 40px; height: 40px; flex-shrink: 0;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.contact-item__text strong { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 2px; }
.contact-item__text span { color: var(--text-muted); font-size: .9rem; }
/* ---------- CTA BANNER ---------- */
.cta-banner {
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(255,255,255,0.3);
padding: 120px 0; text-align: center;
}
.cta-banner h2 { color: var(--text-dark); margin-bottom: 16px; }
.cta-banner p { color: var(--text-muted); margin-bottom: 36px; max-width: 500px; margin-inline: auto; margin-bottom: 36px; }
/* ---------- FOOTER ---------- */
.footer {
background: var(--violet-deep);
color: var(--text-muted);
padding: 60px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1.4fr;
gap: 40px; margin-bottom: 48px;
}
.footer-brand .nav-logo { margin-bottom: 16px; display: block; }
.footer-brand p { font-size: .85rem; line-height: 1.8; }
.footer-col h4 {
color: var(--gold); font-family: var(--font-sans);
font-size: .8rem; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; margin-bottom: 20px;
}
.footer-col > ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .8rem; transition: var(--transition); white-space: nowrap; }
.footer-col a:hover { color: var(--gold); }
.social-links { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.social-link {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(107,63,160,.1);
border-radius: 50%;
font-size: 1.1rem;
transition: var(--transition);
overflow: hidden;
}
.social-link img {
width: 22px; height: 22px;
object-fit: contain;
}
.social-link:hover {
background: var(--violet-soft);
color: var(--white);
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 28px;
display: flex; justify-content: space-between; align-items: center;
font-size: .8rem;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a:hover { color: var(--gold); }
/* ---------- DECORATIONS ---------- */
/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
flex-direction: column;
padding-top: 100px; padding-bottom: 80px;
position: relative; overflow: hidden;
text-align: center;
background: rgba(255,255,255,0.65) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
}
.page-hero::before {
content: '';
position: absolute; top: -50%; right: -20%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(201,168,76,.15), transparent 70%);
border-radius: 50%;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__badge {
display: inline-block;
background: #ffffff;
border: 1.5px solid var(--gold);
color: #f49a6d;
font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
padding: 8px 22px; border-radius: var(--radius-full);
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.page-hero h1 { color: var(--title-color); margin-bottom: 16px; }
.page-hero p { color: var(--text-muted); max-width: 580px; font-size: 1.05rem; margin-inline: auto; }
/* ---------- ACCORDION ---------- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion-item {
background: var(--white);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.accordion-trigger {
width: 100%; padding: 20px 24px;
display: flex; justify-content: space-between; align-items: center;
background: none; border: none; cursor: pointer;
font-family: var(--font-serif); font-size: 1.1rem;
color: var(--text-dark); transition: var(--transition);
}
.accordion-trigger:hover { color: var(--violet-soft); }
.accordion-trigger .chevron {
transition: transform .3s ease;
color: var(--gold); flex-shrink: 0;
}
.accordion-trigger.open .chevron { transform: rotate(180deg); }
.accordion-content {
max-height: 0; overflow: hidden;
transition: max-height .4s ease, padding .4s ease;
}
.accordion-content.open { max-height: 1000px; }
.accordion-content__inner {
padding: 0 24px 24px;
color: var(--text-muted); font-size: .95rem; line-height: 1.8;
}
/* ---------- SESSIONS DE FORMATION ---------- */
.session-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-inline: auto; }
.session-item {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 24px; border-radius: 16px;
background: var(--cream-dark); border: 1.5px solid rgba(155,17,181,.12);
}
.session-item--complet, .session-item--passe { opacity: .6; }
.session-item__date { font-weight: 700; color: var(--title-color); }
.session-item__meta { font-size: .85rem; color: var(--text-muted); margin-top: 2px; }
.session-item__badge {
flex-shrink: 0; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
background: rgba(16,185,129,.12); color: #0e9668;
}
.session-item--complet .session-item__badge,
.session-item--passe .session-item__badge { background: rgba(118,80,99,.12); color: var(--text-muted); }
/* ---------- PROCESS STEPS ---------- */
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px; position: relative;
}
.process-step {
text-align: center;
position: relative;
}
.process-step__num {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: var(--violet-deep);
font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
}
.process-step h4 { margin-bottom: 10px; color: var(--title-color); }
.process-step p { font-size: .9rem; color: var(--text-muted); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.booking-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.booking-info { position: static; }
}
@media (max-width: 768px) {
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
.navbar { padding: 10px 0; }
.nav-logo img { height: 50px; }
.navbar.scrolled .nav-logo img { height: 42px; }
.hero__actions { flex-direction: column; align-items: center; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
.process-steps { grid-template-columns: 1fr 1fr; }
.formation-grid { flex-direction: column; align-items: center; }
.formation-card { width: 100%; max-width: 460px; flex: none; }
.about-img {
display: block;
width: 85%;
max-width: 340px;
margin: 0 auto;
}
.about-img img {
width: 100%;
max-height: none;
}
}
@media (max-width: 480px) {
.section { padding: 64px 0; }
.about-stats { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; }
}
/* ---------- ANIMATIONS ON SCROLL ---------- */
.fade-up {
opacity: 0; transform: translateY(30px);
transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible {
opacity: 1; transform: translateY(0);
}
.fade-up:nth-child(2) { transition-delay: .1s; }
.fade-up:nth-child(3) { transition-delay: .2s; }
.fade-up:nth-child(4) { transition-delay: .3s; }
/* ---------- ANIMATED BACKGROUND (LIQUID FLOW) ---------- */
#site-bg {
position: fixed;
inset: -10% !important; /* Dépassement pour masquer les bords déformés par le filtre */
width: 120% !important;
height: 120% !important;
z-index: -9999;
pointer-events: none;
overflow: hidden;
/* Seul le déplacement liquide (filtre SVG) est porté par le conteneur.
Le flou est appliqué sur le canvas enfant ci-dessous : ainsi, si un
navigateur mobile n'applique pas le filtre SVG, le flou reste actif
et le fond demeure un dégradé doux — jamais des "orbes" nettes. */
filter: url(#liquid-bg-filter);
transform: translateZ(0); /* Accélération matérielle */
}
#site-bg canvas {
width: 100%;
height: 100%;
display: block;
filter: blur(25px); /* flou universel (indépendant du filtre SVG du parent) */
}
/* ---------- FONDS LIQUIDES DE SECTION ---------- */
.section {
position: relative; /* Indispensable pour positionner le fond absolu */
}
.section-liquid-bg {
position: absolute;
inset: -10% !important; /* Dépassement pour masquer les bords déformés par le filtre */
width: 120% !important;
height: 120% !important;
overflow: hidden;
z-index: 1; /* S'affiche devant le fond du bloc, mais derrière le contenu */
pointer-events: none;
opacity: 0.85; /* Rendre le mélange liquide visible tout en restant subtil */
filter: url(#liquid-hero-filter); /* déplacement liquide (flou porté par le canvas enfant) */
transform: translateZ(0);
}
.section-liquid-bg .liquid-canvas { filter: blur(20px); } /* flou universel, actif même sans filtre SVG */
.liquid-canvas {
width: 100%;
height: 100%;
display: block;
}
/* S'assurer que le contenu textuel et les cartes s'affichent devant le fond animé de manière générique */
[data-liquid-theme] {
position: relative !important;
}
/* Décors exclus : ils doivent rester en position absolue derrière le contenu,
alors que cette règle force position:relative + z-index:2. */
[data-liquid-theme] > *:not(.section-liquid-bg):not(.hero-light-blobs) {
position: relative;
z-index: 2; /* S'affiche devant le fond liquide */
}
/* ---------- DROPDOWN NAVIGATION (DESKTOP) ---------- */
@media (min-width: 769px) {
.nav-links li {
position: relative;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
min-width: 220px;
border-radius: var(--radius-md);
border: 1px solid rgba(107, 63, 160, 0.1);
box-shadow: 0 10px 30px rgba(155, 17, 181, 0.08);
padding: 12px 0;
margin-top: 8px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
z-index: 1000;
}
.dropdown-menu li {
width: 100%;
}
.dropdown-menu a {
display: block;
padding: 10px 20px;
color: var(--text-muted) !important;
font-size: 0.88rem;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
text-align: left;
transition: var(--transition);
}
.dropdown-menu li:first-child a {
color: var(--text-dark) !important;
font-weight: 700;
border-bottom: 1px dashed rgba(107, 63, 160, 0.15);
padding-bottom: 12px;
margin-bottom: 6px;
}
.dropdown-menu a:hover {
background: rgba(155, 17, 181, 0.05);
color: var(--violet-soft) !important;
padding-left: 24px;
}
.dropdown-toggle .arrow {
font-size: 0.6rem;
margin-left: 4px;
display: inline-block;
transition: transform 0.3s ease;
vertical-align: middle;
}
.dropdown:hover .dropdown-toggle .arrow {
transform: rotate(180deg);
}
}
/* ---------- DROPDOWN NAVIGATION (MOBILE) ---------- */
.mobile-dropdown {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-dropdown-toggle {
width: 100%;
padding: 12px 0;
font-size: 2rem;
font-family: var(--font-serif);
color: var(--text-dark);
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
outline: none;
transition: var(--transition);
}
.mobile-dropdown-toggle:hover {
color: var(--gold);
}
.mobile-dropdown-toggle .arrow {
font-size: 0.5em;
transition: transform 0.3s ease;
}
.mobile-dropdown-toggle.open .arrow {
transform: rotate(180deg);
}
.mobile-dropdown-menu {
max-height: 0;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(107, 63, 160, 0.03);
border-radius: var(--radius-sm);
transition: max-height 0.35s ease-out;
}
.mobile-dropdown-menu.open {
max-height: 750px;
margin-top: 4px;
margin-bottom: 8px;
padding: 8px 0;
}
.mobile-dropdown-menu a {
padding: 8px 0;
font-size: 0.95rem !important;
color: var(--text-muted) !important;
width: 100%;
text-align: center;
}
.mobile-dropdown-menu a.active {
color: var(--violet-soft) !important;
font-weight: 600;
}
.mobile-dropdown-menu a:first-child {
color: var(--text-dark) !important;
font-weight: 600;
border-bottom: 1px dashed rgba(107, 63, 160, 0.15);
padding-bottom: 10px;
margin-bottom: 6px;
}
/* ---------- NEWSLETTER SECTION (LEAD MAGNET) ---------- */
.newsletter-card {
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius-md);
padding: 56px;
box-shadow: var(--shadow-soft);
max-width: 1040px;
margin: 0 auto;
}
.newsletter-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 56px;
align-items: center;
}
.newsletter-mockup {
display: flex;
justify-content: center;
align-items: center;
}
.guide-book-img {
max-width: 290px;
width: 100%;
height: auto;
border-radius: 6px 16px 16px 6px;
box-shadow: 0 20px 50px rgba(107, 63, 160, 0.22);
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.newsletter-card:hover .guide-book-img {
transform: translateY(-8px) rotate(-1.5deg) scale(1.02);
box-shadow: 0 30px 60px rgba(107, 63, 160, 0.3);
}
.newsletter-info h2 {
font-size: 2.2rem;
line-height: 1.25;
margin-bottom: 16px;
}
.newsletter-desc {
color: var(--text-muted);
font-size: 1.02rem;
line-height: 1.6;
margin-bottom: 32px;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.newsletter-form .form-group {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.newsletter-form label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-dark);
}
.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
width: 100%;
padding: 14px 18px;
border: 1.5px solid rgba(107, 63, 160, 0.15);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.8);
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text-dark);
transition: var(--transition);
}
.newsletter-form input[type="text"]:focus,
.newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--violet-soft);
background: var(--white);
box-shadow: 0 0 0 4px rgba(155, 17, 181, 0.1);
}
.newsletter-form .checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}
.newsletter-form .checkbox-group input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
accent-color: var(--violet-soft);
width: auto;
}
.newsletter-form .checkbox-group label {
font-size: 0.8rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.5;
cursor: pointer;
}
.newsletter-badges {
display: flex;
gap: 24px;
margin-top: 28px;
justify-content: flex-start;
font-size: 0.82rem;
color: var(--violet-soft);
font-weight: 600;
flex-wrap: wrap;
}
.newsletter-badges span {
display: flex;
align-items: center;
gap: 6px;
}
@media (max-width: 768px) {
.newsletter-card {
padding: 32px 24px;
}
.newsletter-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.guide-book-img {
max-width: 190px;
}
.newsletter-info h2 {
font-size: 1.8rem;
text-align: center;
}
.newsletter-desc {
font-size: 0.95rem;
text-align: center;
}
.newsletter-badges {
justify-content: center;
gap: 16px;
}
}
/* ---------- SUGGESTION SECTION ---------- */
.suggestion-section {
padding: 80px 0;
text-align: center;
position: relative;
z-index: 10;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(107, 63, 160, 0.05);
}
.suggestion-title {
font-family: var(--font-serif);
color: var(--text-dark);
font-size: clamp(1.4rem, 3.5vw, 2rem);
margin-bottom: 36px;
}
.suggestion-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
padding: 0 16px;
}
.suggestion-card {
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: var(--radius-md);
padding: 24px;
flex: 1 1 200px;
max-width: 260px;
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(107, 63, 160, 0.03);
}
.suggestion-card:hover {
transform: translateY(-5px);
background: var(--white);
border-color: var(--gold-light);
box-shadow: 0 10px 25px rgba(59, 31, 106, 0.1);
}
/* Carte suggestion « Soin Boost » : reprend l'identité cosmique du soin
(fond nuit, liseré doré, étoiles scintillantes), en clair comme en sombre. */
.suggestion-card--boost {
background: linear-gradient(145deg, #1f0c3d, #0c031a) !important;
border: 2px solid rgba(255, 206, 0, 0.5) !important;
box-shadow: 0 4px 24px rgba(255, 206, 0, 0.18) !important;
position: relative;
overflow: hidden;
}
.suggestion-card--boost:hover {
background: linear-gradient(145deg, #2a1150, #120627) !important;
border-color: var(--gold) !important;
box-shadow: 0 10px 32px rgba(255, 206, 0, 0.3) !important;
}
.suggestion-card--boost h4 { color: var(--gold) !important; position: relative; z-index: 2; }
/* :not(.star-twinkle) — les étoiles sont aussi des et doivent rester
en position absolue, sans héritage de couleur ni de z-index du texte. */
.suggestion-card--boost span:not(.star-twinkle) {
color: rgba(255,255,255,0.75) !important;
position: relative;
z-index: 2;
}
.suggestion-card--boost .icon { position: relative; z-index: 2; }
.suggestion-card .icon {
font-size: 1.8rem;
margin-bottom: 12px;
transition: transform 0.3s ease;
}
.suggestion-card:hover .icon {
transform: scale(1.15);
}
.suggestion-card h4 {
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
line-height: 1.35;
}
.suggestion-card span {
font-size: 0.75rem;
color: var(--gold);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Footer dropdown/accordion */
.footer-details {
cursor: pointer;
margin-top: 4px;
}
.footer-details summary {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: .8rem;
color: var(--text-muted);
transition: var(--transition);
-webkit-user-select: none;
user-select: none;
font-weight: 500;
}
.footer-details summary::-webkit-details-marker {
display: none;
}
.footer-details summary:hover {
color: var(--gold);
}
.footer-details summary .arrow {
font-size: 0.65rem;
transition: transform 0.2s ease;
display: inline-block;
}
.footer-details[open] summary .arrow {
transform: rotate(180deg);
}
.footer-sublist {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
list-style: none;
align-items: center;
}
/* High Ticket Soin Boost Card (Universe theme with Twinkling Stars) */
.card-universe {
position: relative;
width: 100%;
max-width: 480px;
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid rgba(255, 206, 0, 0.4);
box-shadow: 0 8px 32px rgba(17, 5, 44, 0.6), 0 0 20px rgba(255, 206, 0, 0.15);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
background: #04010a;
}
.card-universe:hover {
transform: translateY(-10px) scale(1.02);
border-color: var(--gold);
box-shadow: 0 20px 50px rgba(255, 206, 0, 0.35), 0 0 30px rgba(107, 63, 160, 0.4);
}
.card-universe .universe-bg {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, #200b47 0%, #0a0216 70%, #030006 100%);
z-index: 1;
overflow: hidden;
}
.card-universe .universe-stars {
position: absolute;
inset: 0;
background-image:
radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,0.7), transparent),
radial-gradient(1.5px 1.5px at 120px 240px, rgba(255,255,255,0.8), transparent),
radial-gradient(1.5px 1.5px at 220px 40px, rgba(255,255,255,0.7), transparent),
radial-gradient(2px 2px at 320px 180px, rgba(255, 226, 147, 0.9), transparent),
radial-gradient(1.5px 1.5px at 380px 280px, rgba(255,255,255,0.7), transparent),
radial-gradient(1.5px 1.5px at 80px 140px, rgba(255, 226, 147, 0.8), transparent),
radial-gradient(1.5px 1.5px at 280px 220px, rgba(255,255,255,0.7), transparent);
z-index: 2;
opacity: 0.5;
}
/* Étoile scintillante — classe autonome, utilisable dans n'importe quel bloc
« Soin Boost ». Elle était auparavant limitée à quelques conteneurs précis
(.card-universe, .suggestion-card…), si bien que toute nouvelle carte devait
être ajoutée ici sous peine d'étoiles invisibles. Le conteneur doit être en
position: relative et overflow: hidden. */
.star-twinkle {
position: absolute;
width: 3.5px; height: 3.5px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px #fff, 0 0 12px var(--gold);
z-index: 3;
animation: starTwinkle 3s infinite ease-in-out;
}
@keyframes starTwinkle {
0%, 100% { opacity: 0.15; transform: scale(0.7); }
50% { opacity: 1; transform: scale(1.3); }
}
.card-universe .card-content {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
background: transparent !important;
}
.card-universe .formation-card__header,
.card-universe .formation-card__body,
.card-universe .formation-card__footer {
background: transparent !important;
color: #fff !important;
}
.card-universe .formation-card__header h3 {
color: #fff !important;
}
.card-universe .formation-card__feature {
color: rgba(255, 255, 255, 0.9) !important;
}
.card-universe .formation-card__feature::before {
color: var(--gold) !important;
}
/* ---------- NESTED DROPDOWN (SUB-DROPDOWN) ---------- */
/* Global / Base Styles */
.nested-dropdown {
position: relative;
width: 100%;
}
.nested-dropdown-toggle {
display: flex !important;
align-items: center;
justify-content: space-between !important;
cursor: pointer;
width: 100%;
transition: var(--transition);
}
.nested-dropdown-menu {
display: none !important;
list-style: none;
padding: 4px 0;
margin: 0;
background: rgba(107, 63, 160, 0.02);
}
.nested-dropdown-menu.open {
display: block !important;
}
.nested-arrow {
font-size: 0.55rem;
transition: transform 0.3s ease;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
}
.nested-dropdown-toggle.open .nested-arrow {
transform: rotate(180deg);
}
/* Header Specifics (desktop) */
@media (min-width: 769px) {
.dropdown-menu .nested-dropdown-toggle {
padding: 10px 20px;
color: var(--text-muted) !important;
font-size: 0.88rem;
font-weight: 500;
}
.dropdown-menu .nested-dropdown-toggle:hover {
background: rgba(155, 17, 181, 0.05);
color: var(--violet-soft) !important;
padding-left: 24px;
}
.dropdown-menu .nested-dropdown-menu a {
padding-left: 32px !important;
}
.dropdown-menu .nested-dropdown-menu a:hover {
padding-left: 36px !important;
}
.dropdown-menu .nested-dropdown-menu li:first-child a {
color: var(--text-dark) !important;
font-weight: 700;
}
}
/* Footer Specifics */
.footer-col .nested-dropdown-toggle {
padding: 6px 0;
color: var(--text-muted) !important;
font-size: 0.8rem;
font-weight: 500;
justify-content: center !important;
gap: 6px;
}
.footer-col .nested-dropdown-toggle:hover {
color: var(--gold) !important;
}
.footer-col .nested-dropdown-menu {
background: transparent !important;
}
.footer-col .nested-dropdown-menu a {
padding: 6px 0 6px 16px !important;
font-size: 0.8rem !important;
text-align: left;
}
.footer-col .nested-dropdown-menu a:hover {
padding-left: 20px !important;
}
.footer-col .nested-dropdown-menu li:first-child a {
color: var(--text-dark) !important;
font-weight: 700;
}
/* Mobile Nested Dropdowns (Header Menu mobile) */
.mobile-nested-dropdown {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-nested-toggle {
width: 100%;
padding: 8px 0;
font-size: 0.95rem;
font-family: inherit;
color: var(--text-muted);
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
outline: none;
transition: var(--transition);
}
.mobile-nested-toggle:hover {
color: var(--gold);
}
.mobile-nested-toggle .nested-arrow {
font-size: 0.55em;
transition: transform 0.3s ease;
}
.mobile-nested-toggle.open .nested-arrow {
transform: rotate(180deg);
}
.mobile-nested-menu {
max-height: 0;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(107, 63, 160, 0.02);
transition: max-height 0.3s ease-out;
}
.mobile-nested-menu.open {
max-height: 250px;
padding: 4px 0;
}
.mobile-nested-menu a {
padding: 6px 0;
font-size: 0.88rem !important;
color: var(--text-muted) !important;
width: 100%;
text-align: center;
}
/* ============================================================
BANNIÈRE DE CONSENTEMENT COOKIES (RGPD)
============================================================ */
/* Barre pleine largeur, ancrée en bas de l'écran */
#cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 99998;
transform: translateY(100%);
padding: 18px 24px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--violet-deep);
box-shadow: 0 -8px 32px rgba(67, 0, 80, 0.14);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
/* si le panneau est ouvert sur un petit écran, la barre reste défilable */
max-height: 92vh;
overflow-y: auto;
}
/* Contenu centré et borné : texte à gauche, boutons à droite */
.cookie-banner__inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 32px;
}
.cookie-banner__message { flex: 1 1 380px; min-width: 0; }
.cookie-banner__side {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
}
#cookie-banner.cookie-banner--visible {
transform: translateY(0);
opacity: 1;
}
.cookie-banner__title {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
color: var(--title-color);
}
.cookie-banner__text {
margin: 0;
font-family: var(--font-sans);
font-size: 0.88rem;
line-height: 1.5;
color: var(--text-dark);
}
.cookie-banner__text a {
color: var(--violet-soft);
text-decoration: underline;
font-weight: 600;
}
.cookie-banner__actions {
display: flex;
gap: 10px;
justify-content: stretch;
}
.cookie-banner__actions .cookie-banner__btn { min-width: 148px; }
.cookie-banner__btn {
flex: 1;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 600;
padding: 10px 16px;
border-radius: var(--radius-full);
border: 2px solid transparent;
cursor: pointer;
text-align: center;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cookie-banner__btn:hover { transform: translateY(-1px); }
.cookie-banner__btn--primary {
background: var(--violet-soft);
color: #fff;
}
.cookie-banner__btn--primary:hover {
box-shadow: 0 6px 18px rgba(155, 17, 181, 0.35);
}
.cookie-banner__btn--ghost {
background: transparent;
color: var(--text-dark);
border-color: var(--violet-deep);
}
.cookie-banner__btn--ghost:hover {
background: var(--violet-deep);
}
/* Refus en un clic (exigence CNIL) : présent et cliquable sur le même écran,
présenté comme un lien discret plutôt qu'un bouton concurrent. */
.cookie-banner__decline {
align-self: center;
background: none;
border: 0;
padding: 2px 4px;
font-family: var(--font-sans);
font-size: 0.76rem;
color: var(--text-muted);
text-decoration: underline;
cursor: pointer;
transition: color 0.2s ease;
}
.cookie-banner__decline:hover { color: var(--text-dark); }
/* Panneau « Personnaliser » : replié par défaut, déplié au clic sur le bouton.
IMPORTANT : la règle [hidden] doit venir après (et avec la même spécificité
au moins) sinon `display: flex` écrase l'attribut hidden du HTML et le
panneau s'affiche en permanence. */
.cookie-banner__panel {
flex: 1 1 100%;
order: 3; /* toujours sous la rangée texte + boutons */
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
padding: 14px 16px;
background: rgba(155, 17, 181, 0.04);
border: 1px solid rgba(155, 17, 181, 0.16);
border-radius: var(--radius-sm);
}
.cookie-banner__panel[hidden] { display: none; }
.cookie-choice {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.cookie-choice__body { display: flex; flex-direction: column; gap: 2px; }
.cookie-choice__name {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-dark);
}
.cookie-choice__desc {
font-size: 0.75rem;
line-height: 1.4;
color: var(--text-muted);
}
.cookie-choice__fixed {
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
padding-top: 2px;
}
.cookie-choice__toggle {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--violet-soft);
cursor: pointer;
}
@media (max-width: 720px) {
#cookie-banner { padding: 16px; }
/* Tout empile : message, puis boutons pleine largeur */
.cookie-banner__inner { gap: 12px; }
.cookie-banner__message { flex: 1 1 100%; }
.cookie-banner__side { flex: 1 1 100%; }
.cookie-banner__actions .cookie-banner__btn { min-width: 0; }
.cookie-banner__text { font-size: 0.84rem; }
}
/* ============================================================
THÈME SOMBRE MAÎTRISÉ (placé en fin de fichier à dessein)
Ne s'active que si l'appareil demande le mode sombre. Redéfinit la
palette et les surfaces claires « en dur » vers des tons aubergine
profonds, en conservant l'identité (violet / doré / rose) et la
lisibilité. Objectif : reprendre le contrôle du design plutôt que
subir l'obscurcissement automatique des navigateurs mobiles.
Étant en dernier, ce bloc gagne la cascade sur les règles !important
claires déclarées plus haut (héros, sections, etc.).
============================================================ */
/* ---------- Encadré anti-robots (captcha maison) ---------- */
.et-captcha {
--captcha-icon: 34px;
--captcha-gap: 14px;
display: flex;
align-items: center;
gap: var(--captcha-gap);
background: rgba(155, 17, 181, 0.05);
border: 1px solid rgba(155, 17, 181, 0.22);
border-radius: var(--radius-sm);
padding: 14px 16px;
margin-bottom: 20px;
}
.et-captcha__icon {
flex-shrink: 0;
width: var(--captcha-icon); height: var(--captcha-icon);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
background: rgba(155, 17, 181, 0.10);
border-radius: 50%;
}
/* Le bouclier mange de la place à gauche : on réserve la même largeur à droite
pour que le texte se centre sur l'encadré entier, et non sur l'espace restant.
Sans effet visible quand le formulaire aligne à gauche (page contact). */
.et-captcha__body {
flex: 1; min-width: 0;
padding-right: calc(var(--captcha-icon) + var(--captcha-gap));
}
.et-captcha__label {
display: block;
font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted);
margin-bottom: 6px;
}
/* inline-flex (et non flex) : la ligne se comporte comme du texte et suit donc
le text-align hérité du formulaire — centrée sur la newsletter, alignée à
gauche sur le formulaire de contact, sans règle spécifique à chaque page. */
.et-captcha__row {
display: inline-flex; vertical-align: top;
align-items: center; gap: 10px; flex-wrap: wrap;
max-width: 100%;
}
.et-captcha .et-captcha__question {
font-size: 1.15rem; font-weight: 700;
color: var(--title-color);
font-variant-numeric: tabular-nums;
white-space: nowrap;
margin: 0;
}
.et-captcha .et-captcha__question::after { content: " ="; opacity: .6; }
.et-captcha input.et-captcha__answer {
width: 92px; flex-shrink: 0;
padding: 8px 12px;
text-align: center;
font-size: 1rem; font-weight: 600;
}
/* Sur mobile l'encadré descend à ~288px : sans ce resserrement, la marge de
centrage ne laisse que 160px pour une ligne qui en fait exactement 160. */
@media (max-width: 600px) {
.et-captcha { --captcha-gap: 10px; padding: 12px; }
}
/* ============================================================
THÈME SOMBRE MAÎTRISÉ
Activé via la classe html.ui-dark (posée par script.js selon la
préférence système, avec override ?theme=dark / ?theme=light).
Objectif : un fond sombre propre et uni, une typographie lisible et des
boutons nets. Aucun décor animé en sombre (pas de canvas) : c'est ce
bloc CSS qui fait tout le rendu.
============================================================ */
html.ui-dark {
color-scheme: dark;
/* Teintes claires -> surfaces sombres */
--violet-deep: #1f1a24; /* fond footer, bordures */
--violet-mid: #262030;
--violet-soft: #e2a2ee; /* accents / liens / état actif */
--gold: #f7ad7e; /* doré (boutons CTA) */
--gold-light: #fbc2a7;
--cream: rgba(255,255,255,0.04);
--cream-dark: rgba(255,255,255,0.08);
--white: #201a26; /* fond des cartes / panneaux */
--text-dark: #f1ecf3; /* texte principal */
--title-color: #e9b6f2; /* titres */
--text-light: #f1ecf3;
--text-muted: #c6bcd0; /* texte secondaire (lisible) */
--shadow-soft: 0 6px 28px rgba(0,0,0,0.55);
--shadow-gold: 0 6px 28px rgba(0,0,0,0.55);
/* Dégradé nocturne porté par la racine. Le fond de la racine est propagé
au canevas mais reste dimensionné sur la boîte de , c'est-à-dire
sur toute la hauteur du document : il défile donc avec la page au lieu
de rester collé à l'écran. */
background-color: #08050d !important;
background-image: linear-gradient(180deg,
#150c26 0%, #0f0a1a 18%, #0b0713 38%,
#120a20 58%, #0d0715 78%, #08050d 100%) !important;
/* Réglages du décor « cosmos » (voir plus bas) */
--cosmos-neb-opacite: .55;
--cosmos-neb-flou: 70px;
--cosmos-respiration: 8.571s; /* 60 / 7 : sept respirations par minute */
}
html.ui-dark body { color: var(--text-dark); }
/* Halos pastels locaux masqués : ils n'ont de sens que sur le thème clair. */
html.ui-dark .hero-light-blobs,
html.ui-dark .section-liquid-bg { display: none !important; }
/* Le fond liquide clair est fixé à l'écran : sans objet en sombre. */
html.ui-dark #site-bg { display: none !important; }
/* ============================================================
DÉCOR « COSMOS » DU THÈME SOMBRE
Nébuleuses colorées qui dérivent et respirent (7 cycles/minute),
champ d'étoiles qui scintille. Le tout appartient à la page et
défile avec elle — rien n'est accroché à l'écran.
Le conteneur et son contenu sont créés par script.js
(initCosmosBackground), et retirés dès qu'on repasse en clair.
============================================================ */
/* Filet de sécurité : si un conteneur survivait à un changement de thème,
il resterait invisible en clair au lieu de casser la mise en page. */
#cosmos-bg { display: none; }
html.ui-dark #cosmos-bg {
display: block;
position: absolute; inset: 0; /* épouse la hauteur du document */
z-index: -1; /* devant le fond de la racine, derrière tout le contenu */
overflow: hidden;
pointer-events: none;
}
/* body sert de repère au décor. Uniquement en sombre : le thème clair
conserve exactement son comportement d'origine. */
html.ui-dark body { position: relative; }
/* ---------- Nébuleuses ---------- */
html.ui-dark .cosmos-neb {
position: absolute;
border-radius: 50%;
filter: blur(var(--cosmos-neb-flou));
mix-blend-mode: screen;
opacity: var(--cosmos-neb-opacite); /* repli si les animations sont coupées */
/* Pas de will-change : ces halos font près de 1000 px de côté et une couche
composée coûte ~3,5 Mo chacune. Le navigateur promeut de toute façon les
éléments dont transform/opacity sont animés, le temps de l'animation. */
/* Deux animations superposées : la dérive agit sur transform, la
respiration sur opacity — elles ne se marchent donc pas dessus. */
animation:
var(--cosmos-derive) var(--cosmos-derive-duree) ease-in-out infinite alternate,
cosmosRespire var(--cosmos-respiration) ease-in-out infinite;
}
@keyframes cosmosDerive1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vw, 5vh, 0) scale(1.18); } }
@keyframes cosmosDerive2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-11vw, 7vh, 0) scale(.9); } }
@keyframes cosmosDerive3 { from { transform: translate3d(0,0,0) scale(.95); } to { transform: translate3d(7vw, -6vh, 0) scale(1.22); } }
@keyframes cosmosDerive4 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-8vw, -5vh, 0) scale(1.3); } }
/* Inspiration plus courte que l'expiration (42 % / 58 %), comme un vrai
souffle : le sommet est atteint à 3,6 s, le retour prend 5,0 s. */
@keyframes cosmosRespire {
0%, 100% { opacity: calc(var(--cosmos-neb-opacite) * .58); }
42% { opacity: calc(var(--cosmos-neb-opacite) * 1.2); }
}
/* ---------- Étoiles ---------- */
html.ui-dark .cosmos-star {
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: rgba(255,255,255,.85);
/* pas de will-change ici : plusieurs centaines de couches coûteraient
bien plus cher que le gain d'animation. */
}
html.ui-dark .cosmos-star--gr { width: 3.5px; height: 3.5px; box-shadow: 0 0 6px 1.5px rgba(192,132,252,.5); }
html.ui-dark .cosmos-star--or { background: rgba(251,191,36,.8); box-shadow: 0 0 4px 1px rgba(251,191,36,.3); }
html.ui-dark .cosmos-star--orgr { width: 3px; height: 3px; background: rgba(245,158,11,.9); box-shadow: 0 0 6px 2px rgba(245,158,11,.4); }
html.ui-dark .cosmos-star--rose { width: 2.5px; height: 2.5px; background: rgba(255,160,220,.85); box-shadow: 0 0 5px 1.5px rgba(255,120,200,.35); }
html.ui-dark .cosmos-star--bleue { width: 2.5px; height: 2.5px; background: rgba(150,200,255,.85); box-shadow: 0 0 5px 1.5px rgba(110,170,255,.35); }
/* L'opacité varie de 0,15 à 0,85 ET l'échelle change : c'est la conjugaison
des deux qui donne un clignotement franc plutôt qu'un simple fondu. */
@keyframes cosmosScint1 { 0%,100% { opacity: .15; transform: scale(.65); } 50% { opacity: .85; transform: scale(1.15); } }
@keyframes cosmosScint2 { 0%,100% { opacity: .25; transform: scale(.75); } 50% { opacity: .95; transform: scale(1.25); } }
@keyframes cosmosScint3 { 0%,100% { opacity: .20; transform: scale(.70); } 50% { opacity: .90; transform: scale(1.20); } }
html.ui-dark .cosmos-scint1 { animation: cosmosScint1 8s ease-in-out infinite; }
html.ui-dark .cosmos-scint2 { animation: cosmosScint2 8s ease-in-out -2.7s infinite; }
html.ui-dark .cosmos-scint3 { animation: cosmosScint3 8s ease-in-out -5.4s infinite; }
/* Sur mobile les halos sont générés 1,5× plus larges : un flou plus court
suffit à les garder doux, et le coût de rendu baisse d'autant. */
@media (max-width: 700px) {
html.ui-dark { --cosmos-neb-flou: 50px; }
}
@media (prefers-reduced-motion: reduce) {
html.ui-dark .cosmos-neb { animation: none; }
html.ui-dark .cosmos-star { animation: none; opacity: .6; }
}
/* Sections : fond uni, avec une alternance très légère pour structurer. */
html.ui-dark section:nth-of-type(odd) { background: transparent !important; }
html.ui-dark section:nth-of-type(even) { background: rgba(255,255,255,0.022) !important; }
html.ui-dark .section {
border-top-color: rgba(255,255,255,0.07);
border-bottom-color: rgba(255,255,255,0.07);
}
html.ui-dark .hero,
html.ui-dark .page-hero { background: transparent !important; }
/* Barres de navigation et menus déroulants */
html.ui-dark .navbar.scrolled { background: rgba(26,14,28,0.92) !important; }
html.ui-dark .mobile-menu { background: rgba(26,14,28,0.97); }
/* Cartes et badges à fond blanc « en dur » */
html.ui-dark .hero__badge,
html.ui-dark .page-hero__badge { background: #271528; }
html.ui-dark .testimonial { background: #271528; border-color: rgba(255,255,255,0.08); }
html.ui-dark .card--dark { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
/* Bannière de consentement cookies */
html.ui-dark #cookie-banner {
background: rgba(26,14,28,0.97);
border-top-color: rgba(255,255,255,0.12);
}
html.ui-dark .cookie-banner__panel {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.14);
}
/* Encadré anti-robots */
html.ui-dark .et-captcha {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.14);
}
html.ui-dark .et-captcha__icon { background: rgba(255,255,255,0.08); }
/* Liens de contenu éclaircis pour rester lisibles — mais PAS les boutons,
qui gardent leur propre couleur de texte sur leur fond coloré. */
html.ui-dark a:not(.btn) { color: #e2a8ee; }
html.ui-dark .nav-links a { color: #f2e6ef; }
/* Boutons : le primaire garde son dégradé doré avec un texte foncé lisible ;
l'outline et le ghost passent en clair sur fond translucide. */
html.ui-dark .btn-primary { color: #3a1030 !important; }
html.ui-dark .btn-outline {
color: #f1ecf3 !important;
border-color: rgba(255,255,255,0.35) !important;
}
html.ui-dark .btn-ghost {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
color: #f2e6ef;
}
html.ui-dark .btn-ghost:hover { background: rgba(255,255,255,0.12); }
html.ui-dark .testimonial__text { color: #f2e6ef; }
html.ui-dark .testimonial__author { color: #c3a7bd; }
/* Surfaces à fond clair « en dur » via styles inline (cartes, panneaux, CTA).
Les styles inline priment sur les règles CSS : on les neutralise en surface
sombre pour garder un thème cohérent, sans toucher aux 14 pages HTML.
Le sous-chaîne "background:#fff" couvre aussi "#ffffff". */
html.ui-dark [style*="background:#fff"],
html.ui-dark [style*="background: #fff"],
html.ui-dark [style*="background:rgba(255,255,255,0.5"],
html.ui-dark [style*="background: rgba(255, 255, 255, 0.5"],
html.ui-dark [style*="background:rgba(255,255,255,0.6"],
html.ui-dark [style*="background: rgba(255, 255, 255, 0.6"],
html.ui-dark [style*="background:rgba(255,255,255,0.7"],
html.ui-dark [style*="background: rgba(255, 255, 255, 0.7"],
html.ui-dark [style*="background:rgba(255,255,255,0.8"],
html.ui-dark [style*="background: rgba(255, 255, 255, 0.8"],
html.ui-dark [style*="background:rgba(255,255,255,0.9"],
html.ui-dark [style*="background: rgba(255, 255, 255, 0.9"] {
background: var(--white) !important;
border-color: rgba(255,255,255,0.10) !important;
}
/* Panneaux clairs pilotés par des règles CSS (fonds non-inline), y compris
les