/*
Theme Name: SellExpert
Theme URI: https://sellexpert.io
Author: Jules Le Corre
Author URI: https://sellexpert.io
Description: Theme custom SellExpert — HTML/CSS first, Tailwind-powered. Marketing site + blog WordPress.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: sellexpert
*/
/* ═══════════════════════════════════════════════════════════════════════
FOUNDATION — Source de vérité unique pour toute la DA SellExpert.
Tous les composants doivent référencer ces variables, pas des valeurs
en dur. Pour ajuster la DA globalement, modifier UNIQUEMENT ce bloc.
─── AUDIT WCAG AA (réalisé 2026-06-30) ────────────────────────────
Texte courant — passe AAA partout :
#06281C / #F5FAF7 ............... 15.5:1 AAA (texte sur bg)
#06281C / #FFFFFF ............... 16.5:1 AAA (texte sur cards)
#06281C / #FCF9F2 ............... 15.8:1 AAA (texte sur quote cream)
#06281C / #D6F0E4 ............... 13.8:1 AAA (texte sur badge pale)
#084C34 / #F5FAF7 ............... 10.5:1 AAA (vert deep-2 sur clair)
#3F4A45 / #F5FAF7 ................ 9.0:1 AAA (texte secondaire)
#5A6862 / #F5FAF7 ................ 5.4:1 AA (texte muté, captions)
Boutons / fonds sombres :
#FFFFFF / #0B5C3F ................ 8.8:1 AAA (CTA primary, footer)
#FCF9F2 / #0B5C3F ................ 8.6:1 AAA (texte cream sur dark)
#6BD0A8 / #0B5C3F ................ 5.0:1 AA (accent vert clair sur dark)
Émeraude pur #10A36E — RÉSERVÉ : pictos, chiffres XXL, accents typo,
bordures ; INTERDIT en texte courant blanc dessus (3.2:1 < AA). Les
CTAs utilisent --brand-deep (pas --brand) pour cette raison.
Accent brass #B8985C — décoratif uniquement (filets 1px, pictos premium) ;
JAMAIS en texte (2.5:1 sur blanc).
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ─── Palette · Vert SellExpert (monocouleur) ───────────────────── */
--brand: #10A36E; /* émeraude — CTA, accents, survols, pictos */
--brand-light: #3DBE8B; /* survols clairs, dégradés, illustrations */
--brand-light-2: #6BD0A8; /* illustrations plus claires */
--brand-deep: #0B5C3F; /* deep — CTAs, buttons, borders (petites surfaces) */
--brand-deep-2: #084C34; /* deep-deep — accents/séparateurs sur dark, texte vert sur clair */
--brand-deep-soft: #0C7A53; /* deep adouci — aplats larges (sections dark, cta-card) — moins pesant que --brand-deep */
--brand-pale: #D6F0E4; /* bg cartes / badges */
--brand-pale-2: #EAF7F1; /* bordures / fonds très doux */
/* ─── Neutres tonalement alignés sur la marque ──────────────────── */
--text: #06281C; /* texte courant — quasi-noir verdi (~15:1 sur --bg, AAA) */
--text-soft: #3F4A45; /* texte secondaire (~9:1 sur --bg, AAA) */
--text-mute: #5A6862; /* texte muté, captions (~5.4:1 sur --bg, AA confortable) */
--bg: #F5FAF7; /* fond clair général (pas blanc pur) */
--bg-elevated: #FFFFFF; /* surface élevée — cards principales */
--border: #C4CCC8; /* bordures standard */
--border-soft: var(--brand-pale-2);
/* ─── Accents métalliques (utiliser parcimonieusement) ──────────── */
--accent-cream: #FCF9F2; /* bg moments premium (quote, testimonial) */
--accent-brass: #B8985C; /* laiton mat — filets, pictos premium (≤2/page) */
/* Beige neutre reduit — bg unifie sections hero/quote/methode/fonctionnalites.
Plus subtil que --accent-cream, garde une chaleur discrete. */
--bg-warm: #FEFDF9;
--bg-warm-hi: #FFFEFB; /* variante 1 cran plus claire que bg-warm, meme chaleur beige — sections qui doivent ressortir */
/* ─── Typographie ───────────────────────────────────────────────── */
--font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Échelle modulaire en clamp() — scale au viewport sans media query */
--fs-display-xl: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); /* H1 hero */
--fs-display-lg: clamp(2rem, 1.3rem + 3vw, 3rem); /* H2 section */
--fs-display-md: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); /* H3 card title */
--fs-display-sm: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* H4 sub-card */
--fs-body-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* lead paragraph */
--fs-body: 1rem; /* corps standard */
--fs-body-sm: 0.875rem; /* small */
--fs-eyebrow: 0.6875rem; /* tag uppercase */
--lh-display: 1.1; /* H2/H3 */
--lh-display-xl: 1.05; /* H1 hero — plus serré */
--lh-body: 1.6; /* corps — respiration */
--lh-body-snug: 1.5; /* corps dense */
--ls-display: -0.02em; /* tracking serré sur display */
--ls-eyebrow: 0.12em; /* tracking large sur tag uppercase */
--ls-body: 0;
/* ─── Typographie modulaire (ratio ~1.25 — 7 paliers nommés sémantiquement) ── */
--fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.052rem); /* hero H1 */
--fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.441rem); /* section H2 */
--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem);/* card H3 */
--fs-h4: 1.25rem; /* sub-card / footer titre */
/* fs-eyebrow / fs-body-lg / fs-body / fs-body-sm définis plus haut */
/* ─── Espacement STRICT — base modulaire 8/16/24/48/96 ─────────── */
--s-1: 0.5rem; /* 8px — micro gap, padding badge */
--s-2: 1rem; /* 16px — gap items, padding compact */
--s-3: 1.5rem; /* 24px — padding card standard */
--s-4: 3rem; /* 48px — gap entre blocs, padding card large */
--s-5: 6rem; /* 96px — separation entre sections */
/* Espacement LEGACY (1 à 9) — conservé pour compat existante, NE PLUS ÉTENDRE */
--space-1: 0.25rem; /* 4px — legacy */
--space-2: 0.5rem; /* 8px = --s-1 */
--space-3: 0.75rem; /* 12px — legacy */
--space-4: 1rem; /* 16px = --s-2 */
--space-5: 1.5rem; /* 24px = --s-3 */
--space-6: 2rem; /* 32px — legacy */
--space-7: 3rem; /* 48px = --s-4 */
--space-8: 4rem; /* 64px — legacy */
--space-9: 6rem; /* 96px = --s-5 */
--space-section: clamp(3rem, 2rem + 4vw, 6rem); /* py section standard — strict */
--space-section-lg: clamp(4rem, 3rem + 5vw, 8rem); /* py section "moment fort" — strict */
/* ─── Radii ─────────────────────────────────────────────────────── */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 16px;
--r-xl: 24px;
--r-2xl: 32px;
--r-full: 9999px;
/* ─── Ombres premium teintées vert (pas neutres) ────────────────── */
--shadow-xs: 0 1px 2px rgba(11, 92, 63, 0.04);
--shadow-sm: 0 1px 3px rgba(11, 92, 63, 0.06), 0 1px 2px rgba(11, 92, 63, 0.04);
--shadow-md: 0 4px 8px rgba(11, 92, 63, 0.08), 0 2px 4px rgba(11, 92, 63, 0.04);
--shadow-lg: 0 12px 24px rgba(11, 92, 63, 0.10), 0 4px 8px rgba(11, 92, 63, 0.06);
--shadow-glow: 0 8px 32px rgba(16, 163, 110, 0.14);
/* ─── CARTES unifiées (système .sx-card) ──────────────────────── */
--card-bg: var(--bg-elevated);
--card-radius: 16px; /* = --r-lg */
--card-padding: 1.5rem; /* 24 = --s-3 — standard */
--card-padding-lg: 3rem; /* 48 = --s-4 — tier cards premium */
--card-border: 1px solid var(--brand-pale-2);
--card-border-hover: 1px solid var(--brand-pale);
--card-shadow: 0 1px 3px rgba(11, 92, 63, 0.06);
--card-shadow-hover: 0 12px 24px rgba(11, 92, 63, 0.10);
--card-lift: -2px;
/* ─── BOUTONS (primary + secondary) ────────────────────────────── */
--btn-radius: 8px; /* = --r-md */
--btn-padding-y: 0.875rem; /* 14px */
--btn-padding-x: 1.5rem; /* 24 = --s-3 */
--btn-font-size: 0.875rem; /* 14px */
--btn-font-weight: 500;
--btn-icon-shift-x: 2px;
--btn-icon-shift-y: -2px;
/* ─── FILETS d'accent (1px réguliers) ──────────────────────────── */
--border-divider: 1px solid rgba(11, 92, 63, 0.08); /* séparateurs entre sections claires */
/* ─── SCROLL REVEAL (IntersectionObserver, pro-max) ────────────── */
--reveal-duration: 720ms; /* settle premium, un peu plus long qu'un micro-interaction */
--reveal-distance: 22px; /* translateY d'entrée, assez pour se sentir sans etre lourd */
--reveal-stagger: 75ms; /* decalage entre freres d'une meme grille (cascade) */
/* ─── Easings + transitions ─────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 150ms;
--t-base: 200ms;
--t-slow: 350ms;
--transition: all var(--t-base) var(--ease-out);
/* ─── Animations ─────────────────────────────────────────────────── */
--marquee-duration: 70s;
/* ─── Layout ────────────────────────────────────────────────────── */
--container-max: 1340px;
--container-gutter: clamp(1.25rem, 1rem + 1vw, 1.5rem);
}
/* Application du fond clair général + texte verdi sur body */
body {
background-color: var(--bg);
color: var(--text);
}
/* Homepage : bg beige reduit unifie pour les 3 premieres sections (hero/quote/methode
qui sont transparentes) — la section fonctionnalites reprend le meme --bg-warm
dans son propre gradient. Cree une continuite chromatique chaude du haut du site. */
body.home {
background-color: var(--bg-warm);
}
/* ═══════════════════════════════════════════════════════════════════════
SYSTÈME DE CARTES UNIFIÉ — base `.sx-card` héritée par tous les variants.
Garantit radius, border, shadow, padding, hover cohérents partout.
═══════════════════════════════════════════════════════════════════════ */
.sx-card {
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
padding: var(--card-padding);
box-shadow: var(--card-shadow);
transition: border-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.sx-card:hover {
border: var(--card-border-hover);
box-shadow: var(--card-shadow-hover);
transform: translateY(var(--card-lift));
}
/* .sx-more-* : bloc complet defini plus bas (section Fonctionnalites, style ref singlegrain) */
/* ═══════════════════════════════════════════════════════════════════════
COMPOSANTS GLOBAUX — Boutons CTA, typographie hero, utilitaires partagés.
Sélecteurs un cran plus spécifiques que Tailwind pour gagner la cascade.
═══════════════════════════════════════════════════════════════════════ */
/* ─── Bouton CTA primaire (style unique sur tout le site) ─────────
Variante émeraude clair : bg --brand (#10A36E) + texte sombre --text (#06281C)
= ratio 5.2:1 (AA confortable). Hover bascule vers --brand-light pour
l'effet "brightening" premium. */
.sx-cta-primary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.875rem 1.5rem;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 500;
color: #ffffff;
background-color: var(--brand); /* #10A36E — émeraude clair */
border: none;
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
text-decoration: none;
cursor: pointer;
transition: background-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.sx-cta-primary:hover {
background-color: var(--brand-deep); /* hover settle vers deep — blanc gagne contraste 8.8:1 AAA */
box-shadow: var(--shadow-glow);
transform: translateY(-1px);
}
.sx-cta-primary:active {
transform: translateY(0) scale(0.97);
box-shadow: var(--shadow-sm);
transition-duration: var(--t-fast);
}
.sx-cta-primary .material-symbols-outlined {
font-size: 1.125rem;
transition: transform var(--t-base) var(--ease-out);
}
.sx-cta-primary:hover .material-symbols-outlined {
transform: translate(2px, -2px);
}
/* Variant "sur dark" — quand le CTA est dans une section ou card dark (bg-brand-deep),
on inverse pour garantir le contraste : bg cream + texte vert deep (ratio ~10:1 AAA). */
.sx-section-dark .sx-cta-primary,
.sx-cta-card .sx-cta-primary {
background-color: var(--accent-cream);
color: var(--brand-deep);
}
.sx-section-dark .sx-cta-primary:hover,
.sx-cta-card .sx-cta-primary:hover {
background-color: #ffffff;
color: var(--brand-deep-2);
/* halo "lift" garde la couleur émeraude pour l'accent au hover */
}
/* Variante compacte — pour la pill navbar (h-9 = 36px au lieu du 44px default) */
.sx-cta-primary--compact {
padding: 0 var(--space-3); /* 12px horizontal, 0 vertical */
height: 2.25rem; /* 36px — s'intègre dans la pill navbar */
gap: var(--space-1); /* gap plus serré : 4px */
}
.sx-cta-primary--compact .material-symbols-outlined {
font-size: 1rem;
}
/* ─── Bouton CTA secondaire (outline) ──────────────────────────────
Variante "ghost" pour les actions secondaires : transparent + border émeraude,
hover bascule sur fond pale. Texte en brand-deep pour passer WCAG sur bg pale. */
.sx-cta-secondary {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: calc(var(--btn-padding-y) - 1.5px) calc(var(--btn-padding-x) - 1.5px); /* compense la border 1.5px */
font-family: var(--font-body);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
color: var(--brand-deep);
background-color: transparent;
border: 1.5px solid var(--brand);
border-radius: var(--btn-radius);
text-decoration: none;
cursor: pointer;
transition: background-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.sx-cta-secondary:hover {
background-color: var(--brand-pale-2);
border-color: var(--brand-deep);
transform: translateY(-2px);
box-shadow: 0 8px 18px -8px rgba(16, 163, 110, 0.35);
}
.sx-cta-secondary:active {
transform: translateY(0) scale(0.97);
transition-duration: var(--t-fast);
}
.sx-cta-secondary .material-symbols-outlined,
.sx-cta-secondary .ti {
font-size: 1.125rem;
transition: transform var(--t-base) var(--ease-out);
}
.sx-cta-secondary:hover .material-symbols-outlined,
.sx-cta-secondary:hover .ti {
transform: translate(var(--btn-icon-shift-x), var(--btn-icon-shift-y));
}
/* ─── CTA final · carte dark "moment fort" miniature ─────────────
Variation du sx-section-dark en CARTE (radius + padding interne). */
.sx-cta-card {
position: relative;
padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
background-color: var(--brand-deep-soft); /* deep adouci — bg large moins pesant */
border-radius: var(--r-2xl);
text-align: center;
overflow: hidden;
color: var(--accent-cream);
}
/* Grain SVG (::before) — texture film subtile */
.sx-cta-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
opacity: 0.07; /* vs 0.04 — grain plus perceptible */
}
/* Patterns decoratifs (::after) — 2 radial glows aux coins + grille de dots subtils */
.sx-cta-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
/* Glow mint diffus haut-droite */
radial-gradient(ellipse 65% 55% at 88% 12%, rgba(107, 208, 168, 0.28), transparent 65%),
/* Glow mint diffus bas-gauche (couleur legerement differente pour rythme) */
radial-gradient(ellipse 60% 50% at 12% 88%, rgba(61, 190, 139, 0.20), transparent 65%),
/* Grille de dots cream tres subtile — donne texture sans surcharge */
radial-gradient(circle at center, rgba(234, 247, 241, 0.10) 1.2px, transparent 1.6px);
background-size: 100% 100%, 100% 100%, 32px 32px;
background-repeat: no-repeat, no-repeat, repeat;
background-position: 0 0, 0 0, center center;
}
.sx-cta-card > * { position: relative; z-index: 1; }
.sx-cta-card .sx-eyebrow { color: var(--brand-light-2); }
.sx-cta-card .sx-h2-section { color: var(--accent-cream); }
.sx-cta-card .sx-description { color: rgba(252, 249, 242, 0.78); margin-left: auto; margin-right: auto; }
/* Reassurance sous le CTA de la card : le composant est pense pour un fond clair
(texte gris + puce verte). Sur ce fond vert on repasse en creme translucide
(comme .sx-description ci-dessus) et la puce en vert clair — sinon vert sur
vert = invisible. */
.sx-cta-card .sx-hero-reassurance { color: rgba(252, 249, 242, 0.78); }
.sx-cta-card .sx-hero-reassurance > span:not(:first-child)::before { color: var(--brand-light-2); }
/* Alignement cale sur celui de la card Solutions : son contenu (.sx-sol-cta-actions,
texte) bascule a gauche des 640px, alors que le composant reassurance, lui,
n'y passe qu'a 1024px → on avance la bascule pour que la ligne suive le bouton.
Sous 640px, la card recentre tout et le composant suit deja. */
@media (min-width: 640px) {
.sx-sol-cta-card .sx-hero-reassurance { justify-content: flex-start; }
}
/* ─── FAQ · items accordion refinés ──────────────────────────── */
.sx-faq-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sx-faq-item {
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
padding: 0 var(--card-padding); /* 24 horizontal — vertical géré par summary */
transition: border-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-faq-item:hover { border: var(--card-border-hover); box-shadow: var(--card-shadow); }
.sx-faq-item[open] { border: var(--card-border-hover); }
.sx-faq-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
}
.sx-faq-summary::-webkit-details-marker { display: none; }
.sx-faq-question {
font-family: var(--font-display);
font-size: var(--fs-body-lg);
font-weight: 600;
line-height: 1.4;
color: var(--text);
}
.sx-faq-toggle {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-full);
background: var(--brand-pale);
color: var(--brand-deep-2);
transition: transform var(--t-base) var(--ease-out),
background-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out);
}
.sx-faq-item[open] .sx-faq-toggle {
transform: rotate(180deg);
background: var(--brand); /* QW#4 : passage à l'émeraude vive pour l'état ouvert (icône blanc 3.2:1 = OK WCAG icon) */
color: #ffffff;
}
.sx-faq-answer {
padding: 0 var(--space-7) var(--space-5) 0;
}
.sx-faq-answer p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-soft);
margin: 0;
}
/* ─── Footer (style Modjo : dark green + grain + colonnes structurées) ──── */
.sx-footer {
position: relative;
background: var(--brand-deep-soft); /* aligne avec .sx-section-dark et .sx-cta-card */
color: var(--accent-cream);
padding: var(--space-9) 0 var(--space-6);
overflow: hidden;
}
.sx-footer::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
opacity: 0.08;
}
.sx-footer > * { position: relative; z-index: 1; }
/* Top : brand à gauche + social à droite */
.sx-footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-6);
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.sx-footer-brand {
max-width: 32rem;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sx-footer-logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-cream);
text-decoration: none;
}
.sx-footer-logo img { height: 1.75rem; width: auto; }
.sx-footer-tagline {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: rgba(252, 249, 242, 0.72);
line-height: var(--lh-body);
margin: 0;
max-width: 32rem;
}
.sx-footer-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--r-full);
background: rgba(252, 249, 242, 0.08);
color: var(--accent-cream);
font-size: 1.125rem;
text-decoration: none;
transition: background-color var(--t-base) var(--ease-out);
}
.sx-footer-social:hover {
background: rgba(252, 249, 242, 0.16);
}
/* Colonnes de liens */
.sx-footer-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-7) var(--space-6);
margin-bottom: var(--space-7);
}
@media (min-width: 768px) {
.sx-footer-columns { grid-template-columns: repeat(4, 1fr); }
}
.sx-footer-col {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sx-footer-col-title {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-light-2);
margin: 0 0 var(--space-1) 0;
}
.sx-footer-col a {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: rgba(252, 249, 242, 0.82);
text-decoration: none;
transition: color var(--t-base) var(--ease-out);
}
.sx-footer-col a:hover { color: var(--accent-cream); }
/* Bottom : copyright + agency + language */
.sx-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-5);
border-top: 1px solid rgba(252, 249, 242, 0.12);
flex-wrap: wrap;
}
.sx-footer-bottom p,
.sx-footer-bottom span {
font-family: var(--font-body);
font-size: 0.75rem;
color: rgba(252, 249, 242, 0.55);
margin: 0;
}
.sx-footer-bottom a {
color: rgba(252, 249, 242, 0.72);
text-decoration: none;
transition: color var(--t-base) var(--ease-out);
}
.sx-footer-bottom a:hover { color: var(--accent-cream); }
.sx-footer-lang {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
/* ─── Section "moment fort" sur fond vert profond ──────────────────
Pattern réutilisable : bg --brand-deep + texte cream + grain SVG très discret.
Surcharge automatique de .sx-eyebrow / .sx-h2-section / .sx-description
pour les versions inversées (clair sur sombre). */
.sx-section-dark {
position: relative;
background-color: var(--brand-deep-soft); /* deep adouci — aplat large moins pesant */
color: var(--accent-cream);
overflow: hidden;
}
.sx-section-dark::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
opacity: 0.08; /* QW#8 : 0.04 → 0.08 — grain enfin perceptible sans devenir bruit */
}
/* Patterns decoratifs (::after) : radial glows + dot grid subtils — meme recette que .sx-cta-card */
.sx-section-dark::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
/* Glow mint diffus haut-droite */
radial-gradient(ellipse 60% 45% at 92% 8%, rgba(107, 208, 168, 0.24), transparent 65%),
/* Glow mint diffus bas-gauche */
radial-gradient(ellipse 55% 45% at 8% 92%, rgba(61, 190, 139, 0.18), transparent 65%),
/* Grille de dots cream tres subtile */
radial-gradient(circle at center, rgba(234, 247, 241, 0.09) 1.2px, transparent 1.6px);
background-size: 100% 100%, 100% 100%, 32px 32px;
background-repeat: no-repeat, no-repeat, repeat;
background-position: 0 0, 0 0, center center;
}
.sx-section-dark > * { position: relative; z-index: 1; }
/* Variants typo "sur dark" (sélecteurs descendants — gagnent la cascade) */
.sx-section-dark .sx-eyebrow { color: var(--brand-light-2); } /* #6BD0A8 */
.sx-section-dark .sx-h2-section { color: var(--accent-cream); } /* cream */
.sx-section-dark .sx-description { color: rgba(252, 249, 242, 0.78); } /* cream-soft */
/* ─── Cards "tier" (pricing TPE / PME / ETI) ──────────────────────
Variation premium des cards : padding plus ample, shadow plus marquée, hover lift. */
.sx-tier-card {
display: flex;
flex-direction: column;
padding: var(--card-padding-lg); /* 48 — variant card large */
min-height: 320px;
background: var(--card-bg);
border: 1.5px solid rgba(61, 190, 139, 0.25); /* variant : border light pour cards sur fond dark */
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
}
.sx-tier-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-3px) scale(1.012);
transition-timing-function: var(--ease-out-back); /* easing "ressort" pour le premium tier */
}
.sx-tier-eyebrow {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--brand-deep-2);
margin: 0 0 var(--space-2) 0;
}
.sx-tier-title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 var(--space-4) 0;
}
.sx-tier-desc {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
color: var(--text-soft);
margin: 0;
}
.sx-tier-features {
list-style: none;
padding: 0;
margin: auto 0 0 0; /* pousse vers le bas du flex-col */
padding-top: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--fs-body-sm);
color: var(--text-soft);
}
.sx-tier-features li {
display: flex;
align-items: center;
gap: var(--space-3);
}
.sx-tier-features li::before {
content: '';
flex-shrink: 0;
width: 1rem;
height: 1rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
/* ─── Eyebrow utilitaire (tag uppercase tracked, sans bg) ───────── */
.sx-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-deep-2);
}
/* ─── Titre H2 section (style "Notre méthode en 4 étapes.") ────── */
.sx-h2-section {
font-family: var(--font-display);
font-size: var(--fs-display-lg);
font-weight: 600;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--text);
margin: 0;
text-wrap: balance; /* équilibre les lignes du titre (pas d'orpheline) */
}
/* ─── Description body sous H2 section ──────────────────────────── */
.sx-description {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-soft);
max-width: 32rem;
text-wrap: pretty; /* évite le mot seul en dernière ligne */
}
/* Header de section centré : le bloc description (max-width 32rem) doit être
centré aussi, sinon il reste calé à gauche et paraît décentré vs le titre.
Ne cible que les contextes .text-center (les leads alignés à gauche gardent leur alignement). */
.text-center .sx-description { margin-left: auto; margin-right: auto; }
/* ─── Cards étape méthode (et générique "step card") ───────────── */
.sx-step-card {
display: flex;
flex-direction: column;
gap: var(--s-2); /* 16 — strict scale */
/* Système unifié : padding + border + radius + shadow via --card-* */
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
padding: var(--card-padding);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
}
.sx-step-card:hover {
border: var(--card-border-hover);
box-shadow: var(--card-shadow-hover);
transform: translateY(var(--card-lift));
}
.sx-step-card { gap: var(--space-2); } /* override : gap plus serré entre badge / titre / desc */
.sx-step-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
padding: 2px var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-deep-2);
background: var(--brand-pale);
border-radius: var(--r-sm);
}
.sx-step-title {
font-family: var(--font-display);
font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); /* 15→17px (au lieu de --fs-display-sm 18→22px) */
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.sx-step-desc {
font-family: var(--font-body);
font-size: 0.8125rem; /* 13px (au lieu de --fs-body-sm 14px) */
line-height: var(--lh-body-snug);
color: var(--text-soft);
margin: 0;
}
/* ─── Témoignages · masonry CSS columns (1/2/3 cols responsive) ── */
.sx-testimonials-masonry {
column-count: 1;
column-gap: var(--space-5);
}
@media (min-width: 640px) {
.sx-testimonials-masonry { column-count: 2; }
}
@media (min-width: 1024px) {
.sx-testimonials-masonry { column-count: 3; }
}
.sx-testimonials-masonry > * {
break-inside: avoid;
margin-bottom: var(--space-5);
display: inline-block;
width: 100%;
}
/* Carte témoignage individuelle — utilise le système .sx-card unifié */
.sx-testimonial-card {
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
padding: var(--card-padding);
box-shadow: var(--card-shadow);
transition: border-color var(--t-slow) var(--ease-out),
box-shadow var(--t-slow) var(--ease-out),
transform var(--t-slow) var(--ease-out);
}
.sx-testimonial-card:hover {
border: var(--card-border-hover);
box-shadow: var(--card-shadow-hover);
transform: translateY(var(--card-lift)) scale(1.015);
}
.sx-testimonial-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.sx-testimonial-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--r-full);
background: var(--brand-pale);
color: var(--brand-deep-2);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--fs-body-sm);
flex-shrink: 0;
}
.sx-testimonial-name {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--text);
margin: 0;
line-height: 1.3;
}
.sx-testimonial-role {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--text-soft);
margin: 0;
line-height: 1.3;
}
.sx-testimonial-quote {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
color: var(--text-soft);
margin: 0;
white-space: pre-line; /* préserve les \n\n des longs témoignages comme paragraphes */
}
.sx-testimonial-mention {
color: var(--brand-deep-2);
font-weight: 600;
}
/* ─── Quote section · moment éditorial premium ──────────────────── */
/* Filet laiton avec fade en bords (au lieu d'un trait solide net) — plus subtil */
.sx-brass-filet {
display: block;
width: 6rem; /* QW#10 : 4rem → 6rem (96px) — ancrage visuel proportionné à la scale 2.5rem du quote */
height: 1px;
margin: 0 auto;
background: linear-gradient(
to right,
transparent 0%,
var(--accent-brass) 30%,
var(--accent-brass) 70%,
transparent 100%
);
}
.sx-quote-text {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.015em;
color: var(--text);
margin: 0 auto;
max-width: 64rem; /* 56 → 64rem (1024px) — laisse de la place pour 4 lignes au lieu de 6 */
}
.sx-quote-text .sx-quote-accent {
color: var(--brand-deep-2);
font-weight: 700;
}
/* Soulignement CSS natif qui hérite de la couleur courante du texte (currentColor).
Garantit que le trait a EXACTEMENT la teinte du texte (cream sur dark, etc.). */
.sx-quote-underline {
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
}
.sx-quote-attribution {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-7);
}
.sx-quote-attribution-name {
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
font-size: var(--fs-body);
line-height: 1.3;
}
.sx-quote-attribution-role {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--text-soft);
font-size: var(--fs-body-sm);
margin-top: 2px;
}
.sx-quote-attribution-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
font-size: 0.6875rem;
font-weight: 600;
color: var(--brand-deep-2);
background: var(--brand-pale-2);
border-radius: var(--r-sm);
letter-spacing: 0;
}
/* ─── Hero V2 · typographie premium (échelle clamp + tracking) ───── */
.sx-hero-v2 .sx-h1-hero {
font-family: var(--font-display);
/* Réduit vs --fs-display-xl (4.5rem max) pour que "Nous trouvons vos
clients" (nowrap) tienne dans la colonne sans déborder sur le hub. */
font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: var(--space-5);
}
/* Force chaque ligne du H1 sur une seule ligne (display:block + nowrap).
Si la ligne est plus large que la col-span-6, elle déborde vers la droite
(zone gap + col hub) — visible mais sans casser la mise en page. */
.sx-hero-v2 .sx-h1-line {
display: block;
white-space: nowrap;
}
/* Mobile/tablette (colonne centrée, sans illustration à côté) : autoriser le
retour à la ligne — sinon "Nous trouvons vos clients" déborde du viewport et
crée un scroll horizontal. Le nowrap ne sert qu'au layout 2 colonnes desktop. */
@media (max-width: 1023px) {
.sx-hero-v2 .sx-h1-line { white-space: normal; }
}
/* Filet de sécurité global : aucun débordement latéral ne doit produire de
scroll horizontal (cause principale = le titre hero, corrigée ci-dessus). */
html, body { overflow-x: hidden; }
.sx-hero-v2 .sx-lead,
.sx-hero-v2 .sx-lead-soft {
font-family: var(--font-body);
font-size: 1.0625rem; /* 17px — taille intermédiaire unifiée (entre fs-body 16px et fs-body-lg 18px) */
line-height: var(--lh-body);
max-width: 36rem;
display: block;
}
.sx-hero-v2 .sx-lead { color: var(--text-soft); margin-bottom: var(--space-4); }
.sx-hero-v2 .sx-lead-soft { color: var(--text-mute); margin-bottom: var(--space-6); }
.sx-hero-v2 .sx-lead::before,
.sx-hero-v2 .sx-lead-soft::before {
content: none; /* flèche retirée */
}
/* Réassurance sous le CTA hero — microcopy discret, séparateurs · verts.
Centré sur mobile, aligné à gauche en desktop (comme le reste du hero). */
.sx-hero-reassurance {
margin-top: 1.15rem;
display: flex;
flex-wrap: wrap;
row-gap: 0.35rem;
justify-content: center;
align-items: center;
font-family: var(--font-body);
font-size: 0.8125rem;
line-height: 1.4;
color: var(--text-mute);
}
@media (min-width: 1024px) {
.sx-hero-reassurance { justify-content: flex-start; }
}
.sx-hero-reassurance > span {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.sx-hero-reassurance > span:not(:first-child)::before {
content: '·';
margin: 0 0.55rem;
color: #10A36E;
font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════════════ */
/* ─── Hero gradient (vert SellExpert) ──────────────────────────────── */
.hero-gradient {
background: radial-gradient(circle at top right, rgba(16, 163, 110, 0.10), transparent 55%),
radial-gradient(circle at bottom left, rgba(76, 215, 246, 0.06), transparent 55%);
}
/* ─── Trust Banner : grille blanche derrière la quote, collée au bord droit ─ */
.sx-trust-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* Couvre ~la moitié droite (zone de la quote) — fade le côté gauche via mask */
width: 60%;
pointer-events: none;
z-index: 1;
background-image:
/* Lignes verticales blanches */
linear-gradient(to right, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
/* Lignes horizontales blanches */
linear-gradient(to bottom, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px;
background-position: right top;
/* Fade horizontal : visible à droite, disparait vers le centre/gauche */
-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
mask-image: linear-gradient(to left, #000 30%, transparent 100%);
}
/* ─── Marquee infinie (Trust Banner) — défile en boucle avec fade sur les bords */
.sx-marquee {
/* overflow-hidden : empêche le track (width: max-content) de générer du scroll horizontal sur la page */
overflow: hidden;
/* Mask gauche/droit pour éviter que les logos apparaissent/disparaissent brutalement */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.sx-marquee-track {
width: max-content;
padding-left: 4rem;
animation: sx-marquee 28s linear infinite;
will-change: transform;
}
.sx-marquee-track:hover {
animation-play-state: paused;
}
@keyframes sx-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ─── Section Méthode : dégradé doux vert SellExpert (réf : Easy Solutions) ──
2 foyers radiaux plus larges et plus saturés pour que les cartes blanches contrastent davantage. */
.sx-method-section {
/* Bg délégué aux 2 divs enfants (.sx-method-bg + .sx-method-grid-left)
pour pattern hero-style + cross-fade avec quote au-dessus. */
position: relative;
}
/* Background gradient à DROITE (même direction que hero — crée un rythme right → left → right) */
.sx-method-bg {
background:
radial-gradient(ellipse 55% 70% at 78% 45%, rgba(16, 163, 110, 0.10), transparent 70%),
linear-gradient(to left,
rgba(209, 250, 229, 0.55) 0%,
rgba(209, 250, 229, 0.30) 25%,
rgba(209, 250, 229, 0.10) 50%,
transparent 70%);
/* Mask cross-fade : fade depuis le HAUT (transition avec quote) + fade vers BAS (transition avec features) */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
}
#simple .sx-method-bg {
top: -8rem;
bottom: -8rem;
}
/* Grid à GAUCHE — identique à .sx-hero-grid-left (fade léger 15% top/bottom uniquement) */
.sx-method-grid-left {
background-image:
linear-gradient(to right, rgba(16, 163, 110, 0.22) 1px, transparent 1px),
linear-gradient(to bottom, rgba(16, 163, 110, 0.22) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image:
linear-gradient(to right, #000 0%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, #000 0%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
mask-composite: intersect;
}
/* ─── Hero V2 (2 colonnes : texte + hub connecté, dégradé vert très doux à droite + grain SVG subtil) ── */
/* Section Quote — mirror inverse du pattern hero : gradient à gauche + grid à droite.
Base transparente (pas de #ffffff) pour permettre la propagation visuelle vers la hero au-dessus. */
.sx-quote-bg {
background:
radial-gradient(ellipse 55% 70% at 22% 45%, rgba(16, 163, 110, 0.10), transparent 70%),
linear-gradient(to right,
rgba(209, 250, 229, 0.55) 0%,
rgba(209, 250, 229, 0.30) 25%,
rgba(209, 250, 229, 0.10) 50%,
transparent 70%);
/* Mask vertical : fade depuis le HAUT, pleine opacité au milieu, fade vers le BAS pour cross-fade smooth avec méthode */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
}
/* Override de inset-0 : déborde vers le HAUT de 8rem pour propager dans la hero */
#quote .sx-quote-bg {
top: -8rem;
}
/* Section quote : meme background que la section FAQ — var(--bg) uni cool green-white
(#F5FAF7), sans overlay decoratif. Distingue clairement quote des sections beige
surrounding via la teinte cool vs warm. */
#quote .sx-quote-bg,
#quote .sx-quote-grid-right {
display: none;
}
#quote {
background: var(--bg);
padding-top: var(--s-4);
padding-bottom: var(--s-4);
}
@media (min-width: 768px) {
#quote {
padding-top: var(--s-5);
padding-bottom: var(--s-5);
}
}
.sx-quote-grid-right {
background-image:
linear-gradient(to right, rgba(16, 163, 110, 0.22) 1px, transparent 1px),
linear-gradient(to bottom, rgba(16, 163, 110, 0.22) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image:
linear-gradient(to left, #000 0%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to left, #000 0%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
mask-composite: intersect;
}
.sx-hero-v2-bg {
/* Base transparente (pas de #ffffff) pour permettre la propagation visuelle vers la quote en-dessous. */
background:
radial-gradient(ellipse 55% 70% at 78% 45%, rgba(16, 163, 110, 0.10), transparent 70%),
linear-gradient(to left,
rgba(209, 250, 229, 0.55) 0%,
rgba(209, 250, 229, 0.30) 25%,
rgba(209, 250, 229, 0.10) 50%,
transparent 70%);
/* Mask vertical : pleine opacité en haut, fade vers le BAS pour cross-fade smooth avec quote */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}
/* Grain SVG fractal classique sur le dégradé (5% opacity, grain moyen — texture "papier" subtile) */
.sx-hero-v2-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: multiply;
}
/* Remonte le bg + grille SOUS la navbar pour que le dégradé touche le haut du viewport.
Sélecteur descendant pour battre la spécificité de Tailwind .inset-0 (sinon top:0 gagne). */
.sx-hero-v2 .sx-hero-v2-bg,
.sx-hero-v2 .sx-hero-grid-left {
top: -5rem;
bottom: 0;
}
@media (min-width: 768px) {
.sx-hero-v2 .sx-hero-v2-bg,
.sx-hero-v2 .sx-hero-grid-left {
top: -6rem;
}
}
/* Le bg du hero déborde vers le BAS dans la quote (propagation continue du gradient) */
.sx-hero-v2 .sx-hero-v2-bg {
bottom: -8rem;
}
/* Accent vert sur le titre */
.sx-hero-accent {
background: linear-gradient(135deg, #10A36E 0%, #0D8A5C 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Grille en background derrière l'illustration de la hero
— cellules plus grandes, plus visibles, qui s'étendent jusqu'au bord droit
de la page (négatif right pour dépasser le container et coller au viewport) */
/* Wrapper orbite : applique une perspective + tilt 3D pour donner la sensation
de profondeur (les icônes apparaissent en ellipse car vues sous un angle). */
.sx-orbit {
perspective: 1400px;
transform-style: preserve-3d;
}
.sx-orbit > * {
transform-style: preserve-3d;
}
/* On tilt le tout via une transform appliquée à .sx-orbit-3d — l'effet
ressemble à un disque incliné vers l'avant et un peu sur la droite. */
.sx-orbit-3d {
transform: rotateX(22deg) rotateY(-10deg);
transform-style: preserve-3d;
width: 100%;
height: 100%;
position: relative;
}
/* Logo central — on garde la forme native (carré arrondi). On hérite du
tilt 3D du parent .sx-orbit-3d sans le contre-balancer → le logo
s'incline avec l'orbite. */
.sx-orbit-center {
transform: translate(-50%, -50%);
}
/* Orbite : 6 icônes canaux disposées en cercle autour du logo central
Le double rotate(angle)→translate→rotate(-angle) garde les icônes droites
tout en les positionnant sur le cercle. */
.sx-orbit-icon {
position: absolute;
top: 50%;
left: 50%;
/* Taille pilotée par --size (set inline par PHP) avec fallback à 78px.
font-size suit proportionnellement (~45% du diamètre). */
width: var(--size, 78px);
height: var(--size, 78px);
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--size, 78px) * 0.46);
color: #10A36E;
box-shadow: none;
/* translateZ(var(--z)) déplace l'icône vers (positif) ou loin (négatif)
de la caméra — combiné à la perspective parent, ça crée des icônes
plus grandes/petites selon leur profondeur. */
transform: translate(-50%, -50%) rotate(var(--a)) translateY(-200px) rotate(calc(-1 * var(--a))) translateZ(var(--z, 0px));
transition: transform .25s ease, box-shadow .25s ease;
z-index: 5;
}
.sx-orbit-icon:hover {
box-shadow: none;
transform: translate(-50%, -50%) rotate(var(--a)) translateY(-200px) rotate(calc(-1 * var(--a))) translateZ(var(--z, 0px)) scale(1.08);
}
/* Sur des écrans plus petits, on rapproche les icônes du centre */
@media (max-width: 640px) {
.sx-orbit-icon { width: 60px; height: 60px; font-size: 28px;
transform: translate(-50%, -50%) rotate(var(--a)) translateY(-150px) rotate(calc(-1 * var(--a))) translateZ(var(--z, 0px));
}
.sx-orbit-icon:hover {
transform: translate(-50%, -50%) rotate(var(--a)) translateY(-150px) rotate(calc(-1 * var(--a))) translateZ(var(--z, 0px)) scale(1.08);
}
}
/* Surlignage "fait main" sur le titre — SVG de surligneur (forme légèrement
irrégulière) en background derrière le texte + rotation -1.5deg pour le
côté "tracé au feutre à la main". Le texte reste lisible par-dessus. */
.sx-hero-highlight {
position: relative;
display: inline-block;
z-index: 0;
padding: 0 4px;
}
.sx-hero-highlight::before {
content: '';
position: absolute;
left: -6px;
right: -8px;
top: 38%;
bottom: -4%;
/* Fill = brand-200 (#B7E3D4) : nuance claire qui laisse le texte noir parfaitement lisible (ratio ~11:1, AAA). */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
transform: rotate(-1.5deg);
z-index: -1;
pointer-events: none;
}
/* Glow vert circulaire pile derrière l'ampoule de l'illustration de la hero
— diffus, grain prononcé. Le box est centré sur (left:78%, top:12%) via
`transform: translate(-50%, -50%)` pour que le CENTRE du dégradé tombe
exactement sur l'ampoule (pas le coin haut-gauche). */
.sx-hero-bulb-glow {
/* Centre du dégradé pile sur le logo central de l'orbite (= centre du col) */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 580px;
height: 580px;
/* Lime du surlignement (#BEF264) — opacité moyenne pour que la teinte
reste reconnaissable même sur fond blanc. */
background: radial-gradient(circle,
rgba(16, 163, 110, 0.36) 0%,
rgba(16, 163, 110, 0.25) 28%,
rgba(16, 163, 110, 0.15) 55%,
rgba(16, 163, 110, 0.05) 80%,
transparent 100%);
filter: blur(50px);
}
/* Grain lime — opacité très faible pour ne pas désaturer la teinte */
.sx-hero-bulb-glow::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.25;
-webkit-mask-image: radial-gradient(circle, #000 0%, #000 40%, transparent 80%);
mask-image: radial-gradient(circle, #000 0%, #000 40%, transparent 80%);
}
/* Grille côté gauche de la hero — colle au bord gauche, fade vers le centre */
.sx-hero-grid-left {
background-image:
linear-gradient(to right, rgba(16, 163, 110, 0.22) 1px, transparent 1px),
linear-gradient(to bottom, rgba(16, 163, 110, 0.22) 1px, transparent 1px);
background-size: 64px 64px;
/* Fade horizontal : pleine à gauche → invisible vers la droite (où est le texte).
Léger fade vertical haut/bas pour ne pas couper net. */
-webkit-mask-image:
linear-gradient(to right, #000 0%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, #000 0%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
mask-composite: intersect;
}
/* Panel illustration à droite — mêmes verts que la login page */
.sx-hero-illu-panel {
background: linear-gradient(135deg, #6EE7B7 0%, #10B981 55%, #10A36E 100%);
box-shadow:
0 30px 60px -20px rgba(16, 163, 110, 0.35),
0 18px 36px -12px rgba(0, 0, 0, 0.12);
}
/* Pill email + bouton — version light */
.sx-hero-email-pill {
background: #ffffff;
border: 1px solid rgba(16, 163, 110, 0.18);
border-radius: 9999px;
box-shadow: 0 4px 20px -4px rgba(16, 163, 110, 0.15), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
padding: 4px;
transition: border-color .2s, box-shadow .2s;
}
.sx-hero-email-pill:focus-within {
border-color: rgba(16, 163, 110, 0.4);
box-shadow: 0 4px 28px -4px rgba(16, 163, 110, 0.25), 0 0 0 3px rgba(16, 163, 110, 0.1);
}
/* ─── Navbar : pill blanche + texte sombre (cohérent avec hero light) ─ */
.sx-navbar-pill {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
}
.sx-navbar-pill.is-scrolled {
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
}
.sx-navbar-pill .sx-logo-text {
color: #10A36E !important;
}
/* On garde uniquement le logo coloré (le logo blanc est masqué) */
.sx-logo-img-light { display: none; }
.sx-logo-img-dark { display: inline-block; }
/* ─── Mockup dashboard (screenshot) ────────────────────────────────── */
.sx-dashboard-mockup {
border-radius: 16px;
overflow: hidden;
box-shadow:
0 30px 60px -20px rgba(16, 163, 110, 0.18),
0 18px 36px -12px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(16, 163, 110, 0.08);
}
/* ─── Hero half droite : degrade vert + spotlight anime (transform-only) + grain ── */
.hero-right-bg {
position: absolute;
background:
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(16, 163, 110, 0.28), transparent 70%),
radial-gradient(ellipse 70% 55% at 0% 100%, rgba(76, 215, 246, 0.18), transparent 70%),
linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 55%, #A7F3D0 100%);
overflow: hidden;
will-change: transform;
}
/* Spotlights isoles : animes via transform uniquement (GPU compositing, zero repaint) */
.hero-right-spotlight {
position: absolute;
width: 1100px;
height: 1100px;
margin: -550px 0 0 -550px;
pointer-events: none;
will-change: transform;
}
.hero-right-spotlight-1 {
top: 30%;
left: 70%;
width: 1200px;
height: 1200px;
margin: -600px 0 0 -600px;
background: radial-gradient(circle, rgba(16, 163, 110, 0.54) 0%, rgba(16, 163, 110, 0.22) 35%, transparent 70%);
filter: blur(20px);
}
.hero-right-spotlight-2 {
top: 78%;
left: 22%;
width: 1050px;
height: 1050px;
margin: -525px 0 0 -525px;
background: radial-gradient(circle, rgba(16, 163, 110, 0.48) 0%, rgba(16, 163, 110, 0.20) 35%, transparent 70%);
filter: blur(20px);
}
/* Grain : 2 couches statiques, jamais repeintes (cachees en GPU layer une fois) */
.hero-right-bg::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
opacity: 0.85;
mix-blend-mode: overlay;
}
.hero-right-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
opacity: 0.65;
mix-blend-mode: soft-light;
}
/* ─── Material Symbols ─────────────────────────────────────────────── */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
vertical-align: middle;
}
/* ─── Prose styles pour le contenu de blog (the_content) ───────────── */
.sellexpert-prose {
color: #45464D;
font-size: 18px;
line-height: 1.7;
}
.sellexpert-prose h2 {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 32px;
font-weight: 600;
color: #000000;
margin-top: 48px;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.sellexpert-prose h3 {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 24px;
font-weight: 600;
color: #000000;
margin-top: 32px;
margin-bottom: 12px;
}
.sellexpert-prose p {
margin-bottom: 20px;
}
.sellexpert-prose a {
color: #10A36E;
text-decoration: underline;
}
.sellexpert-prose a:hover {
color: #065F46;
}
.sellexpert-prose ul,
.sellexpert-prose ol {
margin-bottom: 20px;
padding-left: 24px;
}
.sellexpert-prose li {
margin-bottom: 8px;
}
.sellexpert-prose blockquote {
border-left: 4px solid #10A36E;
padding-left: 24px;
margin: 32px 0;
font-style: italic;
color: #45464D;
}
.sellexpert-prose img {
border-radius: 16px;
margin: 32px 0;
}
.sellexpert-prose pre {
background: #0A2A1F;
color: #FFFFFF;
padding: 24px;
border-radius: 12px;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 14px;
margin: 24px 0;
}
.sellexpert-prose code {
background: #ECEEF0;
color: #10A36E;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9em;
}
.sellexpert-prose pre code {
background: transparent;
color: inherit;
padding: 0;
}
/* ─── Pagination WP (the_posts_pagination) ─────────────────────────── */
.navigation.pagination .nav-links {
display: flex;
gap: 8px;
align-items: center;
}
.navigation.pagination .page-numbers {
padding: 8px 14px;
border-radius: 8px;
border: 1px solid #C6C6CD;
color: #45464D;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
background: #10A36E;
color: #FFFFFF;
border-color: #10A36E;
}
/* ════════════════════════════════════════════════════════════════════
SCROLL REVEAL PRO-MAX — piloté par IntersectionObserver (theme.js)
────────────────────────────────────────────────────────────────────
- Universel : fonctionne sur TOUS les navigateurs (vs animation-timeline
qui ne marchait que sur Chrome/Safari récents).
- Stagger : les frères d'une même grille cascadent (delay via --sx-rd).
- Le JS ajoute .sx-reveal aux cibles + .is-in quand elles entrent, et
pose --sx-rd (reveal-delay) sur chaque frère pour la cascade.
- prefers-reduced-motion : révélé instantanément, aucun mouvement.
════════════════════════════════════════════════════════════════════ */
/* Legacy : .reveal-on-scroll conservé pour les elements qui l'utilisent deja */
.reveal-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
/* État initial : appliqué par le JS (classe .sx-reveal) — jamais en SSR
pour eviter le FOUC si le JS ne charge pas (no-js = tout visible). */
.sx-reveal {
opacity: 0;
transform: translateY(var(--reveal-distance));
transition:
opacity var(--reveal-duration) var(--ease-out),
transform var(--reveal-duration) var(--ease-out);
transition-delay: var(--sx-rd, 0ms); /* stagger : posé par le JS par frère */
will-change: opacity, transform;
}
.sx-reveal.is-in {
opacity: 1;
transform: none;
}
/* Accessibilité : aucun mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
.sx-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ─── HERO : entrée animée au chargement (fade + rise, cascade) ─────────
Le hero est above-the-fold → pas de scroll-reveal, on anime au load.
Cascade : lignes du titre → lead → lead-soft → CTA → hub SVG.
`both` garde l'etat initial (opacity 0) avant le demarrage = no FOUC. */
@media (prefers-reduced-motion: no-preference) {
@keyframes sx-hero-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.sx-hero-v2 .sx-h1-line,
.sx-hero-v2 .sx-lead,
.sx-hero-v2 .sx-lead-soft,
.sx-hero-v2 .sx-cta-primary,
.sx-hero-v2 .sx-cta-secondary,
.sx-hero-v2 .sx-cta-tertiary,
.sx-hero-v2 .sx-hero-reassurance,
.sx-hero-v2 .sx-ch {
animation: sx-hero-in 0.72s var(--ease-out) both;
}
.sx-hero-v2 .sx-h1-line:nth-child(1) { animation-delay: 0.06s; }
.sx-hero-v2 .sx-h1-line:nth-child(2) { animation-delay: 0.14s; }
.sx-hero-v2 .sx-h1-line:nth-child(3) { animation-delay: 0.22s; }
.sx-hero-v2 .sx-lead { animation-delay: 0.32s; }
.sx-hero-v2 .sx-lead-soft { animation-delay: 0.40s; }
.sx-hero-v2 .sx-cta-primary { animation-delay: 0.50s; }
.sx-hero-v2 .sx-cta-secondary { animation-delay: 0.56s; }
.sx-hero-v2 .sx-cta-tertiary { animation-delay: 0.62s; }
.sx-hero-v2 .sx-hero-reassurance { animation-delay: 0.58s; }
.sx-hero-v2 .sx-ch { animation-delay: 0.28s; animation-duration: 0.9s; }
}
/* ─── Ancres : décaler la cible pour ne pas la cacher sous la navbar pill
sticky. scroll-padding-top s'applique à scrollIntoView (JS) ET aux sauts
d'ancre natifs. scroll-behavior: smooth = fallback CSS natif. ────────── */
html {
scroll-padding-top: 6.5rem;
scroll-behavior: smooth;
}
/* ─── Hero wizard anime (4 scenes : Quantite, Categorie, Lieu, Generation) ─ */
.sx-wizard { width: 100%; max-width: 480px; margin: 0 auto; color: #1a2e26; }
.sx-wizard .sxw-card { background: #fff; border: 0.5px solid #e2e8e4; border-radius: 14px; padding: 22px; }
.sx-wizard .sxw-step-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sx-wizard .sxw-step-badge .num { width: 22px; height: 22px; border-radius: 50%; background: #10A36E; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.sx-wizard .sxw-step-badge .lbl { font-size: 12px; font-weight: 700; color: #10A36E; letter-spacing: .5px; }
.sx-wizard .sxw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sx-wizard .sxw-head .ico { width: 38px; height: 38px; border-radius: 10px; background: #D1FAE5; display: flex; align-items: center; justify-content: center; color: #10A36E; font-size: 20px; }
.sx-wizard .sxw-head .t1 { font-weight: 700; font-size: 15px; margin: 0; }
.sx-wizard .sxw-head .t2 { font-size: 11px; color: #8a9890; margin: 0; }
.sx-wizard .sxw-scene { display: none; }
.sx-wizard .sxw-scene.active { display: block; animation: sxwFade .4s ease; }
@keyframes sxwFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sx-wizard .sxw-dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.sx-wizard .sxw-dot { width: 7px; height: 7px; border-radius: 50%; background: #cdd6d0; transition: background .3s, width .3s; }
.sx-wizard .sxw-dot.active { background: #10A36E; width: 22px; border-radius: 4px; }
.sx-wizard .sxw-vol-num { font-size: 52px; font-weight: 800; color: #10A36E; letter-spacing: -2px; }
.sx-wizard .sxw-bar-track { height: 7px; background: #eef2f0; border-radius: 4px; overflow: hidden; }
.sx-wizard .sxw-bar-fill { height: 100%; background: #10A36E; border-radius: 4px; }
.sx-wizard .sxw-chips { display: flex; gap: 6px; }
.sx-wizard .sxw-chip { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 8px 0; border-radius: 8px; background: #eef2f0; color: #8a9890; transition: background .2s, color .2s, transform .15s; }
.sx-wizard .sxw-field { height: 42px; border: 0.5px solid #d5ddd8; border-radius: 10px; display: flex; align-items: center; padding: 0 14px; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.sx-wizard .sxw-caret { display: inline-block; width: 1px; height: 16px; background: #10A36E; margin-left: 1px; }
.sx-wizard .sxw-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 16px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.sx-wizard .sxw-tabs { display: flex; gap: 5px; background: #eef2f0; border-radius: 10px; padding: 4px; }
.sx-wizard .sxw-tab { flex: 1; text-align: center; font-size: 11px; font-weight: 600; padding: 7px 0; border-radius: 7px; color: #8a9890; transition: background .2s, color .2s; }
.sx-wizard .sxw-launch { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #10A36E; color: #fff; border: none; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700; letter-spacing: .3px; transition: background .3s, transform .15s; cursor: pointer; }
.sx-wizard .sxw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sx-wizard .sxw-lead-card { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0.5px solid #e2e8e4; border-radius: 9px; background: #fff; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.sx-wizard .sxw-av { width: 28px; height: 28px; border-radius: 50%; background: #D1FAE5; color: #10A36E; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
@keyframes sxwSpin { to { transform: rotate(360deg); } }
.sx-wizard .sxw-spin { animation: sxwSpin 1s linear infinite; }
/* ─── Section "En un clic" : degrade vert depuis le bord gauche, fond a droite ──── */
.sx-simple-section-bg {
background:
radial-gradient(ellipse 50% 90% at 0% 50%, rgba(16, 163, 110, 0.32), transparent 65%),
linear-gradient(to right,
#D1FAE5 0%,
rgba(209, 250, 229, 0.85) 10%,
rgba(209, 250, 229, 0.50) 25%,
rgba(209, 250, 229, 0.20) 38%,
transparent 52%);
}
.sx-simple-section-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
opacity: 0.7;
mix-blend-mode: multiply;
filter: contrast(180%) brightness(0.95);
/* Le bruit suit le meme fade que le degrade (largeur reduite) */
-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.2) 38%, transparent 52%);
mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.2) 38%, transparent 52%);
}
/* ─── Section "performante" : meme degrade vert + grain, depuis le bord DROIT ──── */
.sx-perf-section-bg {
background:
radial-gradient(ellipse 50% 90% at 100% 50%, rgba(16, 163, 110, 0.22), transparent 65%),
linear-gradient(to left,
rgba(209, 250, 229, 0.70) 0%,
rgba(209, 250, 229, 0.55) 10%,
rgba(209, 250, 229, 0.32) 25%,
rgba(209, 250, 229, 0.12) 38%,
transparent 52%);
}
.sx-perf-section-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
opacity: 0.85;
mix-blend-mode: multiply;
filter: contrast(260%) brightness(0.92);
/* Le bruit suit le meme fade que le degrade (depuis la droite) */
-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.2) 38%, transparent 52%);
mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.2) 38%, transparent 52%);
}
/* ─── Section "En un clic" : curseur statique + cards prospects eparpillees ── */
.sx-simple-mockup { position: relative; }
.sx-mini-prospect {
display: flex;
align-items: center;
gap: 9px;
background: #fff;
border: 0.5px solid #e2e8e4;
border-radius: 11px;
padding: 9px 11px;
position: relative;
}
.sx-simple-cursor {
position: absolute;
/* coin bas-droite du bouton "LANCER LA GÉNÉRATION" */
top: 55px;
left: 72%;
width: 32px;
height: 32px;
pointer-events: none;
z-index: 20;
}
.sx-simple-cursor svg { display: block; }
/* ─── Section "performante" : mockup formulaire de contact anime ──── */
.sx-form-anim { width: 100%; max-width: 440px; color: #1a2e26; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.sx-form-anim .sx-fa-card { background: #fff; border: 0.5px solid #e2e8e4; border-radius: 14px; padding: 24px; position: relative; }
.sx-form-anim .sx-fa-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sx-form-anim .sx-fa-logo { width: 34px; height: 34px; border-radius: 9px; background: #1a2e26; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.sx-form-anim .sx-fa-t1 { font-weight: 700; font-size: 15px; margin: 0; color: #1a2e26; }
.sx-form-anim .sx-fa-t2 { font-size: 11px; color: #8a9890; margin: 0; }
.sx-form-anim .sx-fa-intro { font-size: 12px; color: #8a9890; margin: 0 0 20px; padding-top: 10px; border-top: 0.5px solid #eef2f0; line-height: 1.5; }
.sx-form-anim label { font-size: 11px; font-weight: 600; color: #5f6e66; display: block; margin-bottom: 5px; letter-spacing: .3px; }
.sx-form-anim .sx-fa-fld { margin-bottom: 14px; }
.sx-form-anim .sx-fa-inp { border: 0.5px solid #d5ddd8; border-radius: 9px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; height: 40px; transition: border-color .2s, box-shadow .2s; }
.sx-form-anim .sx-fa-lead-ico { font-size: 15px; color: #9aa8a0; margin-right: 8px; flex-shrink: 0; }
.sx-form-anim .sx-fa-val { color: #1a2e26; }
.sx-form-anim .sx-fa-ph { color: #9aa8a0; }
.sx-form-anim .sx-fa-chk { font-size: 16px; color: #10A36E; margin-left: auto; opacity: 0; transition: opacity .3s; flex-shrink: 0; }
.sx-form-anim .sx-fa-caret { display: inline-block; width: 1px; height: 15px; background: #10A36E; opacity: 0; margin-left: 1px; vertical-align: middle; }
.sx-form-anim .sx-fa-inp.sx-fa-textarea { min-height: 96px; align-items: flex-start; padding: 10px 12px; line-height: 1.55; }
.sx-form-anim .sx-fa-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #cdd6d0; color: #fff; border: none; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700; letter-spacing: .3px; transition: background .3s, transform .15s; cursor: pointer; }
.sx-form-anim .sx-fa-success { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.97); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.sx-form-anim .sx-fa-suc-circle { width: 64px; height: 64px; border-radius: 50%; background: #D1FAE5; display: flex; align-items: center; justify-content: center; transform: scale(0.5); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.sx-form-anim .sx-fa-suc-title { font-weight: 700; font-size: 16px; margin: 0; color: #1a2e26; }
.sx-form-anim .sx-fa-suc-sub { font-size: 12px; color: #8a9890; margin: 0; }
@keyframes sxFaSpin { to { transform: rotate(360deg); } }
.sx-form-anim .sx-fa-spin { animation: sxFaSpin 1s linear infinite; }
/* ─── Section "Le Comment" : scroll-driven 3 actes ─────────────────── */
.sx-cc-scroll-wrapper {
position: relative;
height: 420vh; /* course de scroll = 5 phases (3 actes anime + 2 transitions) */
}
.sx-cc-sticky-inner {
position: sticky;
top: 88px; /* sous la navbar floating */
height: calc(100vh - 88px);
display: flex;
align-items: center;
justify-content: center;
}
.sx-comment-carousel-inner {
position: relative;
}
.sx-comment-track {
position: relative;
min-height: 380px; /* meme min-height que stage pour reserver l'espace */
}
.sx-comment-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: scale(1.08);
transform-origin: center center;
will-change: opacity, transform;
/* Pas de transition CSS — opacity/transform sont driven par scroll (smooth via rAF) */
}
/* La premiere slide est visible au load avant que JS prenne le relais */
.sx-comment-slide:first-child {
opacity: 1;
transform: scale(1);
}
.sx-comment-slide {
min-width: 100%;
padding: 0 0.5rem;
}
.sx-cc-kicker {
font-size: 11px;
font-weight: 700;
color: #10A36E;
letter-spacing: 1.5px;
margin: 0 0 16px;
text-transform: uppercase;
}
/* Stage pleine largeur (commun aux 3 actes) */
.sx-cc-stage {
width: 100%;
padding: 20px 40px;
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.sx-cc-stage h4.sx-cc-title { margin: 0; }
.sx-cc-stage p.sx-cc-sub { margin: 0; }
.sx-cc-act-kicker {
font-size: 13px;
font-weight: 700;
color: #10A36E;
letter-spacing: 2px;
margin: 0;
text-transform: uppercase;
}
/* Badge "Problème / Solution / Résultat" : pill avec icone, place au-dessus du titre */
.sx-cc-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.sx-cc-badge i { font-size: 17px; }
.sx-cc-badge-problem {
background: #ECFDF5;
color: #047857;
}
.sx-cc-badge-solution {
background: #ECFDF5;
color: #047857;
}
.sx-cc-badge-result {
background: #ECFDF5;
color: #047857;
}
.sx-cc-title {
font-size: 30px;
font-weight: 800;
color: #0A0A0A;
text-align: center;
margin: 0;
letter-spacing: -0.5px;
font-family: 'Hanken Grotesk', sans-serif;
line-height: 1.15;
}
.sx-cc-sub {
font-size: 16px;
color: #45464D;
text-align: center;
margin: 0;
}
/* ── Acte 1 : 5 enveloppes en ligne horizontale ── */
.sx-cc-stack-h {
display: flex;
gap: 24px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 16px 0;
}
.sx-cc-env {
position: relative;
width: 200px;
height: 72px;
background: #fff;
border: 2px solid #c7e6d8;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
opacity: 0;
}
.sx-cc-env .cross {
position: absolute;
right: 18px;
font-size: 28px;
color: #9aa8a0;
opacity: 0;
}
.sx-cc-env .sx-cc-env-mail {
font-size: 32px;
color: #10A36E;
}
/* ── Acte 2 : panel IA + formulaire qui se remplit ── */
.sx-cc-panel {
width: 100%;
max-width: 640px;
background: #fafafa;
border: 1px solid #ececec;
border-radius: 16px;
padding: 18px;
margin: 0 auto;
}
.sx-cc-panel-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.sx-cc-panel-ico {
width: 38px;
height: 38px;
border-radius: 9px;
background: #D1FAE5;
display: flex;
align-items: center;
justify-content: center;
color: #10A36E;
font-size: 19px;
}
.sx-cc-panel-title {
font-size: 15px;
font-weight: 700;
color: #0A0A0A;
}
.sx-cc-pill {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: #10A36E;
background: #D1FAE5;
padding: 4px 10px;
border-radius: 12px;
opacity: 0;
transition: opacity .4s;
}
.sx-cc-field {
height: 40px;
border: 1px solid #d5ddd8;
border-radius: 9px;
margin-bottom: 8px;
display: flex;
align-items: center;
padding: 0 14px;
font-size: 14px;
color: #0A0A0A;
transition: border-color .3s;
}
.sx-cc-field:last-child { margin-bottom: 0; }
.fcaret {
display: inline-block;
width: 1.5px;
height: 18px;
background: #10A36E;
opacity: 0;
margin-left: 1px;
}
/* ── Acte 3 : liste de contacts triables ── */
.sx-cc-panel-list {
padding: 20px;
max-width: 1100px;
}
.sx-cc-tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.sx-cc-tab {
font-size: 13px;
font-weight: 600;
padding: 7px 14px;
border-radius: 10px;
background: #fff;
color: #9aa8a0;
border: 1px solid #ececec;
cursor: default;
transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.sx-cc-tab-active {
background: #10A36E !important;
color: #fff !important;
border-color: #10A36E !important;
transform: translateY(-1px);
}
.sx-cc-list { min-height: 160px; }
.sx-cc-list-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: min-content;
align-items: start;
gap: 10px;
}
.sx-cc-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ececec;
border-radius: 10px;
opacity: 0;
transform: translateX(22px);
transition: opacity .35s, transform .35s;
}
.sx-cc-card-av {
width: 34px;
height: 34px;
border-radius: 50%;
background: #D1FAE5;
color: #10A36E;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.sx-cc-card-content { min-width: 0; flex: 1; }
.sx-cc-card-name {
font-size: 13px;
font-weight: 600;
color: #0A0A0A;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sx-cc-card-msg {
font-size: 11px;
color: #9aa8a0;
margin: 1px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sx-cc-card-tag {
font-size: 10px;
font-weight: 600;
padding: 4px 9px;
border-radius: 9px;
flex-shrink: 0;
}
.sx-cc-card-tag-int {
color: #10A36E;
background: #D1FAE5;
}
.sx-cc-card-tag-rel {
color: #b8860b;
background: #fbf2dc;
}
/* ── Indicateur de progression scroll (3 dots cliquables) ── */
.sx-comment-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 28px;
}
.sx-cc-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #C6C6CD;
border: none;
cursor: pointer;
transition: background .3s, width .3s, border-radius .3s;
padding: 0;
}
.sx-cc-dot-active {
background: #10A36E;
width: 26px;
border-radius: 5px;
}
/* ─── Section Simplicité + Performance (cartes blanches sur fond vert) ─── */
/* Carte feature : border fin + hover subtil (pas d'ombre) */
.sx-feature-card {
box-shadow: none;
border: 1px solid rgba(10, 42, 31, 0.10);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sx-feature-card:hover {
transform: translateY(-2px);
border-color: rgba(10, 42, 31, 0.22);
}
/* Wrapper visuel : empêche un débordement horizontal des mockups dans la grille */
.sx-feature-mockup { max-width: 480px; }
.sx-feature-mockup .sx-wizard,
.sx-feature-mockup .sx-form-anim { margin: 0; }
/* ─── Stat card (Carte 3 — Performance prouvée) ─────────────────── */
.sx-stat-card {
position: relative;
width: 100%;
max-width: 460px;
background:
radial-gradient(120% 80% at 100% 0%, rgba(16, 163, 110, 0.06), transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
border: 1px solid rgba(16, 163, 110, 0.14);
border-radius: 20px;
padding: 22px 24px 24px;
color: #1a2e26;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 16px 40px -22px rgba(16, 163, 110, 0.35);
}
.sx-stat-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.sx-stat-card-head-l {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.sx-stat-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10A36E;
box-shadow: 0 0 0 4px rgba(16, 163, 110, 0.18);
flex-shrink: 0;
}
.sx-stat-card-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: #5f6e66;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sx-stat-card-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #D1FAE5;
color: #065F46;
font-size: 11px;
font-weight: 700;
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
}
.sx-stat-card-pill i { font-size: 13px; }
.sx-stat-card-figure {
display: flex;
align-items: flex-end;
gap: 14px;
margin: 6px 0 18px;
line-height: 1;
}
.sx-stat-card-num {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 6.5rem;
font-weight: 700;
color: #10A36E;
letter-spacing: -0.05em;
line-height: 0.85;
}
.sx-stat-card-sub {
font-size: 12px;
color: #5f6e66;
line-height: 1.35;
margin-left: auto;
text-align: right;
font-weight: 500;
padding-bottom: 6px;
max-width: 140px;
}
.sx-stat-card-chart {
height: 80px;
width: 100%;
margin-bottom: 16px;
}
.sx-stat-card-chart svg {
width: 100%;
height: 100%;
display: block;
}
.sx-stat-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 14px;
border-top: 1px solid rgba(16, 163, 110, 0.12);
}
.sx-stat-foot-item {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
text-align: center;
}
.sx-stat-foot-num {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: #0A2A1F;
letter-spacing: -0.01em;
}
.sx-stat-foot-lbl {
font-size: 10.5px;
color: #8a9890;
font-weight: 500;
letter-spacing: 0.02em;
}
.sx-stat-foot-divider {
width: 1px;
height: 28px;
background: rgba(16, 163, 110, 0.12);
flex-shrink: 0;
}
/* ─── CTA pill (bouton blanc sur fond vert) ─────────────────────── */
.sx-pill-cta {
box-shadow: 0 4px 14px -2px rgba(10, 42, 31, 0.18),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.sx-pill-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px -4px rgba(10, 42, 31, 0.28),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
/* ─── Responsive : empêche que la stat-figure ne déborde sur mobile ─── */
@media (max-width: 640px) {
.sx-stat-card-num { font-size: 5rem; }
.sx-stat-card-sub { font-size: 11px; max-width: 120px; }
.sx-stat-foot-num { font-size: 16px; }
.sx-feature-mockup .sx-wizard { gap: 14px !important; }
}/* ─── Carte 1 — Mini rapport d'audit (NEW) ─────────────────────── */
.sx-audit-card {
position: relative;
width: 100%;
max-width: 420px;
background:
radial-gradient(120% 80% at 100% 0%, rgba(16, 163, 110, 0.06), transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
border: 1px solid rgba(16, 163, 110, 0.14);
border-radius: 20px;
padding: 20px 22px 18px;
color: #1a2e26;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 16px 40px -22px rgba(16, 163, 110, 0.35);
}
.sx-audit-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
}
.sx-audit-head-l {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.sx-audit-head-l i {
font-size: 18px;
color: #10A36E;
flex-shrink: 0;
}
.sx-audit-head-title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: #1a2e26;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sx-audit-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #10A36E;
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 4px 12px -4px rgba(16, 163, 110, 0.5);
}
.sx-audit-pill i { font-size: 12px; }
.sx-audit-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 0 14px;
border-bottom: 1px solid rgba(16, 163, 110, 0.12);
}
.sx-audit-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #ffffff;
border: 1px solid rgba(16, 163, 110, 0.10);
border-radius: 12px;
}
.sx-audit-row-ico {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
.sx-audit-row-ico i { font-size: 16px; }
.sx-audit-row-ico--ok {
background: rgba(16, 163, 110, 0.12);
color: #10A36E;
}
.sx-audit-row-ico--warn {
background: rgba(245, 158, 11, 0.14);
color: #B45309;
}
.sx-audit-row-txt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex: 1;
min-width: 0;
}
.sx-audit-row-lbl {
font-size: 12.5px;
font-weight: 500;
color: #5f6e66;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sx-audit-row-val {
font-size: 12.5px;
font-weight: 700;
color: #1a2e26;
white-space: nowrap;
font-family: 'Hanken Grotesk', sans-serif;
letter-spacing: -0.01em;
}
.sx-audit-row-val--pos { color: #10A36E; }
.sx-audit-row-val--neg { color: #B45309; }
.sx-audit-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-size: 12.5px;
font-weight: 600;
color: #10A36E;
text-decoration: none;
transition: gap 0.25s ease;
}
.sx-audit-link i { font-size: 14px; transition: transform 0.25s ease; }
.sx-audit-link:hover { gap: 10px; }
.sx-audit-link:hover i { transform: translateX(2px); }
/* ─── Carte 4 — Mini dashboard analytics (NEW) ─────────────────── */
.sx-mini-dash {
position: relative;
width: 100%;
max-width: 460px;
background:
radial-gradient(120% 80% at 100% 0%, rgba(16, 163, 110, 0.06), transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
border: 1px solid rgba(16, 163, 110, 0.14);
border-radius: 20px;
padding: 20px 22px 22px;
color: #1a2e26;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 16px 40px -22px rgba(16, 163, 110, 0.35);
}
.sx-mini-dash-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
}
.sx-mini-dash-head-l {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.sx-mini-dash-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10A36E;
box-shadow: 0 0 0 4px rgba(16, 163, 110, 0.18);
flex-shrink: 0;
}
.sx-mini-dash-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: #5f6e66;
text-transform: uppercase;
white-space: nowrap;
}
.sx-mini-dash-live {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(16, 163, 110, 0.10);
color: #065F46;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 4px 8px;
border-radius: 999px;
white-space: nowrap;
}
.sx-mini-dash-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10A36E;
box-shadow: 0 0 0 0 rgba(16, 163, 110, 0.5);
animation: sxMiniDashPulse 1.8s ease-out infinite;
}
@keyframes sxMiniDashPulse {
0% { box-shadow: 0 0 0 0 rgba(16, 163, 110, 0.5); }
70% { box-shadow: 0 0 0 7px rgba(16, 163, 110, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 163, 110, 0); }
}
.sx-mini-dash-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 18px;
}
.sx-mini-kpi {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 10px;
background: #ffffff;
border: 1px solid rgba(16, 163, 110, 0.10);
border-radius: 12px;
}
.sx-mini-kpi-lbl {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: #8a9890;
text-transform: uppercase;
}
.sx-mini-kpi-val {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: #0A2A1F;
line-height: 1;
letter-spacing: -0.02em;
}
.sx-mini-kpi-trend {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.01em;
}
.sx-mini-kpi-trend i { font-size: 12px; }
.sx-mini-kpi-trend--up { color: #10A36E; }
.sx-mini-dash-chart {
background: #ffffff;
border: 1px solid rgba(16, 163, 110, 0.10);
border-radius: 12px;
padding: 12px 14px 6px;
}
.sx-mini-dash-chart-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.sx-mini-dash-chart-lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.03em;
color: #5f6e66;
text-transform: uppercase;
}
.sx-mini-dash-chart-range {
font-size: 10px;
font-weight: 600;
color: #8a9890;
letter-spacing: 0.04em;
}
.sx-mini-dash-chart svg {
width: 100%;
height: 78px;
display: block;
}
/* ─── Responsive : tighten mockups on mobile ─── */
@media (max-width: 640px) {
.sx-audit-card,
.sx-mini-dash { max-width: 100%; padding: 18px 18px; }
.sx-mini-kpi-val { font-size: 19px; }
.sx-mini-kpi { padding: 10px 8px; }
.sx-audit-row-lbl,
.sx-audit-row-val { font-size: 11.5px; }
}
/* ══════════════════════════════════════════════════════════════════════════════
Section Fonctionnalites (#capacites) — refonte style ref singlegrain :
fond cream flat, H2 poids mixte, cards blanches roomy sans container icone.
══════════════════════════════════════════════════════════════════════════════ */
.sx-more-section {
/* Fond beige reduit unifie avec le body.home — chaleur discrete.
Top transparent sur 15% pour laisser passer le bleed mint de .sx-method-bg
(transition fluide depuis la section methode au-dessus). */
position: relative; /* pour la grille absolute */
background: linear-gradient(180deg,
transparent 0%,
var(--bg-warm) 15%,
var(--bg-warm) 100%);
padding: var(--s-4) 0;
overflow: hidden; /* clip grille sur les cotes */
}
@media (min-width: 768px) {
.sx-more-section { padding: var(--s-5) 0; }
}
/* Grille decorative — pattern 64px vert discret dans la moitie basse,
fade-in depuis le haut (transparent) vers le bas (opaque). Style coherent
avec .sx-hero-grid-left / .sx-method-grid-left / .sx-quote-grid-right. */
.sx-more-grid-bottom {
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 55%;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(11, 92, 63, 0.10) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 92, 63, 0.10) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%, #000 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 60%, #000 100%);
}
/* Le container reste au-dessus de la grille decorative */
#capacites > .max-w-container {
position: relative;
z-index: 1;
}
.sx-more-header {
max-width: 720px;
margin: 0 auto var(--s-4);
text-align: center;
}
@media (min-width: 768px) {
.sx-more-header { margin-bottom: var(--s-5); }
}
/* H2 poids mixte : setup lighter + main claim bolder (facon ref singlegrain) */
.sx-more-h2 {
font-size: var(--fs-h1); /* bump vers h1 pour presence facon ref */
margin-bottom: var(--s-2);
text-wrap: balance;
}
.sx-more-h2-soft { font-weight: 500; color: var(--text); }
.sx-more-h2-strong { font-weight: 700; color: var(--text); }
.sx-more-subtitle { max-width: 44rem; margin: 0 auto; } /* élargi pour tenir sur 2 lignes */
/* Grille : 1 col mobile / 2 col tablet / 3 col desktop */
.sx-more-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
max-width: 1180px;
margin: 0 auto;
}
@media (min-width: 640px) {
.sx-more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.sx-more-grid { grid-template-columns: repeat(3, 1fr); }
/* Variante : 4 cartes sur une seule ligne (section "Pourquoi une approche sur mesure") */
.sx-more-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Card : blanc, sans border, ombre soft, padding genereux (facon ref) */
.sx-more-card {
background: var(--bg-elevated);
border: none;
border-radius: 20px; /* radius plus genereux facon ref */
padding: var(--s-3);
box-shadow: 0 1px 2px rgba(11, 92, 63, 0.04),
0 8px 24px -12px rgba(11, 92, 63, 0.08); /* ombre douce, portee legere */
text-align: left;
/* Ring interne subtil : nul au repos, mint au hover — donne du relief */
box-shadow: 0 1px 2px rgba(11, 92, 63, 0.04),
0 8px 24px -12px rgba(11, 92, 63, 0.08),
inset 0 0 0 1px rgba(16, 163, 110, 0);
transition: box-shadow var(--t-slow) var(--ease-out),
transform var(--t-slow) var(--ease-out);
}
@media (min-width: 768px) {
.sx-more-card {
padding: calc(var(--s-3) + var(--s-2)); /* 40px desktop */
}
}
.sx-more-card:hover {
box-shadow: 0 2px 4px rgba(11, 92, 63, 0.06),
0 24px 48px -16px rgba(11, 92, 63, 0.18),
inset 0 0 0 1px rgba(16, 163, 110, 0.22);
transform: translateY(var(--card-lift)) scale(1.015);
}
/* Icone : Tabler 48px directement sur la card (pas de container mint) */
.sx-more-card__icon {
display: block;
font-size: 44px;
line-height: 1;
color: var(--brand-deep);
margin-bottom: var(--s-3);
transition: color var(--t-base) var(--ease-out),
transform var(--t-slow) var(--ease-out-back);
}
/* Icone qui "pop" legerement au hover de la card — micro-interaction premium */
.sx-more-card:hover .sx-more-card__icon {
transform: translateY(-2px) scale(1.08);
}
.sx-more-card:hover .sx-more-card__icon {
color: var(--brand); /* passage brand-deep -> brand au hover */
}
.sx-more-card__title {
font-family: var(--font-display);
font-size: 1.25rem; /* 20px, bump vs 18px */
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 var(--s-2) 0; /* 16px title -> desc, plus aere */
}
.sx-more-card__desc {
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.6;
color: var(--text-mute);
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════════════════
Section Temoignages (#temoignages) — refonte style ref singlegrain :
fond CLAIR (bg-warm herite du body.home), 3 cards horizontales, quote XL, logo-lockup typo.
══════════════════════════════════════════════════════════════════════════════ */
.sx-tst-section {
background: var(--bg-warm); /* beige — cards blanches ressortent en lift */
padding: var(--s-5) 0; /* 96px vertical */
}
@media (max-width: 767px) {
.sx-tst-section { padding: var(--s-4) 0; } /* 48px mobile */
}
/* Header centre */
.sx-tst-header {
max-width: 780px;
margin: 0 auto var(--s-5);
text-align: center;
}
@media (max-width: 767px) {
.sx-tst-header { margin-bottom: var(--s-4); }
}
/* Badge pill OUTLINE — brand-deep border + text sur fond clair */
.sx-tst-badge {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1.5px solid var(--brand-deep);
background: transparent;
color: var(--brand-deep);
padding: 6px 14px;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
border-radius: var(--r-full);
margin-bottom: var(--s-3);
}
.sx-tst-badge .ti { font-size: 14px; line-height: 1; }
/* H2 poids mixte sur clair */
.sx-tst-h2 {
font-size: var(--fs-h1);
margin-bottom: var(--s-2);
text-wrap: balance;
}
.sx-tst-h2-soft { font-weight: 500; color: var(--text-soft); } /* texte adouci */
.sx-tst-h2-strong { font-weight: 700; color: var(--text); } /* texte plein */
.sx-tst-subtitle {
max-width: 40rem;
margin: 0 auto;
color: var(--text-mute);
}
/* Grille : 1 col mobile / 3 col desktop */
.sx-tst-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
max-width: 1180px;
margin: 0 auto;
}
@media (min-width: 1024px) {
.sx-tst-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
}
/* Card : blanches sur section beige — cards en "lift" par contraste clair vs bg warm */
.sx-tst-card {
display: flex;
flex-direction: column;
background: var(--bg-elevated); /* blanc pur, ressort sur bg beige */
border: 1px solid var(--border-divider);
border-radius: 20px;
padding: var(--s-3);
box-shadow: 0 1px 2px rgba(11, 92, 63, 0.04),
0 8px 24px -12px rgba(11, 92, 63, 0.08),
inset 0 0 0 1px rgba(16, 163, 110, 0);
transition: box-shadow var(--t-slow) var(--ease-out),
transform var(--t-slow) var(--ease-out);
}
@media (min-width: 768px) {
.sx-tst-card { padding: calc(var(--s-3) + var(--s-2)); } /* 40px desktop */
}
.sx-tst-card:hover {
box-shadow: 0 2px 4px rgba(11, 92, 63, 0.06),
0 24px 48px -16px rgba(11, 92, 63, 0.18),
inset 0 0 0 1px rgba(16, 163, 110, 0.22);
transform: translateY(var(--card-lift)) scale(1.015);
}
/* Logo lockup typo (fictif — remplacable par ![]()
plus tard) */
.sx-tst-logo {
font-family: var(--font-display);
font-size: 1.25rem; /* 20px */
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1;
margin-bottom: var(--s-4); /* 48px separe logo/quote */
}
.sx-tst-logo-accent {
color: var(--brand); /* vert brand pour la partie suffix */
font-weight: 400;
}
/* Quote XL — le heros de la card */
.sx-tst-quote {
flex: 1; /* pousse l'auteur en bas */
font-family: var(--font-display);
font-size: 1.25rem; /* 20px mobile */
font-weight: 500;
line-height: 1.4;
color: var(--text);
margin: 0 0 var(--s-4) 0; /* 48px separe quote/auteur */
text-wrap: pretty;
}
@media (min-width: 768px) {
.sx-tst-quote { font-size: 1.375rem; } /* 22px desktop */
}
/* Auteur : avatar + nom + role */
.sx-tst-author {
display: flex;
align-items: center;
gap: 12px;
}
.sx-tst-avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-light-2), var(--brand));
color: var(--brand-deep-2); /* contraste 5.4:1 sur bg gradient */
font-family: var(--font-display);
font-weight: 700;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: -0.02em;
}
.sx-tst-name {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
color: var(--text);
margin: 0;
line-height: 1.3;
}
.sx-tst-role {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 400;
color: var(--text-mute);
margin: 2px 0 0 0;
line-height: 1.3;
}
/* ══════════════════════════════════════════════════════════════════════════════
Section Wall of proof (#certifications) — grille 4 KPI horizontaux.
Chiffres display XXL + unite en exposant, dividers verticaux subtils sur desktop.
══════════════════════════════════════════════════════════════════════════════ */
.sx-kpi-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
max-width: 1180px;
margin: 0 auto;
}
@media (min-width: 640px) {
.sx-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.sx-kpi-grid {
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
/* Divider vertical subtil entre KPI (utilise --border-divider shorthand) */
.sx-kpi + .sx-kpi {
border-left: var(--border-divider);
}
}
.sx-kpi {
padding: var(--s-3) var(--s-4);
text-align: center;
}
@media (max-width: 1023px) {
/* Sur mobile/tablet, chaque KPI est une "card" avec fond subtil pour dissocier */
.sx-kpi {
background: var(--bg-warm);
border-radius: var(--card-radius);
padding: var(--s-4) var(--s-3);
}
}
.sx-kpi-value {
font-family: var(--font-display);
font-size: clamp(3rem, 2rem + 3.5vw, 4.5rem); /* 48px mobile -> 72px desktop */
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--brand-deep);
margin: 0 0 var(--s-2) 0;
white-space: nowrap;
}
/* Unite (+, ×, h, %) en exposant, plus fin, teinte brand vif */
.sx-kpi-unit {
font-size: 0.55em;
font-weight: 500;
color: var(--brand);
display: inline-block;
vertical-align: baseline;
margin: 0 0.18em; /* respiration entre chiffre et unite (vs -0.02em avant) */
}
.sx-kpi-label {
font-family: var(--font-body);
font-size: 0.9375rem; /* 15px */
font-weight: 400;
line-height: 1.4;
color: var(--text-mute);
margin: 0 auto;
max-width: 220px;
}
/* ══════════════════════════════════════════════════════════════════════════════
Section FAQ (#faq) — layout 2-col style Linear : header sticky gauche + liste droite.
══════════════════════════════════════════════════════════════════════════════ */
.sx-faq-section {
background: var(--bg);
}
/* Header : sticky sur desktop pour rester visible pendant le scroll des accordeons */
@media (min-width: 1024px) {
.sx-faq-header {
position: sticky;
top: 8rem; /* sous la navbar floating (top-6 = 24px + hauteur navbar ~60px + marge) */
}
}
.sx-faq-h2 {
font-size: var(--fs-h1);
margin-top: var(--s-2);
margin-bottom: 0;
text-wrap: balance;
}
/* Mini-card CTA sous le header — capte les indecis en bas de page */
.sx-faq-cta {
margin-top: var(--s-4);
padding: var(--s-3);
background: var(--bg-elevated);
border: var(--border-divider);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
.sx-faq-cta-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
margin: 0 0 var(--s-1) 0;
line-height: 1.3;
}
.sx-faq-cta-text {
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--text-mute);
margin: 0 0 var(--s-3) 0;
line-height: 1.4;
}
.sx-faq-cta .sx-cta-primary {
display: inline-flex;
}
/* ─── Badges certification style G2 (pentagones) ─────────────────── */
.sx-cert-badge {
width: 110px;
min-height: 165px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-bottom: none;
/* Forme pentagone (pointe en bas) */
clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
display: flex;
flex-direction: column;
position: relative;
font-family: 'Hanken Grotesk', sans-serif;
box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.12);
}
.sx-cert-badge--featured {
width: 130px;
min-height: 190px;
z-index: 1;
transform: translateY(-8px);
}
@media (min-width: 768px) {
.sx-cert-badge { width: 130px; min-height: 195px; }
.sx-cert-badge--featured { width: 155px; min-height: 225px; transform: translateY(-12px); }
}
/* Bandeau noir du haut */
.sx-cert-badge-head {
background: #111827;
color: #ffffff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 7px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.sx-cert-badge--featured .sx-cert-badge-head { font-size: 10px; padding: 9px 12px; }
.sx-cert-badge-mark {
background: #f97316;
color: #ffffff;
font-size: 8px;
font-weight: 800;
padding: 2px 5px;
border-radius: 3px;
letter-spacing: 0.05em;
}
/* Corps blanc avec titre */
.sx-cert-badge-body {
flex: 1;
padding: 14px 10px 32px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 12px;
color: #1f2937;
line-height: 1.25;
}
.sx-cert-badge-body strong { font-weight: 700; display: block; }
.sx-cert-badge--featured .sx-cert-badge-body { font-size: 14px; padding: 18px 12px 40px; }
/* Bandes colorées en bas (clippées par le pentagone du parent) */
.sx-cert-badge-stripes {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 22px;
}
.sx-cert-badge--featured .sx-cert-badge-stripes { height: 26px; }
.sx-cert-badge-stripes--teal {
background: linear-gradient(to bottom, #14b8a6 0%, #14b8a6 100%);
}
.sx-cert-badge-stripes--warm {
background: linear-gradient(to bottom,
#fbbf24 0%, #fbbf24 33%,
#f97316 33%, #f97316 66%,
#ef4444 66%, #ef4444 100%);
}
.sx-cert-badge-stripes--green {
background: linear-gradient(to bottom, #10A36E 0%, #10A36E 100%);
}
/* ─── FAQ accordion (/ natif, zéro JS) ─────────── */
.sx-faq-summary::-webkit-details-marker { display: none; }
.sx-faq-summary::marker { display: none; }
/* Arrow pivote 180° quand le est ouvert */
details[open] .sx-faq-toggle {
transform: rotate(180deg);
background: #10A36E;
}
/* Animation discrète à l'ouverture */
.sx-faq-answer {
animation: sxFaqFadeIn 0.25s ease;
}
@keyframes sxFaqFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Grille décorative sur le bord droit d'une feature card ─────── */
/* Variant à appliquer en plus de .sx-feature-card sur la carte ciblée
(nécessite aussi les classes Tailwind `relative overflow-hidden`). */
.sx-feature-card--grid::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 75%;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(10, 42, 31, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 42, 31, 0.07) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px;
background-position: right top;
-webkit-mask-image: linear-gradient(to left, #000 40%, transparent 100%);
mask-image: linear-gradient(to left, #000 40%, transparent 100%);
}
/* Le contenu (texte + image) reste au-dessus de la grille */
.sx-feature-card--grid > *,
.sx-feature-card--grid-left > * { position: relative; z-index: 1; }
/* Variant miroir : grille sur le bord GAUCHE (pour les cartes image-à-gauche) */
.sx-feature-card--grid-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 75%;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(10, 42, 31, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 42, 31, 0.07) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px;
background-position: left top;
-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 100%);
mask-image: linear-gradient(to right, #000 40%, transparent 100%);
}
/* ─── Typewriter : curseur clignotant après le texte tapé ────────── */
.sx-typewriter::after {
content: '|';
display: inline-block;
margin-left: 2px;
color: #10A36E;
font-weight: 400;
animation: sx-typewriter-blink 0.85s step-end infinite;
}
@keyframes sx-typewriter-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* ─── sx-hero-highlight : variant animé (sweep gauche→droite via clip-path) ─── */
.sx-hero-highlight.sx-hh-animate::before {
clip-path: inset(0 100% 0 0);
-webkit-clip-path: inset(0 100% 0 0);
animation: sxHhReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
@keyframes sxHhReveal {
to {
clip-path: inset(0 0 0 0);
-webkit-clip-path: inset(0 0 0 0);
}
}
/* ─── Grille décorative pleine largeur, ancrée au bord haut d'une section
(à appliquer avec `relative overflow-hidden` sur la section). */
.sx-section-grid-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 220px;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(10, 42, 31, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 42, 31, 0.07) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px;
background-position: left top;
/* Visible sur la moitié haute, fade rapide vers le bas */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
/* Miroir : même grille collée au bord BAS, fade vers le haut */
.sx-section-grid-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 220px;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(10, 42, 31, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 42, 31, 0.07) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px;
background-position: left bottom;
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
}
/* ─── Section "...et bien plus encore" : carousel scroll-driven 4 slides (Lemlist) ── */
/* Wrapper section : hauteur 400vh = 4 slides × 100vh → durée totale du scroll pinné */
.sx-fc-wrapper {
height: 400vh;
}
/* Inner sticky : pinné pendant toute la durée du scroll */
.sx-fc-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding: 4rem 0;
}
/* Sur mobile : pas de sticky, tout est statique (height auto, slides empilées visibles) */
@media (max-width: 1023px) {
.sx-fc-wrapper { height: auto; }
.sx-fc-sticky { position: static; height: auto; padding: 4rem 0; }
.sx-fc-text,
.sx-fc-img { position: relative; opacity: 1; transform: none; }
.sx-fc-texts,
.sx-fc-imgs { min-height: 0; }
}
/* Colonne numéros : 01-04 verticaux, actif coloré + dot vert à gauche */
.sx-fc-num {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.25);
position: relative;
padding-left: 22px;
transition: color 0.4s ease, transform 0.4s ease;
cursor: pointer;
line-height: 1;
}
.sx-fc-num::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
transform: translateY(-50%) scale(0.6);
transition: background-color 0.4s ease, transform 0.4s ease;
}
.sx-fc-num.is-active {
color: #000;
transform: scale(1.05);
}
.sx-fc-num.is-active::before {
background: #10A36E;
transform: translateY(-50%) scale(1);
}
/* Textes : empilés en absolu, seul l'actif visible (fade + slide-up) */
.sx-fc-text {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.sx-fc-text.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Images : empilées en absolu, seule l'active visible (fade + scale) */
.sx-fc-img {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(0.97);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fc-img.is-active {
opacity: 1;
transform: scale(1);
}
/* ─── Soulignement "tracé à la main" (SVG ondulé sous le texte) ───── */
/* Soulignement "tracé main" (SVG micro-vagues). Le trait est porté par le FOND
de l'élément + box-decoration-break: clone → quand la phrase surlignée passe à
la ligne, le trait suit CHAQUE ligne et s'arrête exactement à la fin du texte
(aucun débordement à droite). Variante blanche par défaut (fond sombre). */
.sx-hand-underline {
display: inline;
padding-bottom: 0.22em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 0.18em;
background-position: 0 100%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Variant lime — pour fond clair (couleur du surlignement #BEF264) */
.sx-hand-underline--lime {
background-image: url("data:image/svg+xml;utf8,");
}
/* Variant vert SellExpert — pour fond clair (couleur primary #10A36E) */
.sx-hand-underline--green {
background-image: url("data:image/svg+xml;utf8,");
}
/* ─── Section Méthode : cartes sans border (cards "flottantes" sur fond dégradé) ──
Override le border 1px hérité de .sx-feature-card, garde uniquement le hover lift. */
.sx-method-row,
.sx-method-row:hover {
border: none;
}
.sx-method-row:hover {
transform: translateY(-1px);
}
@media (max-width: 767px) {
.sx-method-row:hover { transform: none; }
}
/* ─── Hero · Connected Hub (sx-ch-*) ────────────────────────────────── */
.sx-ch-node-text {
fill: var(--brand-deep-2); /* #084C34 — nuance la plus sombre du brand (au lieu de #1e2150 hors-palette) */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
font-weight: 600;
}
@keyframes sx-ch-flowDash { to { stroke-dashoffset: -110; } }
.sx-ch-flow { animation: sx-ch-flowDash 3s linear infinite; }
@keyframes sx-ch-breathe {
0%, 100% { opacity: 0.58; transform: scale(1); }
50% { opacity: 0.78; transform: scale(1.05); }
}
.sx-ch-breathe {
animation: sx-ch-breathe 4.5s ease-in-out infinite;
transform-origin: 300px 300px;
transform-box: fill-box;
}
@keyframes sx-ch-pulseHub {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.028); }
}
.sx-ch-hub { animation: sx-ch-pulseHub 4s ease-in-out infinite; transform-box: fill-box; }
@keyframes sx-ch-pulseNode {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.022); }
}
.sx-ch-node { animation: sx-ch-pulseNode 4.5s ease-in-out infinite; transform-box: fill-box; }
@keyframes sx-ch-orbitSpin { to { transform: rotate(360deg); } }
.sx-ch-orbit {
animation: sx-ch-orbitSpin 60s linear infinite;
transform-origin: 300px 300px;
transform-box: fill-box;
}
.sx-ch-particle { filter: drop-shadow(0 0 4px rgba(16, 163, 110, 0.8)); }
@media (prefers-reduced-motion: reduce) {
.sx-ch-flow,
.sx-ch-breathe,
.sx-ch-hub,
.sx-ch-node,
.sx-ch-orbit,
.sx-ch-particle { animation: none !important; }
/* QW#1 : neutralise aussi les SMIL des particules (CSS animation: none ne stoppe pas SMIL) */
.sx-ch-particle animateMotion { display: none; }
/* Marquee témoignages / trust : stop l'animation */
.sx-marquee-track { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
QUICK WINS additionnels (issus de la design review multi-experts)
═══════════════════════════════════════════════════════════════════════ */
/* QW#2 : Focus ring WCAG cohérent sur tous les éléments interactifs.
:focus-visible (clavier-only) au lieu de :focus pour ne pas polluer le souris. */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--brand-deep-2);
outline-offset: 4px;
border-radius: 2px;
}
.sx-cta-primary:focus-visible {
outline-offset: 4px;
}
.sx-faq-summary:focus-visible {
outline: 2px solid var(--brand-deep-2);
outline-offset: 2px;
border-radius: var(--r-md);
}
/* QW#5 : Variant cream du hand-underline — pour H2 sur fond dark (.sx-section-dark)
où le stroke blanc/brand-deep par défaut est trop discret face au cream environnant. */
.sx-hand-underline--cream {
/* opacity 1 (au lieu de 0.95) pour matcher exactement la couleur du texte cream (#FCF9F2) */
background-image: url("data:image/svg+xml;utf8,");
}
/* ═══════════════════════════════════════════════════════════════════════
PAGE SOLUTIONS — Composants spécifiques (page-solutions.php)
Réutilise au maximum les composants de la home. Nouveaux composants :
.sx-check-list / .sx-check-card (checklist utilisée 5x)
.sx-callout (bandeau "Résultat" utilisé 4x)
.sx-baw-col (avant/après)
.sx-sell-timeline (signature S/E/L/L horizontale)
.sx-vision-list (3 bullets XL du CTA final)
═══════════════════════════════════════════════════════════════════════ */
/* Alignement du hero éditorial (centre) : les .sx-lead / .sx-lead-soft du hero-v2
sont configurés pour half-droite ; on force centre pleine largeur ici. */
.sx-hero-v2 .sx-sol-lead {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 42rem;
}
/* Conteneur des CTA du hero Solutions. flex-wrap + gap : le hero porte 2 CTA
(primaire "audit" + secondaire "Contacter un expert"), qui doivent pouvoir
passer a la ligne sur mobile. gap 0.75rem = aligne sur la page Tarification. */
.sx-sol-hero-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
justify-content: center;
margin-top: var(--s-3);
}
.sx-sol-h1 { text-wrap: balance; }
.sx-sol-h2 { text-wrap: balance; }
/* Descriptions centrées des blocs charnière (méthode-intro, timeline header) */
.sx-sol-description { margin-left: auto; margin-right: auto; }
/* Sous-titre éditorial italic sous H2 (Exploration, S.E.L.L +) */
.sx-sol-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--text-soft);
margin: 0;
}
.sx-sol-subtitle--cream { color: rgba(252, 249, 242, 0.85); }
/* Eyebrow "block" — display inline-block quand utilisé en centre */
.sx-sol-eyebrow-block { display: inline-block; }
/* Eyebrow avec lettre initiale renforcée (S. STRATÉGIE, E. EXPLORATION, ...) */
.sx-sol-letter-eyebrow { display: inline-flex; align-items: baseline; gap: 0.25em; }
.sx-sol-letter {
font-family: var(--font-display);
font-weight: 700;
color: var(--brand-deep-2);
letter-spacing: 0;
font-size: 1.05em;
}
.sx-section-dark .sx-sol-letter { color: var(--brand-light-2); }
/* Body wrapper : gap entre paragraphes des sections détail (rythme éditorial) */
.sx-sol-body {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.sx-sol-body .sx-description { max-width: 38rem; }
/* Quote éditoriale inline (Learning) — border-left brand sur bg pale */
.sx-sol-quote-inline {
padding-left: var(--s-2);
border-left: 3px solid var(--brand);
font-style: italic;
color: var(--text);
}
.sx-section-dark .sx-sol-quote-inline {
color: var(--accent-cream);
border-left-color: var(--brand-light-2);
}
/* ─── Sections rythme BG (alterné mint / warm / elevated / dark) ────── */
.sx-sol-intro,
.sx-sol-baw {
background-color: var(--bg-warm);
padding: var(--s-5) 0;
}
/* Intro + Baw : overflow hidden pour contenir les glows radiaux decoratifs
qui debordent du wrapper (sx-baw-wrapper::after right: -10%) → evite le scroll horizontal. */
.sx-sol-intro { position: relative; overflow: hidden; }
.sx-sol-baw { position: relative; overflow: hidden; }
/* Radial glow mint diffus centre-haut — donne de la profondeur au bg uniforme */
.sx-sol-intro-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
/* Glow central mint diffus */
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(107, 208, 168, 0.16) 0%, transparent 55%),
/* Second glow plus doux en dessous */
radial-gradient(ellipse 60% 40% at 50% 75%, rgba(214, 240, 228, 0.20) 0%, transparent 60%);
z-index: 0;
}
/* Eyebrow flourish : filet mint dégradé de part et d'autre de l'eyebrow */
.sx-sol-eyebrow-flourish {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin: 0 auto;
}
.sx-sol-flourish-line {
display: inline-block;
width: 2rem;
height: 1px;
background: linear-gradient(to right, transparent, var(--brand-deep-2));
border-radius: var(--r-full);
}
.sx-sol-flourish-line + .sx-eyebrow + .sx-sol-flourish-line {
background: linear-gradient(to left, transparent, var(--brand-deep-2));
}
/* H2 avec grande guillemet decoratif : « ouvrant » en watermark mint */
.sx-sol-h2-quote { position: relative; }
.sx-sol-h2-mark {
display: block;
font-family: var(--font-display);
font-size: 6rem;
font-weight: 700;
line-height: 0.5;
color: var(--brand-pale);
margin-bottom: var(--s-1);
user-select: none;
}
@media (min-width: 768px) {
.sx-sol-h2-mark { font-size: 8rem; }
}
/* Copy : wrapper des 2 paragraphes, max-width editorial + owl-selector.
FIX : .sx-description base a max-width 32rem sans margin auto, donc les P
s'alignaient a gauche du parent. On force margin auto pour centrer. */
.sx-sol-intro-copy {
max-width: 44rem;
text-align: center;
}
.sx-sol-intro-copy > * + * {
margin-top: var(--s-3);
}
.sx-sol-intro-copy .sx-description {
margin-left: auto;
margin-right: auto;
}
/* Separateur mint horizontal centre entre P1 et P2 */
.sx-sol-intro-divider {
display: block;
width: 2.5rem;
height: 2px;
background: var(--brand);
border-radius: var(--r-full);
margin: 0 auto;
}
.sx-sol-intro-close {
font-family: var(--font-display);
font-style: italic;
color: var(--text-soft);
}
/* Cue en fin de section : filet mint + hint chevron vers la timeline */
.sx-sol-intro-cue {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin-top: var(--s-5);
padding: var(--s-1) 0;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-deep-2);
text-decoration: none;
transition: color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.sx-sol-intro-cue:hover {
color: var(--brand);
transform: translateY(2px);
}
.sx-sol-intro-cue-line {
width: 2.5rem;
height: 2px;
border-radius: var(--r-full);
background: linear-gradient(to right, transparent, var(--brand-deep-2));
display: inline-block;
}
.sx-sol-intro-cue-icon {
font-size: 1rem;
line-height: 1;
animation: sx-sol-intro-cue-bounce 2.5s ease-in-out infinite;
}
@keyframes sx-sol-intro-cue-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
.sx-sol-intro-cue-icon { animation: none; }
}
/* Reprise du style "cue" pour l'eyebrow de la timeline (décoratif, pas un lien) :
on neutralise le margin-top et le nudge au survol du cue d'origine. */
.sx-sol-tl-eyebrow { margin-top: 0; cursor: default; }
.sx-sol-tl-eyebrow:hover { color: var(--brand-deep-2); transform: none; }
.sx-sol-timeline { padding: var(--s-5) 0; }
.sx-sol-detail { padding: var(--s-5) 0; }
.sx-sol-detail--elevated { background-color: var(--bg-elevated); }
.sx-sol-detail--warm { background-color: var(--bg-warm); }
.sx-sol-plus { padding: var(--s-5) 0; }
.sx-sol-cta-final {
background-color: var(--bg-elevated);
padding: var(--s-4) 0 var(--s-5);
}
@media (max-width: 767px) {
.sx-sol-intro,
.sx-sol-baw,
.sx-sol-timeline,
.sx-sol-detail,
.sx-sol-plus { padding: var(--s-4) 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
SECTIONS DETAIL S/E/L/L — enrichies "10x" :
- Watermark lettre géante en arriere-plan (via data-letter)
- Section overflow contained
- First paragraph promu en "lead"
═══════════════════════════════════════════════════════════════════════ */
.sx-sol-detail {
position: relative;
overflow: hidden;
}
/* Grosse lettre watermark S/E/L/L au fond de chaque section detail */
.sx-sol-detail::before {
content: attr(data-letter);
position: absolute;
top: 50%;
right: -2rem;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: clamp(12rem, 22vw, 20rem);
font-weight: 800;
line-height: 0.85;
color: var(--brand-pale-2);
opacity: 0.55;
pointer-events: none;
z-index: 0;
user-select: none;
letter-spacing: -0.05em;
}
/* Variante warm : la lettre est un cran plus deep (contraste sur bg-warm) */
.sx-sol-detail--warm::before { color: var(--brand-pale); opacity: 0.65; }
/* Contenu au-dessus du watermark */
.sx-sol-detail > .max-w-container { position: relative; z-index: 1; }
/* First paragraph du body promu en LEAD (fs-body-lg + text-soft + weight 500) */
.sx-sol-detail .sx-sol-body > .sx-description:first-child {
font-size: var(--fs-body-lg);
color: var(--text-soft);
font-weight: 500;
line-height: var(--lh-body);
}
/* ═══════════════════════════════════════════════════════════════════════
CHECK-LIST + CHECK-CARD — checklist iconifiée (5 sections détail)
═══════════════════════════════════════════════════════════════════════ */
.sx-check-card {
/* Base opaque (bg-elevated) pour que la lettre watermark géante ne
transparaisse PAS au travers de la carte sur mobile ; voile mint
subtil posé par-dessus (rendu identique à l'ancien dégradé). */
background-color: var(--bg-elevated);
background-image: linear-gradient(180deg,
rgba(214, 240, 228, 0.30) 0%,
transparent 45%);
border: var(--card-border);
border-radius: var(--card-radius);
padding: var(--s-3);
/* Shadow ampifie pour donner du lift */
box-shadow:
0 1px 3px rgba(11, 92, 63, 0.06),
0 16px 40px -16px rgba(11, 92, 63, 0.14);
}
@media (min-width: 768px) {
.sx-check-card { padding: var(--s-4); }
}
/* Header check-card : accent mint ligne courte sous le border */
.sx-check-card-header {
padding-bottom: var(--s-2);
margin-bottom: var(--s-3);
border-bottom: 1px solid var(--brand-pale);
position: relative;
}
.sx-check-card-header::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 3rem;
height: 2px;
background: var(--brand);
border-radius: var(--r-full);
}
.sx-check-card--dark {
background: rgba(252, 249, 242, 0.06);
border: 1px solid rgba(252, 249, 242, 0.14);
box-shadow: none;
}
.sx-check-card--dark .sx-check-card-header {
border-bottom-color: rgba(252, 249, 242, 0.14);
}
.sx-check-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s-1);
}
.sx-check-list li {
display: flex;
align-items: flex-start;
gap: var(--s-2);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body-snug);
color: var(--text);
padding: 0.35rem 0;
transition: transform var(--t-base) var(--ease-out);
}
.sx-check-list li:hover {
transform: translateX(3px);
}
.sx-check-list-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
margin-top: 2px;
border-radius: var(--r-full);
background: var(--brand-pale);
color: var(--brand-deep-2);
font-size: 0.875rem;
transition: background var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
.sx-check-list li:hover .sx-check-list-icon {
background: var(--brand);
color: var(--accent-cream);
transform: scale(1.1);
}
.sx-check-list--dark li { color: rgba(252, 249, 242, 0.92); }
.sx-check-list--dark .sx-check-list-icon {
background: rgba(107, 208, 168, 0.18);
color: var(--brand-light-2);
}
/* ═══════════════════════════════════════════════════════════════════════
CALLOUT — bandeau "Résultat" en bas des sections détail S/E/L/L
═══════════════════════════════════════════════════════════════════════ */
.sx-callout {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-3);
background: var(--brand-pale-2);
border-left: 4px solid var(--brand);
border-radius: var(--r-md);
}
@media (min-width: 768px) {
.sx-callout { padding: var(--s-3) var(--s-4); }
}
.sx-callout-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 2px var(--s-2);
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-deep-2);
background: var(--brand-pale);
border-radius: var(--r-sm);
line-height: 1.4;
margin-top: 2px;
}
.sx-callout-text {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-snug);
color: var(--text);
margin: 0;
text-wrap: pretty;
}
/* ═══════════════════════════════════════════════════════════════════════
AVANT / APRÈS SellExpert — 2 cards face à face (section 3)
Rouge terreux #C0362B (border-top decoration) + #7A1F17 sur bg pâle #F5E9E7
pour préserver la charte verte tout en introduisant un accent warning
distinctif. Toutes les paires text/bg vérifiées AAA.
═══════════════════════════════════════════════════════════════════════ */
.sx-baw-col {
background: var(--bg-elevated);
border: 1px solid var(--brand-pale-2);
border-radius: var(--card-radius);
padding: var(--s-3);
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
gap: var(--s-3);
/* translate (pas transform) : repli sans-JS du hover --after, libre du
transform que pilote le reveal au scroll. */
transition: box-shadow var(--t-base) var(--ease-out),
translate var(--t-base) var(--ease-out);
}
@media (min-width: 768px) {
.sx-baw-col { padding: var(--s-4); }
}
.sx-baw-col:hover { box-shadow: var(--card-shadow-hover); }
/* Card AVANT : gradient warm-rose subtle → "atmosphere sans methode" */
.sx-baw-col--before {
background: linear-gradient(180deg, #FBF6F5 0%, var(--bg-elevated) 55%);
}
/* Card AVEC : gradient mint + glow diffus + legere surelevation → "atmosphere vivante" */
.sx-baw-col--after {
background: linear-gradient(180deg, var(--brand-pale-2) 0%, var(--bg-elevated) 55%);
box-shadow: 0 8px 32px -12px rgba(16, 163, 110, 0.18), var(--card-shadow);
}
@media (min-width: 768px) {
.sx-baw-col--after {
translate: 0 -8px; /* elevation permanente (translate → libre du transform reveal) */
box-shadow: 0 12px 40px -12px rgba(16, 163, 110, 0.22), var(--card-shadow);
}
}
.sx-baw-col--after:hover {
box-shadow: 0 18px 48px -12px rgba(16, 163, 110, 0.28), var(--card-shadow-hover);
translate: 0 -12px;
}
/* Section bg : radial glow diffus mint derriere la card "Avec" (desktop only) */
@media (min-width: 768px) {
.sx-baw-wrapper::after {
content: '';
position: absolute;
top: 20%;
right: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse 60% 60% at center,
rgba(107, 208, 168, 0.18) 0%,
transparent 65%);
pointer-events: none;
z-index: 0;
filter: blur(20px);
}
.sx-baw-col { position: relative; z-index: 1; }
}
/* Tagline sous le header : plus grosse (fs-h4), italic display, plus presente */
.sx-baw-tagline {
font-family: var(--font-display);
font-size: var(--fs-h4); /* 20px, presence editoriale */
font-style: italic;
font-weight: 500;
line-height: var(--lh-body-snug);
color: var(--text-mute);
margin: calc(-1 * var(--s-2)) 0 0 0;
letter-spacing: -0.005em;
}
.sx-baw-tagline--after { color: var(--brand-deep-2); } /* teinte brand pour la card gagnante */
/* Footer signature : ligne courte en bas de card, capitalise l'atmosphere */
.sx-baw-footer {
font-family: var(--font-display);
font-size: var(--fs-body);
font-weight: 500;
line-height: var(--lh-body-snug);
margin: 0;
padding-top: var(--s-2);
border-top: 1px solid var(--brand-pale-2);
}
.sx-baw-footer--before {
color: #7A1F17;
border-top-color: #F5E9E7;
}
.sx-baw-footer--after {
color: var(--brand-deep-2);
border-top-color: var(--brand-pale);
}
/* Transition arrow (desktop only) : disque blanc entre les 2 cards */
.sx-baw-transition { display: none; }
@media (min-width: 768px) {
.sx-baw-wrapper { position: relative; }
.sx-baw-transition {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 3rem;
border-radius: var(--r-full);
background: var(--bg-elevated);
border: 1.5px solid var(--brand-pale);
color: var(--brand-deep-2);
font-size: 1.25rem;
z-index: 2;
box-shadow: 0 4px 12px rgba(11, 92, 63, 0.08);
}
.sx-baw-transition .ti { line-height: 1; }
}
.sx-baw-header {
display: flex;
align-items: center;
gap: var(--s-2);
}
.sx-baw-badge {
display: inline-flex;
align-items: center;
padding: 4px var(--s-2);
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
border-radius: var(--r-sm);
}
.sx-baw-badge--before {
color: #7A1F17;
background: #F5E9E7;
}
.sx-baw-badge--after {
color: var(--brand-deep-2);
background: var(--brand-pale);
}
.sx-baw-title {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 700;
line-height: 1.2;
color: var(--text);
margin: 0;
}
.sx-baw-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.sx-baw-list li {
display: flex;
align-items: flex-start;
gap: var(--s-2);
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-snug);
color: var(--text-soft);
}
.sx-baw-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin-top: 1px;
border-radius: var(--r-full);
font-size: 1rem;
}
.sx-baw-list--before .sx-baw-icon {
color: #7A1F17;
background: #F5E9E7;
}
.sx-baw-list--after .sx-baw-icon {
color: var(--brand-deep-2);
background: var(--brand-pale);
}
/* ═══════════════════════════════════════════════════════════════════════
TIMELINE S.E.L.L. — signature horizontale 4 dots numérotés (section 4)
4 nodes S/E/L/L reliés par un trait pointillé horizontal (desktop) —
passe en stack vertical sur mobile (<768px, trait masqué).
═══════════════════════════════════════════════════════════════════════ */
.sx-sell-timeline {
list-style: none;
padding: 0;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
max-width: 1180px;
position: relative;
}
@media (min-width: 768px) {
.sx-sell-timeline {
grid-template-columns: repeat(4, 1fr);
gap: var(--s-3);
}
/* Connector : ligne gradient continue centrée sur les nodes 6.5rem */
.sx-sell-timeline::before {
content: '';
position: absolute;
top: 4.75rem; /* --s-3 (link pad top 24px) + 3.25rem (half node 104px) */
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(to right,
transparent 0%,
var(--brand-deep-soft) 15%,
var(--brand) 50%,
var(--brand-deep-soft) 85%,
transparent 100%);
border-radius: var(--r-full);
opacity: 0.55;
pointer-events: none;
}
/* Trace lumineuse animée par-dessus (shimmer subtil, gauche → droite) */
.sx-sell-timeline::after {
content: '';
position: absolute;
top: 4.75rem;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(to right,
transparent 0%,
rgba(107, 208, 168, 0.45) 50%,
transparent 100%);
background-size: 30% 100%;
background-repeat: no-repeat;
border-radius: var(--r-full);
animation: sx-sell-shimmer 5s linear infinite;
pointer-events: none;
}
}
@keyframes sx-sell-shimmer {
0% { background-position: -30% 0; }
100% { background-position: 130% 0; }
}
@media (prefers-reduced-motion: reduce) {
.sx-sell-timeline::after { animation: none; }
}
.sx-sell-timeline-item {
position: relative;
z-index: 1;
}
.sx-sell-timeline-link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--s-1);
padding: var(--s-3) var(--s-2);
text-decoration: none;
color: var(--text);
border-radius: var(--r-lg);
transition: transform var(--t-base) var(--ease-out),
background var(--t-base) var(--ease-out);
}
.sx-sell-timeline-link:hover {
transform: translateY(-4px);
background: rgba(214, 240, 228, 0.30); /* subtle mint wash au hover */
}
/* Node : fond uni brand-deep-soft, halo mint + drop shadow externe (pas de degrade interne) */
.sx-sell-timeline-node {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 6.5rem;
height: 6.5rem;
border-radius: var(--r-full);
background: var(--brand-deep-soft);
box-shadow:
0 0 0 4px rgba(107, 208, 168, 0.12), /* halo mint pale */
0 12px 30px -8px rgba(11, 92, 63, 0.35); /* drop shadow deep */
margin-bottom: var(--s-2);
transition: transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-sell-timeline-link:hover .sx-sell-timeline-node {
transform: scale(1.08);
box-shadow:
0 0 0 6px rgba(107, 208, 168, 0.22),
0 18px 40px -8px rgba(11, 92, 63, 0.45);
}
.sx-sell-timeline-letter {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-weight: 700;
font-size: 2.75rem;
line-height: 1;
color: var(--accent-cream);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.sx-sell-timeline-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem; /* 22px, un cran au-dessus de --fs-h4 */
line-height: 1.2;
color: var(--text);
letter-spacing: -0.02em;
margin-top: var(--s-2);
}
/* Micro-accent mint sous le nom, s'étend au hover */
.sx-sell-timeline-name::after {
content: '';
display: block;
width: 1.5rem;
height: 2px;
background: var(--brand);
border-radius: var(--r-full);
margin: var(--s-1) auto 0;
opacity: 0.45;
transition: opacity var(--t-base) var(--ease-out),
width var(--t-base) var(--ease-out);
}
.sx-sell-timeline-link:hover .sx-sell-timeline-name::after {
opacity: 1;
width: 2.5rem;
}
.sx-sell-timeline-baseline {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-body-sm);
line-height: var(--lh-body-snug);
color: var(--text-soft);
max-width: 14rem;
margin-top: var(--s-1);
}
/* ═══════════════════════════════════════════════════════════════════════
VISION LIST — 3 bullets narratifs XL du CTA final (section 10)
═══════════════════════════════════════════════════════════════════════ */
.sx-sol-cta-card {
text-align: left;
max-width: 56rem;
margin: 0 auto;
}
.sx-sol-cta-card .sx-eyebrow,
.sx-sol-cta-card .sx-h2-section { text-align: left; }
.sx-vision-list {
list-style: none;
padding: 0;
margin: var(--s-4) 0 var(--s-3) 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.sx-vision-list li {
display: flex;
align-items: flex-start;
gap: var(--s-2);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h4);
line-height: 1.4;
color: var(--accent-cream);
letter-spacing: -0.01em;
}
@media (min-width: 768px) {
.sx-vision-list li {
font-size: var(--fs-h3);
}
}
.sx-vision-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin-top: 4px;
border-radius: var(--r-full);
background: rgba(107, 208, 168, 0.18);
color: var(--brand-light-2);
font-size: 1rem;
}
.sx-sol-vision-close {
font-style: italic;
color: rgba(252, 249, 242, 0.78) !important;
margin: var(--s-3) 0 var(--s-4) 0 !important;
max-width: none !important;
}
.sx-sol-cta-actions {
display: flex;
justify-content: flex-start;
margin-top: var(--s-3);
}
@media (max-width: 640px) {
.sx-sol-cta-actions { justify-content: center; }
.sx-sol-cta-card,
.sx-sol-cta-card .sx-eyebrow,
.sx-sol-cta-card .sx-h2-section { text-align: center; }
.sx-vision-list li { font-size: var(--fs-body-lg); }
}
/* Reduced motion : coupe transitions timeline + avant/après */
@media (prefers-reduced-motion: reduce) {
.sx-sell-timeline-link,
.sx-sell-timeline-link:hover,
.sx-sell-timeline-node,
.sx-sell-timeline-link:hover .sx-sell-timeline-node,
.sx-baw-col,
.sx-baw-col:hover { transition: none; transform: none; translate: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
HERO SOLUTIONS — manifeste éditorial centré (polish v2)
Fusion 3 lentilles : H1 recalibré + leads sans flèche + eyebrow ancre.
Tout scopé via .sx-sol-hero / .sx-sol-h1--tight / .sx-sol-hero-copy
pour ne PAS impacter le hero-v2 home. Aucun nouveau token.
═══════════════════════════════════════════════════════════════════════ */
/* H1 recalibré : descend d'un cran vs home (--fs-h1 au lieu de --fs-display-xl),
line-height aéré pour le sweep du surligneur SVG. */
.sx-hero-v2 .sx-h1-hero.sx-sol-h1--tight {
/* min réduit 1.9→1.5rem : sur mobile le surlignement "jamais dépendre du hasard"
(nowrap) touchait le bord droit et rejetait le "." sur une ligne seule. */
font-size: clamp(1.5rem, 1.2rem + 1.7vw, 2.5rem);
font-weight: 650;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
margin-bottom: var(--space-3);
}
/* Chaque ligne : block pour saut dur maîtrisé. Nowrap seulement en md+. */
.sx-hero-v2 .sx-sol-h1--tight .sx-sol-h1__line {
display: block;
white-space: normal;
}
@media (min-width: 768px) {
.sx-hero-v2 .sx-sol-h1--tight .sx-sol-h1__line {
white-space: nowrap;
}
}
.sx-hero-v2 .sx-sol-h1--tight .sx-h1-line {
display: inline;
white-space: normal;
}
/* Highlight : atomique quelle que soit la largeur, letter-spacing resserré
pour eviter de deborder le SVG feutre. */
.sx-hero-v2 .sx-sol-h1--tight .sx-hero-highlight {
white-space: nowrap;
letter-spacing: -0.015em;
}
/* Eyebrow "Manifeste SellExpert" : pill discrète en tête, dot brand,
backdrop-blur pour détacher du bg mint. */
.sx-sol-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-deep-2);
padding: 0.375rem 0.875rem;
border: 1px solid var(--brand-pale);
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
margin: 0 auto var(--space-3);
}
.sx-sol-hero-eyebrow-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 3px var(--brand-pale-2);
}
/* Leads : neutralise la grammaire hero-v2 (flex + arrow prefix) pour un
hero centré. Wrapper .sx-sol-hero-copy = spécificité suffisante pour
override sans impact sur home. */
.sx-hero-v2 .sx-sol-hero-copy .sx-lead,
.sx-hero-v2 .sx-sol-hero-copy .sx-lead-soft {
display: block;
max-width: 44rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
text-align: center;
gap: 0;
}
.sx-hero-v2 .sx-sol-hero-copy .sx-lead::before,
.sx-hero-v2 .sx-sol-hero-copy .sx-lead-soft::before {
content: none;
}
/* Hiérarchie : P1 = hook (fs-body-lg + text-soft + 500), P2-P3 = dev
(fs-body + text-mute). Le lecteur suit un funnel H1 → hook → dev → CTA. */
.sx-hero-v2 .sx-sol-hero-copy .sx-sol-lead--hook {
font-size: var(--fs-body-lg);
line-height: var(--lh-body-snug);
color: var(--text-soft);
font-weight: 500;
}
.sx-hero-v2 .sx-sol-hero-copy .sx-sol-lead:not(.sx-sol-lead--hook) {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-mute);
}
/* Rythme vertical via owl-selector : gouttière 24px entre paragraphes,
48px avant CTA pour l'atterrir avec un silence délibéré. */
.sx-sol-hero-copy {
margin-top: var(--space-3);
margin-bottom: var(--space-4);
}
.sx-sol-hero-copy > * + * {
margin-top: var(--space-3);
}
/* CTA arrow : micro-motion au hover (translate diagonal). */
.sx-sol-hero .sx-sol-hero-cta {
margin-top: 0;
}
.sx-sol-hero .sx-cta-primary .sx-cta-arrow {
display: inline-block;
margin-left: 0.375em;
transition: transform 0.2s ease;
}
.sx-sol-hero .sx-cta-primary:hover .sx-cta-arrow {
transform: translate(2px, -2px);
}
/* Grid-left : atténuation avec mask fade (évite de cannibaliser la
moitié gauche du hero centré). */
.sx-sol-hero .sx-hero-grid-left {
opacity: 0.5;
-webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
mask-image: linear-gradient(to right, black 20%, transparent 100%);
}
/* Mobile ≤640px : libère les sauts H1 forcés, hook descend à fs-body. */
@media (max-width: 640px) {
.sx-hero-v2 .sx-sol-h1--tight {
line-height: var(--lh-display-xl);
}
.sx-hero-v2 .sx-sol-h1--tight .sx-sol-h1__line {
display: inline;
white-space: normal;
}
.sx-hero-v2 .sx-sol-h1--tight .sx-hero-highlight {
white-space: nowrap;
}
.sx-hero-v2 .sx-sol-hero-copy .sx-sol-lead--hook {
font-size: var(--fs-body);
}
.sx-sol-hero-copy {
margin-top: var(--space-2);
margin-bottom: var(--space-3);
}
.sx-sol-hero-copy > * + * {
margin-top: var(--space-2);
}
.sx-sol-hero-eyebrow {
margin-bottom: var(--space-2);
}
}
/* ═══════════════════════════════════════════════════════════════════════
PAGE CAS D'USAGE (page-use-cases.php) — 7 sections
Composants specifiques (.sx-uc-*), reutilise autant que possible les
primitives home (sx-eyebrow, sx-h1-hero, sx-h2-section, sx-cta-primary,
sx-cta-card, sx-hand-underline, etc.).
═══════════════════════════════════════════════════════════════════════ */
/* ─── 1. HERO 2-col ───────────────────────────────────────────────────── */
.sx-uc-hero {
position: relative;
padding: var(--s-3) 0 var(--s-5); /* top 24px, bottom 96px — reduit l'air au-dessus */
overflow: hidden;
}
@media (max-width: 767px) {
.sx-uc-hero { padding: var(--s-2) 0 var(--s-4); }
}
.sx-uc-hero-bg {
position: absolute;
inset: 0;
background:
/* Grid pattern subtle */
linear-gradient(to right, rgba(11, 92, 63, 0.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 92, 63, 0.045) 1px, transparent 1px),
/* Radial glows */
radial-gradient(ellipse 60% 50% at 20% 30%, rgba(214, 240, 228, 0.40) 0%, transparent 60%),
radial-gradient(ellipse 55% 45% at 85% 65%, rgba(107, 208, 168, 0.20) 0%, transparent 60%);
background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%;
-webkit-mask-image: radial-gradient(ellipse 90% 70% at center, black 40%, transparent 100%);
mask-image: radial-gradient(ellipse 90% 70% at center, black 40%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.sx-uc-hero > .max-w-container { position: relative; z-index: 1; }
.sx-uc-eyebrow-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--brand-pale);
color: var(--brand-deep-2);
border-radius: var(--r-sm);
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-body-sm);
font-weight: 500;
}
.sx-uc-h1 {
font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.5rem);
text-wrap: balance; /* équilibre les lignes -> titre sur 3 lignes */
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text);
text-wrap: balance;
}
.sx-uc-lead {
font-size: var(--fs-body-lg);
color: var(--text-soft);
max-width: 34rem;
}
.sx-uc-hero-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
}
.sx-uc-hero-reassure {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-body-sm);
color: var(--text-mute);
margin: 0;
}
.sx-uc-hero-reassure .ti {
color: var(--brand);
font-size: 1rem;
}
/* Mini trust bar (hero gauche, sous CTA) */
.sx-uc-hero-trust {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-1) var(--s-2);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
border: 1px solid var(--brand-pale-2);
border-radius: var(--r-full);
}
.sx-uc-hero-avatars {
display: flex;
}
.sx-uc-hero-avatars span {
width: 1.75rem;
height: 1.75rem;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--brand-light-2), var(--brand));
color: var(--brand-deep-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.6875rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-elevated);
margin-left: -8px;
}
.sx-uc-hero-avatars span:first-child { margin-left: 0; }
.sx-uc-hero-avatars span:last-child {
background: var(--brand-deep);
color: var(--accent-cream);
font-size: 0.75rem;
}
.sx-uc-hero-trust-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.sx-uc-hero-trust-stars {
display: flex;
gap: 1px;
color: #F59E0B;
font-size: 0.75rem;
line-height: 1;
}
.sx-uc-hero-trust-text p {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--text-mute);
margin: 0;
line-height: 1.3;
}
.sx-uc-hero-trust-text p strong { color: var(--text); font-weight: 600; }
/* Dashboard wrapper : device frame premium (topbar + shadow float) */
.sx-uc-dashboard-wrap {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--brand-pale-2);
border-radius: 20px;
box-shadow:
0 4px 12px rgba(11, 92, 63, 0.06),
0 24px 60px -24px rgba(11, 92, 63, 0.20),
0 40px 80px -32px rgba(11, 92, 63, 0.15);
transition: transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-uc-dashboard-wrap:hover {
transform: translateY(-4px);
box-shadow:
0 4px 12px rgba(11, 92, 63, 0.08),
0 32px 72px -24px rgba(11, 92, 63, 0.28),
0 48px 96px -32px rgba(11, 92, 63, 0.20);
}
/* Le contenu interne conserve le radius (le wrap ne clip plus pour laisser la notif deborder) */
.sx-uc-dashboard-topbar {
border-radius: 20px 20px 0 0;
}
.sx-uc-dashboard {
border-radius: 0 0 20px 20px;
}
/* Notification "live" flottante : chevauche le bottom-left du dashboard */
/* Card flottante en bas du dashboard : la notif "live" (Cas d'usage) et la note
de methodologie (Solutions) partagent exactement le meme placement + look. */
.sx-uc-dashboard-notif,
.sx-uc-dashboard-note {
position: absolute;
bottom: -1.25rem;
left: -1.5rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-elevated);
border: 1px solid var(--brand-pale);
border-radius: 14px;
box-shadow: 0 16px 36px -8px rgba(11, 92, 63, 0.25);
max-width: 260px;
animation: sx-uc-notif-in 800ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: 400ms;
}
@keyframes sx-uc-notif-in {
0% { opacity: 0; transform: translate(-20px, 10px) scale(0.9); }
100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.sx-uc-dashboard-notif-avatar {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--brand-light-2), var(--brand));
color: var(--brand-deep-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.6875rem;
display: flex;
align-items: center;
justify-content: center;
}
.sx-uc-dashboard-notif-body { flex: 1; min-width: 0; }
.sx-uc-dashboard-notif-body p {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--text);
margin: 0;
line-height: 1.35;
}
.sx-uc-dashboard-notif-body strong { font-weight: 600; }
.sx-uc-dashboard-notif-time {
color: var(--text-mute) !important;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px !important;
}
.sx-uc-dashboard-notif-ping {
display: inline-block;
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: var(--brand);
animation: sx-uc-pulse 2s ease-out infinite;
}
.sx-uc-dashboard-notif-icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-full);
background: var(--brand-pale);
color: var(--brand-deep);
font-size: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
.sx-uc-dashboard-notif,
.sx-uc-dashboard-note { animation: none; }
.sx-uc-dashboard-notif-ping { animation: none; }
}
@media (max-width: 767px) {
.sx-uc-dashboard-notif,
.sx-uc-dashboard-note {
left: 50%;
transform: translateX(-50%);
bottom: -1rem;
}
}
/* ─── Note de methodologie (hero Solutions) ───
Card + placement identiques a la notif "live" (selecteurs groupes plus haut).
Seuls diffèrent ici : l'alignement (texte multi-ligne, donc flex-start au lieu
de center) et la typo du texte, qui vit directement dans la card au lieu d'un
bloc -body. */
.sx-uc-dashboard-note {
align-items: flex-start;
gap: 10px;
margin: 0;
font-family: var(--font-body);
font-size: 0.75rem;
line-height: 1.35;
color: var(--text-mute);
}
/* Pastille icone : meme traitement que .sx-uc-dashboard-notif-icon */
.sx-uc-dashboard-note-icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-full);
background: var(--brand-pale);
color: var(--brand-deep);
font-size: 0.75rem;
}
/* Chip "TENDANCE" a cote du label du KPI phare */
.sx-uc-kpi-tag {
display: inline-flex;
align-items: center;
padding: 1px 6px;
background: var(--brand);
color: var(--accent-cream);
font-family: var(--font-body);
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: var(--r-sm);
margin-left: 6px;
vertical-align: middle;
line-height: 1.4;
}
.sx-uc-kpi--highlight {
border-color: var(--brand-pale);
background:
radial-gradient(ellipse 100% 60% at center top,
rgba(107, 208, 168, 0.10) 0%,
transparent 70%),
var(--bg-elevated);
}
/* Topbar mockup : simule un header d'app */
.sx-uc-dashboard-topbar {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) var(--s-3);
background: var(--brand-pale-2);
border-bottom: 1px solid var(--brand-pale);
}
.sx-uc-dashboard-dot {
width: 8px;
height: 8px;
border-radius: var(--r-full);
background: var(--brand);
flex-shrink: 0;
}
/* Live indicator : pulsation subtile */
.sx-uc-dashboard-dot--live {
box-shadow: 0 0 0 0 rgba(16, 163, 110, 0.6);
animation: sx-uc-pulse 2s ease-out infinite;
}
@keyframes sx-uc-pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 163, 110, 0.6); }
70% { box-shadow: 0 0 0 8px rgba(16, 163, 110, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 163, 110, 0); }
}
@media (prefers-reduced-motion: reduce) {
.sx-uc-dashboard-dot--live { animation: none; }
}
.sx-uc-dashboard-title {
flex: 1;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--brand-deep-2);
}
.sx-uc-dashboard-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--brand);
color: var(--accent-cream);
font-family: var(--font-body);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: var(--r-sm);
}
/* Dashboard KPI cards (col droite hero) — dans le device frame */
.sx-uc-dashboard {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-3);
background: linear-gradient(180deg,
var(--brand-pale-2) 0%,
var(--bg-elevated) 30%);
}
.sx-uc-kpi {
background: var(--bg-elevated);
border: 1px solid var(--brand-pale-2);
border-radius: 12px;
padding: var(--s-2);
box-shadow: 0 2px 8px rgba(11, 92, 63, 0.06);
display: flex;
flex-direction: column;
gap: 6px;
transition: box-shadow var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
}
.sx-uc-kpi:hover {
box-shadow: 0 6px 16px rgba(11, 92, 63, 0.10);
border-color: var(--brand-pale);
}
.sx-uc-kpi--full {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
}
.sx-uc-kpi-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
}
.sx-uc-kpi-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.sx-uc-kpi-label {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--text-mute);
margin: 0;
}
.sx-uc-kpi-value {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
}
.sx-uc-kpi-value--sm { font-size: 1.375rem; }
.sx-uc-kpi-delta {
display: inline-flex;
align-items: center;
gap: 4px;
align-self: flex-start;
padding: 2px 8px;
background: var(--brand-pale);
color: var(--brand-deep-2);
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--r-full);
margin: 0;
}
.sx-uc-kpi-delta--up { color: var(--brand-deep-2); background: var(--brand-pale); }
.sx-uc-kpi-delta .ti { color: var(--brand); font-size: 0.75rem; }
.sx-uc-kpi-chart {
width: 120px;
height: 60px;
flex-shrink: 0;
}
.sx-uc-kpi-chart--sm { width: 80px; height: 30px; }
.sx-uc-kpi-donut { width: 44px; height: 44px; flex-shrink: 0; }
.sx-uc-kpi-donut-wrap {
display: flex;
align-items: center;
gap: var(--s-2);
}
/* ─── Funnel horizontal (variante "cas d'usage" : tunnel d'acquisition) ─── */
/* padding-bottom : laisse la notif flottante "vivre" sous la carte sans
recouvrir la dernière étape (Signés) du funnel. */
.sx-uc-kpi--funnel { gap: 12px; padding-bottom: 2.75rem; }
.sx-uc-funnel {
display: flex;
flex-direction: column;
gap: 11px;
width: 100%;
}
.sx-uc-funnel-row {
display: grid;
grid-template-columns: 74px 1fr auto;
align-items: center;
gap: 12px;
}
.sx-uc-funnel-label {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--text-mute);
}
.sx-uc-funnel-track {
height: 12px;
background: var(--brand-pale-2);
border-radius: var(--r-full);
overflow: hidden;
}
.sx-uc-funnel-bar {
display: block;
height: 100%;
border-radius: var(--r-full);
background: linear-gradient(90deg, var(--brand-deep-2), var(--brand));
}
.sx-uc-funnel-value {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
text-align: right;
min-width: 44px;
}
@media (max-width: 767px) {
.sx-uc-kpi--full { flex-direction: column; align-items: flex-start; }
.sx-uc-kpi-chart { width: 100%; }
}
/* ─── 2. TESTIMONIAL card ───────────────────────────────────────────── */
.sx-uc-testimonial-section {
padding: 0 0 var(--s-5) 0;
background: transparent;
}
.sx-uc-testimonial {
max-width: 640px;
margin: 0 auto;
background: var(--brand-pale-2);
border: 1px solid var(--brand-pale);
border-radius: var(--card-radius);
padding: var(--s-3);
display: flex;
align-items: center;
gap: var(--s-3);
box-shadow: var(--card-shadow);
}
.sx-uc-testimonial-avatar {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--brand-light-2), var(--brand));
color: var(--brand-deep-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
}
.sx-uc-testimonial-body { flex: 1; }
.sx-uc-testimonial-stars {
display: flex;
gap: 2px;
color: #F59E0B;
font-size: 0.875rem;
margin-bottom: 4px;
}
.sx-uc-testimonial-quote {
font-family: var(--font-display);
font-size: var(--fs-body);
line-height: 1.5;
color: var(--text);
margin: 0 0 6px 0;
}
.sx-uc-testimonial-attr {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--text-mute);
margin: 0;
}
.sx-uc-testimonial-attr strong { color: var(--text); font-weight: 600; }
/* ─── 3. HEADER + FEATURE PILLS ─────────────────────────────────────── */
.sx-uc-intro { padding: var(--s-5) 0 var(--s-4); }
.sx-uc-h2 { text-wrap: balance; }
.sx-uc-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-3);
}
.sx-uc-feature-pill {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: 6px 14px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--text-soft);
border-radius: var(--r-full);
}
.sx-uc-feature-pill .ti {
color: var(--brand);
font-size: 1rem;
}
/* ─── 4. GRILLE USE CASES 2×3 ───────────────────────────────────────── */
.sx-uc-grid-section {
padding: var(--s-4) 0 var(--s-5);
background: var(--bg-warm);
}
.sx-uc-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
max-width: 1180px;
margin: 0 auto;
}
@media (min-width: 768px) {
.sx-uc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}
@media (min-width: 1024px) {
.sx-uc-grid { grid-template-columns: repeat(3, 1fr); }
}
.sx-uc-card {
background: var(--bg-elevated);
border: 1px solid var(--border-divider);
border-radius: var(--card-radius);
padding: var(--s-3);
display: flex;
flex-direction: column;
gap: var(--s-2);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out);
}
@media (min-width: 768px) {
.sx-uc-card { padding: calc(var(--s-3) + var(--s-1)); }
}
.sx-uc-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(var(--card-lift));
}
.sx-uc-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--s-2);
}
.sx-uc-num-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--brand-pale);
color: var(--brand-deep-2);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: var(--r-sm);
}
.sx-uc-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
color: var(--brand-deep);
font-size: 1.375rem;
background: var(--brand-pale-2);
border-radius: var(--r-md);
}
.sx-uc-card-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.sx-uc-card-desc {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-body-snug);
color: var(--text-mute);
margin: 0;
flex: 1;
}
.sx-uc-card-results {
background: var(--brand-pale-2);
border-radius: var(--r-md);
padding: var(--s-2);
margin-top: var(--s-1);
}
.sx-uc-card-results-title {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--brand-deep-2);
margin: 0 0 6px 0;
}
.sx-uc-card-results-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.sx-uc-card-results-list li {
display: flex;
align-items: flex-start;
gap: 6px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-body-snug);
color: var(--text);
}
.sx-uc-card-results-list li .ti {
color: var(--brand);
font-size: 0.875rem;
margin-top: 3px;
flex-shrink: 0;
}
.sx-uc-card-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--brand-deep);
text-decoration: none;
margin-top: var(--s-2);
transition: gap var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out);
}
.sx-uc-card-link:hover {
gap: 8px;
color: var(--brand);
}
/* ─── 5. MÉTHODOLOGIE (2-col) ───────────────────────────────────────── */
.sx-uc-method {
padding: var(--s-5) 0;
background: var(--bg-elevated);
}
.sx-uc-method-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-3);
counter-reset: sx-uc-method-counter;
}
@media (min-width: 1024px) {
.sx-uc-method-steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
}
.sx-uc-method-step {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: var(--s-3) var(--s-2);
border-radius: var(--r-md);
background: var(--bg-warm);
position: relative;
}
.sx-uc-method-step-num {
position: absolute;
top: var(--s-2);
right: var(--s-2);
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
color: var(--brand-pale);
line-height: 1;
letter-spacing: -0.02em;
}
.sx-uc-method-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--r-md);
background: var(--bg-elevated);
color: var(--brand-deep);
font-size: 1.125rem;
box-shadow: 0 2px 6px rgba(11, 92, 63, 0.08);
}
.sx-uc-method-step-name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin: var(--s-1) 0 0 0;
letter-spacing: -0.01em;
}
.sx-uc-method-step-desc {
font-family: var(--font-body);
font-size: 0.8125rem;
line-height: 1.4;
color: var(--text-mute);
margin: 0;
}
/* ─── 6. TRUST LOGOS ─────────────────────────────────────────────────── */
.sx-uc-trust {
padding: var(--s-4) 0;
background: var(--bg-warm);
border-top: 1px solid var(--brand-pale-2);
}
.sx-uc-trust-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--text-mute);
margin: 0 0 var(--s-2) 0;
}
.sx-uc-trust-logos {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-4);
opacity: 0.75;
}
.sx-uc-trust-logos li {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--text-mute);
letter-spacing: 0.02em;
filter: grayscale(1);
transition: opacity var(--t-base) var(--ease-out),
filter var(--t-base) var(--ease-out);
}
.sx-uc-trust-logos li:hover {
opacity: 1;
filter: grayscale(0);
color: var(--text);
}
/* ─── 7. CTA FINAL (dark card) ──────────────────────────────────────── */
.sx-uc-cta-final {
padding: var(--s-5) 0;
background: var(--bg-elevated);
}
.sx-uc-cta-card {
max-width: 1080px;
margin: 0 auto;
padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
text-align: left;
}
.sx-uc-cta-card .sx-uc-h2 {
color: var(--accent-cream);
text-align: left;
font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
line-height: 1.15;
}
.sx-uc-cta-desc {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: 1.5;
color: rgba(252, 249, 242, 0.85);
margin: var(--s-3) 0 var(--s-4) 0;
max-width: 42rem;
}
.sx-uc-cta-actions {
display: flex;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
margin-bottom: var(--s-4);
}
.sx-uc-cta-rating {
display: flex;
align-items: center;
gap: var(--s-2);
}
.sx-uc-cta-avatars {
display: flex;
}
.sx-uc-cta-avatars span {
width: 2rem;
height: 2rem;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--brand-light-2), var(--brand));
color: var(--brand-deep-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.6875rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--brand-deep-soft);
margin-left: -8px;
}
.sx-uc-cta-avatars span:first-child { margin-left: 0; }
.sx-uc-cta-rating-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.sx-uc-cta-rating-score {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--accent-cream);
margin: 0;
}
.sx-uc-cta-rating-score span { color: rgba(252, 249, 242, 0.6); font-weight: 400; }
.sx-uc-cta-stars {
display: flex;
gap: 1px;
color: #F59E0B;
font-size: 0.75rem;
}
.sx-uc-cta-reassure {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
padding-top: var(--s-3);
border-top: 1px solid rgba(252, 249, 242, 0.12);
}
.sx-uc-cta-reassure li {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: rgba(252, 249, 242, 0.75);
}
.sx-uc-cta-reassure li .ti {
color: var(--brand-light-2);
font-size: 1rem;
}
/* ══════════════════════════════════════════════════════════════════════
PRO-MAX · Cas d'usage — parité avec la home.
Bloc ADDITIF : enrichit hover/transition/entrées des sélecteurs uc sans
toucher aux règles de base plus haut.
⚠ Découplage reveal ↔ hover. Le système reveal (.sx-reveal) pilote
opacity+transform. Les classes uc étant définies APRÈS .sx-reveal, leur
`transition` de base l'emporterait (fondu cassé) et le stagger
(transition-delay) retarderait les hovers. On règle les deux :
• une règle `.sx-uc-*.sx-reveal` (spécificité 0,0,2,0) reprend la main
sur opacity+transform @720ms, delay = --sx-rd posé INLINE par
propriété (donc le delay ne s'applique QU'à l'entrée) ;
• les HOVERS animent translate/scale (props indépendantes de transform,
delay 0) → entrée premium 720ms ET hover instantané 200ms, sans
collision. Reveal scroll = classes ajoutées au SELECTOR de theme.js.
Le hero + dashboard s'animent au chargement (bloc @media plus bas).
══════════════════════════════════════════════════════════════════════ */
/* — Micro-polish typo (pas d'orpheline / mot seul en dernière ligne) — */
.sx-uc-card-title,
.sx-uc-method-step-name { text-wrap: balance; }
.sx-uc-card-desc,
.sx-uc-lead,
.sx-uc-cta-desc { text-wrap: pretty; }
/* — Transition reveal reprise en priorité (0,0,2,0) : le fondu
opacity/transform garde ses 720ms + stagger (delay INLINE par prop) ;
les props de hover (translate/scale/shadow/border) transitionnent
@200ms sans delay → hover immédiat. — */
.sx-uc-feature-pill.sx-reveal,
.sx-uc-card.sx-reveal,
.sx-uc-method-step.sx-reveal,
.sx-uc-testimonial.sx-reveal {
transition:
opacity var(--reveal-duration) var(--ease-out) var(--sx-rd, 0ms),
transform var(--reveal-duration) var(--ease-out) var(--sx-rd, 0ms),
translate var(--t-base) var(--ease-out),
scale var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
}
/* — Feature pills : vraie surface (chip) + réponse ambiante au survol.
Pas de lift (elles ne sont pas cliquables → pas de fausse affordance).
NB : --border-divider est déjà un shorthand `1px solid rgba()`. — */
.sx-uc-feature-pill {
padding: 8px 16px;
background: var(--bg-elevated);
border: var(--border-divider);
box-shadow: 0 1px 2px rgba(11, 92, 63, 0.04);
transition: border-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-uc-feature-pill:hover {
border-color: var(--brand-pale);
box-shadow: 0 4px 12px -6px rgba(11, 92, 63, 0.15);
}
/* — Use-case cards : hover premium (lift ressort via translate/scale) +
réactions internes (icône qui grossit, badge numéro qui s'inverse).
translate/scale (pas transform) → aucune collision avec le reveal.
La transition de base ci-dessous sert de repli sans-JS. — */
.sx-uc-card {
transition: translate var(--t-base) var(--ease-out),
scale var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-uc-card:hover {
translate: 0 -4px;
scale: 1.008;
box-shadow: var(--card-shadow-hover);
transition-timing-function: var(--ease-out-back);
}
.sx-uc-num-badge,
.sx-uc-card-icon {
transition: transform var(--t-base) var(--ease-out),
background-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out);
}
.sx-uc-card:hover .sx-uc-card-icon {
transform: scale(1.08);
background: var(--brand-pale);
color: var(--brand-deep-2);
}
.sx-uc-card:hover .sx-uc-num-badge {
background: var(--brand-deep-2);
color: var(--accent-cream);
}
/* — Méthodologie : steps réactifs au survol (lift + border + icône) — */
.sx-uc-method-step {
border: 1px solid transparent;
transition: translate var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-uc-method-step:hover {
translate: 0 -3px;
border-color: var(--brand-pale);
box-shadow: 0 10px 24px -12px rgba(11, 92, 63, 0.20);
}
.sx-uc-method-step-icon {
transition: transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-uc-method-step:hover .sx-uc-method-step-icon {
transform: scale(1.08);
box-shadow: 0 6px 14px rgba(11, 92, 63, 0.18);
}
/* — Testimonial : hover subtil (il révèle aussi au scroll via JS) — */
.sx-uc-testimonial {
transition: translate var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.sx-uc-testimonial:hover {
translate: 0 -3px;
box-shadow: var(--card-shadow-hover);
}
@media (prefers-reduced-motion: no-preference) {
/* — Hero : entrée cascade au chargement (fade + rise).
`backwards` (pas `both`) → après l'anim, le hover du dashboard
reste actif (un fill `forwards` figerait le transform). — */
@keyframes sx-uc-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.sx-uc-hero .sx-uc-eyebrow-pill,
.sx-uc-hero .sx-uc-h1,
.sx-uc-hero .sx-uc-lead,
.sx-uc-hero .sx-uc-hero-actions,
.sx-uc-hero .sx-uc-hero-trust,
.sx-uc-hero .sx-uc-dashboard-wrap {
animation: sx-uc-in 0.72s var(--ease-out) backwards;
}
.sx-uc-hero .sx-uc-eyebrow-pill { animation-delay: 0.05s; }
.sx-uc-hero .sx-uc-h1 { animation-delay: 0.12s; }
.sx-uc-hero .sx-uc-lead { animation-delay: 0.22s; }
.sx-uc-hero .sx-uc-hero-actions { animation-delay: 0.32s; }
.sx-uc-hero .sx-uc-hero-trust { animation-delay: 0.40s; }
.sx-uc-hero .sx-uc-dashboard-wrap { animation-delay: 0.18s; animation-duration: 0.90s; }
/* — Dashboard KPI : "démarrage en direct" — */
/* Barres qui montent depuis la baseline (chaque rect scale depuis son bas), en cascade */
.sx-uc-dashboard .sx-uc-kpi-chart rect {
transform-box: fill-box;
transform-origin: bottom;
animation: sx-uc-bar 0.6s var(--ease-out) both;
}
@keyframes sx-uc-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(1) { animation-delay: 0.55s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(2) { animation-delay: 0.61s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(3) { animation-delay: 0.67s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(4) { animation-delay: 0.73s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(5) { animation-delay: 0.79s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(6) { animation-delay: 0.85s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(7) { animation-delay: 0.91s; }
.sx-uc-dashboard .sx-uc-kpi-chart rect:nth-child(8) { animation-delay: 0.97s; }
/* Barres du funnel : remplissage depuis la gauche, en cascade */
.sx-uc-dashboard .sx-uc-funnel-bar {
transform-origin: left center;
animation: sx-uc-funnel-grow 0.7s var(--ease-out) both;
}
@keyframes sx-uc-funnel-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sx-uc-funnel-row:nth-child(1) .sx-uc-funnel-bar { animation-delay: 0.58s; }
.sx-uc-funnel-row:nth-child(2) .sx-uc-funnel-bar { animation-delay: 0.70s; }
.sx-uc-funnel-row:nth-child(3) .sx-uc-funnel-bar { animation-delay: 0.82s; }
.sx-uc-funnel-row:nth-child(4) .sx-uc-funnel-bar { animation-delay: 0.94s; }
/* Courbe pipeline : tracé progressif (dashoffset) + aire qui fade */
.sx-uc-kpi--highlight .sx-uc-kpi-chart path[stroke] {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: sx-uc-draw 1.2s var(--ease-out) 0.70s backwards;
}
@keyframes sx-uc-draw { to { stroke-dashoffset: 0; } }
.sx-uc-kpi--highlight .sx-uc-kpi-chart path[fill^="url"] {
animation: sx-uc-fade 0.7s var(--ease-out) 1.20s backwards;
}
@keyframes sx-uc-fade { from { opacity: 0; } to { opacity: 1; } }
/* Donut taux de réponse : l'arc se remplit */
.sx-uc-kpi-donut circle:last-child {
animation: sx-uc-donut 0.9s var(--ease-out) 0.70s backwards;
}
@keyframes sx-uc-donut {
from { stroke-dasharray: 0 100; }
/* Valeur d'arrivee pilotee par --sx-donut-end (defaut 38 = cas d'usage ;
Solutions passe 34 en inline style sur le cercle) → evite d'animer vers
38 puis de sauter a la vraie valeur du stroke-dasharray du SVG. */
to { stroke-dasharray: var(--sx-donut-end, 38) 100; }
}
}
/* ══════════════════════════════════════════════════════════════════════════════
Grille des tarifs (page-pricing.php) — 3 cards Trimestriel/Semestriel/Annuel
Semestriel = "featured" avec fond dark (brand-deep-soft) + badge + CTA inversé
══════════════════════════════════════════════════════════════════════════════ */
.sx-price-card {
background: var(--bg-elevated);
border: 1.5px solid rgba(11, 92, 63, 0.08);
border-radius: 20px;
padding: var(--s-3);
box-shadow: 0 1px 2px rgba(11, 92, 63, 0.04),
0 8px 24px -12px rgba(11, 92, 63, 0.08);
transition: box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
}
@media (min-width: 768px) {
.sx-price-card { padding: calc(var(--s-3) + var(--s-2)); }
}
.sx-price-card:hover {
box-shadow: 0 2px 4px rgba(11, 92, 63, 0.06),
0 20px 40px -16px rgba(11, 92, 63, 0.14);
transform: translateY(-3px);
border-color: rgba(16, 163, 110, 0.35);
}
/* Featured (Semestriel) — fond dark + texte cream + badge fluo */
.sx-price-card--featured {
background: var(--brand-deep-soft);
border-color: var(--brand);
color: var(--accent-cream);
box-shadow: 0 4px 8px rgba(11, 92, 63, 0.12),
0 24px 48px -20px rgba(16, 163, 110, 0.28);
transform: translateY(-8px);
}
@media (max-width: 767px) {
.sx-price-card--featured { transform: none; }
}
.sx-price-card--featured:hover {
box-shadow: 0 6px 12px rgba(11, 92, 63, 0.16),
0 32px 64px -24px rgba(16, 163, 110, 0.36);
transform: translateY(-10px);
border-color: var(--brand);
}
@media (max-width: 767px) {
.sx-price-card--featured:hover { transform: translateY(-3px); }
}
/* Grain SVG subtil sur la card featured pour raccord avec sx-cta-card */
.sx-price-card--featured::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
opacity: 0.05;
z-index: 0;
}
.sx-price-card--featured > * { position: relative; z-index: 1; }
/* Badge "Le plus choisi" */
.sx-price-card__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--brand);
color: #ffffff;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
box-shadow: 0 4px 12px -2px rgba(16, 163, 110, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
z-index: 2;
}
/* Head : nom + tagline */
.sx-price-card__head { margin-bottom: var(--s-3); }
.sx-price-card__name {
font-family: var(--font-display);
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 8px 0;
}
.sx-price-card--featured .sx-price-card__name { color: var(--accent-cream); }
.sx-price-card__tagline {
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-mute);
margin: 0;
}
.sx-price-card--featured .sx-price-card__tagline { color: rgba(252, 249, 242, 0.8); }
/* Bloc prix */
.sx-price-card__price {
padding: var(--s-2) 0;
border-top: 1px solid rgba(11, 92, 63, 0.1);
border-bottom: 1px solid rgba(11, 92, 63, 0.1);
margin-bottom: var(--s-3);
}
.sx-price-card--featured .sx-price-card__price {
border-color: rgba(252, 249, 242, 0.15);
}
.sx-price-card__price-main {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
.sx-price-card__amount {
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--brand-deep);
}
.sx-price-card--featured .sx-price-card__amount { color: var(--accent-cream); }
.sx-price-card__unit {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-mute);
}
.sx-price-card--featured .sx-price-card__unit { color: rgba(252, 249, 242, 0.75); }
.sx-price-card__sub {
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--text-mute);
margin: 0;
}
.sx-price-card--featured .sx-price-card__sub { color: rgba(252, 249, 242, 0.75); }
/* Features list */
.sx-price-card__features {
list-style: none;
padding: 0;
margin: 0 0 var(--s-3) 0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.sx-price-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--text);
}
.sx-price-card--featured .sx-price-card__features li { color: var(--accent-cream); }
.sx-price-card__features li .ti {
flex-shrink: 0;
font-size: 18px;
color: var(--brand);
margin-top: 1px;
}
.sx-price-card--featured .sx-price-card__features li .ti {
color: var(--brand-light-2);
}
/* CTA */
.sx-price-card__cta {
width: 100%;
justify-content: center;
margin-top: auto;
}
/* ══════════════════════════════════════════════════════════════════════════════
Boutons secondaires sur fond dark (sx-cta-card / sx-section-dark)
Avant : transparent + bordure cream = peu visible sur fond vert foncé.
Après : fond cream ivoire (comme le primaire) + texte vert deep = même
traitement visuel que le primaire, avec juste une bordure discrète en
plus pour préserver la hiérarchie primaire/secondaire.
══════════════════════════════════════════════════════════════════════════════ */
.sx-section-dark .sx-cta-secondary,
.sx-cta-card .sx-cta-secondary {
background-color: var(--accent-cream);
border-color: var(--accent-cream);
color: var(--brand-deep);
}
.sx-section-dark .sx-cta-secondary:hover,
.sx-cta-card .sx-cta-secondary:hover {
background-color: #ffffff;
border-color: #ffffff;
color: var(--brand-deep-2);
}
.sx-section-dark .sx-cta-secondary .ti,
.sx-cta-card .sx-cta-secondary .ti {
color: var(--brand-deep);
}
.sx-section-dark .sx-cta-secondary:hover .ti,
.sx-cta-card .sx-cta-secondary:hover .ti {
color: var(--brand-deep-2);
}
/* ══════════════════════════════════════════════════════════════════════
Bandeau consentement cookies (custom léger)
Carte fixe en bas, slide-up à l'apparition, choix mémorisé (localStorage).
══════════════════════════════════════════════════════════════════════ */
.sx-cookie-banner {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
transform: translateY(135%); /* caché sous le viewport au départ */
width: min(calc(100vw - 2rem), 26rem); /* carte compacte, coin bas-droite */
z-index: 1000;
background: var(--bg-elevated, #ffffff);
border: 1px solid rgba(11, 92, 63, 0.10);
border-radius: 16px;
box-shadow: 0 8px 24px -6px rgba(11, 92, 63, 0.18),
0 24px 48px -16px rgba(11, 92, 63, 0.16);
opacity: 0;
transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.sx-cookie-banner.is-visible {
transform: translateY(0);
opacity: 1;
}
.sx-cookie-inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1.25rem 1.5rem;
}
.sx-cookie-text { flex: 1; min-width: 0; }
.sx-cookie-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
color: var(--text);
margin: 0 0 0.25rem;
}
.sx-cookie-title .ti { color: var(--brand); font-size: 1.125rem; }
.sx-cookie-desc {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-mute);
margin: 0;
}
.sx-cookie-desc a {
color: var(--brand-deep);
font-weight: 600;
text-decoration: underline;
}
.sx-cookie-actions {
display: flex;
gap: 0.625rem;
flex-shrink: 0;
justify-content: flex-end; /* boutons alignés à droite dans la carte */
}
.sx-cookie-btn {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
padding: 0.625rem 1.25rem;
border-radius: var(--r-full, 999px);
cursor: pointer;
border: 1.5px solid transparent;
transition: background-color var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
color var(--t-base) var(--ease-out),
transform var(--t-fast) var(--ease-out);
white-space: nowrap;
}
.sx-cookie-btn:active { transform: scale(0.97); }
.sx-cookie-btn--accept { background: var(--brand); color: #ffffff; }
.sx-cookie-btn--accept:hover { background: var(--brand-deep); }
.sx-cookie-btn--ghost {
background: transparent;
color: var(--text-soft);
border-color: rgba(11, 92, 63, 0.20);
}
.sx-cookie-btn--ghost:hover { background: var(--brand-pale-2, #f0f9f4); color: var(--brand-deep); }
@media (max-width: 767px) {
.sx-cookie-banner { bottom: 0.75rem; }
.sx-cookie-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
.sx-cookie-actions { justify-content: stretch; }
.sx-cookie-actions .sx-cookie-btn { flex: 1; }
}
/* reduced-motion : apparition en fondu sans glissement */
@media (prefers-reduced-motion: reduce) {
.sx-cookie-banner {
transform: translateY(0);
transition: opacity 0.3s ease;
}
}
/* ══════════════════════════════════════════════════════════════════════
Sélecteur de langue navbar (globe → menu déroulant FR / EN)
Alimenté par TranslatePress (trp_custom_language_switcher).
══════════════════════════════════════════════════════════════════════ */
.sx-lang-btn {
background: transparent;
border: none;
border-radius: 999px;
cursor: pointer;
}
.sx-lang-caret { transition: transform var(--t-base) var(--ease-out); }
.sx-lang-btn[aria-expanded="true"] .sx-lang-caret { transform: rotate(180deg); }
.sx-lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 5.5rem;
background: #ffffff;
border: 1px solid rgba(11, 92, 63, 0.10);
border-radius: 12px;
box-shadow: 0 8px 24px -6px rgba(11, 92, 63, 0.16),
0 16px 40px -16px rgba(11, 92, 63, 0.14);
padding: 0.375rem;
z-index: 200;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.sx-lang-menu.is-open { opacity: 1; transform: translateY(0); }
.sx-lang-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
text-decoration: none;
transition: background-color var(--t-fast) var(--ease-out);
}
.sx-lang-item:hover { background: var(--brand-pale-2, #f0f9f4); }
.sx-lang-item-code {
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.02em;
color: var(--text-soft);
}
.sx-lang-item.is-current .sx-lang-item-code { color: var(--brand-deep); font-weight: 700; }
.sx-lang-item-check { color: var(--brand); font-size: 1rem; flex-shrink: 0; }
/* Masque le sélecteur de langue FLOTTANT de TranslatePress (carte bas-droite) :
on utilise notre propre globe dans la navbar à la place.
Structure récente :