— aucun effet de bord global.
* ============================================================ */
.soetens-site, .soetens-site *,
.soetens-site *::before,
.soetens-site *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #222222;
--accent: #6a58f7;
--accent-dark: #2f2b7f;
--bg: #ffffff;
--bg-light: #f5f5f5;
--bg-dark: #0f0f12;
--text: #222222;
--text-muted: #6b7280;
--text-light: #9ca3af;
--border: rgba(34,34,34,0.1);
--max-w: 1200px;
--pad: 80px;
--section-gap: 120px;
--radius: 16px;
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.soetens-site {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
line-height: 1.7;
}
.soetens-site h1,
.soetens-site h2,
.soetens-site h3,
.soetens-site h4,
.soetens-site h5 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.2;
}
/* ─── PAGE SYSTEM ─── */
/* ─── NAV ─── */
.soetens-site nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
transition: box-shadow var(--transition);
}
.soetens-site nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.08); }
.soetens-site .nav-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad);
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.soetens-site .nav-logo {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--primary);
cursor: pointer;
letter-spacing: -0.3px;
transition: color var(--transition);
}
.soetens-site .nav-logo span { color: var(--accent); }
.soetens-site .nav-links {
display: flex; align-items: center; gap: 40px; list-style: none;
}
.soetens-site .nav-links li a {
font-size: 14px; font-weight: 500; color: var(--text-muted);
text-decoration: none; cursor: pointer;
position: relative; padding-bottom: 2px;
transition: color var(--transition);
}
.soetens-site .nav-links li a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 1.5px; background: var(--accent);
transition: width var(--transition);
}
.soetens-site .nav-links li a:hover,
.soetens-site .nav-links li a.active { color: var(--primary); }
.soetens-site .nav-links li a:hover::after,
.soetens-site .nav-links li a.active::after { width: 100%; }
.soetens-site .btn-contact {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff !important;
padding: 0 24px;
height: 38px;
border-radius: 100px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
box-sizing: border-box;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.soetens-site .btn-contact::after { display: none !important; }
.soetens-site .btn-contact:hover {
background: var(--accent-dark) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(106,88,247,0.3);
}
/* ─── CONTAINER ─── */
.soetens-site .container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad);
}
/* ─── SECTION BASE ─── */
.soetens-site .section { padding: var(--section-gap) 0; }
.soetens-site .section-sm { padding: 80px 0; }
.soetens-site .eyebrow {
font-family: 'Poppins', sans-serif;
font-size: 11px; font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
display: block;
}
.soetens-site .section-label {
font-size: 13px; font-weight: 500;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 12px;
}
/* ─── BUTTONS ─── */
.soetens-site .btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent); color: #fff;
padding: 14px 32px; border-radius: 100px;
font-family: 'Poppins', sans-serif;
font-size: 14px; font-weight: 600;
text-decoration: none; cursor: pointer; border: none;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
letter-spacing: 0.2px;
}
.soetens-site .btn-primary:hover {
background: var(--accent-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(106,88,247,0.35);
}
.soetens-site .btn-primary:active { transform: translateY(0); }
.soetens-site .btn-secondary {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--primary);
padding: 13px 30px; border-radius: 100px;
font-family: 'Poppins', sans-serif;
font-size: 14px; font-weight: 600;
text-decoration: none; cursor: pointer;
border: 1.5px solid var(--primary);
transition: all var(--transition);
}
.soetens-site .btn-secondary:hover {
background: var(--primary); color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(34,34,34,0.2);
}
.soetens-site .btn-arrow::after { content: '→'; }
/* ─── HERO (ACCUEIL) ─── */
.soetens-site .hero {
padding: 160px 0 100px;
position: relative;
overflow: hidden;
}
.soetens-site .hero::before {
content: '';
position: absolute; top: -200px; right: -100px;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(106,88,247,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.soetens-site .hero-grid {
display: grid; grid-template-columns: 1fr 420px;
gap: 80px; align-items: center;
}
.soetens-site .hero-tag {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(106,88,247,0.08);
border: 1px solid rgba(106,88,247,0.2);
padding: 6px 16px; border-radius: 100px;
font-size: 12px; font-weight: 500; color: var(--accent);
margin-bottom: 32px;
font-family: 'Poppins', sans-serif;
}
.soetens-site .hero-tag::before {
content: ''; width: 6px; height: 6px;
background: var(--accent); border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.soetens-site .hero h1 {
font-size: clamp(38px, 5vw, 60px);
font-weight: 700; color: var(--primary);
letter-spacing: -1.5px; margin-bottom: 32px;
line-height: 1.05;
}
.soetens-site .hero h1 em,
.soetens-site .section-title em { font-style: normal; color: var(--accent); }
.soetens-site .hero-subtitle {
font-size: 20px; font-weight: 500; color: var(--accent-dark);
margin-bottom: 24px; font-family: 'Poppins', sans-serif;
}
.soetens-site .hero p {
font-size: 17px; color: var(--text-muted);
line-height: 1.75; max-width: 520px;
margin-bottom: 44px;
}
.soetens-site .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.soetens-site .hero-visual {
position: relative;
}
.soetens-site .hero-card {
background: var(--primary);
border-radius: var(--radius);
padding: 48px 40px;
color: #fff;
position: relative;
overflow: hidden;
}
.soetens-site .hero-card::before {
content: '';
position: absolute; top: -60px; right: -60px;
width: 200px; height: 200px;
background: rgba(106,88,247,0.2);
border-radius: 50%;
}
.soetens-site .hero-card-name {
font-family: 'Poppins', sans-serif;
font-size: 24px; font-weight: 700; margin-bottom: 6px;
}
.soetens-site .hero-card-role {
font-size: 14px; color: rgba(255,255,255,0.65);
margin-bottom: 32px; font-weight: 400;
}
.soetens-site .hero-card-spec {
display: inline-block;
background: rgba(106,88,247,0.3);
border: 1px solid rgba(106,88,247,0.5);
padding: 6px 14px; border-radius: 100px;
font-size: 12px; font-weight: 500;
color: rgba(255,255,255,0.9);
font-family: 'Poppins', sans-serif;
margin-bottom: 32px;
}
.soetens-site .hero-stats {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px; margin-top: 0;
}
.soetens-site .hero-stat {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px; padding: 20px 16px;
}
.soetens-site .hero-stat-value {
font-family: 'Poppins', sans-serif;
font-size: 26px; font-weight: 700; color: #fff;
margin-bottom: 4px;
}
.soetens-site .hero-stat-value span { color: var(--accent); font-size: 16px; }
.soetens-site .hero-stat-label {
font-size: 12px; color: rgba(255,255,255,0.55);
line-height: 1.4;
}
/* ─── STATS BAND ─── */
.soetens-site .stats-band {
background: var(--bg-light);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 48px 0;
}
.soetens-site .stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.soetens-site .stat-item {
padding: 0 40px;
border-right: 1px solid var(--border);
text-align: center;
}
.soetens-site .stat-item:first-child { padding-left: 0; }
.soetens-site .stat-item:last-child { border-right: none; }
.soetens-site .stat-number {
font-family: 'Poppins', sans-serif;
font-size: 36px; font-weight: 700; color: var(--primary);
letter-spacing: -1px;
}
.soetens-site .stat-number sup { font-size: 18px; color: var(--accent); }
/* Variante "mot" : adapte la typo aux 4 piliers de marque (Écoute / Science / Terrain / Personnalisation)
car le mot le plus long, "Personnalisation", ne tiendrait pas en 36px */
.soetens-site .stat-number--word {
font-size: 22px;
letter-spacing: -0.3px;
line-height: 1.2;
}
.soetens-site .stat-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 400; }
/* ─── SECTIONS GENERIQUES ─── */
.soetens-site .split-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
}
.soetens-site .split-grid.reverse { direction: rtl; }
.soetens-site .split-grid.reverse > * { direction: ltr; }
.soetens-site .section-title {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700; color: var(--primary);
letter-spacing: -0.8px; margin-bottom: 20px;
line-height: 1.15;
}
.soetens-site .section-body {
font-size: 16px; color: var(--text-muted);
line-height: 1.8; margin-bottom: 32px;
}
/* ─── Justification typographique premium — paragraphes éditoriaux ─── */
.soetens-site .section-body,
.soetens-site .about-hero-text > p,
.soetens-site #nl-detail p,
.soetens-site .justify-text {
text-align: justify;
text-align-last: left;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
hyphenate-limit-chars: 6 3 3;
word-spacing: 0.01em;
}
/* Exceptions : contextes centrés (intros de section, hero CTA, etc.) */
.soetens-site [style*="text-align: center"] .section-body,
.soetens-site [style*="text-align:center"] .section-body,
.soetens-site [style*="text-align: center"] p,
.soetens-site [style*="text-align:center"] p,
.soetens-site .contact-hero-lead,
.soetens-site .prestations-hero-inner > p,
.soetens-site .analyses-lead {
text-align: center !important;
text-align-last: auto !important;
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
word-spacing: normal;
}
/* Exceptions : cartes / encadrés courts / UI */
.soetens-site .testimonial-text,
.soetens-site .pricing-desc,
.soetens-site .pillar p,
.soetens-site .step p,
.soetens-site .stat-item p,
.soetens-site .comp-card p,
.soetens-site .pricing-card p,
.soetens-site .testimonial p,
.soetens-site .feature p,
.soetens-site .faq-answer,
.soetens-site .form-help,
.soetens-site .footer-tagline {
text-align: left;
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
/* Mobile : retour au flux gauche pour préserver la lisibilité sur colonnes étroites */
@media (max-width: 640px) {
.soetens-site .section-body,
.soetens-site .about-hero-text > p,
.soetens-site #nl-detail p,
.soetens-site .justify-text {
text-align: left;
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
}
/* ─── VISUAL BOX ─── */
.soetens-site .visual-box {
background: var(--bg-light);
border-radius: var(--radius);
aspect-ratio: 4/3;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.soetens-site .visual-box-dark {
background: var(--primary);
}
.soetens-site .visual-placeholder {
font-family: 'Poppins', sans-serif;
font-size: 13px; color: var(--text-light);
text-align: center; padding: 24px;
}
.soetens-site .visual-placeholder.light { color: rgba(255,255,255,0.3); }
/* ─── CARDS ─── */
.soetens-site .cards-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.soetens-site .card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 32px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.soetens-site .card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(34,34,34,0.1);
border-color: rgba(106,88,247,0.25);
}
.soetens-site .card-icon {
width: 48px; height: 48px;
background: rgba(106,88,247,0.08);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
font-size: 22px;
}
.soetens-site .card h3 {
font-size: 18px; font-weight: 600; color: var(--primary);
margin-bottom: 12px;
}
.soetens-site .card p {
font-size: 14px; color: var(--text-muted); line-height: 1.7;
}
/* ─── STEPS ─── */
.soetens-site .steps { counter-reset: steps; }
.soetens-site .step {
display: grid; grid-template-columns: 64px 1fr;
gap: 24px; align-items: start;
padding: 32px 0;
border-bottom: 1px solid var(--border);
}
.soetens-site .step:last-child { border-bottom: none; }
.soetens-site .step-num {
width: 48px; height: 48px;
background: var(--primary);
color: #fff; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-family: 'Poppins', sans-serif;
font-size: 18px; font-weight: 700;
flex-shrink: 0;
}
.soetens-site .step-content h3 {
font-size: 18px; font-weight: 600; color: var(--primary);
margin-bottom: 8px;
}
.soetens-site .step-content p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
/* ─── DARK SECTION ─── */
.soetens-site .section-dark {
background: var(--primary);
color: #fff;
padding: var(--section-gap) 0;
}
.soetens-site .section-dark .eyebrow { color: var(--accent); }
.soetens-site .section-dark .section-title { color: #fff; }
.soetens-site .section-dark .section-body { color: rgba(255,255,255,0.65); }
/* ─── PRICING ─── */
.soetens-site .pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.soetens-site .pricing-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius);
padding: 40px 32px;
display: flex;
flex-direction: column;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.soetens-site .pricing-card .pricing-price {
margin-top: auto;
}
.soetens-site .pricing-card:hover {
transform: translateY(-4px);
border-color: rgba(106,88,247,0.5);
box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.soetens-site .pricing-card.featured {
background: var(--accent);
border-color: var(--accent);
}
.soetens-site .pricing-card.featured:hover {
border-color: var(--accent);
box-shadow: 0 16px 40px rgba(106,88,247,0.4);
}
.soetens-site .pricing-icon {
font-size: 28px; margin-bottom: 20px;
}
.soetens-site .pricing-name {
font-family: 'Poppins', sans-serif;
font-size: 17px; font-weight: 600; color: #fff;
letter-spacing: -0.3px;
margin-bottom: 8px;
white-space: nowrap;
}
@media (max-width: 1024px) {
.soetens-site .pricing-name { white-space: normal; }
}
.soetens-site .pricing-desc {
font-size: 14px; color: rgba(255,255,255,0.55);
line-height: 1.6; margin-bottom: 28px;
}
.soetens-site .pricing-price {
font-family: 'Poppins', sans-serif;
font-size: 36px; font-weight: 700; color: #fff;
margin-bottom: 4px;
}
.soetens-site .pricing-price small {
font-size: 14px; color: rgba(255,255,255,0.55); font-weight: 400;
}
.soetens-site .pricing-divider {
border: none; border-top: 1px solid rgba(255,255,255,0.12);
margin: 28px 0;
}
/* ─── COMPLEMENTARY ─── */
.soetens-site .comp-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 16px; margin-top: 48px;
}
.soetens-site .comp-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px 24px;
display: flex; align-items: center; gap: 14px;
transition: border-color var(--transition), background var(--transition);
cursor: default;
}
.soetens-site .comp-item:hover {
border-color: rgba(106,88,247,0.4);
background: rgba(106,88,247,0.05);
}
.soetens-site .comp-dot {
width: 8px; height: 8px;
background: var(--accent); border-radius: 50%;
flex-shrink: 0;
}
.soetens-site .comp-text { font-size: 14px; color: rgba(255,255,255,0.75); }
/* ─── TESTIMONIALS ─── */
.soetens-site .testimonials-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.soetens-site .testimonial {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px 32px;
transition: transform var(--transition), box-shadow var(--transition);
}
.soetens-site .testimonial:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(34,34,34,0.08);
}
.soetens-site .testimonial-quote {
font-size: 32px; color: var(--accent); line-height: 1;
margin-bottom: 16px; font-family: 'Poppins', sans-serif;
font-weight: 700;
}
.soetens-site .testimonial-text {
font-size: 15px; color: var(--text-muted);
line-height: 1.75; margin-bottom: 24px;
font-style: italic;
}
.soetens-site .testimonial-author { font-weight: 600; color: var(--primary); font-size: 14px; }
.soetens-site .testimonial-role { font-size: 13px; color: var(--text-light); margin-top: 2px; }
/* ─── FAQ ─── */
.soetens-site .faq-item {
border-bottom: 1px solid var(--border);
}
.soetens-site .faq-question {
width: 100%; text-align: left;
padding: 24px 0;
font-family: 'Poppins', sans-serif;
font-size: 16px; font-weight: 600; color: var(--primary);
background: none; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
transition: color var(--transition);
}
.soetens-site .faq-question:hover { color: var(--accent); }
.soetens-site .faq-question .faq-chevron {
flex-shrink: 0; width: 20px; height: 20px;
background: var(--bg-light); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; transition: transform var(--transition), background var(--transition);
}
.soetens-site .faq-item.open .faq-chevron {
transform: rotate(180deg);
background: var(--accent); color: #fff;
}
.soetens-site .faq-answer {
overflow: hidden; max-height: 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.3s ease;
font-size: 15px; color: var(--text-muted); line-height: 1.75;
}
.soetens-site .faq-item.open .faq-answer { max-height: 300px; padding-bottom: 24px; }
/* ─── CTA BANNER ─── */
.soetens-site .cta-banner {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
border-radius: var(--radius);
padding: 72px 80px;
text-align: center;
position: relative; overflow: hidden;
}
.soetens-site .cta-banner::before {
content: '';
position: absolute; top: -80px; left: -80px;
width: 300px; height: 300px;
background: rgba(255,255,255,0.06); border-radius: 50%;
}
.soetens-site .cta-banner::after {
content: '';
position: absolute; bottom: -100px; right: -60px;
width: 350px; height: 350px;
background: rgba(255,255,255,0.04); border-radius: 50%;
}
.soetens-site .cta-banner h2 {
font-size: 36px; color: #fff; margin-bottom: 16px; position: relative; z-index: 1;
}
.soetens-site .cta-banner p {
font-size: 17px; color: rgba(255,255,255,0.75);
margin-bottom: 36px; position: relative; z-index: 1;
white-space: nowrap;
}
.soetens-site .cta-banner .btn-white {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; color: var(--accent-dark);
padding: 14px 36px; border-radius: 100px;
font-family: 'Poppins', sans-serif;
font-size: 15px; font-weight: 600;
text-decoration: none; cursor: pointer; border: none;
position: relative; z-index: 1;
transition: transform var(--transition), box-shadow var(--transition);
}
.soetens-site .cta-banner .btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
/* Mention discrète sous le paragraphe principal du CTA
(ex: "Premier échange téléphonique offert, sans engagement.") */
.soetens-site .cta-banner .cta-mention {
font-size: 13px;
color: rgba(255,255,255,0.6);
font-style: italic;
font-weight: 400;
letter-spacing: 0.2px;
margin-top: 0;
margin-bottom: 28px;
position: relative;
z-index: 1;
white-space: normal;
}
/* ─── FOOTER ─── */
.soetens-site footer {
background: var(--primary); color: rgba(255,255,255,0.6);
padding: 60px 0 40px;
}
.soetens-site .footer-inner {
max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad);
display: grid;
grid-template-columns: 1.6fr repeat(4, 1fr);
gap: 40px; margin-bottom: 48px;
}
/* Responsive footer : 2 colonnes sur tablette, 1 sur mobile */
@media (max-width: 1024px) {
.soetens-site .footer-inner {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 640px) {
.soetens-site .footer-inner {
grid-template-columns: 1fr;
gap: 28px;
}
}
.soetens-site .footer-logo {
font-family: 'Poppins', sans-serif;
font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px;
}
.soetens-site .footer-logo span { color: var(--accent); }
.soetens-site .footer-tagline { font-size: 14px; line-height: 1.6; }
.soetens-site .footer-col h4 {
font-family: 'Poppins', sans-serif;
font-size: 14px; font-weight: 600; color: #fff;
margin-bottom: 20px;
}
.soetens-site .footer-col ul { list-style: none; }
.soetens-site .footer-col ul li { margin-bottom: 10px; }
.soetens-site .footer-col ul li a {
font-size: 14px; color: rgba(255,255,255,0.55);
text-decoration: none; cursor: pointer;
transition: color var(--transition);
}
.soetens-site .footer-col ul li a:hover { color: #fff; }
.soetens-site .footer-bottom {
max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad);
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 32px;
display: flex; align-items: center; justify-content: space-between;
}
.soetens-site .footer-bottom span { font-size: 13px; }
/* ─── CONTACT FORM ─── */
.soetens-site .contact-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: start;
}
.soetens-site .contact-info-item {
display: flex; gap: 16px; align-items: flex-start;
padding: 24px 0; border-bottom: 1px solid var(--border);
}
.soetens-site .contact-info-icon {
width: 44px; height: 44px;
background: rgba(106,88,247,0.08); border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.soetens-site .contact-info-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.soetens-site .contact-info-label { font-weight: 600; color: var(--primary); margin-bottom: 4px; font-size: 15px; }
.soetens-site .form-group { margin-bottom: 24px; }
.soetens-site .form-label {
display: block; font-size: 13px; font-weight: 500;
color: var(--primary); margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
}
.soetens-site .form-input,
.soetens-site .form-select,
.soetens-site .form-textarea {
width: 100%; padding: 14px 18px;
border: 1.5px solid var(--border);
border-radius: 10px; font-size: 15px;
font-family: 'Inter', sans-serif;
background: #fff; color: var(--primary);
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
-webkit-appearance: none;
}
.soetens-site .form-input:focus,
.soetens-site .form-select:focus,
.soetens-site .form-textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(106,88,247,0.1);
}
.soetens-site .form-textarea { resize: vertical; min-height: 140px; }
.soetens-site .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* ─── ABOUT PAGE ─── */
.soetens-site .about-hero {
padding: 160px 0 80px;
background: var(--bg-light);
}
.soetens-site .about-hero-grid {
display: grid; grid-template-columns: 1fr 380px;
gap: 80px; align-items: center;
}
.soetens-site .about-hero-text { max-width: 560px; }
.soetens-site .about-hero-text > p.section-body { line-height: 1.8; margin-bottom: 14px; }
.soetens-site .about-hero-text > p.reveal[style*="italic"] { margin-bottom: 36px; }
.soetens-site .about-badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(106,88,247,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(106,88,247,0.22);
padding: 9px 22px; border-radius: 100px;
font-size: 12px; font-weight: 600; color: var(--accent);
font-family: 'Poppins', sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
margin-bottom: 26px;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 4px 18px -10px rgba(106,88,247,0.35);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.soetens-site .about-badge::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(106,88,247,0.18);
animation: aboutBadgePulse 2.6s ease-in-out infinite;
}
.soetens-site .about-badge:hover {
transform: translateY(-1px);
border-color: rgba(106,88,247,0.38);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 10px 28px -12px rgba(106,88,247,0.45);
}
@keyframes aboutBadgePulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(106,88,247,0.18); }
50% { box-shadow: 0 0 0 5px rgba(106,88,247,0.06); }
}
.soetens-site .credentials {
display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px;
}
.soetens-site .credential-tag {
background: linear-gradient(140deg, #2a2a30 0%, var(--primary) 100%);
color: #fff;
padding: 10px 20px; border-radius: 100px;
font-size: 13px; font-weight: 500; letter-spacing: 0.2px;
font-family: 'Poppins', sans-serif;
border: 1px solid rgba(255,255,255,0.06);
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 2px 6px -2px rgba(0,0,0,0.18),
0 8px 20px -12px rgba(0,0,0,0.25);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.soetens-site .credential-tag:hover {
transform: translateY(-2px);
border-color: rgba(106,88,247,0.4);
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 4px 10px -2px rgba(0,0,0,0.2),
0 12px 28px -10px rgba(106,88,247,0.4);
}
.soetens-site .credentials.reveal.visible .credential-tag {
opacity: 0;
animation: credFadeIn 0.55s cubic-bezier(0.4,0,0.2,1) forwards;
}
.soetens-site .credentials.reveal.visible .credential-tag:nth-child(1) { animation-delay: 0.05s; }
.soetens-site .credentials.reveal.visible .credential-tag:nth-child(2) { animation-delay: 0.14s; }
.soetens-site .credentials.reveal.visible .credential-tag:nth-child(3) { animation-delay: 0.23s; }
.soetens-site .credentials.reveal.visible .credential-tag:nth-child(4) { animation-delay: 0.32s; }
@keyframes credFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.soetens-site .about-photo-card {
background:
radial-gradient(ellipse at 18% 0%, rgba(106,88,247,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 82% 100%, rgba(47,43,127,0.22) 0%, transparent 60%),
linear-gradient(160deg, #1a1828 0%, #0f0f12 50%, #12101e 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius);
aspect-ratio: 3/4;
display: flex; align-items: flex-end;
padding: 32px;
position: relative; overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 30px 60px -24px rgba(15,15,18,0.55),
0 18px 40px -18px rgba(47,43,127,0.35);
transition: transform var(--transition), box-shadow var(--transition);
}
.soetens-site .about-photo-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 38px 76px -22px rgba(15,15,18,0.6),
0 24px 48px -18px rgba(106,88,247,0.4);
}
.soetens-site .about-photo-card::before {
content: '';
position: absolute; top: -80px; left: -60px;
width: 280px; height: 280px;
background: rgba(106,88,247,0.18); border-radius: 50%;
filter: blur(60px);
animation: aboutOrbA 12s ease-in-out infinite;
}
.soetens-site .about-photo-card::after {
content: '';
position: absolute; bottom: -60px; right: -40px;
width: 220px; height: 220px;
background: rgba(47,43,127,0.25); border-radius: 50%;
filter: blur(50px);
animation: aboutOrbB 14s ease-in-out infinite;
}
@keyframes aboutOrbA {
0%, 100% { transform: translate(0,0) scale(1); opacity: 1; }
50% { transform: translate(22px,28px) scale(1.06); opacity: 0.85; }
}
@keyframes aboutOrbB {
0%, 100% { transform: translate(0,0) scale(1); opacity: 1; }
50% { transform: translate(-20px,-22px) scale(1.05); opacity: 0.88; }
}
.soetens-site .about-photo-card-lines {
position: absolute; inset: 0; z-index: 0;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 48px,
rgba(255,255,255,0.022) 48px,
rgba(255,255,255,0.022) 49px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 48px,
rgba(255,255,255,0.022) 48px,
rgba(255,255,255,0.022) 49px
);
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 90%);
mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 90%);
}
.soetens-site .about-photo-card-glow {
position: absolute; top: 32%; left: 50%;
transform: translate(-50%, -50%);
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(106,88,247,0.16) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: aboutGlow 8s ease-in-out infinite;
}
@keyframes aboutGlow {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
50% { transform: translate(-50%, -54%) scale(1.1); opacity: 0.78; }
}
/* Liserés d'angle subtils — décor géométrique premium */
.soetens-site .about-photo-card-corner {
position: absolute; width: 42px; height: 42px;
border: 1px solid rgba(255,255,255,0.14);
z-index: 1; pointer-events: none;
transition: border-color var(--transition);
}
.soetens-site .about-photo-card-corner.tl { top: 18px; left: 18px;
border-right: none; border-bottom: none; border-top-left-radius: 6px;
}
.soetens-site .about-photo-card-corner.tr { top: 18px; right: 18px;
border-left: none; border-bottom: none; border-top-right-radius: 6px;
}
.soetens-site .about-photo-card:hover .about-photo-card-corner { border-color: rgba(255,255,255,0.26); }
.soetens-site .about-photo-info {
background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 14px; padding: 22px 26px;
width: 100%; position: relative; z-index: 1;
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 12px 32px -18px rgba(0,0,0,0.5);
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.soetens-site .about-photo-card:hover .about-photo-info {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.26);
box-shadow:
0 1px 0 rgba(255,255,255,0.1) inset,
0 16px 38px -16px rgba(0,0,0,0.55);
}
.soetens-site .about-photo-name { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.2px; }
.soetens-site .about-photo-role { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 4px; }
/* ─── ABOUT · Section "Mon parcours" — animations scroll premium ─── */
.soetens-site .formation-section .reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.soetens-site .formation-section .reveal.visible {
opacity: 1;
transform: translateY(0);
}
.soetens-site .formation-section .reveal-delay-1 { transition-delay: 0.12s; }
.soetens-site .formation-section .reveal-delay-2 { transition-delay: 0.26s; }
.soetens-site .formation-section .reveal-delay-3 { transition-delay: 0.40s; }
.soetens-site .formation-section .reveal-delay-4 { transition-delay: 0.54s; }
@media (prefers-reduced-motion: reduce) {
.soetens-site .formation-section .reveal {
transition: opacity 0.3s ease, transform 0.3s ease;
transform: none;
}
}
/* ─── PRESTATIONS · Hero — calibrage typographique du titre ─── */
.soetens-site .prestations-hero-inner {
max-width: 900px;
}
.soetens-site .prestations-hero-title {
font-size: clamp(30px, 3.6vw, 48px);
line-height: 1.14;
letter-spacing: -1px;
text-wrap: balance;
white-space: normal;
}
.soetens-site .prestations-hero-title .title-br::before {
content: '\A';
white-space: pre;
}
.soetens-site .prestations-hero-inner > p.section-body {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1024px) {
.soetens-site .prestations-hero-title { font-size: clamp(28px, 4.2vw, 42px); }
}
@media (max-width: 768px) {
.soetens-site .prestations-hero-title .title-br::before {
content: ' ';
white-space: normal;
}
.soetens-site .prestations-hero-title {
font-size: clamp(26px, 5.6vw, 36px);
letter-spacing: -0.5px;
}
}
/* ─── À PROPOS · "Ma pratique sportive" — calibrage du titre ─── */
.soetens-site .practice-grid {
grid-template-columns: 1.2fr 1fr;
}
.soetens-site .practice-section-title {
font-size: clamp(28px, 3.2vw, 38px);
line-height: 1.16;
letter-spacing: -1px;
text-wrap: balance;
}
@media (max-width: 1024px) {
.soetens-site .practice-grid { grid-template-columns: 1fr; }
.soetens-site .practice-section-title { font-size: clamp(28px, 4.6vw, 40px); }
}
@media (max-width: 768px) {
.soetens-site .practice-section-title {
font-size: clamp(26px, 5.6vw, 34px);
letter-spacing: -0.5px;
}
}
/* ─── NEWSLETTER · "Dernières analyses" — lead sur une seule ligne desktop ─── */
.soetens-site .analyses-lead { white-space: nowrap; }
@media (max-width: 1024px) {
.soetens-site .analyses-lead { white-space: normal; }
}
/* ─── NEWSLETTER · Titres "Ce que vous trouverez ici" + "Recevoir les prochaines analyses" — responsive ─── */
@media (max-width: 768px) {
.soetens-site #nl-subscribe h2.section-title,
.soetens-site section h2.section-title[style*="white-space:nowrap"],
.soetens-site section h2.section-title[style*="white-space: nowrap"] {
white-space: normal !important;
}
}
/* ─── CONTACT · Hero — titre sur une seule ligne ─── */
.soetens-site .contact-hero-inner {
max-width: 880px;
}
.soetens-site .contact-hero-title {
font-size: clamp(30px, 3.6vw, 48px);
line-height: 1.14;
letter-spacing: -1px;
white-space: nowrap;
}
.soetens-site .contact-hero-lead {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1024px) {
.soetens-site .contact-hero-title { font-size: clamp(28px, 4.4vw, 42px); }
}
@media (max-width: 768px) {
.soetens-site .contact-hero-title {
white-space: normal;
font-size: clamp(26px, 6vw, 36px);
letter-spacing: -0.5px;
}
}
/* ─── APPROACH PILLARS ─── */
.soetens-site .pillars-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.soetens-site .pillar {
background: var(--bg-light);
border-radius: var(--radius); padding: 32px 22px;
border: 1px solid transparent;
transition: border-color var(--transition), transform var(--transition);
}
.soetens-site .pillar:hover {
border-color: rgba(106,88,247,0.2);
transform: translateY(-2px);
}
.soetens-site .pillar-number {
font-family: 'Poppins', sans-serif;
font-size: 48px; font-weight: 700;
color: rgba(106,88,247,0.12);
line-height: 1; margin-bottom: 16px;
}
.soetens-site .pillar h3 {
font-size: 18px; font-weight: 600; color: var(--primary);
margin-bottom: 10px;
}
.soetens-site .pillar p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.6;
text-wrap: balance;
letter-spacing: -0.15px;
}
/* ─── SCROLL ANIMATIONS ─── */
.soetens-site .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.soetens-site .reveal.visible {
opacity: 1;
transform: translateY(0);
}
.soetens-site .reveal-delay-1 { transition-delay: 0.1s; }
.soetens-site .reveal-delay-2 { transition-delay: 0.2s; }
.soetens-site .reveal-delay-3 { transition-delay: 0.3s; }
.soetens-site .reveal-delay-4 { transition-delay: 0.4s; }
/* ─── MOBILE MENU ─── */
.soetens-site .nav-hamburger {
display: none; background: none; border: none;
cursor: pointer; padding: 4px;
flex-direction: column; gap: 5px;
}
.soetens-site .nav-hamburger span {
display: block; width: 22px; height: 2px;
background: var(--primary);
transition: transform var(--transition), opacity var(--transition);
border-radius: 2px;
}
/* ─── PAGE TRANSITIONS ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
:root { --pad: 40px; --section-gap: 80px; }
.soetens-site .hero-grid,
.soetens-site .about-hero-grid { grid-template-columns: 1fr; }
.soetens-site .hero-visual,
.soetens-site .about-photo-card { display: none; }
.soetens-site .split-grid { grid-template-columns: 1fr; }
.soetens-site .split-grid.reverse { direction: ltr; }
.soetens-site .cards-grid { grid-template-columns: 1fr 1fr; }
.soetens-site .pricing-grid { grid-template-columns: 1fr; }
.soetens-site .testimonials-grid { grid-template-columns: 1fr; }
.soetens-site .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.soetens-site .stat-item { border: none; }
.soetens-site .contact-grid { grid-template-columns: 1fr; }
.soetens-site .pillars-grid { grid-template-columns: 1fr; }
.soetens-site .comp-grid { grid-template-columns: 1fr; }
.soetens-site .footer-inner { grid-template-columns: 1fr; gap: 32px; }
.soetens-site .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.soetens-site .nav-links { display: none; }
.soetens-site .nav-hamburger { display: flex; }
.soetens-site .cta-banner { padding: 48px 32px; }
.soetens-site .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
:root { --pad: 20px; }
.soetens-site .hero { padding: 120px 0 80px; }
.soetens-site .cards-grid { grid-template-columns: 1fr; }
.soetens-site .hero-btns { flex-direction: column; }
.soetens-site .stats-grid { grid-template-columns: 1fr 1fr; }
}
/* ─── MOBILE NAV OPEN ─── */
.soetens-site .mobile-nav {
display: none; position: fixed; top: 72px; left: 0; right: 0;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 24px var(--pad);
flex-direction: column; gap: 8px;
z-index: 999;
}
.soetens-site .mobile-nav.open { display: flex; }
.soetens-site .mobile-nav a {
padding: 12px 16px; border-radius: 8px;
font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500;
color: var(--text-muted); text-decoration: none; cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.soetens-site .mobile-nav a:hover,
.soetens-site .mobile-nav a.active {
background: rgba(106,88,247,0.08); color: var(--accent);
}
/* ════════════════════════════════════════════════════════════════
* HUB RESSOURCES — Filtres + Recherche + États
* (utilise les variables CSS V1 : --accent, --border, --bg-light…)
* ════════════════════════════════════════════════════════════════ */
.soetens-site .hub-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding-block: 24px 32px;
}
.soetens-site .filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.soetens-site .filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #4a4a52);
background: #fff;
border: 1px solid var(--border, rgba(34,34,34,0.15));
border-radius: 100px;
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease,
color 0.25s ease, transform 0.15s ease;
}
.soetens-site .filter-pill:hover {
border-color: var(--text, #222);
color: var(--text, #222);
}
.soetens-site .filter-pill.is-active,
.soetens-site .filter-pill[aria-pressed="true"] {
background: var(--text, #222);
border-color: var(--text, #222);
color: #fff;
}
.soetens-site .filter-pill__count {
font-size: 0.85em;
color: var(--text-soft, #9ca3af);
}
.soetens-site .filter-pill.is-active .filter-pill__count {
color: rgba(255, 255, 255, 0.6);
}
.soetens-site .search {
position: relative;
flex: 1 1 240px;
max-width: 320px;
margin-left: auto;
}
.soetens-site .search__input {
width: 100%;
padding: 9px 16px 9px 38px;
font-family: inherit;
font-size: 14px;
background: #fff;
color: var(--text, #222);
border: 1px solid var(--border, rgba(34,34,34,0.15));
border-radius: 100px;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.soetens-site .search__input::placeholder {
color: var(--text-soft, #9ca3af);
}
.soetens-site .search__input:focus {
border-color: var(--accent, #6a58f7);
box-shadow: 0 0 0 3px rgba(106, 88, 247, 0.12);
}
.soetens-site .search__icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-soft, #9ca3af);
pointer-events: none;
}
.soetens-site .hub-empty {
padding: 48px 24px;
text-align: center;
color: var(--text-muted, #6b7280);
font-size: 15px;
}
.soetens-site .hub-empty__icon {
display: block;
font-size: 28px;
margin-bottom: 12px;
opacity: 0.4;
}
/* Responsive : recherche prend toute la largeur sur mobile */
@media (max-width: 640px) {
.soetens-site .search {
margin-left: 0;
max-width: 100%;
width: 100%;
}
.soetens-site .hub-controls {
flex-direction: column;
align-items: stretch;
}
}
/* ════════════════════════════════════════════════════════════════
* MODIFS LOT BATCH — overrides ciblés
* ════════════════════════════════════════════════════════════════ */
/* Header : pas de soulignement sur le logo */
.soetens-site .nav-logo {
text-decoration: none !important;
border-bottom: none !important;
/* Alignement icône + texte sur une ligne, parfaitement centré verticalement */
display: inline-flex !important;
align-items: center;
gap: 10px;
}
.soetens-site .nav-logo:hover {
text-decoration: none !important;
}
.soetens-site .nav-logo-mark {
width: 32px;
height: 32px;
display: block;
flex-shrink: 0;
object-fit: contain;
/* Léger ajustement pour aligner optiquement la pomme/coureur avec la baseline du texte */
transform: translateY(-1px);
}
.soetens-site .nav-logo-text {
display: inline-block;
line-height: 1;
/* "Soëtens" en couleur primary (foncée), comme avant — !important pour
écraser toute règle parente sur span */
color: var(--primary) !important;
}
/* "nutrition" reste en accent (violet clair) */
.soetens-site .nav-logo-text > span {
color: var(--accent) !important;
}
/* Responsive : icône légèrement réduite sur mobile pour respecter la hauteur du nav */
@media (max-width: 640px) {
.soetens-site .nav-logo {
gap: 8px;
}
.soetens-site .nav-logo-mark {
width: 28px;
height: 28px;
}
}
/* Hero-card avec image d'arrière-plan (Accueil) — portrait pur, sans overlay */
.soetens-site .hero-card--with-image {
position: relative;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
min-height: 520px;
overflow: hidden;
isolation: isolate;
/* Ombre douce pour habiller le portrait sans alourdir */
box-shadow:
0 30px 60px -20px rgba(15, 15, 18, 0.35),
0 18px 35px -15px rgba(106, 88, 247, 0.22);
}
/* Retirer la bulle décorative violette en haut à droite (uniquement pour la variante photo) */
.soetens-site .hero-card--with-image::before {
content: none !important;
display: none !important;
}
/* Forcer "votre performance" sur une seule ligne dans le H1 du hero */
.soetens-site .hero h1 em {
white-space: nowrap;
}
/* Sur petit écran on autorise à nouveau le retour à la ligne pour éviter un débordement */
@media (max-width: 480px) {
.soetens-site .hero h1 em {
white-space: normal;
}
}
/* About-photo-card avec vraie image en background.
La photo a été pré-recadrée en 3/4 (centrée sur le visage), donc
background-position: center suffit. */
.soetens-site .about-photo-card--with-image {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* ────────────────────────────────────────────────────────────────────
PRESTATIONS — alignement centré du contenu des 3 cartes pricing
────────────────────────────────────────────────────────────────────
text-align: center centre tous les textes (icône emoji, titre,
description, prix, durée). Le
et le bouton (width: 100 %)
conservent leur largeur initiale, donc le design V1 reste intact :
aucune couleur, taille ou espacement n'est modifié, seul l'axe
horizontal du contenu textuel change. */
.soetens-site .pricing-card,
.soetens-site .pricing-card .pricing-desc,
.soetens-site .pricing-card p {
text-align: center !important;
}
/* ────────────────────────────────────────────────────────────────────
PRESTATIONS COMPLÉMENTAIRES — description au survol des comp-items
────────────────────────────────────────────────────────────────────
Au repos : seul le titre (.comp-text) est visible. La description
(.comp-desc) est masquée par max-height 0 + opacity 0.
Au :hover : la description s'expand verticalement avec une transition
fluide. Sur appareil tactile (pas de hover), la description reste
visible en permanence. Aucune couleur du design V1 n'est modifiée. */
.soetens-site .comp-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.soetens-site .comp-desc {
display: block;
font-size: 13px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.55);
max-height: 0;
opacity: 0;
margin-top: 0;
overflow: hidden;
transition:
max-height 0.35s ease,
opacity 0.25s ease 0.05s,
margin-top 0.35s ease;
}
.soetens-site .comp-item:hover .comp-desc,
.soetens-site .comp-item:focus-within .comp-desc {
max-height: 120px;
opacity: 1;
margin-top: 6px;
}
/* Tactile : afficher la description directement (pas de hover possible) */
@media (hover: none) {
.soetens-site .comp-desc {
max-height: 120px;
opacity: 1;
margin-top: 6px;
}
}
/* ────────────────────────────────────────────────────────────────────
CONTACT — bloc "Contact direct" premium (icônes SVG monochromes)
────────────────────────────────────────────────────────────────────
Toutes les icônes utilisent currentColor → la couleur du SVG suit
la couleur du texte du parent, donc le hover change tout d'un coup.
Aucun emoji n'est utilisé. */
.soetens-site .contact-direct {
margin-top: 40px;
padding: 28px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 20px -8px rgba(15, 15, 18, 0.08);
}
.soetens-site .contact-direct-title {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--primary);
margin: 0 0 18px;
letter-spacing: -0.2px;
}
/* Liste compacte e-mail / téléphone */
.soetens-site .contact-direct-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 4px;
}
.soetens-site .contact-direct-list li {
margin: 0;
}
/* Lien commun (e-mail, téléphone, Instagram, Facebook) */
.soetens-site .contact-direct-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 4px;
color: var(--primary);
text-decoration: none;
font-size: 14px;
line-height: 1.4;
transition: color 0.2s ease, transform 0.2s ease;
border-radius: 8px;
}
.soetens-site .contact-direct-link:hover,
.soetens-site .contact-direct-link:focus-visible {
color: var(--accent);
transform: translateX(2px);
}
/* Icônes monochromes (SVG inline, taille homogène 22 px) */
.soetens-site .contact-direct-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
}
.soetens-site .contact-direct-icon svg {
width: 100%;
height: 100%;
display: block;
}
.soetens-site .contact-direct-text {
display: inline-block;
}
/* Bloc WhatsApp : bouton + QR code, centré */
.soetens-site .contact-direct-whatsapp {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 28px;
padding: 20px;
background: var(--bg-light);
border-radius: 12px;
}
/* Bouton WhatsApp premium */
.soetens-site .btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
background: var(--accent);
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.1px;
text-decoration: none;
border-radius: 999px;
box-shadow: 0 4px 14px -4px rgba(106, 88, 247, 0.45);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.soetens-site .btn-whatsapp:hover,
.soetens-site .btn-whatsapp:focus-visible {
background: var(--accent-dark, #4f3edc);
transform: translateY(-1px);
box-shadow: 0 6px 20px -4px rgba(106, 88, 247, 0.55);
}
.soetens-site .btn-whatsapp .contact-direct-icon {
width: 18px;
height: 18px;
}
/* ────────────────────────────────────────────────────────────────────
FOOTER GLOBAL — refonte premium : icônes SVG, hover violet, aération
────────────────────────────────────────────────────────────────────
Conservation des 5 colonnes du design V1, juste l'enrichissement des
liens (icônes vectorielles à la place des emojis) et un espacement
plus aéré pour une lecture plus confortable. */
/* Gap entre colonnes plus généreux + plus d'air avant le footer-bottom */
.soetens-site footer .footer-inner {
gap: 56px !important;
margin-bottom: 64px !important;
}
/* Logo + texte « Soëtens nutrition » dans le footer — calé sur le header :
même icône 32 px, même police 18 px, même alignement, mais "Soëtens" en
blanc (au lieu de --primary) car le fond du footer est foncé. */
.soetens-site .footer-logo {
display: inline-flex !important;
align-items: center;
gap: 10px;
font-size: 18px !important;
font-weight: 700;
letter-spacing: -0.3px;
font-family: 'Poppins', sans-serif;
}
.soetens-site .footer-logo-mark {
width: 32px;
height: 32px;
flex-shrink: 0;
object-fit: contain;
display: block;
transform: translateY(-1px);
}
/* "Soëtens" : blanc franc (équivalent du --primary sur fond clair) */
.soetens-site .footer-logo-text {
display: inline-block;
line-height: 1;
color: #fff !important;
}
/* "nutrition" : violet accent (même couleur qu'en haut) */
.soetens-site .footer-logo-text > span {
color: var(--accent) !important;
}
/* Titre de colonne : plus de marge sous le h4 + icône violette à gauche */
.soetens-site footer .footer-col h4 {
margin-bottom: 22px !important;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.soetens-site .footer-col-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--accent);
flex-shrink: 0;
}
.soetens-site .footer-col-icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Espacement vertical des items */
.soetens-site footer .footer-col ul li {
margin-bottom: 14px !important;
}
/* Liens footer : hover violet (au lieu de blanc) + transition douce */
.soetens-site footer .footer-col ul li a:hover,
.soetens-site footer .footer-col ul li a:focus-visible {
color: var(--accent) !important;
}
/* Colonne Contact & Réseaux : icônes SVG alignées au texte */
.soetens-site .footer-contact-list li a {
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1.4;
}
.soetens-site .footer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.2s ease, color 0.2s ease;
}
.soetens-site .footer-icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Au survol, l'icône passe à pleine opacité ET hérite du violet via currentColor */
.soetens-site .footer-contact-list li a:hover .footer-icon,
.soetens-site .footer-contact-list li a:focus-visible .footer-icon {
opacity: 1;
}
/* Responsive : retour aux paramètres existants pour mobile/tablette
(la règle existante grid-template-columns 1fr est conservée) */
@media (max-width: 1024px) {
.soetens-site footer .footer-inner {
gap: 40px !important;
margin-bottom: 48px !important;
}
}
/* ────────────────────────────────────────────────────────────────────
AVIS GOOGLE — Section Témoignages enrichie
────────────────────────────────────────────────────────────────────
Phrase de transition narrative + sceau étoilé sous le H2.
Aucune nouvelle section : pure intégration dans l'existant. */
/* Phrase de transition (entre H2 et sceau) */
.soetens-site .testimonials-lead {
max-width: 720px;
margin: 18px auto 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
font-weight: 400;
}
/* Sur mobile : le
reste mais la première moitié se replie naturellement */
@media (max-width: 640px) {
.soetens-site .testimonials-lead br {
display: none; /* Évite un saut de ligne trop court en mode étroit */
}
}
/* Sceau étoilé */
.soetens-site .google-reviews-badge {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 22px;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
letter-spacing: 0.2px;
transition: color var(--transition);
}
.soetens-site .google-reviews-badge:hover,
.soetens-site .google-reviews-badge:focus-visible {
color: var(--accent);
}
.soetens-site .google-reviews-badge strong {
font-weight: 600;
color: inherit;
}
/* 5 étoiles or perle (code universel reviews) */
.soetens-site .google-stars {
color: #e8b547; /* or perle, ni jaune vif ni doré criard */
font-size: 15px;
line-height: 1;
letter-spacing: 1px; /* étoiles groupées en bloc compact */
}
/* Séparateurs · discrets */
.soetens-site .google-sep {
opacity: 0.4;
}
/* Lien d'action */
.soetens-site .google-cta {
transition: color var(--transition);
}
/* Flèche avec micro-animation */
.soetens-site .google-arrow {
display: inline-block;
transition: transform var(--transition);
}
.soetens-site .google-reviews-badge:hover .google-arrow {
transform: translateX(3px);
}
/* ────────────────────────────────────────────────────────────────────
APPROCHE — Phrase signature « Chaque sportif est différent. »
────────────────────────────────────────────────────────────────────
Opt 2/5 — Mise en valeur typographique pure : on isole la première
phrase de l'intro pour lui donner son propre rythme de lecture.
Aucun mot ajouté, aucun symbole ajouté. Discipline maximale :
- MÊME taille que le section-body (16 px) — pas un sous-titre
- couleur légèrement plus foncée (--text-secondary vs --text-muted)
→ signale une pensée déposée, sans en faire un titre
- margin-bottom resserré (8 px) → la phrase et le paragraphe
suivant forment UN SEUL bloc de lecture
- la grande respiration (100 px) reste avant les 4 piliers */
.soetens-site .approach-lead {
margin: 0 0 8px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
font-weight: 400;
color: var(--text-secondary);
}
@media (max-width: 640px) {
.soetens-site .approach-lead {
font-size: 15px;
margin-bottom: 6px;
}
}
/* ────────────────────────────────────────────────────────────────────
NEWSLETTER HERO — Photo à droite (responsive : disparaît sur tablette)
────────────────────────────────────────────────────────────────────
Le texte garde sa largeur d'origine (760px). L'image s'affiche dans
un encadré aux coins très arrondis (28px) avec ombre douce. */
.soetens-site .nl-hero-grid {
display: grid;
/* Équilibre 1fr/1fr : ~570 px pour chacun.
Image légèrement agrandie (+10 % vs version précédente) pour gagner en
présence, sans voler la vedette au titre. */
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.soetens-site .nl-hero-text {
min-width: 0;
}
.soetens-site .nl-hero-visual {
min-width: 0;
}
.soetens-site .nl-hero-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 28px;
/* Ombre triple : diffuse principale + halo violet aérien + très léger
contour blanc inset pour décoller l'image du fond clair. */
box-shadow:
0 40px 90px -28px rgba(15, 15, 18, 0.18),
0 18px 40px -18px rgba(106, 88, 247, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.8);
}
/* Tablette : image disparaît proprement pour garder un hero léger */
@media (max-width: 1024px) {
.soetens-site .nl-hero-grid {
grid-template-columns: 1fr;
}
.soetens-site .nl-hero-visual {
display: none;
}
}
/* ────────────────────────────────────────────────────────────────────
BANNIÈRE Contact direct — Page Contact, juste sous le hero
────────────────────────────────────────────────────────────────────
Bloc complet (titre + email + tel + WhatsApp + QR + socials)
en 2 colonnes : infos à gauche, WhatsApp + QR à droite.
Sur mobile : empile en colonne unique. */
.soetens-site .whatsapp-banner-section {
padding: 48px 0 56px;
background: var(--bg-light);
border-bottom: 1px solid var(--border);
}
.soetens-site .whatsapp-banner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 48px;
max-width: 900px;
margin: 0 auto;
padding: 36px 40px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 10px 30px -16px rgba(15, 15, 18, 0.12);
}
.soetens-site .whatsapp-banner-content {
/* Colonne gauche : titre + email/tel + socials */
min-width: 0;
}
/* Dans la bannière, on reset certains styles du bloc Contact direct
d'origine pour qu'il s'intègre proprement (pas de double encadré) */
.soetens-site .whatsapp-banner .contact-direct-title {
margin: 0 0 16px;
}
.soetens-site .whatsapp-banner .contact-direct-list {
margin-bottom: 20px;
}
.soetens-site .whatsapp-banner .contact-direct-socials {
margin-top: 0;
}
/* Colonne droite : action WhatsApp (bouton + hint + QR) centrée */
.soetens-site .whatsapp-banner-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 20px;
background: var(--bg-light);
border-radius: 12px;
flex-shrink: 0;
}
.soetens-site .whatsapp-banner-action .btn-whatsapp {
padding: 12px 22px;
font-size: 14px;
}
.soetens-site .whatsapp-banner-action .contact-direct-qr-hint {
margin: 0;
text-align: center;
}
.soetens-site .whatsapp-banner-action .contact-direct-qr {
width: 130px;
height: 130px;
}
/* Responsive : empile sur tablette/mobile */
@media (max-width: 768px) {
.soetens-site .whatsapp-banner {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 24px;
}
.soetens-site .whatsapp-banner-action {
align-self: stretch;
}
}
/* Petite phrase incitative entre le bouton WhatsApp et le QR */
.soetens-site .contact-direct-qr-hint {
margin: 0;
font-size: 12px;
color: var(--text-muted);
text-align: center;
letter-spacing: 0.2px;
line-height: 1.4;
}
/* QR Code WhatsApp : conserver l'image fournie, juste arrondir + ombre */
.soetens-site .contact-direct-qr-link {
display: inline-block;
line-height: 0;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow:
0 8px 24px -8px rgba(15, 15, 18, 0.18),
0 2px 6px -2px rgba(15, 15, 18, 0.08);
}
.soetens-site .contact-direct-qr-link:hover,
.soetens-site .contact-direct-qr-link:focus-visible {
transform: translateY(-2px);
box-shadow:
0 14px 30px -10px rgba(15, 15, 18, 0.22),
0 4px 10px -2px rgba(15, 15, 18, 0.1);
}
.soetens-site .contact-direct-qr {
display: block;
/* QR Code SVG inline vectoriel : carré net à toutes les tailles */
width: 150px;
height: 150px;
max-width: 100%;
border-radius: 12px;
/* Permet au click de remonter au
parent (lien WhatsApp) */
pointer-events: none;
}
.soetens-site .contact-direct-qr-link {
/* Le wrapper anchor capte le click */
pointer-events: auto;
}
/* Sous-bloc Réseaux sociaux */
.soetens-site .contact-direct-socials {
margin-top: 4px;
}
.soetens-site .contact-direct-subtitle {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
margin: 0 0 12px;
}
.soetens-site .contact-direct-socials-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Responsive : QR un peu plus petit sur mobile */
@media (max-width: 480px) {
.soetens-site .contact-direct {
padding: 22px;
}
.soetens-site .contact-direct-qr {
width: 140px;
}
}
/* ════════════════════════════════════════════════════════════════
* RESPONSIVE FIXES — Audit final avant déploiement
* ────────────────────────────────────────────────────────────────
* Corrections ciblées pour un responsive irréprochable :
* - Zones tactiles ≥ 44×44 px (WCAG 2.5.5)
* - Suppression des débordements horizontaux
* - Ajustement des paddings verticaux sur mobile
* - Lisibilité des polices sur petits écrans
* ════════════════════════════════════════════════════════════════ */
/* ─── CTA banner : autoriser le wrap du paragraphe sur mobile ─── */
/* Le CSS de base force white-space: nowrap sur .cta-banner p.
Sur mobile étroit, cela peut créer un débordement horizontal. */
@media (max-width: 768px) {
.soetens-site .cta-banner p {
white-space: normal;
}
.soetens-site .cta-banner {
padding: 40px 24px !important;
}
.soetens-site .cta-banner h2 {
font-size: clamp(22px, 5.5vw, 30px) !important;
line-height: 1.25;
}
.soetens-site .cta-banner .btn-white {
padding: 14px 28px;
font-size: 14px;
}
}
/* ─── Menu hamburger : zone tactile minimum 44×44 px ─── */
.soetens-site .nav-hamburger {
min-width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
}
/* ─── Champs de formulaire : hauteur tactile minimum ─── */
@media (max-width: 640px) {
.soetens-site .form-input,
.soetens-site .form-select,
.soetens-site .form-textarea {
min-height: 48px;
font-size: 16px; /* Empêche le zoom automatique iOS sur focus */
}
.soetens-site .form-textarea {
min-height: 120px;
}
}
/* ─── Boutons : zone tactile minimum sur mobile ─── */
@media (max-width: 640px) {
.soetens-site .btn-primary,
.soetens-site .btn-secondary,
.soetens-site .btn-white,
.soetens-site .btn-whatsapp,
.soetens-site .btn-contact {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ─── Section CTA : padding vertical réduit sur mobile ─── */
@media (max-width: 640px) {
.soetens-site .section-sm {
padding: 60px 0;
}
}
/* ─── Piliers : lisibilité du texte sur mobile ─── */
@media (max-width: 640px) {
.soetens-site .pillar p {
font-size: 14px;
letter-spacing: normal;
}
.soetens-site .pillar-number {
font-size: 40px;
}
.soetens-site .pillar h3 {
font-size: 17px;
}
}
/* ─── Pages désinscription : padding vertical raisonnable sur mobile ─── */
@media (max-width: 640px) {
[data-page="desinscription"] section,
[data-page="desinscription-confirmee"] section {
padding: 120px 0 60px !important;
min-height: auto !important;
}
}
/* ─── H1 hero : clamp global de sécurité sur très petits écrans (320-360 px) ─── */
@media (max-width: 380px) {
.soetens-site .hero h1 {
font-size: clamp(28px, 7vw, 34px) !important;
letter-spacing: -0.5px;
}
.soetens-site .section-title {
font-size: clamp(24px, 6.5vw, 32px) !important;
}
}
/* ─── Formulaire newsletter : forcer wrap correct message succès sur mobile ─── */
@media (max-width: 640px) {
#nl-message {
max-width: 100% !important;
font-size: 13px !important;
padding: 12px 16px !important;
}
/* Formulaire newsletter : empile input + bouton verticalement */
#nl-form {
flex-direction: column !important;
}
#nl-form input {
width: 100%;
}
#nl-form button {
width: 100%;
justify-content: center;
}
}
/* ─── Formulaire désinscription : idem newsletter ─── */
@media (max-width: 640px) {
#unsub-form {
flex-direction: column !important;
}
#unsub-form input,
#unsub-form button {
width: 100%;
}
#unsub-message {
max-width: 100% !important;
font-size: 13px !important;
padding: 12px 16px !important;
}
}
/* ─── FAQ : espacement plus généreux entre questions sur mobile ─── */
@media (max-width: 640px) {
.soetens-site .faq-question {
padding: 20px 12px !important;
font-size: 15px !important;
line-height: 1.4;
min-height: 44px;
}
.soetens-site .faq-answer {
padding: 0 12px 20px !important;
font-size: 14px;
}
}
/* ─── Sécurité globale : empêcher tout débordement horizontal ─── */
html, body {
overflow-x: hidden;
max-width: 100%;
}
/* ─── Images : responsive par défaut ─── */
.soetens-site img {
max-width: 100%;
height: auto;
}
/* ─── Container : padding horizontal cohérent sur mobile ─── */
@media (max-width: 480px) {
.soetens-site .container {
padding-left: 16px;
padding-right: 16px;
}
}
/* ─── Cartes newsletter #01 : passage en 2 colonnes sur mobile ─── */
@media (max-width: 480px) {
.soetens-site .card-hover {
padding: 14px 16px !important;
}
}
/* ─── Bannière WhatsApp : QR code adaptatif ─── */
@media (max-width: 480px) {
.soetens-site .whatsapp-banner-action .contact-direct-qr {
width: 110px;
height: 110px;
}
}