/* ============================================================
TRIPTIK STUDIO — Style principal
Mobile-first · Dark theme · Vanilla CSS
============================================================ */
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; font-size: 16px; -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 86px; }
body { font-family: 'Inter', sans-serif; background: #08080F; color: #E2E8F0; line-height: 1.65; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
ul[role="list"] { list-style: none; }
.hidden { display: none !important; }
/* ── TOKENS ── */
:root {
--bg: #08080F;
--bg-2: #0D0D1A;
--bg-3: #13131F;
--bg-card: #0F0F1C;
--border: rgba(255,255,255,.07);
--border-2: rgba(255,255,255,.12);
--indigo: #6366F1;
--indigo-dk: #4F46E5;
--violet: #8B5CF6;
--pink: #EC4899;
--orange: #F97316;
--green: #10B981;
--cyan: #06B6D4;
--red: #EF4444;
--text: #E2E8F0;
--muted: #64748B;
--muted-2: #94A3B8;
--font-h: 'Syne', sans-serif;
--font-b: 'Inter', sans-serif;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 32px;
--sh-glow: 0 0 40px rgba(99,102,241,.25);
--sh-card: 0 1px 1px rgba(0,0,0,.3), 0 4px 24px rgba(0,0,0,.4);
--t: all .28s cubic-bezier(.4,0,.2,1);
--pad: 96px;
}
/* ── LIGHT THEME OVERRIDES ──
Active quand — mode "lumière allumée" */
[data-theme="light"] {
--bg: #F8FAFC;
--bg-2: #FFFFFF;
--bg-3: #F1F5F9;
--bg-card: #FFFFFF;
--border: rgba(15,23,42,.08);
--border-2: rgba(15,23,42,.16);
--text: #0F172A;
--muted: #64748B;
--muted-2: #475569;
--sh-card: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08);
--sh-glow: 0 0 40px rgba(99,102,241,.18);
}
/* Transitions douces sur les éléments majeurs lors du switch */
html { transition: background-color .35s ease; }
body,
.nav,
.section,
.steps,
.gallery-section,
.parr-benefits,
.faq,
.contact,
.guarantee,
.footer,
.plan-card,
.step-card,
.guarantee__card,
.faq__item,
.cfg__summary,
.cfg__form,
.benefit-card,
.reward-card,
.gallery-card {
transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
/* Ajustements ciblés en mode clair pour les blocs au fond hardcodé */
[data-theme="light"] body { background: var(--bg); color: var(--text); }
[data-theme="light"] .nav.scrolled {
background: rgba(255,255,255,.85);
border-bottom-color: var(--border);
}
[data-theme="light"] .nav__link { color: rgba(15,23,42,.65); }
[data-theme="light"] .nav__link:hover { color: #0F172A; background: rgba(15,23,42,.06); }
[data-theme="light"] .nav__link[href="parrainage.html"] {
color: #6D28D9;
text-shadow: 0 0 10px rgba(139, 92, 246, .18);
}
[data-theme="light"] .nav__link[href="parrainage.html"]:hover {
color: #5B21B6;
text-shadow: 0 0 14px rgba(139, 92, 246, .28);
}
[data-theme="light"] .nav__link.active { color: #0F172A; background: rgba(15,23,42,.06); }
[data-theme="light"] .nav__link[href="parrainage.html"].active {
color: #5B21B6;
background: rgba(139, 92, 246, .1);
text-shadow: 0 0 14px rgba(139, 92, 246, .28);
}
[data-theme="light"] .nav__burger span { background: #0F172A; }
[data-theme="light"] .logo-word { color: #0F172A; }
[data-theme="light"] .lang-sw__btn { color: #0F172A; background: rgba(15,23,42,.06); }
[data-theme="light"] .lang-sw__btn:hover { color: #0F172A; background: rgba(15,23,42,.1); }
[data-theme="light"] .hero { background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%); }
[data-theme="light"] .hero__bg-grid {
background-image:
linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px) !important;
}
[data-theme="light"] .hero__h1 { color: #0F172A; }
[data-theme="light"] .hero__badge {
color: rgba(15,23,42,.7);
background: rgba(15,23,42,.04);
border-color: rgba(15,23,42,.1);
}
[data-theme="light"] .hero .btn--ghost {
color: #0F172A;
border-color: rgba(15,23,42,.25);
background: rgba(15,23,42,.05);
}
[data-theme="light"] .hero .btn--ghost:hover {
background: rgba(15,23,42,.1);
border-color: rgba(15,23,42,.4);
}
[data-theme="light"] .section__title { color: #0F172A; }
[data-theme="light"] .section__label {
color: #4338CA;
background: rgba(67,56,202,.1);
}
[data-theme="light"] .gallery-card__tag {
color: #4338CA;
background: rgba(67,56,202,.1);
border-color: rgba(67,56,202,.2);
}
[data-theme="light"] .hpc--future .hpc__label {
background: rgba(99,102,241,.25);
color: #A5B4FC;
}
[data-theme="light"] .section__sub { color: var(--muted-2); }
[data-theme="light"] .marquee-strip {
background: #0F172A;
color: #F8FAFC;
}
[data-theme="light"] .steps { background: #F1F5F9; }
[data-theme="light"] .gallery-section{ background: #F1F5F9; }
[data-theme="light"] .parr-benefits { background: #F1F5F9; }
[data-theme="light"] .guarantee { background: #F1F5F9; }
[data-theme="light"] .pricing { background: var(--bg); }
[data-theme="light"] .faq { background: var(--bg); }
[data-theme="light"] .step-card,
[data-theme="light"] .plan-card,
[data-theme="light"] .guarantee__card,
[data-theme="light"] .faq__item,
[data-theme="light"] .reward-card,
[data-theme="light"] .benefit-card,
[data-theme="light"] .gallery-card,
[data-theme="light"] .cfg__form,
[data-theme="light"] .cfg__summary,
[data-theme="light"] .options-block {
background: #FFFFFF;
border-color: var(--border);
box-shadow: var(--sh-card);
}
[data-theme="light"] .step-card h3,
[data-theme="light"] .plan-card__name,
[data-theme="light"] .guarantee__card h3,
[data-theme="light"] .faq__q,
[data-theme="light"] .reward-card__title,
[data-theme="light"] .benefit-card__head h3,
[data-theme="light"] .gallery-card__sector { color: #0F172A; }
[data-theme="light"] .step-card p,
[data-theme="light"] .guarantee__card p,
[data-theme="light"] .reward-card__desc { color: var(--muted-2); }
/* Mode clair : les couleurs hardcodées blanches des plans deviennent illisibles */
[data-theme="light"] .plan-card__amount,
[data-theme="light"] .plan-card__features strong { color: #0F172A; }
[data-theme="light"] .plan-card__features li { color: #475569; }
[data-theme="light"] .plan-card__currency { color: #475569; }
[data-theme="light"] .plan-card__period { color: #64748B; }
[data-theme="light"] .plan-card__feature--commit { color: #64748B; }
[data-theme="light"] .plan-commit-note a { color: var(--indigo); }
[data-theme="light"] .options-grid li {
background: rgba(15,23,42,.03);
border-color: var(--border);
color: var(--muted-2);
}
[data-theme="light"] .options-block__header h3 { color: #0F172A; }
[data-theme="light"] .options-block__header .options-price {
background: linear-gradient(90deg, #4F46E5, #7C3AED);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .options-freedom-note { color: #065F46; }
[data-theme="light"] .options-grid li.options-grid__highlight {
color: #065F46 !important;
border-color: rgba(6,95,70,.45) !important;
background: rgba(6,95,70,.08);
}
[data-theme="light"] .options-grid li.options-grid__highlight:hover { border-color: rgba(6,95,70,.65) !important; }
[data-theme="light"] .form__group input,
[data-theme="light"] .form__group select,
[data-theme="light"] .form__group textarea {
background: #FFFFFF;
border-color: var(--border-2);
color: var(--text);
}
[data-theme="light"] .contact { background: #0F172A; }
[data-theme="light"] .contact__title { color: #F8FAFC; }
[data-theme="light"] .contact__lead { color: rgba(248,250,252,.78); }
[data-theme="light"] .contact__reassurance li { color: rgba(248,250,252,.85); }
[data-theme="light"] .footer { background: #0F172A; color: #CBD5E1; }
[data-theme="light"] .footer h4 { color: #F8FAFC; }
[data-theme="light"] .proof-banner {
background:
radial-gradient(120% 90% at 0% 0%, rgba(99,102,241,.08), transparent 55%),
radial-gradient(120% 90% at 100% 100%, rgba(249,115,22,.06), transparent 55%),
#FFFFFF;
border-color: var(--border-2);
}
[data-theme="light"] .proof-banner__label { color: var(--muted); }
[data-theme="light"] .demo-modal::backdrop { background: rgba(15,23,42,.55); }
/* Le configurateur conserve son aspect "premium dark" — agréable contraste */
[data-theme="light"] .cfg-section { background: #0F172A; padding-block: var(--pad); }
[data-theme="light"] .cfg-section .section__title { color: #F8FAFC; }
[data-theme="light"] .cfg-section .section__sub { color: rgba(248,250,252,.7); }
[data-theme="light"] .cfg-section .cfg__form,
[data-theme="light"] .cfg-section .cfg__summary {
background: #1E293B;
border-color: rgba(255,255,255,.08);
color: #E2E8F0;
}
[data-theme="light"] .cfg-section .cfg__step {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.1);
}
[data-theme="light"] .cfg-section .cfg__step-title,
[data-theme="light"] .cfg-section .cfg__radio strong,
[data-theme="light"] .cfg-section .cfg__opt span,
[data-theme="light"] .cfg-section .cfg__line,
[data-theme="light"] .cfg-section .cfg__total-row { color: #E2E8F0; }
[data-theme="light"] .cfg-section .cfg__radio,
[data-theme="light"] .cfg-section .cfg__opt {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.1);
}
[data-theme="light"] .cfg-section .cfg__toggle-row {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.1);
}
[data-theme="light"] .cfg-section .cfg__toggle-label { color: #E2E8F0; }
[data-theme="light"] .cfg-section .cfg__toggle-sub { color: rgba(226,232,240,.65); }
/* Medal badge — adapté pour rester lisible en mode clair */
[data-theme="light"] .medal-badge {
background: linear-gradient(110deg, #FFFBEB 0%, #FEF3C7 100%);
border: 1.5px solid rgba(217,119,6,.55);
box-shadow:
0 6px 18px rgba(180,83,9,.18),
0 0 0 1px rgba(255,255,255,.6) inset;
}
[data-theme="light"] .medal-badge__name {
color: #92400E; /* brun-ambré profond, contraste élevé */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="light"] .medal-badge__cat {
color: #B45309; /* ambré moyen, lisible sur fond clair */
opacity: 1;
font-weight: 600;
}
/* Le coin doré garde son conic-gradient mais on renforce son halo
pour qu'il "ressorte" sur fond clair */
[data-theme="light"] .medal-badge__coin {
box-shadow:
0 0 0 2px rgba(217,119,6,.55),
0 0 16px rgba(251,191,36,.55),
0 4px 10px rgba(180,83,9,.25),
inset 0 2px 3px rgba(255,255,255,.55),
inset 0 -2px 3px rgba(120,53,15,.45);
}
/* Variante flottante (sur la home) — fond + halo plus marqués */
[data-theme="light"] .medal-badge--float {
background: linear-gradient(110deg, #FEF3C7 0%, #FDE68A 100%);
border-color: rgba(217,119,6,.6);
box-shadow:
0 14px 34px rgba(180,83,9,.25),
0 0 28px rgba(251,191,36,.35),
0 0 0 1px rgba(255,255,255,.5) inset;
}
[data-theme="light"] .medal-badge--float::after {
background: radial-gradient(120% 100% at 0% 50%, rgba(245,158,11,.25), transparent 60%);
}
/* ── CONTAINER ── */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--font-h); line-height: 1.12; letter-spacing: -.025em; }
em { font-style: italic; color: var(--indigo); }
strong { font-weight: 600; color: var(--text); }
.section__label {
display: inline-block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--indigo);
background: rgba(99,102,241,.12);
border: 1px solid rgba(99,102,241,.25);
padding: 4px 12px;
border-radius: 100px;
margin-bottom: 16px;
}
.section__label--dark {
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.12);
}
.section__title {
font-size: clamp(2rem, 4vw, 2.75rem);
color: #F8FAFC;
margin-bottom: 14px;
}
.section__sub {
font-size: 1.0625rem;
color: var(--muted-2);
max-width: 520px;
line-height: 1.7;
}
.section__header { text-align: center; margin-bottom: 64px; }
.section__header .section__sub { margin-inline: auto; }
.link { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.link-btn { background: none; border: none; cursor: pointer; font-size: inherit; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; padding: 0; font-family: inherit; }
/* ── BUTTONS ── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; border-radius: var(--r-md); transition: var(--t);
white-space: nowrap; position: relative; overflow: hidden;
}
.btn:active { transform: scale(.98); }
.btn--primary {
background: var(--indigo);
color: #fff;
box-shadow: 0 0 0 0 rgba(99,102,241,0);
}
.btn--primary:hover {
background: var(--indigo-dk);
box-shadow: 0 8px 28px rgba(99,102,241,.45);
transform: translateY(-1px);
}
.btn--ghost {
background: rgba(255,255,255,.07);
color: #fff;
border: 1px solid rgba(255,255,255,.15);
backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.btn--outline {
background: transparent;
color: var(--indigo);
border: 1.5px solid rgba(99,102,241,.45);
}
.btn--outline:hover { background: rgba(99,102,241,.1); border-color: var(--indigo); transform: translateY(-1px); }
.btn--sm { font-size: .875rem; padding: 10px 20px; }
.btn--lg { font-size: 1rem; padding: 16px 32px; }
.btn--full { width: 100%; }
/* ── SECTIONS ── */
.section { padding-block: var(--pad); }
/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
/* ================================================================
NAVIGATION
================================================================ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
padding-block: 18px;
transition: var(--t);
}
.nav.scrolled {
background: rgba(8,8,15,.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding-block: 12px;
border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-word {
font-family: var(--font-h); font-size: 1.2rem; font-weight: 800;
color: #fff; letter-spacing: -.04em;
}
.logo-dot {
font-size: .65rem; font-weight: 500; color: var(--muted);
letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; align-self: flex-end;
}
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__link {
font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.65);
padding: 8px 14px; border-radius: var(--r-sm); transition: var(--t);
}
.nav__link:hover { color: #fff; background: var(--border-2); }
.nav__link.active { color: #fff; background: var(--border-2); }
.nav__link[href="parrainage.html"].active {
color: #fff;
text-shadow: 0 0 18px rgba(139, 92, 246, .65);
background: rgba(139, 92, 246, .12);
}
/* Highlight Parrainage — soft violet shine + shimmering underline */
.nav__link[href="parrainage.html"] {
position: relative;
color: #E9E3FF;
text-shadow: 0 0 14px rgba(139, 92, 246, .35);
}
.nav__link[href="parrainage.html"]::after {
content: '';
position: absolute;
left: 14px; right: 14px; bottom: 4px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--indigo) 30%, var(--violet) 70%, transparent);
border-radius: 1px;
transform-origin: 50% 50%;
animation: parrainShine 3.6s ease-in-out infinite;
}
.nav__link[href="parrainage.html"]:hover {
color: #fff;
text-shadow: 0 0 18px rgba(139, 92, 246, .65);
}
.nav__link[href="parrainage.html"]:hover::after {
animation-duration: 1.8s;
}
@keyframes parrainShine {
0%, 100% { opacity: .35; transform: scaleX(.78); }
50% { opacity: .95; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.nav__link[href="parrainage.html"]::after { animation: none; opacity: .6; }
}
/* ────────────────────────────────────────────────────────────
SOCIAL RAIL — barre verticale flottante à gauche (desktop)
──────────────────────────────────────────────────────────── */
.social-rail {
position: fixed;
left: 22px;
top: 50%;
transform: translateY(-50%);
z-index: 240;
display: flex;
flex-direction: column;
gap: 12px;
}
.social-rail::before,
.social-rail::after {
content: '';
display: block;
width: 1px;
height: 56px;
background: linear-gradient(to bottom, transparent, var(--muted) 50%, transparent);
margin: 6px auto;
}
.social-rail__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
color: var(--muted-2);
background: var(--bg-card);
border: 1px solid var(--border-2);
overflow: hidden;
transition: transform .28s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s, border-color .25s, color .25s;
}
.social-rail__link::before {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
opacity: 0;
transition: opacity .25s;
z-index: 0;
}
.social-rail__link svg { position: relative; z-index: 1; }
.social-rail__link--fb::before {
background: linear-gradient(135deg, #1877F2 0%, #0a5fc7 100%);
}
.social-rail__link--ig::before {
background: linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 65%, #515BD4 100%);
}
.social-rail__link:hover,
.social-rail__link:focus-visible {
color: #fff;
transform: translateX(3px) scale(1.06);
border-color: transparent;
box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.social-rail__link:hover::before,
.social-rail__link:focus-visible::before { opacity: 1; }
.social-rail__link--fb:hover { box-shadow: 0 8px 22px rgba(24,119,242,.55); }
.social-rail__link--ig:hover { box-shadow: 0 8px 22px rgba(221,42,123,.55); }
[data-theme="light"] .social-rail__link {
background: #FFFFFF;
border-color: var(--border-2);
color: #475569;
}
[data-theme="light"] .social-rail__link:hover { color: #fff; }
/* Hidden on tablet/mobile (les icônes restent dans le footer) */
@media (max-width: 1100px) {
.social-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.social-rail__link, .social-rail__link::before { transition: none; }
.social-rail__link:hover { transform: none; }
}
/* Nav social icons — highlighted brand-color buttons (LEGACY, plus utilisé) */
.nav__social {
display: flex; align-items: center; gap: 8px;
list-style: none; margin: 0; padding: 0;
flex-shrink: 0;
}
.nav__social-link {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
color: #fff;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.14);
overflow: hidden;
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.nav__social-link::before {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
opacity: 0;
transition: opacity .25s;
z-index: 0;
}
.nav__social-link svg { position: relative; z-index: 1; display: block; }
.nav__social-link--fb::before {
background: linear-gradient(135deg, #1877F2 0%, #0a5fc7 100%);
}
.nav__social-link--ig::before {
background: linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 65%, #515BD4 100%);
}
.nav__social-link:hover,
.nav__social-link:focus-visible {
transform: translateY(-2px) scale(1.05);
border-color: transparent;
box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.08);
}
.nav__social-link--fb:hover,
.nav__social-link--fb:focus-visible {
box-shadow: 0 6px 22px rgba(24,119,242,.5);
}
.nav__social-link--ig:hover,
.nav__social-link--ig:focus-visible {
box-shadow: 0 6px 22px rgba(221,42,123,.5);
}
.nav__social-link:hover::before,
.nav__social-link:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.nav__social-link, .nav__social-link::before { transition: none; }
.nav__social-link:hover, .nav__social-link:focus-visible { transform: none; }
}
.nav__burger {
display: none; flex-direction: column; gap: 5px; padding: 8px;
border-radius: var(--r-sm); z-index: 201;
}
.nav__burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: var(--t); }
.nav__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ================================================================
HERO
================================================================ */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: center;
background: var(--bg); overflow: hidden;
padding-top: 80px;
}
.hero__bg-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
}
.hero__orb {
position: absolute; border-radius: 50%;
filter: blur(90px); pointer-events: none;
}
.hero__orb--1 {
width: 700px; height: 700px; top: -200px; right: -150px;
background: radial-gradient(circle, rgba(99,102,241,.22), transparent 70%);
animation: orbDrift 14s ease-in-out infinite;
}
.hero__orb--2 {
width: 400px; height: 400px; bottom: -100px; left: -80px;
background: radial-gradient(circle, rgba(139,92,246,.16), transparent 70%);
animation: orbDrift 10s ease-in-out infinite reverse 2s;
}
@keyframes orbDrift {
0%, 100% { transform: translate(0,0) scale(1); }
50% { transform: translate(20px,-30px) scale(1.04); }
}
.hero__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
padding-block: 80px 60px;
position: relative; z-index: 2;
}
/* Left copy */
.hero__badge {
display: inline-flex; align-items: center; gap: 8px;
font-size: .8125rem; font-weight: 500;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.06);
border: 1px solid var(--border-2);
padding: 7px 16px; border-radius: 100px;
margin-bottom: 28px;
backdrop-filter: blur(8px);
}
.hero__badge-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 8px var(--green);
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--green); }
50% { opacity: .6; box-shadow: 0 0 16px var(--green); }
}
.hero__h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
color: #F8FAFC;
line-height: 1.08;
margin-bottom: 20px;
}
.hero__gradient {
background: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #FB923C 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
font-size: 1.0625rem; color: var(--muted-2);
line-height: 1.75; margin-bottom: 36px; max-width: 500px;
}
.hero__sub em { color: var(--orange); font-style: normal; font-weight: 500; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
/* Mini-formulaire métier dans le hero — remplace le couple de CTAs */
.hero__metier {
margin-bottom: 36px;
max-width: 540px;
background: rgba(255,255,255,.04);
border: 1px solid var(--border-2);
border-radius: var(--r-md);
padding: 18px 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero__metier-label {
display: block;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .04em;
color: rgba(255,255,255,.85);
margin-bottom: 10px;
}
.hero__metier-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.hero__metier-select {
flex: 1;
min-width: 0;
font-family: inherit;
font-size: .95rem;
font-weight: 500;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--border-2);
border-radius: var(--r-sm);
padding: 12px 14px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
cursor: pointer;
transition: border-color .2s ease;
}
.hero__metier-select:focus {
outline: 2px solid var(--indigo);
outline-offset: 2px;
border-color: var(--indigo);
}
.hero__metier-select option { background: var(--bg-2); color: var(--text); }
.hero__metier-cta {
flex-shrink: 0;
white-space: nowrap;
}
.hero__metier-note {
margin: 10px 2px 0;
font-size: .76rem;
color: var(--muted);
line-height: 1.5;
}
@media (max-width: 600px) {
.hero__metier-row { flex-direction: column; }
.hero__metier-cta { width: 100%; }
}
[data-theme="light"] .hero__metier {
background: rgba(255,255,255,.7);
border-color: rgba(15,23,42,.1);
}
[data-theme="light"] .hero__metier-label { color: #0F172A; }
[data-theme="light"] .hero__metier-select { background: #FFFFFF; color: #0F172A; }
.hero__trust {
display: flex; flex-direction: column; gap: 8px; list-style: none;
}
.hero__trust li {
display: flex; align-items: center; gap: 8px;
font-size: .875rem; color: var(--muted-2); font-weight: 500;
}
.hero__trust svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
/* Right: 3 style preview cards */
.hero__cards {
position: relative;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
}
/* Mini preview card (hpc) */
.hpc {
position: absolute;
width: 200px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.6);
transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.hpc:hover { transform: translateY(-8px) scale(1.04) !important; z-index: 10 !important; animation-play-state: paused; }
.hpc--classic {
background: #fff;
transform: rotate(-6deg) translateX(-90px) translateY(78px);
z-index: 1;
}
.hpc--center {
transform: rotate(0deg) translateY(50px);
z-index: 3;
width: 220px;
}
.hpc--retro {
background: #000;
transform: rotate(-6deg) translateX(-90px) translateY(78px);
z-index: 1;
}
.hpc--future {
background: #06061A;
transform: rotate(6deg) translateX(90px) translateY(78px);
z-index: 2;
}
/* Idle floating — uses the individual `translate` and `rotate` properties so
they compose with the base `transform` (also overwritten by the JS
parallax) and with the `transform`-based hover lift. */
.hpc--retro { animation: hpcFloatLeft 5.8s ease-in-out infinite; }
.hpc--center { animation: hpcFloatCenter 4.6s ease-in-out -1.1s infinite; }
.hpc--future { animation: hpcFloatRight 6.4s ease-in-out -2.3s infinite; }
@keyframes hpcFloatLeft {
0%, 100% { translate: 0 0; rotate: 0deg; }
50% { translate: -3px -16px; rotate: -1.5deg; }
}
@keyframes hpcFloatCenter {
0%, 100% { translate: 0 0; }
50% { translate: 0 -22px; }
}
@keyframes hpcFloatRight {
0%, 100% { translate: 0 0; rotate: 0deg; }
50% { translate: 3px -16px; rotate: 1.5deg; }
}
@media (prefers-reduced-motion: reduce) {
.hpc--retro, .hpc--center, .hpc--future { animation: none; }
}
.hpc__label {
position: absolute; top: 8px; right: 8px;
font-size: .6rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: 3px 7px; border-radius: 100px;
z-index: 5;
}
.hpc--classic .hpc__label { background: #EEF2FF; color: #4F46E5; }
.hpc--retro .hpc__label { background: #00FF41; color: #000; font-family: monospace; }
.hpc--future .hpc__label { background: rgba(99,102,241,.3); color: #818CF8; border: 1px solid rgba(99,102,241,.3); }
.hpc__nav-bar {
height: 24px;
display: flex; align-items: center; gap: 4px;
padding: 0 8px;
}
.hpc--classic .hpc__nav-bar { background: #1E3A5F; }
.hpc--retro .hpc__nav-bar { background: #001800; border-bottom: 1px solid #00FF41; }
.hpc--future .hpc__nav-bar { background: rgba(99,102,241,.15); border-bottom: 1px solid rgba(99,102,241,.2); }
.hpc__nav-bar span {
display: block; width: 6px; height: 6px; border-radius: 50%;
}
.hpc--classic .hpc__nav-bar span:nth-child(1) { background: #FF5F57; }
.hpc--classic .hpc__nav-bar span:nth-child(2) { background: #FEBC2E; }
.hpc--classic .hpc__nav-bar span:nth-child(3) { background: #28C840; }
.hpc--retro .hpc__nav-bar span { background: #00FF41; opacity: .5; }
.hpc--future .hpc__nav-bar span { background: #6366F1; opacity: .6; }
.hpc__hero-zone {
height: 80px;
}
.hpc__hero-zone--classic { background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
.hpc__hero-zone--retro {
background: #000;
background-image:
linear-gradient(0deg, rgba(0,255,65,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,65,.15) 1px, transparent 1px);
background-size: 14px 14px;
}
.hpc__hero-zone--future { background: linear-gradient(135deg, #1a1040, #0a0a2a); }
.hpc__rows { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.hpc__row {
height: 8px; border-radius: 4px; width: 90%;
}
.hpc__row--dark { background: #1E3A5F; opacity: .9; }
.hpc__row--gray { background: #94A3B8; opacity: .5; }
.hpc__row--neon { background: #00FF41; box-shadow: 0 0 6px #00FF41; }
.hpc__row--violet { background: #6366F1; opacity: .8; }
.hpc__row--violet-muted { background: #8B5CF6; opacity: .4; }
.hpc__btn {
height: 20px; border-radius: 4px; width: 60%; margin-top: 2px;
}
.hpc__btn--navy { background: #1E3A5F; }
.hpc__btn--neon {
background: transparent;
border: 1px solid #00FF41;
box-shadow: 0 0 8px rgba(0,255,65,.4);
}
.hpc__btn--glow {
background: linear-gradient(90deg, #6366F1, #8B5CF6);
box-shadow: 0 0 10px rgba(99,102,241,.5);
}
/* Scroll hint */
.hero__scroll {
position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,.3); animation: scrollBounce 2.5s ease-in-out infinite;
}
@keyframes scrollBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
.scroll-dot { animation: dotScroll 2.5s ease-in-out infinite; }
@keyframes dotScroll {
0% { transform: translateY(0); }
60% { transform: translateY(8px); }
100%{ transform: translateY(0); }
}
/* ================================================================
MARQUEE
================================================================ */
.marquee-strip {
background: linear-gradient(90deg, var(--indigo), var(--violet));
overflow: hidden; padding-block: 12px; position: relative;
}
.marquee__inner {
display: flex; align-items: center; gap: 28px;
white-space: nowrap; width: max-content;
animation: marquee 28s linear infinite;
}
.marquee__inner span { font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.9); letter-spacing: .06em; text-transform: uppercase; }
.mx { color: rgba(255,255,255,.4) !important; font-size: .55rem !important; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__inner:hover { animation-play-state: paused; }
/* ================================================================
HOW IT WORKS — STEPS
================================================================ */
.steps { background: var(--bg-2); }
.steps__grid {
display: flex; align-items: center; gap: 0;
}
.step-card {
flex: 1;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 36px 28px;
transition: var(--t);
position: relative;
}
.step-card:hover {
border-color: rgba(99,102,241,.35);
box-shadow: 0 0 0 1px rgba(99,102,241,.15), var(--sh-card);
transform: translateY(-4px);
}
.step-card__num {
font-family: var(--font-h);
font-size: 3rem; font-weight: 800;
background: linear-gradient(135deg, var(--indigo), var(--violet));
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1; margin-bottom: 16px; opacity: .3;
}
.step-card__icon {
width: 48px; height: 48px;
background: rgba(99,102,241,.12);
border: 1px solid rgba(99,102,241,.2);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
color: var(--indigo);
margin-bottom: 16px;
}
.step-card__icon svg { width: 22px; height: 22px; }
.step-card h3 { font-size: 1.1rem; color: #F8FAFC; margin-bottom: 10px; font-family: var(--font-b); font-weight: 700; }
.step-card p { font-size: .9375rem; color: var(--muted-2); line-height: 1.7; }
.step-card p strong { color: #F8FAFC; }
.step-card__arrow {
font-size: 1.5rem; color: rgba(99,102,241,.4);
padding: 0 12px; flex-shrink: 0;
}
/* ================================================================
DEMO INTERACTIVE
================================================================ */
.demo-section { background: var(--bg); position: relative; overflow: hidden; }
.demo-section::before {
content: ''; position: absolute;
top: -300px; right: -200px;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(99,102,241,.1), transparent 60%);
pointer-events: none;
}
.demo__tabs {
display: flex; justify-content: center; gap: 16px;
margin-bottom: 48px; flex-wrap: wrap;
}
.demo__tab {
display: flex; align-items: center; gap: 12px;
font-size: 1rem; font-weight: 700;
padding: 16px 36px; border-radius: 16px;
border: 2px solid var(--border-2);
color: var(--muted-2);
transition: var(--t); background: var(--bg-card);
letter-spacing: .01em;
position: relative; overflow: hidden;
}
.demo__tab::after {
content: ''; position: absolute; inset: 0;
opacity: 0; transition: var(--t);
}
.demo__tab:hover {
color: #fff;
border-color: rgba(255,255,255,.2);
transform: translateY(-2px);
}
.demo__tab-dot {
width: 13px; height: 13px; border-radius: 50%;
transition: var(--t); flex-shrink: 0;
box-shadow: 0 0 0 0 currentColor;
}
/* Classic */
.demo__tab--classic .demo__tab-dot { background: #4A90D9; }
.demo__tab--classic:hover { border-color: rgba(74,144,217,.4); color: #7ab8f5; }
.demo__tab--classic.active {
color: #fff;
border-color: rgba(74,144,217,.6);
background: linear-gradient(135deg, rgba(30,58,95,.6), rgba(10,25,50,.8));
box-shadow: 0 0 0 1px rgba(74,144,217,.3), 0 8px 32px rgba(30,58,95,.5), inset 0 1px 0 rgba(255,255,255,.08);
transform: translateY(-2px);
}
.demo__tab--classic.active .demo__tab-dot {
background: #4A90D9;
box-shadow: 0 0 10px 3px rgba(74,144,217,.6);
}
/* Rétro 80s */
.demo__tab--retro .demo__tab-dot { background: #00FF41; }
.demo__tab--retro:hover { border-color: rgba(0,255,65,.3); color: #00FF41; }
.demo__tab--retro.active {
color: #00FF41;
border-color: rgba(0,255,65,.5);
background: linear-gradient(135deg, rgba(0,40,10,.7), rgba(0,20,5,.9));
box-shadow: 0 0 0 1px rgba(0,255,65,.25), 0 8px 32px rgba(0,255,65,.15), inset 0 1px 0 rgba(0,255,65,.1);
transform: translateY(-2px);
text-shadow: 0 0 12px rgba(0,255,65,.7);
}
.demo__tab--retro.active .demo__tab-dot {
box-shadow: 0 0 10px 3px rgba(0,255,65,.7), 0 0 20px rgba(0,255,65,.4);
}
/* Futuriste */
.demo__tab--future .demo__tab-dot { background: var(--violet); }
.demo__tab--future:hover { border-color: rgba(99,102,241,.4); color: #a5b4fc; }
.demo__tab--future.active {
color: #c4b5fd;
border-color: rgba(139,92,246,.6);
background: linear-gradient(135deg, rgba(60,20,120,.6), rgba(20,10,60,.9));
box-shadow: 0 0 0 1px rgba(139,92,246,.3), 0 8px 32px rgba(99,102,241,.3), inset 0 1px 0 rgba(255,255,255,.08);
transform: translateY(-2px);
text-shadow: 0 0 12px rgba(167,139,250,.5);
}
.demo__tab--future.active .demo__tab-dot {
background: #a78bfa;
box-shadow: 0 0 10px 3px rgba(139,92,246,.7), 0 0 20px rgba(99,102,241,.4);
}
/* Browser mockup frame */
.demo__browser {
max-width: 900px; margin-inline: auto;
border-radius: var(--r-lg); overflow: hidden;
box-shadow: 0 0 0 1px var(--border), 0 40px 80px rgba(0,0,0,.6);
background: #1C1C28;
}
.demo__browser-chrome {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
background: #1C1C28;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.demo__dots { display: flex; gap: 6px; }
.demo__dots span { display: block; width: 12px; height: 12px; border-radius: 50%; }
.demo__urlbar {
flex: 1; text-align: center;
font-size: .8rem; color: rgba(255,255,255,.4);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.07);
border-radius: 6px; padding: 5px 12px;
}
.demo__spacer { width: 60px; flex-shrink: 0; }
.demo__screen {
position: relative;
height: 400px;
overflow: hidden;
}
/* Individual demo sites */
.ds {
position: absolute; inset: 0;
opacity: 0; transform: scale(.98);
transition: opacity .4s ease, transform .4s ease;
pointer-events: none;
overflow-y: auto;
}
.ds.active {
opacity: 1; transform: none;
pointer-events: auto; z-index: 2;
}
/* ── CLASSIC DEMO ── */
.ds--classic { background: #fff; color: #1E293B; font-family: 'Inter', sans-serif; }
.ds__topbar--classic {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 14px;
background: #F97316; color: #fff;
font-size: .57rem; font-weight: 600; letter-spacing: .01em;
}
.ds__stars--classic { letter-spacing: .05em; }
.ds__nav--classic {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 14px;
background: #fff;
border-bottom: 2px solid #F97316;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ds__brand--classic { font-size: .82rem; color: #1E3A5F; font-style: normal; font-weight: 700; }
.ds__brand--classic em { font-style: normal; color: #F97316; }
.ds__nav--classic nav { display: flex; gap: 12px; }
.ds__nav--classic nav a { color: #475569; font-size: .6rem; font-weight: 500; }
.ds__btn--classic {
font-size: .6rem; font-weight: 700;
background: #F97316; color: #fff;
padding: 4px 11px; border-radius: 4px;
}
.ds__hero--classic {
position: relative; overflow: hidden; height: 155px;
}
.ds__hero-bg--classic {
position: absolute; inset: 0;
background: linear-gradient(145deg, #0c2040 0%, #1E3A5F 45%, #1a3258 100%);
}
.ds__hero-bg--classic::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 88% 40%, rgba(249,115,22,.22) 0%, transparent 52%),
radial-gradient(ellipse at 10% 80%, rgba(30,58,95,.5) 0%, transparent 40%);
}
.ds__hero-content--classic {
position: relative; z-index: 1;
padding: 14px 18px;
height: 100%;
display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.ds__trust-row--classic {
display: flex; flex-wrap: wrap; gap: 8px;
font-size: .55rem; font-weight: 600;
color: rgba(255,255,255,.55);
}
.ds__hero-h2--classic {
font-family: 'Playfair Display', serif;
font-size: 1.1rem; color: #fff; line-height: 1.3; margin: 0;
}
.ds__city--classic { color: #FB923C; font-style: italic; }
.ds__cta { display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 4px; padding: 6px 14px; margin-top: 4px; width: fit-content; }
.ds__cta--classic { background: #F97316; color: #fff; border-radius: 4px; }
.ds__services--classic {
display: flex; gap: 6px;
padding: 10px 12px;
background: #fff;
border-top: 1px solid #F1F5F9;
}
.ds__service--classic {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
padding: 8px 5px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-bottom: 2px solid #F97316;
border-radius: 6px;
font-size: .68rem;
}
.ds__svc-icon { font-size: 1.05rem; }
.ds__service--classic strong { font-size: .64rem; color: #1E3A5F; font-weight: 700; }
.ds__service--classic small { color: #94A3B8; font-size: .57rem; }
/* ── RETRO 80s DEMO ── */
.ds--retro {
background: #000;
color: #00FF41;
font-family: 'VT323', monospace;
position: relative;
}
.ds__scanlines {
position: absolute; inset: 0; z-index: 5; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 3px);
}
.ds__nav--retro {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 16px;
background: #001800;
border-bottom: 1px solid #00FF41;
font-size: .95rem;
}
.ds__logo--retro {
color: #00FF41;
text-shadow: 0 0 8px #00FF41;
letter-spacing: .08em;
}
.ds__tel--retro {
color: #FF00FF;
text-shadow: 0 0 8px #FF00FF;
font-size: .85rem;
}
.blink { animation: blink 1.2s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.ds__hero--retro {
position: relative; height: 200px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.ds__retro-grid {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,255,65,.08) 100%),
linear-gradient(0deg, rgba(0,255,65,.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,65,.12) 1px, transparent 1px);
background-size: 100% 100%, 20px 20px, 20px 20px;
transform-origin: bottom center;
transform: perspective(300px) rotateX(30deg) scaleX(1.4);
}
.ds__retro-content {
position: relative; z-index: 2; text-align: center; padding: 16px;
}
.ds__retro-pre {
font-size: .75rem; color: #00FFFF; letter-spacing: .2em;
text-shadow: 0 0 8px #00FFFF; margin-bottom: 6px;
}
.ds__retro-h2 {
font-family: 'VT323', monospace;
font-size: 2rem; line-height: 1.1;
color: #00FF41;
text-shadow: 0 0 12px #00FF41, 2px 0 0 #FF00FF;
animation: glitch 6s ease-in-out infinite;
}
.ds__retro-accent { color: #FF00FF; text-shadow: 0 0 12px #FF00FF, -2px 0 0 #00FFFF; }
.ds__retro-sub {
font-size: .85rem; color: #00FFFF;
text-shadow: 0 0 6px #00FFFF;
letter-spacing: .1em; margin-bottom: 8px;
}
@keyframes glitch {
0%, 90%, 100% { text-shadow: 0 0 12px #00FF41, 2px 0 0 #FF00FF; transform: none; }
91% { transform: skewX(-3deg) translateX(3px); text-shadow: 3px 0 0 #FF00FF, -3px 0 0 #00FFFF; }
92% { transform: skewX(3deg) translateX(-2px); text-shadow: -3px 0 0 #00FFFF, 3px 0 0 #FF00FF; }
93% { transform: none; }
}
.ds__cta--retro {
background: transparent;
border: 1px solid #00FF41;
color: #00FF41;
font-family: 'VT323', monospace;
font-size: .9rem; letter-spacing: .1em;
padding: 4px 16px;
text-shadow: 0 0 6px #00FF41;
box-shadow: 0 0 10px rgba(0,255,65,.2), inset 0 0 10px rgba(0,255,65,.05);
}
.ds__services--retro {
border-top: 1px solid rgba(0,255,65,.3);
padding: 10px 16px;
display: flex; flex-direction: column; gap: 4px;
}
.ds__service--retro {
font-size: .9rem; color: #00FFFF;
text-shadow: 0 0 4px #00FFFF;
letter-spacing: .06em;
padding: 4px 0;
border-bottom: 1px dashed rgba(0,255,65,.15);
}
.ds__r-num { color: #FF00FF; text-shadow: 0 0 6px #FF00FF; margin-right: 8px; }
/* ── FUTURISTIC DEMO ── */
.ds--future {
background: #030712; color: #E2E8F0;
font-family: 'Inter', sans-serif;
}
.ds--future::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px);
background-size: 22px 22px;
}
.ds__nav--future {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 9px 16px;
background: rgba(3,7,18,.92);
border-bottom: 1px solid rgba(34,211,238,.18);
backdrop-filter: blur(8px);
}
.ds__logo--future {
font-family: 'Orbitron', sans-serif;
font-size: .8rem; font-weight: 700;
color: #22D3EE; letter-spacing: .12em;
text-shadow: 0 0 14px rgba(34,211,238,.55);
}
.ds__logo-pro {
background: linear-gradient(90deg, #22D3EE, #A78BFA);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-size: .58rem; vertical-align: super; margin-left: 3px;
}
.ds__nav--future nav { display: flex; gap: 14px; }
.ds__nav--future nav a { color: rgba(255,255,255,.38); font-size: .6rem; }
.ds__tel--future {
font-size: .62rem; font-weight: 700; letter-spacing: .06em;
background: transparent; color: #22D3EE;
border: 1px solid rgba(34,211,238,.35);
padding: 3px 10px; border-radius: 3px;
text-shadow: 0 0 8px rgba(34,211,238,.4);
}
.ds__hero--future {
position: relative; z-index: 1; height: 178px; overflow: hidden;
display: flex; align-items: center;
padding: 14px 18px;
}
.ds__future-orb {
position: absolute; border-radius: 50%; filter: blur(55px); pointer-events: none;
width: 200px; height: 200px; top: -70px; right: -20px;
background: radial-gradient(circle, rgba(34,211,238,.25), transparent 70%);
}
.ds__future-orb--2 {
width: 150px; height: 150px; bottom: -65px; left: 15px;
background: radial-gradient(circle, rgba(167,139,250,.2), transparent 70%);
}
.ds__future-content { position: relative; z-index: 1; }
.ds__future-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: .58rem; font-weight: 700;
font-family: 'Orbitron', sans-serif; letter-spacing: .06em;
background: rgba(34,211,238,.07);
border: 1px solid rgba(34,211,238,.22);
color: #22D3EE; padding: 3px 10px; border-radius: 3px;
margin-bottom: 8px;
text-shadow: 0 0 8px rgba(34,211,238,.4);
}
.ds__future-chip::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: #22D3EE; box-shadow: 0 0 6px #22D3EE;
animation: futurePulse 2s ease-in-out infinite;
}
@keyframes futurePulse {
0%, 100% { opacity: 1; box-shadow: 0 0 6px #22D3EE; }
50% { opacity: .35; box-shadow: 0 0 2px #22D3EE; }
}
.ds__future-h2 {
font-family: 'Orbitron', sans-serif;
font-size: 1.15rem; line-height: 1.15; letter-spacing: .05em;
color: #F8FAFC; margin-bottom: 5px;
}
.ds__future-gradient {
background: linear-gradient(135deg, #22D3EE 0%, #818CF8 55%, #A78BFA 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ds__future-sub { font-size: .65rem; color: rgba(255,255,255,.42); line-height: 1.5; margin-bottom: 10px; max-width: 280px; }
.ds__future-actions { display: flex; gap: 7px; }
.ds__cta--future {
font-size: .62rem; font-weight: 700; letter-spacing: .04em;
font-family: 'Orbitron', sans-serif;
background: rgba(34,211,238,.1);
border: 1px solid rgba(34,211,238,.38);
color: #22D3EE; padding: 5px 12px; border-radius: 4px;
text-shadow: 0 0 8px rgba(34,211,238,.4);
box-shadow: 0 0 18px rgba(34,211,238,.08), inset 0 0 8px rgba(34,211,238,.04);
}
.ds__cta--future-ghost {
font-size: .62rem; font-weight: 500;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.5);
padding: 5px 12px; border-radius: 4px;
}
.ds__services--future {
position: relative; z-index: 1;
display: flex; gap: 6px; padding: 8px 12px;
background: rgba(3,7,18,.75);
border-top: 1px solid rgba(34,211,238,.12);
}
.ds__service--future {
flex: 1;
background: rgba(34,211,238,.03);
border: 1px solid rgba(34,211,238,.1);
border-radius: 6px;
padding: 7px 5px;
text-align: center;
font-size: .63rem;
position: relative; overflow: hidden;
}
.ds__service--future::after {
content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent);
}
.ds__f-icon {
font-size: .95rem; color: #22D3EE;
text-shadow: 0 0 8px rgba(34,211,238,.65);
margin-bottom: 3px;
}
.ds__service--future strong { display: block; color: rgba(255,255,255,.85); font-size: .63rem; font-weight: 600; }
.ds__service--future small { color: rgba(255,255,255,.3); font-size: .58rem; }
.demo__note {
text-align: center; margin-top: 24px;
font-size: .875rem; color: var(--muted);
max-width: 520px; margin-inline: auto;
}
.demo__note strong { color: var(--muted-2); }
/* ================================================================
PRICING
================================================================ */
.pricing { background: var(--bg-2); }
/* Notice TVA en haut de la section Tarifs */
.pricing__vat-notice {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 14px auto 0;
padding: 8px 16px;
font-size: .82rem;
color: var(--muted-2);
background: rgba(99,102,241,.08);
border: 1px solid rgba(99,102,241,.2);
border-radius: 100px;
line-height: 1.5;
}
.pricing__vat-notice strong { color: var(--text); font-weight: 600; }
[data-theme="light"] .pricing__vat-notice {
background: rgba(99,102,241,.06);
border-color: rgba(99,102,241,.18);
color: #475569;
}
[data-theme="light"] .pricing__vat-notice strong { color: #0F172A; }
/* ================================================================
COMPARATIF MARCHÉ — section avant Tarifs
================================================================ */
.market { background: var(--bg-2); }
.market__table {
background: var(--bg-card);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--r-xl);
overflow: hidden;
}
.market__row {
display: grid;
grid-template-columns: 1.4fr 1.4fr 1fr 1.6fr;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,.18);
transition: background .15s ease;
}
.market__row:last-child { border-bottom: 0; }
.market__row > .market__cell + .market__cell {
border-left: 1px solid rgba(255,255,255,.12);
}
[data-theme="light"] .market__table { border-color: rgba(15,23,42,.18); }
[data-theme="light"] .market__row { border-bottom-color: rgba(15,23,42,.18); }
[data-theme="light"] .market__row > .market__cell + .market__cell {
border-left-color: rgba(15,23,42,.12);
}
.market__row--head {
background: var(--bg-2);
font-family: var(--font-h);
font-weight: 700;
font-size: .8rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted-2);
}
.market__row--head .market__cell { padding: 16px 20px; }
.market__row:not(.market__row--head):hover { background: rgba(255,255,255,.02); }
.market__cell {
padding: 18px 20px;
font-size: .9rem;
color: var(--muted-2);
line-height: 1.5;
}
.market__cell strong {
display: block;
color: #F8FAFC;
font-size: .95rem;
font-weight: 700;
margin-bottom: 2px;
}
.market__cell small {
display: block;
font-size: .75rem;
color: var(--muted);
}
.market__price {
font-family: var(--font-h);
font-weight: 700;
color: #E2E8F0;
}
.market__row--us {
position: relative;
background:
linear-gradient(90deg, rgba(99,102,241,.22) 0%, rgba(139,92,246,.16) 50%, rgba(251,146,60,.10) 100%);
border-top: 1px solid rgba(139,92,246,.45);
border-bottom: 1px solid rgba(139,92,246,.25) !important;
box-shadow:
inset 4px 0 0 0 var(--indigo),
0 12px 32px -12px rgba(99,102,241,.4),
0 0 0 1px rgba(139,92,246,.18);
transform: translateZ(0);
}
.market__row--us::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(60% 100% at 0% 50%, rgba(99,102,241,.12), transparent 70%);
}
.market__row--us .market__cell strong { color: #F8FAFC; }
.market__row--us .market__cell { color: var(--text); padding-top: 24px; padding-bottom: 24px; position: relative; z-index: 1; }
.market__row--us:hover { background:
linear-gradient(90deg, rgba(99,102,241,.28) 0%, rgba(139,92,246,.20) 50%, rgba(251,146,60,.12) 100%); }
.market__badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-h);
font-size: .65rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #FDE68A;
background: linear-gradient(90deg, rgba(251,146,60,.22), rgba(251,191,36,.18));
border: 1px solid rgba(251,191,36,.45);
padding: 3px 9px;
border-radius: 100px;
margin-bottom: 8px;
box-shadow: 0 0 14px rgba(251,191,36,.18);
}
.market__highlight {
font-family: var(--font-h);
font-weight: 800;
font-size: 1.05rem;
color: #fff;
letter-spacing: -.005em;
}
.market__sub {
display: inline-block;
font-size: .78rem;
color: var(--muted-2);
margin-top: 2px;
}
.market__price--us {
font-size: 1.25rem;
font-weight: 800;
background: linear-gradient(90deg, #818CF8 0%, #C4B5FD 45%, #FB923C 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 8px rgba(139,92,246,.25));
}
.market__note {
text-align: center;
margin: 32px auto 0;
max-width: 640px;
font-size: .9rem;
color: var(--muted-2);
line-height: 1.7;
}
.market__note strong { color: var(--text); }
@media (max-width: 820px) {
.market__row { grid-template-columns: 1fr; gap: 4px; padding: 4px 0; }
.market__row--head { display: none; }
.market__cell { padding: 4px 18px; font-size: .85rem; }
.market__cell:first-child { padding-top: 16px; }
.market__cell:last-child { padding-bottom: 16px; }
}
[data-theme="light"] .market { background: #F1F5F9; }
[data-theme="light"] .market__table { background: #FFFFFF; }
[data-theme="light"] .market__row--head { background: #F8FAFC; }
[data-theme="light"] .market__cell strong,
[data-theme="light"] .market__price { color: #0F172A; }
[data-theme="light"] .market__row--us {
background: linear-gradient(90deg, rgba(99,102,241,.16) 0%, rgba(139,92,246,.10) 50%, rgba(251,146,60,.08) 100%);
box-shadow:
inset 4px 0 0 0 var(--indigo),
0 12px 32px -12px rgba(99,102,241,.25),
0 0 0 1px rgba(139,92,246,.18);
}
[data-theme="light"] .market__row--us:hover {
background: linear-gradient(90deg, rgba(99,102,241,.22) 0%, rgba(139,92,246,.14) 50%, rgba(251,146,60,.10) 100%);
}
[data-theme="light"] .market__highlight { color: #0F172A; }
[data-theme="light"] .market__sub { color: var(--muted); }
[data-theme="light"] .market__badge {
color: #92400E;
background: linear-gradient(90deg, rgba(251,146,60,.18), rgba(251,191,36,.16));
border-color: rgba(217,119,6,.45);
}
/* ================================================================
PRICING — 3 plans + addon
================================================================ */
.pricing__plans {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
margin-bottom: 28px;
}
.pricing__addon {
display: grid;
grid-template-columns: 1fr;
max-width: 600px;
margin: 0 auto 56px;
}
.plan-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px 30px;
position: relative;
transition: var(--t);
}
.plan-card:hover {
border-color: rgba(99,102,241,.3);
transform: translateY(-4px);
box-shadow: var(--sh-card);
}
.plan-card--featured {
border-color: rgba(99,102,241,.4);
background: linear-gradient(160deg, rgba(99,102,241,.1) 0%, var(--bg-card) 60%);
box-shadow: 0 0 0 1px rgba(99,102,241,.2), var(--sh-card);
}
.plan-card--featured:hover {
border-color: rgba(99,102,241,.6);
box-shadow: 0 0 0 1px rgba(99,102,241,.35), var(--sh-glow);
}
.plan-card--addon { border-style: dashed; }
/* ── Variante "Atelier" (offre Premium / Boutique) ── */
.plan-card--premium {
border-color: rgba(245,158,11,.35);
background: linear-gradient(160deg, rgba(245,158,11,.08) 0%, var(--bg-card) 60%);
box-shadow: 0 0 0 1px rgba(245,158,11,.12), var(--sh-card);
}
.plan-card--premium:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 0 0 1px rgba(245,158,11,.28), 0 0 30px rgba(245,158,11,.12), var(--sh-card);
}
.plan-card__badge--premium {
background: linear-gradient(90deg, #F59E0B, #FB923C) !important;
color: #1A1208 !important;
}
[data-theme="light"] .plan-card--premium {
background: linear-gradient(160deg, rgba(245,158,11,.06) 0%, #FFFFFF 60%);
border-color: rgba(245,158,11,.45);
}
.plan-card__badge {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: linear-gradient(90deg, var(--indigo), var(--violet));
color: #fff; font-size: .75rem; font-weight: 700;
padding: 4px 16px; border-radius: 100px; white-space: nowrap;
}
.plan-card__name {
display: block;
font-family: var(--font-h); font-size: 1.375rem; font-weight: 800;
color: #F8FAFC; margin-bottom: 6px;
}
.plan-card__desc { font-size: .875rem; color: var(--muted-2); line-height: 1.5; margin-bottom: 20px; }
.plan-card__price {
display: flex; align-items: flex-start; gap: 4px; margin-bottom: 6px;
position: relative;
}
.plan-card__amount {
font-family: var(--font-h); font-size: 2.75rem; font-weight: 800;
color: #F8FAFC; line-height: 1;
}
.plan-card__cents { font-size: 1.5rem; }
.plan-card__right { display: flex; flex-direction: column; padding-top: 6px; }
.plan-card__currency { font-size: 1.25rem; font-weight: 700; color: var(--muted-2); line-height: 1; }
.plan-card__period { font-size: .75rem; color: var(--muted); font-weight: 500; }
/* Prix barré (tarif normal au-dessus du tarif de lancement)
On retire le text-decoration et on dessine une barre diagonale rouge
en pseudo-élément — le texte reste pleinement lisible. */
.plan-card__strike {
position: relative;
display: inline-block;
font-family: var(--font-h);
font-size: 1.6rem;
font-weight: 800;
color: #F8FAFC; /* blanc cassé : digits parfaitement nets */
letter-spacing: -.02em;
margin-bottom: 6px;
padding: 0 4px;
}
.plan-card__strike::after {
content: '';
position: absolute;
left: -2px; right: -2px;
top: 50%;
height: 3px;
background: #EF4444;
transform: rotate(-8deg);
transform-origin: center;
border-radius: 2px;
box-shadow: 0 0 6px rgba(239,68,68,.5);
pointer-events: none;
}
[data-theme="light"] .plan-card__strike { color: #1E293B; }
[data-theme="light"] .plan-card__strike::after { background: #DC2626; }
/* Ligne prix barré + badge "-X%" */
.plan-card__strike-row {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.plan-card__strike-row .plan-card__strike { margin-bottom: 0; }
.plan-card__discount {
display: inline-flex;
align-items: center;
font-family: var(--font-h);
font-weight: 800;
font-size: .85rem;
letter-spacing: .03em;
color: #064E3B;
background: linear-gradient(90deg, #34D399, #10B981);
padding: 4px 10px;
border-radius: 100px;
box-shadow: 0 2px 10px rgba(16,185,129,.3), inset 0 1px 0 rgba(255,255,255,.4);
white-space: nowrap;
}
[data-theme="light"] .plan-card__discount {
color: #064E3B;
background: linear-gradient(90deg, #6EE7B7, #34D399);
}
[data-theme="future"] .plan-card__discount {
color: #04041C;
background: linear-gradient(90deg, #22D3EE, #A78BFA);
box-shadow: 0 2px 12px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="retro"] .plan-card__discount {
color: #08001A;
background: linear-gradient(90deg, #FFD000, #FF6EC7);
font-family: 'VT323', monospace;
letter-spacing: .08em;
font-size: .95rem;
border: 1px solid #FFD000;
box-shadow: 0 0 10px rgba(255, 208, 0, .5), inset 0 1px 0 rgba(255,255,255,.3);
}
/* Badge tarif de lancement */
.plan-card__launch {
display: inline-block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .02em;
color: #FCD34D;
background: linear-gradient(90deg, rgba(245,158,11,.15) 0%, rgba(249,115,22,.1) 100%);
border: 1px solid rgba(245,158,11,.4);
border-radius: 100px;
padding: 5px 12px;
margin-top: 12px;
margin-bottom: 8px;
white-space: nowrap;
}
.plan-card__launch strong { color: #FDE68A; font-weight: 700; }
[data-theme="light"] .plan-card__launch {
color: #B45309;
background: linear-gradient(90deg, rgba(245,158,11,.12) 0%, rgba(249,115,22,.08) 100%);
border-color: rgba(245,158,11,.5);
}
[data-theme="light"] .plan-card__launch strong { color: #92400E; }
.plan-card__alt { display: block; font-size: .8rem; color: var(--orange); font-weight: 600; margin-bottom: 20px; }
.plan-card__features {
list-style: none; margin-bottom: 28px;
display: flex; flex-direction: column; gap: 10px;
}
.plan-card__features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: .9375rem; color: var(--muted-2); line-height: 1.5;
}
.plan-card__features strong { color: #F8FAFC; }
.ci {
width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
color: var(--green);
}
/* Options block */
.options-block {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 40px;
}
.options-block__header {
text-align: center; margin-bottom: 28px;
}
.options-block__header h3 {
font-size: 1.375rem; color: #F8FAFC; margin-bottom: 6px; font-family: var(--font-b); font-weight: 700;
}
.options-block__header p { font-size: .9375rem; color: var(--muted-2); }
.options-price {
background: linear-gradient(90deg, var(--indigo), var(--violet));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.options-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.options-grid__wide { grid-column: span 2; }
@media (max-width: 768px) {
.options-grid__wide { grid-column: span 1; }
}
.options-grid li {
display: flex; align-items: center; gap: 8px;
font-size: .875rem; color: var(--muted-2);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 12px;
transition: var(--t);
}
.options-grid li:hover { border-color: rgba(99,102,241,.3); color: var(--text); }
.opt-price {
margin-left: auto;
font-size: .75rem; font-weight: 600;
color: var(--indigo);
white-space: nowrap;
flex-shrink: 0;
}
.opt-price--alt { color: var(--orange); }
/* ================================================================
SECTORS
================================================================ */
.sectors { background: var(--bg); }
.sectors__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.sector-item {
display: flex; align-items: center; gap: 8px;
font-size: .875rem; font-weight: 500; color: var(--muted-2);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 16px;
transition: var(--t);
cursor: default;
}
.sector-item:hover {
border-color: rgba(99,102,241,.3);
color: var(--text);
transform: translateY(-2px);
}
.sector-icon {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--muted-2);
transition: color var(--t-speed, .2s) ease;
}
.sector-item:hover .sector-icon { color: var(--indigo); }
.sectors__note { text-align: center; font-size: .9375rem; color: var(--muted); }
/* ================================================================
GUARANTEE
================================================================ */
.guarantee { background: var(--bg-2); }
.guarantee__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.guarantee__card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px 28px;
transition: var(--t);
}
.guarantee__card:hover {
border-color: rgba(99,102,241,.3);
transform: translateY(-4px);
box-shadow: var(--sh-card);
}
.guarantee__icon { margin-bottom: 18px; }
.guarantee__icon svg {
width: 40px; height: 40px;
color: var(--indigo);
filter: drop-shadow(0 0 8px rgba(99,102,241,.35));
}
.guarantee__card h3 { font-size: 1.05rem; color: #F8FAFC; margin-bottom: 10px; font-family: var(--font-b); font-weight: 700; }
.guarantee__card p { font-size: .9375rem; color: var(--muted-2); line-height: 1.7; }
.proof-banner {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
background:
radial-gradient(120% 90% at 0% 0%, rgba(99,102,241,.10), transparent 55%),
radial-gradient(120% 90% at 100% 100%, rgba(249,115,22,.07), transparent 55%),
var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
}
.proof-banner::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(circle at 50% 50%, #000, transparent 80%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 80%);
pointer-events: none;
}
.proof-banner__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 32px 24px;
text-align: center;
transition: var(--t);
}
.proof-banner__item:hover { transform: translateY(-2px); }
.proof-banner__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(99,102,241,.1);
border: 1px solid rgba(99,102,241,.22);
color: var(--indigo);
margin-bottom: 6px;
transition: var(--t);
}
.proof-banner__icon svg { width: 18px; height: 18px; }
.proof-banner__item:hover .proof-banner__icon {
background: rgba(99,102,241,.18);
border-color: rgba(99,102,241,.4);
box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
.proof-banner__num {
display: inline-flex;
align-items: baseline;
gap: 2px;
line-height: 1;
}
.proof-banner__num strong {
font-family: var(--font-h);
font-size: clamp(2rem, 3.4vw, 2.5rem);
font-weight: 800;
letter-spacing: -.02em;
background: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #FB923C 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-banner__unit {
font-family: var(--font-h);
font-size: 1.25rem;
font-weight: 700;
background: linear-gradient(135deg, #A78BFA, #FB923C);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-banner__label {
font-size: .75rem;
color: var(--muted-2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
margin-top: 2px;
}
.proof-banner__sep {
width: 1px;
background: linear-gradient(to bottom, transparent, var(--border-2), transparent);
margin-block: 28px;
}
@media (max-width: 760px) {
.proof-banner { grid-template-columns: 1fr 1fr; }
.proof-banner__sep { display: none; }
.proof-banner__item { padding: 26px 16px; border-top: 1px solid var(--border); }
.proof-banner__item:first-child,
.proof-banner__item:nth-child(3) { border-top: 0; }
.proof-banner__item:nth-child(3) { border-left: 1px solid var(--border); }
.proof-banner__item:nth-child(7) { border-left: 1px solid var(--border); }
}
@media (max-width: 440px) {
.proof-banner { grid-template-columns: 1fr; }
.proof-banner__item { border-top: 1px solid var(--border); border-left: 0 !important; }
.proof-banner__item:first-child { border-top: 0; }
}
/* ================================================================
FAQ
================================================================ */
.faq { background: var(--bg); }
.faq__list {
max-width: 760px; margin-inline: auto;
display: flex; flex-direction: column; gap: 10px;
}
.faq__item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden; transition: border-color .2s;
}
.faq__item[open] { border-color: rgba(99,102,241,.35); }
.faq__q {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px;
font-size: .9375rem; font-weight: 600; color: #E2E8F0;
cursor: pointer; list-style: none; transition: color .2s;
}
.faq__q::-webkit-details-marker, .faq__q::marker { display: none; }
.faq__q:hover { color: #818CF8; }
.faq__chev {
width: 18px; height: 18px; flex-shrink: 0; color: var(--muted);
transition: transform .3s ease;
}
.faq__item[open] .faq__chev { transform: rotate(180deg); color: var(--indigo); }
.faq__a { padding: 0 22px 18px; animation: fadeDown .2s ease; }
.faq__a p { font-size: .9375rem; color: var(--muted-2); line-height: 1.75; }
.faq__a strong { color: var(--text); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ================================================================
CONTACT
================================================================ */
.contact {
background: var(--bg-2);
position: relative; overflow: hidden;
}
.contact::before {
content: ''; position: absolute;
bottom: -200px; left: -150px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(99,102,241,.12), transparent 60%);
pointer-events: none;
}
.contact__inner {
display: grid; grid-template-columns: 1fr 1.35fr;
gap: 72px; align-items: start;
position: relative; z-index: 1;
}
.contact__title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
color: #F8FAFC; margin-bottom: 14px;
}
.contact__lead { font-size: 1rem; color: var(--muted-2); line-height: 1.75; margin-bottom: 28px; }
.contact__reassurance {
list-style: none; display: flex; flex-direction: column;
gap: 8px; margin-bottom: 28px;
}
.contact__reassurance li {
font-size: .875rem; font-weight: 500; color: var(--muted-2);
}
.contact__info {
display: flex; flex-direction: column; gap: 8px;
}
.contact__info a {
font-size: .9375rem; color: var(--indigo);
transition: color .2s;
}
.contact__info a:hover { color: #818CF8; }
/* Form */
.contact__form {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px;
display: flex; flex-direction: column; gap: 18px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__group { display: flex; flex-direction: column; gap: 6px; }
.form__group label {
font-size: .8125rem; font-weight: 600;
color: var(--muted-2); letter-spacing: .02em;
}
.form__group input,
.form__group select,
.form__group textarea {
width: 100%; padding: 11px 14px;
background: var(--bg-2);
border: 1.5px solid var(--border-2);
border-radius: var(--r-sm);
font-size: .9375rem; color: var(--text);
transition: var(--t); outline: none;
}
.form__group input::placeholder,
.form__group textarea::placeholder { color: var(--muted); }
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
border-color: var(--indigo);
box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.form__group select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
padding-right: 40px;
color: var(--text);
}
.form__group select option { background: var(--bg-2); }
.form__group input.invalid, .form__group select.invalid, .form__group textarea.invalid {
border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.form__err { font-size: .8rem; color: var(--red); min-height: 16px; }
.form__group--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.form__group--check input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; accent-color: var(--indigo); cursor: pointer; }
.form__group--check label { font-size: .8125rem; font-weight: 400; color: var(--muted); cursor: pointer; line-height: 1.5; }
.contact__success {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--r-xl); padding: 56px 36px;
text-align: center;
}
.success__icon {
width: 60px; height: 60px; border-radius: 50%;
background: linear-gradient(135deg, var(--green), #059669);
color: #fff; font-size: 1.5rem;
display: flex; align-items: center; justify-content: center;
margin-inline: auto; margin-bottom: 20px;
}
.contact__success h3 { font-size: 1.375rem; color: #F8FAFC; margin-bottom: 10px; font-family: var(--font-b); font-weight: 700; }
.contact__success p { color: var(--muted-2); line-height: 1.65; }
/* ================================================================
FOOTER
================================================================ */
.footer {
background: #040408;
border-top: 1px solid var(--border);
padding-block: 64px 28px;
}
.footer__top {
display: grid; grid-template-columns: 1.4fr 2fr;
gap: 64px; padding-bottom: 48px;
border-bottom: 1px solid var(--border); margin-bottom: 28px;
}
.footer__tagline { font-family: var(--font-h); font-size: .95rem; color: rgba(255,255,255,.8); margin-bottom: 10px; }
.footer__copy { font-size: .875rem; color: rgba(255,255,255,.3); line-height: 1.7; max-width: 300px; margin-bottom: 0; }
.footer__links {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.footer__links h4 {
font-size: .75rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.35);
margin-bottom: 14px; font-family: var(--font-b);
}
.footer__links a,
.footer__legal-btn {
display: block; font-size: .875rem;
color: rgba(255,255,255,.45); margin-bottom: 8px;
transition: color .2s; text-align: left;
}
.footer__links a:hover, .footer__legal-btn:hover { color: rgba(255,255,255,.8); }
.footer__social {
display: flex; gap: 10px; margin-top: 18px;
padding: 0; list-style: none;
}
.footer__social-link {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.6);
transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.footer__social-link:hover {
color: #fff;
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.3);
transform: translateY(-2px);
}
.footer__social-link svg { display: block; }
.footer__bottom {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer__bottom p { font-size: .8125rem; color: rgba(255,255,255,.2); }
/* ================================================================
MODALS
================================================================ */
.modal {
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--bg-2);
color: var(--text);
padding: 0; max-width: 640px; width: calc(100% - 48px);
max-height: 80vh;
}
.modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.modal__inner {
padding: 40px; overflow-y: auto; max-height: 80vh;
display: flex; flex-direction: column; gap: 14px;
}
.modal__inner h2 { font-size: 1.5rem; color: #F8FAFC; margin-bottom: 4px; }
.modal__inner h3 { font-size: 1rem; color: #E2E8F0; margin-top: 8px; font-family: var(--font-b); }
.modal__inner p { font-size: .9375rem; color: var(--muted-2); line-height: 1.7; }
.modal__close {
position: sticky; top: 0; float: right;
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-3); color: var(--muted-2);
font-size: .875rem; display: flex; align-items: center; justify-content: center;
transition: var(--t); margin-bottom: 8px;
}
.modal__close:hover { background: var(--border-2); color: #fff; }
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
:root { --pad: 72px; }
.hero__layout { grid-template-columns: 1fr; gap: 48px; text-align: center; }
.hero__sub { margin-inline: auto; }
.hero__actions { justify-content: center; }
.hero__trust { align-items: center; }
.hero__cards { height: 260px; }
.hpc--center { width: 180px; }
.hpc--classic, .hpc--future { width: 155px; }
.pricing__plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
.options-grid { grid-template-columns: repeat(3, 1fr); }
.sectors__grid { grid-template-columns: repeat(4, 1fr); }
.guarantee__grid { grid-template-columns: 1fr 1fr; }
.proof-banner { grid-template-columns: repeat(2, 1fr); }
.proof-banner__sep{ display: none; }
.contact__inner { grid-template-columns: 1fr; gap: 48px; }
.footer__top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
:root { --pad: 56px; }
/* nav mobile */
.nav__burger { display: flex; }
.nav__links {
position: fixed; inset: 0;
background: rgba(8,8,15,.97); backdrop-filter: blur(20px);
flex-direction: column; justify-content: center;
padding: 24px; transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
z-index: 199;
}
.nav__links.open { transform: none; }
.nav__link { font-size: 1.1rem; padding: 14px 20px; width: 100%; text-align: center; }
.nav__cta { margin-top: 12px; width: 100%; justify-content: center; padding: 16px; }
/* nav social — visible on mobile next to lang switcher */
.nav__social { gap: 6px; }
.nav__social-link { width: 34px; height: 34px; }
.steps__grid { flex-direction: column; }
.step-card__arrow { transform: rotate(90deg); text-align: center; }
.hero__cards { display: none; }
.hero__h1 { font-size: 2.5rem; }
.demo__browser-chrome { padding: 8px 12px; }
.demo__screen { height: 350px; }
.options-grid { grid-template-columns: repeat(2, 1fr); }
.sectors__grid { grid-template-columns: repeat(3, 1fr); }
.guarantee__grid { grid-template-columns: 1fr; }
.proof-banner { grid-template-columns: repeat(2, 1fr); }
.contact__form { padding: 24px 20px; }
.form__row { grid-template-columns: 1fr; }
.footer__links { grid-template-columns: repeat(2, 1fr); }
.footer__bottom { flex-direction: column; }
}
@media (max-width: 480px) {
.hero__h1 { font-size: 2rem; }
.hero__actions { flex-direction: column; align-items: stretch; }
.demo__tabs { gap: 8px; }
.demo__tab { padding: 8px 16px; font-size: .875rem; }
.sectors__grid { grid-template-columns: repeat(2, 1fr); }
.options-grid { grid-template-columns: 1fr 1fr; }
.footer__links { grid-template-columns: 1fr; }
}
/* ================================================================
PLAN CARD — commitment line
================================================================ */
.plan-card__feature--commit {
color: var(--muted) !important;
font-size: .875rem !important;
}
.plan-card__feature--commit svg {
width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
color: var(--muted);
}
.plan-commit-note { font-size: .8rem; color: var(--muted); }
.plan-commit-note a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
/* Options grid highlight */
.options-grid__highlight {
grid-column: 1 / -1;
justify-content: center; gap: 14px;
border-color: rgba(16,185,129,.25) !important;
color: #34D399 !important;
}
.options-grid__highlight:hover { border-color: rgba(16,185,129,.5) !important; }
.options-freedom-note {
font-size: .8rem; color: rgba(110,231,183,.55);
padding-left: 14px;
border-left: 1px solid rgba(16,185,129,.25);
}
/* ================================================================
CONFIGURATEUR / COMMANDER
================================================================ */
.cfg-section { background: var(--bg); }
.cfg__layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 40px;
align-items: start;
}
/* ── Steps ── */
.cfg__form { display: flex; flex-direction: column; gap: 20px; }
.cfg__step {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px;
transition: border-color .2s;
}
.cfg__step:focus-within { border-color: rgba(99,102,241,.3); }
.cfg__step-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 20px;
}
.cfg__step-num {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--indigo), var(--violet));
color: #fff; font-size: .8125rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.cfg__step-title {
font-size: 1rem; font-weight: 700; color: #F8FAFC;
}
.cfg__step-opt {
font-size: .8125rem; font-weight: 400;
color: var(--muted); margin-left: 6px;
}
/* ── Radio plan cards ── */
.cfg__radios { display: flex; flex-direction: column; gap: 10px; }
.cfg__radio {
display: flex; align-items: center; gap: 16px;
background: var(--bg-2);
border: 1.5px solid var(--border-2);
border-radius: var(--r-md);
padding: 16px 18px;
cursor: pointer;
transition: var(--t);
position: relative;
}
.cfg__radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cfg__radio:hover { border-color: rgba(99,102,241,.4); }
.cfg__radio.selected {
border-color: var(--indigo);
background: rgba(99,102,241,.07);
box-shadow: 0 0 0 1px rgba(99,102,241,.2);
}
.cfg__radio--featured { border-color: rgba(99,102,241,.3); }
.cfg__radio--featured.selected {
border-color: var(--indigo);
background: rgba(99,102,241,.1);
}
.cfg__radio--premium { border-color: rgba(245,158,11,.3); }
.cfg__radio--premium.selected {
border-color: #F59E0B;
background: rgba(245,158,11,.08);
box-shadow: 0 0 0 1px rgba(245,158,11,.25);
}
.cfg__radio-badge {
position: absolute; top: -11px; left: 16px;
font-size: .7rem; font-weight: 700;
background: linear-gradient(90deg, var(--indigo), var(--violet));
color: #fff; padding: 3px 10px; border-radius: 100px;
}
.cfg__radio-badge--premium {
background: linear-gradient(90deg, #F59E0B, #FB923C);
color: #1A1208;
}
.cfg__radio-body { flex: 1; }
.cfg__radio-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 2px;
}
.cfg__radio-top strong { font-size: .9375rem; color: #F8FAFC; }
.cfg__radio-price { font-size: 1.125rem; font-weight: 800; color: var(--indigo); letter-spacing: -.01em; }
.cfg__radio-desc { font-size: .8125rem; color: var(--muted-2); }
/* Promo Trio dans le configurateur
Colonne droite (cfg__radio-pricing) :
ligne 1 : pill "Tarif de lancement" (aligné à droite)
ligne 2 : 79 € barré + badge −24 %
ligne 3 : prix actuel mis en avant */
.cfg__radio-pricing {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
line-height: 1.2;
}
.cfg__radio-promo {
display: inline-flex;
align-items: center;
gap: 7px;
}
.cfg__radio-strike {
position: relative;
font-family: var(--font-h);
font-size: .875rem;
font-weight: 700;
color: #F8FAFC;
opacity: .5;
padding: 0 3px;
}
.cfg__radio-strike::after {
content: '';
position: absolute;
left: -2px; right: -2px;
top: 50%;
height: 2px;
background: #EF4444;
transform: rotate(-8deg);
border-radius: 2px;
box-shadow: 0 0 4px rgba(239,68,68,.55);
pointer-events: none;
}
.cfg__radio-discount {
display: inline-flex;
align-items: center;
font-family: var(--font-h);
font-weight: 800;
font-size: .72rem;
letter-spacing: .04em;
color: #064E3B;
background: linear-gradient(90deg, #34D399, #10B981);
padding: 2px 8px;
border-radius: 100px;
box-shadow: 0 1px 6px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.4);
white-space: nowrap;
}
.cfg__radio-launch {
align-self: flex-end;
font-size: .7rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--orange);
background: rgba(249,115,22,.10);
border: 1px solid rgba(249,115,22,.35);
padding: 3px 10px;
border-radius: 100px;
white-space: nowrap;
}
.cfg__radio-launch strong { color: #FED7AA; }
/* Le body reste flex column */
.cfg__radio-body { display: flex; flex-direction: column; }
/* Variantes par thème pour le badge promo */
[data-theme="light"] .cfg__radio-strike { color: #1E293B; }
[data-theme="light"] .cfg__radio-discount {
color: #064E3B;
background: linear-gradient(90deg, #6EE7B7, #34D399);
}
[data-theme="future"] .cfg__radio-discount {
color: #04041C;
background: linear-gradient(90deg, #22D3EE, #A78BFA);
box-shadow: 0 1px 8px rgba(34,211,238,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="retro"] .cfg__radio-discount {
color: #08001A;
background: linear-gradient(90deg, #FFD000, #FF6EC7);
font-family: 'VT323', monospace;
letter-spacing: .08em;
font-size: .85rem;
border: 1px solid #FFD000;
box-shadow: 0 0 8px rgba(255, 208, 0, .55);
}
[data-theme="retro"] .cfg__radio-launch {
font-family: 'VT323', monospace;
letter-spacing: .06em;
text-transform: uppercase;
color: #FFD000;
background: rgba(255, 208, 0, .12);
border-color: rgba(255, 208, 0, .55);
}
[data-theme="retro"] .cfg__radio-launch strong { color: #FF6EC7; }
.cfg__radio-check {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--border-2);
transition: var(--t);
position: relative;
}
.cfg__radio.selected .cfg__radio-check {
border-color: var(--indigo);
background: var(--indigo);
}
.cfg__radio.selected .cfg__radio-check::after {
content: '';
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 6px; height: 6px; border-radius: 50%;
background: #fff;
}
/* ── Domain toggle ── */
.cfg__toggle-row {
display: flex; align-items: center; gap: 16px;
background: var(--bg-2);
border: 1.5px solid var(--border-2);
border-radius: var(--r-md);
padding: 14px 18px;
cursor: pointer;
transition: var(--t);
}
.cfg__toggle-row:hover { border-color: rgba(99,102,241,.4); }
.cfg__toggle-row:has(input:checked) {
border-color: var(--green);
background: rgba(16,185,129,.05);
}
.cfg__toggle-row input[type="checkbox"] {
width: 18px; height: 18px; flex-shrink: 0;
accent-color: var(--green); cursor: pointer;
}
.cfg__toggle-body { flex: 1; }
.cfg__toggle-label { display: block; font-size: .9375rem; font-weight: 600; color: #F8FAFC; }
.cfg__toggle-sub { display: block; font-size: .8rem; color: var(--muted-2); margin-top: 1px; }
.cfg__toggle-price { font-size: .9375rem; font-weight: 700; color: var(--orange); flex-shrink: 0; }
.cfg__toggle-included {
display: none;
font-size: .9375rem; font-weight: 700; color: var(--green);
flex-shrink: 0;
}
.cfg__toggle-row--included {
opacity: .6;
cursor: not-allowed;
background: var(--bg-2);
border-color: var(--border-2);
}
.cfg__toggle-row--included:hover { border-color: var(--border-2); }
.cfg__toggle-row--included input[type="checkbox"] { cursor: not-allowed; }
.cfg__toggle-row--included .cfg__toggle-price { display: none; }
.cfg__toggle-row--included .cfg__toggle-included { display: inline-block; }
/* ── Options grid ── */
.cfg__opts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.cfg__opt {
display: flex; align-items: center; gap: 8px;
background: var(--bg-2);
border: 1.5px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 12px;
cursor: pointer;
transition: var(--t);
font-size: .875rem; color: var(--muted-2);
user-select: none;
}
.cfg__opt input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.cfg__opt:hover { border-color: rgba(99,102,241,.35); color: var(--text); }
.cfg__opt.checked {
border-color: var(--indigo);
background: rgba(99,102,241,.08);
color: #F8FAFC;
}
.cfg__opt-icon {
font-size: 1rem;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 7px;
background: rgba(99,102,241,.12);
border: 1px solid rgba(99,102,241,.22);
color: var(--indigo);
transition: var(--t);
}
.cfg__opt-icon svg { display: block; }
.cfg__opt:hover .cfg__opt-icon {
background: rgba(99,102,241,.18);
border-color: rgba(99,102,241,.4);
}
.cfg__opt.checked .cfg__opt-icon {
background: var(--indigo);
border-color: var(--indigo);
color: #fff;
}
[data-theme="light"] .cfg__opt-icon {
background: rgba(99,102,241,.1);
border-color: rgba(99,102,241,.25);
}
/* ── Hover/focus tooltip bubble — options grid & configurator ── */
.options-grid li[data-tooltip],
.cfg__opt[data-tooltip] { position: relative; }
.options-grid li[data-tooltip]::after,
.cfg__opt[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 260px;
padding: 9px 13px;
background: #0F1117;
color: #E2E8F0;
border: 1px solid rgba(99,102,241,.35);
border-radius: 8px;
font-size: .78rem;
font-weight: 400;
line-height: 1.45;
white-space: normal;
text-align: center;
letter-spacing: 0;
text-transform: none;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 50;
box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
}
.options-grid li[data-tooltip]::before,
.cfg__opt[data-tooltip]::before {
content: '';
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%) translateY(4px);
border: 6px solid transparent;
border-top-color: rgba(99,102,241,.45);
opacity: 0;
transition: opacity .18s ease, transform .18s ease;
z-index: 50;
pointer-events: none;
}
.options-grid li[data-tooltip]:hover::after,
.options-grid li[data-tooltip]:hover::before,
.cfg__opt[data-tooltip]:hover::after,
.cfg__opt[data-tooltip]:focus-within::after,
.cfg__opt[data-tooltip]:hover::before,
.cfg__opt[data-tooltip]:focus-within::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-theme="light"] .options-grid li[data-tooltip]::after,
[data-theme="light"] .cfg__opt[data-tooltip]::after {
background: #FFFFFF;
color: #0F172A;
border-color: rgba(99,102,241,.5);
box-shadow: 0 12px 28px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06);
}
@media (max-width: 640px) {
.options-grid li[data-tooltip]::after,
.cfg__opt[data-tooltip]::after { max-width: 220px; font-size: .76rem; }
}
.cfg__opt--freedom {
grid-column: 1 / -1;
border-color: rgba(16,185,129,.25);
color: #6EE7B7;
background: rgba(16,185,129,.04);
}
.cfg__opt--freedom:hover { border-color: rgba(16,185,129,.5); color: #34D399; }
.cfg__opt--freedom.checked {
border-color: var(--green);
background: rgba(16,185,129,.1);
color: #34D399;
}
/* ── Language option (multi-select dropdown) ── */
.cfg__opt--lang {
grid-column: 1 / -1;
position: relative;
padding: 0;
cursor: default;
display: block;
}
.cfg__opt--lang.has-selection {
border-color: var(--indigo);
background: rgba(99,102,241,.08);
color: #F8FAFC;
}
.cfg__opt--lang.is-open {
border-color: rgba(99,102,241,.55);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.cfg__lang-trigger {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
background: transparent;
border: 0;
color: inherit;
font: inherit;
cursor: pointer;
text-align: left;
}
.cfg__lang-trigger:focus-visible {
outline: 2px solid rgba(99,102,241,.5);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.cfg__lang-text { font-weight: 500; }
.cfg__lang-hint {
margin-left: auto;
font-size: .78rem;
color: var(--muted-2);
font-weight: 600;
}
.cfg__opt--lang.has-selection .cfg__lang-hint { color: #C7D2FE; }
.cfg__lang-caret {
flex-shrink: 0;
color: var(--muted-2);
transition: transform .25s ease;
}
.cfg__opt--lang.is-open .cfg__lang-caret { transform: rotate(180deg); }
.cfg__lang-menu {
position: absolute;
top: calc(100% - 1px);
left: -1.5px;
right: -1.5px;
z-index: 20;
background: var(--bg-2);
border: 1.5px solid rgba(99,102,241,.55);
border-top-color: rgba(99,102,241,.25);
border-bottom-left-radius: var(--r-sm);
border-bottom-right-radius: var(--r-sm);
padding: 6px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
max-height: 280px;
overflow-y: auto;
box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.cfg__lang-menu[hidden] { display: none; }
.cfg__lang-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
transition: background .15s ease, color .15s ease;
font-size: .875rem;
color: var(--muted-2);
user-select: none;
}
.cfg__lang-item:hover { background: rgba(99,102,241,.08); color: var(--text); }
.cfg__lang-item input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cfg__lang-flag { font-size: 1.05rem; line-height: 1; }
.cfg__lang-flag--brand { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.cfg__lang-flag--brand svg { display: block; }
.cfg__lang-name { flex: 1; }
.cfg__lang-tick {
font-size: .85rem;
color: var(--indigo);
opacity: 0;
transition: opacity .15s ease;
}
.cfg__lang-item:has(input:checked) {
background: rgba(99,102,241,.14);
color: #F8FAFC;
}
.cfg__lang-item:has(input:checked) .cfg__lang-tick { opacity: 1; }
@media (max-width: 480px) {
.cfg__lang-menu { grid-template-columns: 1fr; }
}
/* ── Summary panel ── */
.cfg__summary {
position: sticky; top: 90px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 32px 28px;
display: flex; flex-direction: column; gap: 0;
}
/* Bloc "Inclus dans toutes les formules" — étire naturellement la carte */
.cfg__included {
list-style: none;
margin: 22px -4px 0;
padding: 18px 16px 4px;
border-top: 1px dashed var(--border-2);
display: flex;
flex-direction: column;
gap: 10px;
font-size: .82rem;
color: var(--muted-2);
line-height: 1.4;
}
.cfg__included li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.cfg__included li span:first-child {
display: inline-flex;
flex-shrink: 0;
width: 18px; height: 18px;
align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(16,185,129,.15);
color: #34D399;
font-size: .65rem;
font-weight: 700;
margin-top: 1px;
}
.cfg__summary-head {
display: flex; align-items: center; justify-content: space-between;
font-size: .8125rem; font-weight: 700;
color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 20px;
}
.cfg__summary-badge {
font-size: .7rem; font-weight: 600;
background: rgba(255,255,255,.07);
color: var(--muted-2);
border: 1px solid var(--border-2);
padding: 3px 10px; border-radius: 100px;
transition: var(--t);
white-space: nowrap; /* empêche le badge de casser sur deux lignes */
flex-shrink: 0;
}
.cfg__summary-head { gap: 12px; } /* assure un écart minimum avant le badge */
.cfg__summary-badge.is-free {
background: rgba(16,185,129,.1);
color: #34D399;
border-color: rgba(16,185,129,.3);
}
.cfg__lines { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cfg__line {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
font-size: .9rem; color: var(--muted-2);
animation: lineIn .2s ease;
}
.cfg__line span:first-child { min-width: 0; } /* texte gauche peut wrap */
.cfg__line span:last-child { white-space: nowrap; flex-shrink: 0; } /* prix ne casse jamais */
@keyframes lineIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.cfg__line--base span:first-child { color: var(--text); font-weight: 600; }
.cfg__line--base span:last-child { color: var(--text); font-weight: 700; }
.cfg__line--opt span:first-child { color: var(--muted-2); font-size: .85rem; }
.cfg__line--opt span:last-child { color: var(--orange); font-size: .85rem; font-weight: 600; }
.cfg__line--domain span:last-child { color: var(--orange); font-weight: 600; }
.cfg__line--free { color: #34D399 !important; font-size: .85rem; font-weight: 600; }
.cfg__divider {
height: 1px; background: var(--border);
margin-bottom: 16px;
}
.cfg__total-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 20px;
}
.cfg__total-row span { font-size: .875rem; color: var(--muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cfg__total-row strong {
font-family: var(--font-h); font-size: 1.75rem; font-weight: 800;
background: linear-gradient(90deg, #818CF8, #A78BFA);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cfg__total-row strong small { font-size: .875rem; color: var(--muted); font-family: var(--font-b); font-weight: 500; margin-left: 2px; white-space: nowrap; }
.cfg__cta { margin-bottom: 10px; }
.cfg__cta:disabled { opacity: .7; cursor: not-allowed; }
.cfg__cta .btn__loading { display: inline-flex; align-items: center; gap: 8px; }
.cfg__cta .btn__loading::before {
content: ''; width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
animation: cfgSpin .7s linear infinite;
}
@keyframes cfgSpin { to { transform: rotate(360deg); } }
.cfg__error {
font-size: .85rem;
color: #FCA5A5;
background: rgba(239,68,68,.08);
border: 1px solid rgba(239,68,68,.25);
border-radius: var(--r-md);
padding: 10px 14px;
margin-bottom: 12px;
line-height: 1.5;
}
/* Local dev fallback — informational, not alarming */
.cfg__error.cfg__error--dev {
color: #BFDBFE;
background: rgba(99,102,241,.08);
border-color: rgba(99,102,241,.25);
}
.cfg__footer-note {
font-size: .8rem; color: var(--muted); line-height: 1.6; text-align: center;
}
/* ── Responsive configurateur ── */
@media (max-width: 1024px) {
.cfg__layout { grid-template-columns: 1fr; }
.cfg__summary { position: static; }
.cfg__opts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.cfg__opts-grid { grid-template-columns: repeat(2, 1fr); }
.cfg__opt--freedom { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.cfg__opts-grid { grid-template-columns: 1fr 1fr; }
.cfg__radio-top { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* ================================================================
MEDAL BADGE — Prix de l'Innovation 2026
================================================================ */
.medal-badge {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 20px 8px 0;
background: linear-gradient(110deg, rgba(251,191,36,.12) 0%, rgba(180,83,9,.06) 100%);
border: 1px solid rgba(251,191,36,.32);
border-radius: 100px;
margin-bottom: 18px;
position: relative;
}
/* Gold coin */
.medal-badge__coin {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
background: conic-gradient(
from 135deg,
#92400E 0deg, #FCD34D 40deg, #F59E0B 80deg,
#FDE68A 120deg, #D97706 160deg, #FCD34D 200deg,
#F59E0B 240deg, #FDE68A 280deg, #92400E 360deg
);
box-shadow:
0 0 0 2px rgba(251,191,36,.35),
0 0 20px rgba(251,191,36,.45),
inset 0 2px 3px rgba(255,255,255,.35),
inset 0 -2px 3px rgba(120,53,15,.4);
display: flex;
align-items: center;
justify-content: center;
color: #7C2D12;
margin-left: 2px;
position: relative;
z-index: 1;
}
/* Ribbon hanging below the coin */
.medal-badge__ribbons {
position: absolute;
bottom: -14px;
left: 11px;
display: flex;
gap: 2px;
z-index: 0;
}
.medal-badge__ribbons span {
display: block;
width: 11px;
height: 18px;
clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.medal-badge__ribbons span:first-child { background: #6366F1; }
.medal-badge__ribbons span:last-child { background: #8B5CF6; }
/* Text */
.medal-badge__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.medal-badge__name {
font-size: .8rem;
font-weight: 800;
color: #FCD34D;
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1;
}
.medal-badge__cat {
font-size: .72rem;
color: #FDE68A;
opacity: .75;
letter-spacing: .03em;
}
/* ── Floating variant — top-right of hero preview cards ── */
.medal-badge--float {
position: absolute;
top: -34px;
right: -12px;
z-index: 8;
margin-bottom: 0;
padding: 7px 18px 7px 0;
background: linear-gradient(110deg, rgba(251,191,36,.18) 0%, rgba(180,83,9,.1) 100%);
border-color: rgba(251,191,36,.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 12px 36px rgba(0,0,0,.5),
0 0 28px rgba(251,191,36,.15),
inset 0 1px 0 rgba(255,255,255,.08);
transform-origin: 100% 50%;
animation: medalFloat 4.5s ease-in-out infinite;
}
.medal-badge--float::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120% 100% at 0% 50%, rgba(251,191,36,.18), transparent 60%);
pointer-events: none;
}
@keyframes medalFloat {
0%, 100% { transform: rotate(2.5deg) translateY(0); }
50% { transform: rotate(2.5deg) translateY(-7px); }
}
.medal-badge--float .medal-badge__coin { width: 44px; height: 44px; }
@media (max-width: 968px) {
.medal-badge--float { top: -28px; right: 0; transform: rotate(2deg); animation-duration: 5s; }
}
@media (max-width: 768px) {
.medal-badge--float { display: none; }
}
/* ================================================================
PAGE CARTE — Hero
================================================================ */
.page-hero {
padding-top: 120px;
padding-bottom: 0;
position: relative;
overflow: hidden;
}
.page-hero__inner {
text-align: center;
padding-bottom: 56px;
}
.page-hero__h1 {
font-size: clamp(2.4rem, 6vw, 4rem);
font-family: var(--font-h);
line-height: 1.08;
letter-spacing: -.03em;
color: #F8FAFC;
margin: 16px 0 20px;
}
.page-hero__sub {
font-size: 1.0625rem;
color: var(--muted-2);
max-width: 480px;
margin-inline: auto;
line-height: 1.65;
}
/* ── Network stats strip ── */
.net-stats {
background: var(--bg-card);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 28px 0;
}
.net-stats__inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.net-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 40px;
}
.net-stat strong {
display: block;
font-size: clamp(2rem, 4vw, 2.75rem);
font-family: var(--font-h);
font-weight: 800;
background: linear-gradient(135deg, #818CF8, #A78BFA, #FB923C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.net-stat span {
font-size: .8125rem;
color: var(--muted);
font-weight: 500;
margin-top: 4px;
white-space: nowrap;
}
.net-stat__sep {
width: 1px;
height: 48px;
background: var(--border);
flex-shrink: 0;
}
/* ================================================================
MAP SECTION
================================================================ */
.map-section { padding-block: 72px; }
/* Legend */
.map-legend {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.legend-item {
display: flex;
align-items: center;
gap: 9px;
font-size: .875rem;
color: var(--muted-2);
}
.legend-dot {
display: inline-block;
flex-shrink: 0;
border-radius: 50%;
}
.legend-dot--hq {
width: 14px; height: 14px;
background: #8B5CF6;
box-shadow: 0 0 0 3px rgba(139,92,246,.2), 0 0 10px rgba(139,92,246,.5);
}
.legend-dot--active {
width: 12px; height: 12px;
background: #6366F1;
box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.legend-dot--intl {
width: 12px; height: 12px;
background: var(--cyan);
box-shadow: 0 0 0 3px rgba(6,182,212,.15);
}
.legend-dot--future {
width: 13px; height: 13px;
background: transparent;
border: 2.5px dashed var(--orange);
box-shadow: 0 0 8px rgba(249,115,22,.25);
}
/* Map container */
.map-container {
height: 580px;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border-2);
box-shadow: var(--sh-card);
}
.map-hint {
margin-top: 10px;
font-size: .78rem;
color: var(--muted);
text-align: center;
}
/* ── Leaflet dark theme overrides ── */
/* Reset fix: global `img { max-width:100% }` breaks tile rendering */
.leaflet-container img { max-width: none !important; display: inline !important; }
.leaflet-tile { max-width: none !important; display: inline !important; }
.leaflet-container { background: #0A0A14 !important; font-family: var(--font-b); }
.leaflet-control-zoom a {
background: var(--bg-card) !important;
border-color: var(--border-2) !important;
color: var(--text) !important;
line-height: 26px !important;
}
.leaflet-control-zoom a:hover {
background: var(--bg-3) !important;
color: #fff !important;
}
.leaflet-control-zoom { border: 1px solid var(--border-2) !important; border-radius: var(--r-sm) !important; }
.leaflet-control-attribution {
background: rgba(8,8,15,.75) !important;
backdrop-filter: blur(6px);
color: var(--muted) !important;
font-size: .7rem !important;
border-radius: var(--r-sm) 0 0 0 !important;
}
.leaflet-control-attribution a { color: var(--indigo) !important; }
/* ── Custom pin markers ── */
.map-pin {
border-radius: 50%;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
.map-pin:hover { transform: scale(1.5) !important; }
.map-pin--hq {
background: #8B5CF6;
border: 2.5px solid rgba(139,92,246,.5);
box-shadow: 0 0 0 4px rgba(139,92,246,.2), 0 0 20px rgba(139,92,246,.7);
animation: pin-pulse-hq 2.4s ease-in-out infinite;
}
@keyframes pin-pulse-hq {
0%, 100% { box-shadow: 0 0 0 4px rgba(139,92,246,.2), 0 0 16px rgba(139,92,246,.6); }
50% { box-shadow: 0 0 0 8px rgba(139,92,246,.1), 0 0 28px rgba(139,92,246,.9); }
}
.map-pin--active {
background: #6366F1;
border: 2px solid rgba(99,102,241,.45);
box-shadow: 0 0 12px rgba(99,102,241,.55);
}
.map-pin--intl {
background: var(--cyan);
border: 2px solid rgba(6,182,212,.45);
box-shadow: 0 0 12px rgba(6,182,212,.5);
}
.map-pin--future {
background: transparent;
border: 2.5px dashed var(--orange);
box-shadow: 0 0 10px rgba(249,115,22,.4);
animation: pin-pulse-future 2s ease-in-out infinite;
}
@keyframes pin-pulse-future {
0%, 100% { box-shadow: 0 0 10px rgba(249,115,22,.35); opacity: .85; }
50% { box-shadow: 0 0 20px rgba(249,115,22,.75); opacity: 1; }
}
/* ── Leaflet popup dark theme ── */
.map-popup .leaflet-popup-content-wrapper {
background: var(--bg-card) !important;
border: 1px solid var(--border-2);
border-radius: var(--r-lg) !important;
box-shadow: 0 8px 40px rgba(0,0,0,.6) !important;
color: var(--text);
padding: 0 !important;
}
.map-popup .leaflet-popup-content {
margin: 0 !important;
padding: 16px 20px !important;
min-width: 160px;
}
.map-popup .leaflet-popup-tip { background: var(--bg-card) !important; }
.mp-inner { display: flex; flex-direction: column; gap: 4px; }
.mp-name { font-size: .9375rem; font-weight: 700; color: #F8FAFC; }
.mp-region { font-size: .8rem; color: var(--muted-2); }
.mp-badge {
display: inline-block;
margin-top: 8px;
padding: 3px 10px;
border-radius: 100px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
width: fit-content;
}
.mp-badge--hq { background: rgba(139,92,246,.18); color: #C4B5FD; border: 1px solid rgba(139,92,246,.3); }
.mp-badge--active { background: rgba(99,102,241,.15); color: #A5B4FC; border: 1px solid rgba(99,102,241,.25); }
.mp-badge--intl { background: rgba(6,182,212,.15); color: #67E8F9; border: 1px solid rgba(6,182,212,.25); }
.mp-badge--future { background: rgba(249,115,22,.14); color: #FDBA74; border: 1px solid rgba(249,115,22,.25); }
/* ================================================================
RECRUTEMENT
================================================================ */
.recruit-section { background: var(--bg-2); }
.recruit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 28px;
margin-top: 56px;
}
.recruit-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px;
display: flex;
flex-direction: column;
transition: var(--t);
}
.recruit-card:hover {
border-color: rgba(99,102,241,.4);
transform: translateY(-5px);
box-shadow: 0 20px 56px rgba(0,0,0,.45);
}
.recruit-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.recruit-tag {
display: inline-block;
padding: 4px 12px;
border-radius: 100px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
}
.recruit-tag--contract {
background: rgba(99,102,241,.12);
color: #A5B4FC;
border: 1px solid rgba(99,102,241,.22);
}
.recruit-tag--location {
background: rgba(249,115,22,.1);
color: #FDBA74;
border: 1px solid rgba(249,115,22,.2);
}
.recruit-tag--level {
background: rgba(255,255,255,.06);
color: var(--muted-2);
border: 1px solid var(--border);
}
.recruit-card__title {
font-size: 1.375rem;
font-family: var(--font-h);
color: #F8FAFC;
margin-bottom: 10px;
line-height: 1.2;
}
.recruit-card__desc {
font-size: .9375rem;
color: var(--muted-2);
line-height: 1.65;
margin-bottom: 24px;
flex: 1;
}
.recruit-card__perks {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 9px;
}
.recruit-card__perks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .875rem;
color: var(--muted-2);
line-height: 1.45;
}
.recruit-card__perks li::before {
content: '✓';
color: var(--indigo);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.recruit-note {
text-align: center;
margin-top: 48px;
font-size: .9375rem;
color: var(--muted);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.net-stat { padding: 8px 24px; }
.map-container { height: 440px; }
.recruit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.net-stat { padding: 12px 16px; width: 50%; }
.net-stat__sep { display: none; }
.net-stats__inner { justify-content: flex-start; }
.map-container { height: 340px; }
.page-hero__inner { padding-bottom: 40px; }
.recruit-card { padding: 28px 22px; }
}
/* ================================================================
LANGUAGE SWITCHER
================================================================ */
.lang-sw {
position: relative;
flex-shrink: 0;
z-index: 202;
}
.lang-sw__btn {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
background: rgba(255,255,255,.06);
border: 1px solid var(--border-2);
border-radius: var(--r-sm);
color: rgba(255,255,255,.75);
font-size: .8125rem;
font-weight: 600;
cursor: pointer;
transition: var(--t);
white-space: nowrap;
}
.lang-sw__btn:hover {
background: rgba(255,255,255,.1);
color: #fff;
border-color: rgba(255,255,255,.2);
}
.lang-sw__flag { font-size: 1rem; line-height: 1; }
.lang-sw__code { letter-spacing: .04em; }
.lang-sw__caret {
color: rgba(255,255,255,.45);
transition: transform .2s ease;
flex-shrink: 0;
}
.lang-sw__btn[aria-expanded="true"] .lang-sw__caret { transform: rotate(180deg); }
/* Dropdown */
.lang-sw__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
background: var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-md);
box-shadow: 0 16px 48px rgba(0,0,0,.6);
list-style: none;
padding: 6px;
display: none;
z-index: 300;
overflow: hidden;
}
.lang-sw__menu.open { display: block; animation: langMenuIn .18s ease; }
@keyframes langMenuIn {
from { opacity: 0; transform: translateY(-6px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.lang-sw__opt {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--r-sm);
font-size: .875rem;
color: var(--muted-2);
cursor: pointer;
transition: background .15s, color .15s;
outline: none;
}
.lang-sw__opt:hover,
.lang-sw__opt:focus { background: rgba(255,255,255,.07); color: #fff; }
.lang-sw__opt.active { color: #fff; font-weight: 600; background: rgba(99,102,241,.15); }
.lang-sw__opt.active::after {
content: '✓';
margin-left: auto;
color: var(--indigo);
font-size: .75rem;
}
/* RTL adjustments */
[dir="rtl"] .lang-sw__menu { right: auto; left: 0; }
[dir="rtl"] .lang-sw__opt.active::after { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav__links { direction: rtl; }
/* Mobile — keep switcher in the nav bar above the overlay */
@media (max-width: 768px) {
.nav__inner { justify-content: flex-start; }
.nav__logo { margin-right: auto; }
.lang-sw { margin-right: 6px; }
.lang-sw__code { display: none; }
.lang-sw__btn { padding: 6px 8px; gap: 3px; }
.lang-sw__caret { display: none; }
/* Dropdown opens upward on small screens if near bottom — keep right-aligned */
}
/* ================================================================
PARRAINAGE PAGE
================================================================ */
/* ── Hero extras ── */
.parr-hero .page-hero__inner { padding-bottom: 56px; }
.parr-hero__actions {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 14px; margin: 32px 0 28px;
}
.parr-hero__trust {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 24px 32px; list-style: none; margin-top: 8px;
}
.parr-hero__trust li {
display: inline-flex; align-items: center; gap: 8px;
font-size: .875rem; color: var(--muted-2);
}
.parr-hero__trust li svg {
width: 16px; height: 16px; color: var(--green); flex-shrink: 0;
}
/* ── Timeline (4 étapes) ── */
.parr-steps { background: var(--bg-2); }
.parr-timeline {
position: relative;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
counter-reset: step;
}
.parr-timeline::before {
content: '';
position: absolute;
top: 28px;
left: 6%;
right: 6%;
height: 2px;
background: linear-gradient(90deg,
rgba(99,102,241,.05),
rgba(99,102,241,.45) 25%,
rgba(139,92,246,.45) 75%,
rgba(249,115,22,.55));
border-radius: 2px;
z-index: 0;
}
.parr-timeline__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 1;
}
.parr-timeline__dot {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--bg-card);
border: 2px solid rgba(99,102,241,.45);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-h);
font-weight: 800;
color: var(--indigo);
box-shadow: 0 0 0 6px var(--bg-2), 0 0 24px rgba(99,102,241,.25);
margin-bottom: 22px;
transition: var(--t);
}
.parr-timeline__num { font-size: 1rem; letter-spacing: -.02em; }
.parr-timeline__dot--reward {
border-color: var(--orange);
color: var(--orange);
background: rgba(249,115,22,.08);
box-shadow: 0 0 0 6px var(--bg-2), 0 0 28px rgba(249,115,22,.35);
}
.parr-timeline__card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 26px 22px;
transition: var(--t);
width: 100%;
flex: 1;
}
.parr-timeline__card:hover {
border-color: rgba(99,102,241,.35);
transform: translateY(-4px);
box-shadow: 0 0 0 1px rgba(99,102,241,.15), var(--sh-card);
}
.parr-timeline__card--reward:hover { border-color: rgba(249,115,22,.5); box-shadow: 0 0 0 1px rgba(249,115,22,.2), var(--sh-card); }
.parr-timeline__icon {
width: 44px; height: 44px;
background: rgba(99,102,241,.12);
border: 1px solid rgba(99,102,241,.2);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
color: var(--indigo);
margin: 0 auto 14px;
}
.parr-timeline__icon svg { width: 22px; height: 22px; }
.parr-timeline__icon--reward {
background: rgba(249,115,22,.12);
border-color: rgba(249,115,22,.25);
color: var(--orange);
}
.parr-timeline__card h3 {
font-size: 1rem;
color: #F8FAFC;
margin-bottom: 8px;
font-family: var(--font-b);
font-weight: 700;
line-height: 1.35;
}
.parr-timeline__card p {
font-size: .9rem;
color: var(--muted-2);
line-height: 1.65;
}
.parr-timeline__card p strong { color: #F8FAFC; }
/* ── Rewards ── */
.parr-rewards { background: var(--bg); }
.parr-rewards__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 980px;
margin-inline: auto;
}
.reward-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px 32px 32px;
transition: var(--t);
display: flex;
flex-direction: column;
}
.reward-card:hover {
border-color: rgba(99,102,241,.4);
transform: translateY(-4px);
box-shadow: var(--sh-card);
}
.reward-card--featured {
border-color: rgba(249,115,22,.4);
background:
radial-gradient(120% 80% at 100% 0%, rgba(249,115,22,.08), transparent 50%),
var(--bg-card);
}
.reward-card--featured:hover {
border-color: rgba(249,115,22,.65);
box-shadow: 0 0 0 1px rgba(249,115,22,.2), var(--sh-card);
}
.reward-card__badge {
position: absolute;
top: -14px; left: 50%; transform: translateX(-50%);
background: linear-gradient(90deg, var(--orange), #FB923C);
color: #fff;
font-size: .75rem; font-weight: 700;
padding: 6px 14px;
border-radius: 100px;
letter-spacing: .04em;
white-space: nowrap;
}
.reward-card__icon {
width: 56px; height: 56px;
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
background: rgba(99,102,241,.12);
border: 1px solid rgba(99,102,241,.25);
color: var(--indigo);
margin-bottom: 18px;
}
.reward-card--featured .reward-card__icon {
background: rgba(249,115,22,.12);
border-color: rgba(249,115,22,.3);
color: var(--orange);
}
.reward-card__icon svg { width: 28px; height: 28px; }
.reward-card__tag {
display: inline-block;
font-size: .7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--muted-2);
margin-bottom: 8px;
}
.reward-card__title {
font-family: var(--font-h);
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
font-weight: 800;
color: #F8FAFC;
margin-bottom: 14px;
letter-spacing: -.02em;
line-height: 1.15;
}
.reward-card__desc {
font-size: .95rem;
color: var(--muted-2);
line-height: 1.65;
margin-bottom: 20px;
}
.reward-card__features {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 22px;
}
.reward-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .9rem;
color: var(--text);
}
.reward-card__features .ci {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--green);
margin-top: 2px;
}
.reward-card__value {
margin-top: auto;
display: flex;
align-items: baseline;
justify-content: space-between;
padding-top: 18px;
border-top: 1px dashed var(--border-2);
}
.reward-card__value span {
font-size: .8rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
}
.reward-card__value strong {
font-family: var(--font-h);
font-size: 1.25rem;
background: linear-gradient(135deg, #818CF8, #A78BFA);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-weight: 800;
}
.reward-card--featured .reward-card__value strong {
background: linear-gradient(135deg, #FB923C, #F97316);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.parr-rewards__note {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
margin-top: 32px;
padding: 14px 20px;
max-width: 560px;
margin-inline: auto;
background: rgba(99,102,241,.08);
border: 1px solid rgba(99,102,241,.2);
border-radius: 100px;
font-size: .9rem;
color: var(--muted-2);
}
.parr-rewards__note span:first-child { font-size: 1.1rem; }
/* ── Benefits (parrain / filleul) ── */
.parr-benefits { background: var(--bg-2); }
.benefits__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.benefit-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px 32px;
transition: var(--t);
position: relative;
overflow: hidden;
}
.benefit-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.08), transparent 55%);
pointer-events: none;
}
.benefit-card--filleul::before {
background: radial-gradient(120% 80% at 100% 0%, rgba(249,115,22,.08), transparent 55%);
}
.benefit-card:hover {
border-color: rgba(99,102,241,.35);
transform: translateY(-4px);
box-shadow: var(--sh-card);
}
.benefit-card--filleul:hover { border-color: rgba(249,115,22,.4); }
.benefit-card__head { margin-bottom: 24px; position: relative; }
.benefit-card__role {
display: inline-block;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
padding: 5px 12px;
border-radius: 100px;
background: rgba(99,102,241,.14);
color: var(--indigo);
border: 1px solid rgba(99,102,241,.28);
margin-bottom: 14px;
}
.benefit-card__role--alt {
background: rgba(249,115,22,.14);
color: var(--orange);
border-color: rgba(249,115,22,.3);
}
.benefit-card__head h3 {
font-family: var(--font-h);
font-size: 1.5rem;
font-weight: 800;
color: #F8FAFC;
letter-spacing: -.02em;
}
.benefit-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.benefit-card__list li {
display: flex;
align-items: flex-start;
gap: 14px;
}
.benefit-card__bullet {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: var(--r-md);
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.benefit-card__list strong {
display: block;
font-size: .95rem;
color: #F8FAFC;
font-weight: 700;
margin-bottom: 4px;
}
.benefit-card__list p {
font-size: .875rem;
color: var(--muted-2);
line-height: 1.6;
}
/* ── CTA final ── */
.parr-cta { background: var(--bg); padding-block: 96px; }
.parr-cta__card {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: center;
background:
radial-gradient(80% 100% at 0% 0%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(80% 100% at 100% 100%, rgba(249,115,22,.14), transparent 60%),
var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-xl);
padding: 56px 56px;
overflow: hidden;
}
.parr-cta__card::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 80%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 80%);
pointer-events: none;
}
.parr-cta__copy { position: relative; z-index: 1; }
.parr-cta__title {
font-family: var(--font-h);
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 800;
color: #F8FAFC;
letter-spacing: -.025em;
line-height: 1.1;
margin: 12px 0 16px;
}
.parr-cta__lead {
font-size: 1rem;
color: var(--muted-2);
line-height: 1.7;
margin-bottom: 18px;
}
.parr-cta__list {
list-style: none;
display: flex; flex-direction: column;
gap: 8px;
font-size: .9rem;
color: var(--text);
}
.parr-cta__actions {
position: relative; z-index: 1;
display: flex; flex-direction: column;
gap: 12px;
}
.parr-cta__trust {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 6px;
font-size: .8rem;
color: var(--muted);
line-height: 1.5;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.parr-timeline {
grid-template-columns: 1fr 1fr;
}
.parr-timeline::before { display: none; }
.parr-rewards__grid,
.benefits__grid { grid-template-columns: 1fr; max-width: 600px; }
.parr-cta__card {
grid-template-columns: 1fr;
padding: 40px 32px;
gap: 32px;
}
}
@media (max-width: 600px) {
.parr-timeline { grid-template-columns: 1fr; gap: 18px; }
.parr-timeline__dot { margin-bottom: 16px; }
.reward-card,
.benefit-card { padding: 28px 22px; }
.parr-hero__trust { gap: 14px 22px; }
.parr-cta { padding-block: 64px; }
.parr-cta__card { padding: 32px 24px; }
}
/* ================================================================
SUCCESS PAGE (post-Stripe checkout)
================================================================ */
.success-card {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: 24px 8px 56px;
}
.success-card__icon {
width: 80px; height: 80px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
background: rgba(16,185,129,.12);
border: 1px solid rgba(16,185,129,.4);
color: var(--green);
box-shadow: 0 0 0 8px rgba(16,185,129,.06), 0 12px 40px rgba(16,185,129,.18);
animation: successPop .6s cubic-bezier(.34,1.56,.64,1);
}
.success-card__icon svg { width: 40px; height: 40px; }
@keyframes successPop {
0% { transform: scale(.4); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); }
}
.success-steps {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
margin: 36px auto 32px;
max-width: 480px;
}
.success-steps li {
display: flex;
gap: 16px;
align-items: flex-start;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 18px 20px;
}
.success-steps__num {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--indigo), var(--violet));
color: #fff;
font-family: var(--font-h);
font-weight: 800;
font-size: .9rem;
display: flex; align-items: center; justify-content: center;
}
.success-steps strong {
display: block;
font-size: .95rem;
color: #F8FAFC;
margin-bottom: 4px;
}
.success-steps p {
font-size: .875rem;
color: var(--muted-2);
line-height: 1.55;
}
.success-card__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.success-card__ref {
margin-top: 28px;
font-size: .75rem;
color: var(--muted);
letter-spacing: .04em;
font-family: ui-monospace, SFMono-Regular, monospace;
}
/* ================================================================
GALERIE — 9 démos
================================================================ */
.gallery-section { background: var(--bg-2); }
.gallery-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 28px;
margin: -32px auto 36px;
font-size: .8125rem;
color: var(--muted-2);
}
.gallery-legend__item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.gallery-legend__dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.gallery-legend__dot--classic { background: #1E3A5F; box-shadow: 0 0 0 2px rgba(30,58,95,.25); }
.gallery-legend__dot--retro { background: #00FF41; box-shadow: 0 0 0 2px rgba(0,255,65,.25); }
.gallery-legend__dot--future { background: var(--violet); box-shadow: 0 0 0 2px rgba(139,92,246,.25); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.gallery-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px;
text-align: left;
cursor: pointer;
transition: var(--t);
display: flex;
flex-direction: column;
gap: 12px;
font-family: inherit;
color: inherit;
width: 100%;
position: relative;
overflow: hidden;
}
.gallery-card:hover {
border-color: rgba(99,102,241,.4);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.15);
}
.gallery-card:focus-visible {
outline: 2px solid var(--indigo);
outline-offset: 3px;
}
/* Browser chrome strip */
.gallery-card__chrome {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
border-radius: 8px;
}
.gallery-card__dots {
display: inline-flex;
gap: 4px;
flex-shrink: 0;
}
.gallery-card__dots span {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,.2);
}
.gallery-card__dots span:nth-child(1) { background: #FF5F57; }
.gallery-card__dots span:nth-child(2) { background: #FEBC2E; }
.gallery-card__dots span:nth-child(3) { background: #28C840; }
.gallery-card__url {
font-size: .7rem;
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, monospace;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Screenshot preview */
.gallery-card__preview {
position: relative;
height: 160px;
border-radius: 10px;
overflow: hidden;
background: #0F172A;
}
.gallery-card__screenshot {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform .35s ease;
}
.gallery-card:hover .gallery-card__screenshot { transform: scale(1.04); }
.gallery-card__preview::after {
content: '';
position: absolute; inset: 0;
background: rgba(0,0,0,.08);
pointer-events: none;
}
.gallery-card__icon {
font-size: 2rem;
position: relative;
z-index: 1;
line-height: 1;
filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.gallery-card__brand {
font-family: var(--font-h);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -.01em;
position: relative;
z-index: 1;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.gallery-card__type {
font-size: .7rem;
position: relative;
z-index: 1;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
/* Sector-specific gradients (mirror /portfolio/index.html palette) */
.gallery-card__preview--architecture { background: linear-gradient(145deg, #1C1814 0%, #2A2418 40%, #4A3C28 70%, #B09060 100%); }
.gallery-card__preview--bienetre { background: linear-gradient(145deg, #2A1E10 0%, #4D7A5A 35%, #FAF6EF 70%, #C4714A 100%); color: #2A1E10; }
.gallery-card__preview--saas { background: linear-gradient(145deg, #070B12 0%, #1a0533 40%, #7C3AED 75%, #0EA5E9 100%); }
.gallery-card__preview--photographe { background: linear-gradient(145deg, #080808 0%, #1a1410 40%, #3a2818 70%, #B8906A 100%); }
.gallery-card__preview--boulangerie { background: linear-gradient(145deg, #2D1A08 0%, #5a3010 40%, #E8A83A 80%, #FBF6EE 100%); color: #2D1A08; }
.gallery-card__preview--immobilier { background: linear-gradient(145deg, #1A2744 0%, #243460 45%, #C9A84C 80%, #F8F9FB 100%); }
.gallery-card__preview--graphotherapeute { background: linear-gradient(145deg, #2E1B0E 0%, #6B9E7A 45%, #F2E8D8 80%, #8C3A4E 100%); }
.gallery-card__preview--coiffeur { background: linear-gradient(145deg, #2D1A08 0%, #5E1A30 45%, #C9A84C 80%, #FAF6EE 100%); }
.gallery-card__preview--tatoueur { background: linear-gradient(145deg, #04070C 0%, #0E1520 40%, #2A4A7F 75%, #4A6FA5 100%); }
/* Light-card variants need darker overlay text contrast */
.gallery-card__preview--bienetre,
.gallery-card__preview--boulangerie {
color: #1A1208;
}
.gallery-card__preview--bienetre::after,
.gallery-card__preview--boulangerie::after {
background: rgba(255,255,255,.18);
}
.gallery-card__preview--bienetre .gallery-card__type,
.gallery-card__preview--boulangerie .gallery-card__type {
color: rgba(26,18,8,.65);
}
.gallery-card__preview--bienetre .gallery-card__brand,
.gallery-card__preview--boulangerie .gallery-card__brand {
text-shadow: 0 1px 4px rgba(255,255,255,.4);
}
/* Card meta (description + tags) */
.gallery-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 0 4px;
}
.gallery-card__sector {
font-size: .85rem;
font-weight: 500;
color: var(--muted-2);
line-height: 1.4;
}
.gallery-card__tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.gallery-card__tag {
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 3px 9px;
border-radius: 100px;
background: rgba(99,102,241,.1);
color: #C7D2FE;
border: 1px solid rgba(99,102,241,.2);
white-space: nowrap;
}
.gallery-card__view {
display: block;
text-align: center;
font-size: .85rem;
font-weight: 600;
color: var(--indigo);
padding-top: 6px;
border-top: 1px dashed var(--border-2);
opacity: 0;
transform: translateY(4px);
transition: var(--t);
}
.gallery-card:hover .gallery-card__view,
.gallery-card:focus-visible .gallery-card__view {
opacity: 1;
transform: none;
}
.gallery-note {
text-align: center;
margin: 36px auto 0;
max-width: 600px;
font-size: .9rem;
color: var(--muted-2);
line-height: 1.7;
}
.gallery-note strong { color: var(--text); }
/* ── Responsive ── */
@media (max-width: 920px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.gallery-grid { grid-template-columns: 1fr; }
.gallery-legend { gap: 10px 20px; margin-top: -16px; }
}
/* ================================================================
DEMO MODAL
================================================================ */
.demo-modal {
border: none;
background: transparent;
padding: 0;
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%;
margin: 0;
inset: 0;
overflow: hidden;
}
.demo-modal::backdrop {
background: rgba(2,2,8,.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.demo-modal[open] {
display: flex;
align-items: center;
justify-content: center;
animation: demoModalIn .25s ease-out;
}
@keyframes demoModalIn {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
.demo-modal__panel {
width: min(1100px, calc(100vw - 32px));
height: calc(100vh - 32px);
max-height: calc(100vh - 32px);
background: var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.demo-modal__header {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.demo-modal__chrome {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.demo-modal__dots {
display: inline-flex; gap: 6px; flex-shrink: 0;
}
.demo-modal__dots span {
width: 11px; height: 11px; border-radius: 50%;
}
.demo-modal__url {
font-size: .85rem;
color: var(--muted-2);
background: rgba(255,255,255,.04);
padding: 5px 14px;
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, monospace;
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.demo-modal__meta {
font-size: .75rem;
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.demo-modal__close {
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(255,255,255,.06);
color: var(--text);
font-size: 1rem;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: var(--t);
}
.demo-modal__close:hover {
background: rgba(255,255,255,.12);
color: #fff;
}
.demo-modal__screen {
flex: 1;
overflow: hidden;
background: #fff;
display: flex;
}
.demo-modal__screen .ds {
width: 100%;
display: block;
}
.demo-modal__iframe {
flex: 1;
width: 100%;
height: 100%;
border: 0;
display: block;
background: #fff;
}
/* ================================================================
DEMO MOCKUP — mini one-page rendu inline dans la modale.
Pas d'iframe, pas de fichier /portfolio/ — juste du HTML/CSS
stylé par data-palette pour donner à chaque démo son identité.
================================================================ */
.demo-mockup {
--m-bg: #FFFFFF;
--m-fg: #0F172A;
--m-muted: #64748B;
--m-accent: #6366F1;
--m-accent-2: #8B5CF6;
--m-band: #F1F5F9;
--m-card: #F8FAFC;
--m-border: rgba(15,23,42,.08);
--m-font-h: 'Syne', sans-serif;
--m-font-b: 'Inter', sans-serif;
background: var(--m-bg);
color: var(--m-fg);
font-family: var(--m-font-b);
width: 100%;
font-size: 14px;
line-height: 1.55;
}
/* ── Palettes (1 par métier, ambiance distincte) ─────────────── */
.demo-mockup[data-palette="mono"] {
--m-bg: #FFFFFF; --m-fg: #0F172A;
--m-accent: #0F172A; --m-accent-2: #475569;
--m-band: #F1F5F9; --m-card: #FAFAFA;
}
.demo-mockup[data-palette="sage"] {
--m-bg: #F4FAF6; --m-fg: #0F3D2E;
--m-accent: #2F7D5C; --m-accent-2: #5B9F7E;
--m-band: #E8F4EC; --m-card: #FFFFFF;
--m-font-h: 'Playfair Display', serif;
}
.demo-mockup[data-palette="tech"] {
--m-bg: #0B0F1A; --m-fg: #F1F5F9; --m-muted: #94A3B8;
--m-accent: #6366F1; --m-accent-2: #06B6D4;
--m-band: #111827; --m-card: #1E293B;
--m-border: rgba(255,255,255,.08);
--m-font-h: 'Orbitron', sans-serif;
}
.demo-mockup[data-palette="editorial"] {
--m-bg: #FBFAF7; --m-fg: #1A1208;
--m-accent: #B45309; --m-accent-2: #78350F;
--m-band: #F5EFE3; --m-card: #FFFFFF;
--m-font-h: 'Playfair Display', serif;
}
.demo-mockup[data-palette="warm"] {
--m-bg: #FFFBF0; --m-fg: #4A2410;
--m-accent: #C2410C; --m-accent-2: #9A3412;
--m-band: #FEF3C7; --m-card: #FFFFFF;
--m-font-h: 'Playfair Display', serif;
}
.demo-mockup[data-palette="navy"] {
--m-bg: #FFFFFF; --m-fg: #0F1E3D;
--m-accent: #C9A84C; --m-accent-2: #D4B860;
--m-band: #F5F2E9; --m-card: #FAFAFA;
--m-font-h: 'Playfair Display', serif;
}
.demo-mockup[data-palette="pastel"] {
--m-bg: #FBF5FB; --m-fg: #4C1D95;
--m-accent: #8B5CF6; --m-accent-2: #EC4899;
--m-band: #F3E8FF; --m-card: #FFFFFF;
}
.demo-mockup[data-palette="rose"] {
--m-bg: #FFF7F8; --m-fg: #6B0F2A;
--m-accent: #BE185D; --m-accent-2: #9F1239;
--m-band: #FFE4E6; --m-card: #FFFFFF;
--m-font-h: 'Playfair Display', serif;
}
.demo-mockup[data-palette="noir"] {
--m-bg: #0A0A0A; --m-fg: #F5F5F4; --m-muted: #A8A29E;
--m-accent: #E7E5E4; --m-accent-2: #A8A29E;
--m-band: #171717; --m-card: #1C1917;
--m-border: rgba(255,255,255,.08);
}
/* ── Nav du mockup ───────────────────────────────────────────── */
.demo-mockup__nav {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 36px;
border-bottom: 1px solid var(--m-border);
background: var(--m-bg);
position: sticky;
top: 0;
z-index: 5;
}
.demo-mockup__brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--m-font-h);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -.01em;
color: var(--m-fg);
}
.demo-mockup__logo { font-size: 1.2rem; }
.demo-mockup__menu {
display: flex;
gap: 22px;
margin-left: auto;
margin-right: 16px;
}
.demo-mockup__menu a {
font-size: .82rem;
color: var(--m-muted);
text-decoration: none;
font-weight: 500;
}
.demo-mockup__nav-cta {
font-size: .8rem;
font-weight: 600;
background: var(--m-accent);
color: var(--m-bg);
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
}
/* ── Hero du mockup ──────────────────────────────────────────── */
.demo-mockup__hero {
padding: 72px 36px 56px;
text-align: center;
background:
radial-gradient(60% 80% at 50% 0%, var(--m-band), transparent 70%),
var(--m-bg);
border-bottom: 1px solid var(--m-border);
}
.demo-mockup__kicker {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--m-accent);
background: color-mix(in srgb, var(--m-accent) 12%, transparent);
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 22px;
}
.demo-mockup__h1 {
font-family: var(--m-font-h);
font-weight: 800;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.08;
letter-spacing: -.025em;
color: var(--m-fg);
margin: 0 0 18px;
max-width: 18ch;
margin-inline: auto;
}
.demo-mockup__h1 em {
font-style: italic;
color: var(--m-accent);
font-weight: 700;
}
.demo-mockup__sub {
font-size: 1rem;
color: var(--m-muted);
line-height: 1.65;
max-width: 52ch;
margin: 0 auto 28px;
}
.demo-mockup__actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 22px;
}
.demo-mockup__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .9rem;
font-weight: 600;
padding: 11px 22px;
border-radius: 8px;
text-decoration: none;
transition: transform .2s ease;
}
.demo-mockup__cta--primary {
background: var(--m-accent);
color: var(--m-bg);
}
.demo-mockup__cta--ghost {
background: transparent;
color: var(--m-fg);
border: 1px solid var(--m-border);
}
.demo-mockup__cta:hover { transform: translateY(-1px); }
.demo-mockup__trust {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .78rem;
color: var(--m-muted);
}
.demo-mockup__trust-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #22C55E;
box-shadow: 0 0 8px rgba(34,197,94,.5);
}
/* ── Services du mockup ──────────────────────────────────────── */
.demo-mockup__services {
padding: 64px 36px;
background: var(--m-bg);
}
.demo-mockup__h2 {
font-family: var(--m-font-h);
font-size: 1.6rem;
text-align: center;
margin: 0 0 40px;
letter-spacing: -.02em;
color: var(--m-fg);
}
.demo-mockup__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 880px;
margin: 0 auto;
}
.demo-mockup__svc {
background: var(--m-card);
border: 1px solid var(--m-border);
border-radius: 12px;
padding: 24px 22px;
text-align: center;
}
.demo-mockup__svc-icon {
display: inline-flex;
width: 42px; height: 42px;
align-items: center; justify-content: center;
border-radius: 10px;
background: color-mix(in srgb, var(--m-accent) 12%, transparent);
color: var(--m-accent);
font-size: 1.1rem;
margin-bottom: 12px;
}
.demo-mockup__svc strong {
display: block;
font-size: .95rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--m-fg);
}
.demo-mockup__svc p {
font-size: .82rem;
color: var(--m-muted);
margin: 0;
line-height: 1.5;
}
/* ── Bandeau CTA + footer ───────────────────────────────────── */
.demo-mockup__cta-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding: 36px 36px;
margin: 0 36px 28px;
background: var(--m-band);
border-radius: 14px;
}
.demo-mockup__cta-band h3 {
font-family: var(--m-font-h);
font-size: 1.2rem;
margin: 0 0 4px;
color: var(--m-fg);
}
.demo-mockup__cta-band p {
font-size: .85rem;
color: var(--m-muted);
margin: 0;
}
.demo-mockup__footer {
padding: 18px 36px 28px;
border-top: 1px solid var(--m-border);
font-size: .72rem;
color: var(--m-muted);
text-align: center;
}
/* ── Sections enrichies (page demo.html, mockup "complet") ─── */
.demo-mockup__eyebrow {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--m-accent);
margin-bottom: 14px;
}
.demo-mockup__about {
padding: 80px 36px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
background: var(--m-band);
}
.demo-mockup__about-text h2 { margin-bottom: 14px; }
.demo-mockup__about-text p {
font-size: 1rem;
line-height: 1.7;
color: var(--m-muted);
max-width: 56ch;
}
.demo-mockup__stats {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
padding: 0;
margin: 0;
}
.demo-mockup__stats li {
background: var(--m-bg);
border: 1px solid var(--m-border);
border-radius: 12px;
padding: 18px 22px;
display: flex;
align-items: baseline;
gap: 16px;
}
.demo-mockup__stats strong {
font-family: var(--m-font-h);
font-size: 1.6rem;
color: var(--m-accent);
line-height: 1;
}
.demo-mockup__stats span {
font-size: .85rem;
color: var(--m-muted);
}
.demo-mockup__gallery { padding: 80px 36px; background: var(--m-bg); }
.demo-mockup__gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1000px;
margin: 36px auto 0;
}
.demo-mockup__gallery-item {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.demo-mockup__gallery-tile {
aspect-ratio: 4 / 3;
background: var(--tile-tone, var(--m-band));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: rgba(255,255,255,.4);
filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
transition: transform .35s cubic-bezier(.34,1.56,.64,1);
cursor: pointer;
}
.demo-mockup__gallery-tile:hover { transform: scale(1.03); }
.demo-mockup__gallery-item figcaption {
font-size: .8rem;
color: var(--m-muted);
text-align: center;
}
.demo-mockup__testimonial {
padding: 80px 36px;
background: var(--m-band);
text-align: center;
}
.demo-mockup__testimonial blockquote {
max-width: 720px;
margin: 0 auto;
position: relative;
font-family: var(--m-font-h);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.45;
color: var(--m-fg);
letter-spacing: -.01em;
}
.demo-mockup__quote-mark {
position: absolute;
top: -42px;
left: 50%;
transform: translateX(-50%);
font-size: 6rem;
font-family: var(--m-font-h);
line-height: 1;
color: var(--m-accent);
opacity: .3;
}
.demo-mockup__testimonial blockquote p { margin: 0 0 20px; }
.demo-mockup__testimonial blockquote footer {
font-family: var(--m-font-b);
font-size: .85rem;
font-weight: 500;
color: var(--m-muted);
}
.demo-mockup__testimonial blockquote footer strong { color: var(--m-fg); }
.demo-mockup__contact {
padding: 80px 36px;
background: var(--m-bg);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
align-items: start;
border-top: 1px solid var(--m-border);
}
.demo-mockup__contact-info ul {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.demo-mockup__contact-info li {
display: flex;
align-items: center;
gap: 12px;
font-size: .95rem;
color: var(--m-muted);
}
.demo-mockup__contact-info li span:first-child {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--m-accent) 12%, transparent);
border-radius: 8px;
flex-shrink: 0;
}
.demo-mockup__contact-form {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--m-card);
border: 1px solid var(--m-border);
border-radius: 14px;
padding: 28px 26px;
}
.demo-mockup__contact-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: .82rem;
font-weight: 600;
color: var(--m-fg);
}
.demo-mockup__contact-form input,
.demo-mockup__contact-form textarea {
border: 1px solid var(--m-border);
border-radius: 8px;
padding: 10px 14px;
font-family: inherit;
font-size: .9rem;
background: var(--m-bg);
color: var(--m-fg);
}
.demo-mockup__contact-form button {
margin-top: 4px;
cursor: pointer;
border: 0;
font-family: var(--m-font-b);
}
/* ── Responsive du mockup ────────────────────────────────────── */
@media (max-width: 720px) {
.demo-mockup__nav { padding: 14px 20px; gap: 12px; }
.demo-mockup__menu { display: none; }
.demo-mockup__hero { padding: 48px 22px 40px; }
.demo-mockup__about,
.demo-mockup__gallery,
.demo-mockup__testimonial,
.demo-mockup__contact,
.demo-mockup__services { padding: 48px 22px; }
.demo-mockup__about,
.demo-mockup__contact { grid-template-columns: 1fr; gap: 28px; }
.demo-mockup__grid { grid-template-columns: 1fr; }
.demo-mockup__gallery-grid { grid-template-columns: repeat(2, 1fr); }
.demo-mockup__cta-band { margin: 0 22px 24px; padding: 24px; flex-direction: column; align-items: flex-start; }
.demo-mockup__testimonial blockquote { font-size: 1.15rem; }
}
/* ================================================================
PAGE demo.html
================================================================ */
.demo-page { background: var(--bg); }
.demo-404 {
max-width: 540px;
margin: 80px auto;
padding: 40px 32px;
text-align: center;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
}
.demo-404 h1 { font-family: var(--font-h); margin-bottom: 12px; color: #F8FAFC; }
.demo-404 p { color: var(--muted-2); margin-bottom: 24px; }
.demo-modal__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: var(--bg-2);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.demo-modal__hint {
font-size: .8rem;
color: var(--muted);
}
@media (max-width: 720px) {
.demo-modal__meta { display: none; }
.demo-modal__panel { width: 100vw; max-height: 100vh; border-radius: 0; }
.demo-modal__footer { flex-direction: column; align-items: stretch; gap: 10px; }
.demo-modal__hint { font-size: .75rem; text-align: center; }
}
/* ================================================================
LEAD MAGNET — guide gratuit + capture email
================================================================ */
.lead-magnet { background: var(--bg); padding-block: 72px; }
.lm__card {
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: center;
background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(249,115,22,.04) 100%), var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-xl);
padding: 48px 56px;
position: relative;
overflow: hidden;
}
.lm__card::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
mask-image: radial-gradient(circle at 20% 50%, transparent, #000 70%);
-webkit-mask-image: radial-gradient(circle at 20% 50%, transparent, #000 70%);
}
.lm__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.lm__pdf {
width: 200px;
aspect-ratio: 3 / 4;
background: linear-gradient(160deg, #FAFAFA 0%, #E2E8F0 100%);
border-radius: 12px;
box-shadow:
0 30px 60px rgba(0,0,0,.45),
0 12px 24px rgba(0,0,0,.3),
0 1px 0 rgba(255,255,255,.5) inset;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 22px;
text-align: center;
color: #1E293B;
transform: rotate(-4deg);
transition: transform .4s cubic-bezier(.34,1.56,.64,1);
position: relative;
}
.lm__pdf::before {
content: '';
position: absolute;
top: 12px; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--indigo), var(--orange));
opacity: .25;
}
.lm__card:hover .lm__pdf { transform: rotate(-2deg) scale(1.03); }
.lm__pdf-tag {
font-size: .65rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--indigo);
margin-bottom: 16px;
padding: 4px 10px;
background: rgba(99,102,241,.1);
border-radius: 100px;
}
.lm__pdf strong {
display: block;
font-family: var(--font-h);
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
background: linear-gradient(135deg, #4F46E5, #F97316);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 6px;
}
.lm__pdf small {
font-size: .72rem;
color: #64748B;
font-style: italic;
}
.lm__body { position: relative; z-index: 1; }
.lm__h2 {
font-family: var(--font-h);
font-size: clamp(1.6rem, 2.6vw, 2rem);
color: #F8FAFC;
letter-spacing: -.02em;
line-height: 1.15;
margin: 12px 0 14px;
}
.lm__h2 em {
font-style: italic;
color: var(--orange);
}
.lm__lead {
font-size: .95rem;
color: var(--muted-2);
line-height: 1.65;
margin-bottom: 22px;
}
.lm__lead strong { color: var(--text); }
.lm__form-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.lm__form-row input[type="email"] {
flex: 1;
min-width: 0;
font-family: inherit;
font-size: 1rem;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--border-2);
border-radius: var(--r-sm);
padding: 12px 16px;
}
.lm__form-row input[type="email"]:focus {
outline: 2px solid var(--indigo);
outline-offset: 2px;
border-color: var(--indigo);
}
.lm__form-note {
margin: 12px 2px 0;
font-size: .78rem;
color: var(--muted);
line-height: 1.6;
}
.lm__skip {
margin-top: 16px;
font-size: .82rem;
color: var(--muted);
}
.lm__skip a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) {
.lm__card {
grid-template-columns: 1fr;
gap: 32px;
padding: 36px 28px;
text-align: left;
}
.lm__pdf { width: 160px; margin: 0 auto; }
.lm__form-row { flex-direction: column; }
}
[data-theme="light"] .lm__card {
background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(249,115,22,.04) 100%), #FFFFFF;
border-color: var(--border-2);
}
[data-theme="light"] .lm__h2 { color: #0F172A; }
[data-theme="light"] .lm__lead { color: var(--muted-2); }
[data-theme="light"] .lm__form-row input[type="email"] {
background: #FFFFFF;
color: #0F172A;
}
/* ================================================================
GUIDE — page guide.html
================================================================ */
.guide { padding: 112px 0 64px; background: var(--bg); }
.guide__article { max-width: 760px; }
.guide__head { text-align: center; margin-bottom: 56px; }
.guide__kicker {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--indigo);
background: rgba(99,102,241,.12);
border: 1px solid rgba(99,102,241,.25);
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 24px;
}
.guide__h1 {
font-family: var(--font-h);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.1;
color: #F8FAFC;
margin-bottom: 18px;
}
.guide__h1 em {
font-style: italic;
background: linear-gradient(135deg, #818CF8, #FB923C);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.guide__lead {
font-size: 1.1rem;
color: var(--muted-2);
line-height: 1.7;
max-width: 580px;
margin: 0 auto 22px;
}
.guide__lead strong { color: var(--text); }
.guide__meta {
display: inline-flex;
gap: 8px;
align-items: center;
font-size: .82rem;
color: var(--muted);
}
.guide__chapter {
position: relative;
padding: 28px 0 28px 64px;
border-top: 1px solid var(--border);
}
.guide__chapter:first-of-type { border-top: 0; }
.guide__num {
position: absolute;
left: 0;
top: 28px;
font-family: var(--font-h);
font-size: 1.6rem;
font-weight: 800;
background: linear-gradient(135deg, var(--indigo), var(--orange));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.guide__chapter h2 {
font-family: var(--font-h);
font-size: 1.35rem;
color: #F8FAFC;
letter-spacing: -.02em;
margin-bottom: 12px;
}
.guide__chapter p {
font-size: .98rem;
line-height: 1.7;
color: var(--muted-2);
margin-bottom: 12px;
}
.guide__chapter p strong { color: var(--text); }
.guide__chapter p em { color: var(--orange); font-style: italic; font-weight: 500; }
.guide__fix {
background: rgba(16,185,129,.06);
border-left: 3px solid var(--green);
padding: 12px 16px;
border-radius: 6px;
margin-top: 8px !important;
}
.guide__chapter a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.guide__chapter code {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: .85em;
background: rgba(99,102,241,.1);
padding: 2px 6px;
border-radius: 4px;
color: #A5B4FC;
}
.guide__cta-block {
margin-top: 56px;
padding: 40px 36px;
background: linear-gradient(160deg, rgba(99,102,241,.1) 0%, rgba(249,115,22,.06) 100%), var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-xl);
text-align: center;
}
.guide__cta-block h3 {
font-family: var(--font-h);
font-size: 1.5rem;
margin-bottom: 12px;
color: #F8FAFC;
}
.guide__cta-block h3 em {
font-style: italic;
color: var(--orange);
}
.guide__cta-block p {
color: var(--muted-2);
margin-bottom: 24px;
line-height: 1.6;
}
.guide__cta-row {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.guide__cta-note {
font-size: .82rem;
color: var(--muted);
}
@media (max-width: 600px) {
.guide__chapter { padding-left: 0; padding-top: 56px; }
.guide__num { top: 16px; }
.guide__cta-block { padding: 28px 22px; }
}
[data-theme="light"] .guide__h1,
[data-theme="light"] .guide__chapter h2,
[data-theme="light"] .guide__cta-block h3 { color: #0F172A; }
[data-theme="light"] .guide__chapter p strong { color: #0F172A; }
[data-theme="light"] .guide__chapter code {
background: rgba(99,102,241,.08); color: #4F46E5;
}
[data-theme="light"] .guide__cta-block {
background: linear-gradient(160deg, rgba(99,102,241,.06) 0%, rgba(249,115,22,.03) 100%), #FFFFFF;
}
/* ================================================================
TÉMOIGNAGES
================================================================ */
.testimonials { background: var(--bg); }
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.testi {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 28px 26px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: var(--t);
}
.testi:hover {
border-color: rgba(99,102,241,.3);
transform: translateY(-3px);
box-shadow: var(--sh-card);
}
.testi--featured {
background: radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,.08), transparent 60%), var(--bg-card);
border-color: rgba(99,102,241,.3);
}
.testi__stars { color: #FBBF24; font-size: .9rem; letter-spacing: .12em; }
.testi__quote {
font-size: .95rem; line-height: 1.65;
color: #E2E8F0; margin: 0; flex: 1;
}
.testi__quote strong { color: #F8FAFC; }
.testi__author { display: flex; align-items: center; gap: 12px; }
.testi__avatar {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--indigo), var(--violet));
color: #fff; font-family: var(--font-h); font-weight: 800; font-size: .85rem;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testi__author strong { display: block; font-size: .9rem; color: #F8FAFC; }
.testi__author span { display: block; font-size: .78rem; color: var(--muted); }
.testi__meta {
font-size: .72rem; color: var(--muted);
letter-spacing: .04em; padding-top: 10px;
border-top: 1px dashed var(--border-2);
}
.testimonials__note {
text-align: center; margin: 36px auto 0;
font-size: .9rem; color: var(--muted-2);
display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.testimonials__note strong { color: var(--text); }
@media (max-width: 920px) {
.testimonials__grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}
[data-theme="light"] .testi { background: #FFFFFF; }
[data-theme="light"] .testi__quote { color: #1E293B; }
[data-theme="light"] .testi__author strong { color: #0F172A; }
/* ================================================================
PARTENAIRES & CERTIFICATIONS
================================================================ */
.partners { background: var(--bg-2); padding-block: 64px; }
.partners__intro {
text-align: center; font-size: .78rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); margin-bottom: 28px;
}
.partners__grid {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 36px 48px; margin-bottom: 36px;
}
.partner-logo {
height: 28px; color: var(--muted-2); opacity: .65;
transition: opacity .2s ease, color .2s ease; cursor: default;
}
.partner-logo:hover { opacity: 1; color: var(--text); }
.partner-logo svg { height: 100%; width: auto; max-width: 100px; }
.partners__certs {
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5 pastilles alignées en une ligne */
gap: 10px;
padding-top: 28px;
border-top: 1px solid var(--border);
max-width: 980px;
margin-inline: auto;
}
.partners__certs li {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: .8125rem;
color: var(--muted-2);
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
padding: 7px 12px;
border-radius: 100px;
white-space: nowrap;
text-align: center;
}
@media (max-width: 900px) {
.partners__certs { grid-template-columns: repeat(3, 1fr); max-width: 640px; }
}
@media (max-width: 560px) {
.partners__certs { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
.partners__certs li:last-child { grid-column: 1 / -1; max-width: 220px; margin-inline: auto; }
.partners__certs li { font-size: .78rem; padding: 6px 10px; }
}
[data-theme="light"] .partners { background: #F1F5F9; }
[data-theme="light"] .partner-logo { color: #475569; opacity: .7; }
[data-theme="light"] .partner-logo:hover { color: #0F172A; }
[data-theme="light"] .partners__certs li {
background: rgba(15,23,42,.04); border-color: var(--border);
}
/* ================================================================
404 — page introuvable
================================================================ */
.error-page { min-height: 80vh; display: flex; align-items: center; }
.error-page__num {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--font-h);
font-size: clamp(7rem, 18vw, 12rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
background: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #FB923C 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin: 0 0 8px;
}
.error-page__zero {
display: inline-block;
width: clamp(7rem, 18vw, 12rem);
height: clamp(7rem, 18vw, 12rem);
animation: errorSpin 8s linear infinite;
}
.error-page__zero svg { width: 100%; height: 100%; }
@keyframes errorSpin { to { transform: rotate(360deg); } }
.error-page__actions {
display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
margin: 32px 0 40px;
}
.error-page__suggest {
max-width: 460px; margin: 0 auto;
padding: 22px 26px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
text-align: left;
}
.error-page__suggest p {
font-size: .8rem; color: var(--muted);
margin: 0 0 12px;
text-transform: uppercase; letter-spacing: .08em;
}
.error-page__suggest ul {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.error-page__suggest a {
display: block; padding: 8px 12px;
font-size: .9rem; color: var(--indigo);
border-radius: 8px; transition: var(--t);
}
.error-page__suggest a:hover { background: rgba(99,102,241,.08); }
@media (max-width: 600px) {
.error-page__suggest ul { grid-template-columns: 1fr; }
}
/* ================================================================
REFERRAL SHARE — bloc lien partageable (page parrainage)
================================================================ */
.ref-share {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 18px 20px;
margin-bottom: 4px;
}
.ref-share__label {
display: block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.ref-share__row {
display: flex;
gap: 8px;
align-items: stretch;
}
.ref-share__row input {
flex: 1;
min-width: 0;
background: var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-sm);
padding: 10px 14px;
color: var(--text);
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: .85rem;
}
.ref-share__row input:focus {
outline: 2px solid var(--indigo);
outline-offset: 2px;
}
.ref-share__channels {
display: flex;
gap: 14px;
margin-top: 12px;
flex-wrap: wrap;
}
.ref-share__channels a {
font-size: .8rem;
color: var(--indigo);
text-decoration: none;
padding: 4px 0;
}
.ref-share__channels a:hover { text-decoration: underline; }
[data-theme="light"] .ref-share { background: #F1F5F9; }
[data-theme="light"] .ref-share__row input { background: #FFFFFF; }
/* ================================================================
COOKIE CONSENT BANNER (RGPD)
================================================================ */
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 240;
background: var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-lg);
box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(99,102,241,.12);
animation: cookieIn .35s cubic-bezier(.2,1,.4,1);
max-width: 720px;
margin-inline: auto;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookieIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.cookie-banner__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
padding: 18px 22px;
}
.cookie-banner__icon {
font-size: 1.6rem;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(99,102,241,.1);
border: 1px solid rgba(99,102,241,.22);
border-radius: 12px;
}
.cookie-banner__msg {
font-size: .85rem;
color: var(--muted-2);
line-height: 1.55;
margin: 0;
}
.cookie-banner__msg strong { color: var(--text); }
.cookie-banner__actions {
display: inline-flex;
gap: 8px;
flex-shrink: 0;
}
@media (max-width: 720px) {
.cookie-banner__inner {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px 18px;
}
.cookie-banner__icon { display: none; }
.cookie-banner__actions { width: 100%; }
.cookie-banner__actions .btn { flex: 1; }
}
[data-theme="light"] .cookie-banner {
background: #FFFFFF;
border-color: var(--border-2);
box-shadow: 0 18px 48px rgba(15,23,42,.18), 0 0 0 1px rgba(99,102,241,.12);
}
/* ================================================================
MUSIC TOGGLE — bouton musique d'ambiance (au-dessus du theme toggle)
================================================================ */
.music-toggle {
position: fixed;
right: 22px;
bottom: 110px; /* juste au-dessus du theme toggle (qui fait 64px + 22px de bottom) */
z-index: 250;
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(150deg, #1A1A2E 0%, #0F0F1C 100%);
border: 1px solid rgba(139,92,246,.25);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 8px 22px rgba(0,0,0,.5),
0 0 0 1px rgba(255,255,255,.04) inset;
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
background .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.music-toggle:hover {
transform: translateY(-3px) scale(1.05);
border-color: rgba(139,92,246,.55);
box-shadow:
0 12px 28px rgba(0,0,0,.55),
0 0 22px rgba(139,92,246,.18),
0 0 0 1px rgba(255,255,255,.06) inset;
}
.music-toggle:active { transform: translateY(-1px) scale(.98); }
.music-toggle:focus-visible {
outline: 2px solid var(--violet);
outline-offset: 4px;
}
.music-toggle__bars {
display: inline-flex;
align-items: flex-end;
gap: 4px;
height: 28px;
}
.music-toggle__bars span {
display: block;
width: 5px;
border-radius: 2px;
background: linear-gradient(180deg, #C4B5FD, #6366F1);
transition: height .35s ease, background .35s ease;
}
/* Bulle "Activer / Couper" qui apparaît au hover (même style que theme toggle) */
.music-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
padding: 7px 14px;
border-radius: 100px;
font-size: .8rem;
font-weight: 600;
letter-spacing: .02em;
background: #0F0F1C;
border: 1px solid rgba(139,92,246,.35);
color: #C4B5FD;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.music-toggle__chip::after {
content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 9px; height: 9px;
background: inherit;
border: inherit;
border-left: 0;
border-bottom: 0;
}
.music-toggle:hover .music-toggle__chip,
.music-toggle:focus-visible .music-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.music-toggle__chip-on,
.music-toggle__chip-off { display: inline; }
.music-toggle--playing .music-toggle__chip-on { display: none; }
.music-toggle__chip-off { display: none; }
.music-toggle--playing .music-toggle__chip-off { display: inline; }
/* État OFF — barres basses, statiques (suggère "muet") */
.music-toggle:not(.music-toggle--playing) .music-toggle__bars span {
height: 30%;
background: linear-gradient(180deg, #94A3B8, #64748B);
}
.music-toggle:not(.music-toggle--playing) .music-toggle__bars span:nth-child(2) { height: 45%; }
.music-toggle:not(.music-toggle--playing) .music-toggle__bars span:nth-child(3) { height: 38%; }
.music-toggle:not(.music-toggle--playing) .music-toggle__bars span:nth-child(4) { height: 52%; }
/* État ON — animation égaliseur */
.music-toggle--playing {
border-color: rgba(139,92,246,.55);
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 22px rgba(139,92,246,.25),
0 0 0 1px rgba(255,255,255,.05) inset;
}
.music-toggle--playing .music-toggle__bars span {
animation: musicBar 1s ease-in-out infinite;
}
.music-toggle--playing .music-toggle__bars span:nth-child(1) { animation-delay: 0s; }
.music-toggle--playing .music-toggle__bars span:nth-child(2) { animation-delay: .15s; }
.music-toggle--playing .music-toggle__bars span:nth-child(3) { animation-delay: .35s; }
.music-toggle--playing .music-toggle__bars span:nth-child(4) { animation-delay: .55s; }
@keyframes musicBar {
0%, 100% { height: 25%; }
50% { height: 95%; }
}
/* Mode clair */
[data-theme="light"] .music-toggle {
background: linear-gradient(150deg, #FFFFFF 0%, #F1F5F9 100%);
border-color: rgba(139,92,246,.4);
box-shadow:
0 8px 22px rgba(15,23,42,.12),
0 0 0 1px rgba(255,255,255,.6) inset;
}
[data-theme="light"] .music-toggle:hover {
box-shadow:
0 12px 28px rgba(15,23,42,.18),
0 0 22px rgba(139,92,246,.18);
}
/* Mode clair — bulle hover */
[data-theme="light"] .music-toggle__chip {
background: #FFFFFF;
color: #6D28D9;
border-color: rgba(139,92,246,.45);
}
/* Mobile — taille compacte (44px) pour cohabiter avec retro/future toggles */
@media (max-width: 768px) {
.music-toggle { width: 44px; height: 44px; left: calc(50% + 4px); right: auto; bottom: 16px; border-radius: 13px; }
.music-toggle__bars { height: 18px; gap: 2.5px; }
.music-toggle__bars span { width: 3px; }
.music-toggle__chip { display: none; }
}
/* ================================================================
THEME TOGGLE — bouton "ampoule" flottant
================================================================ */
/* L'ampoule n'a aucun sens en mode futuriste ou années 80 */
[data-theme="future"] .theme-toggle,
[data-theme="retro"] .theme-toggle {
display: none !important;
}
/* 3 boutons restants → recentrage (3×44 + 2×8 = 148px, ±74px autour de 50%) */
@media (max-width: 768px) {
[data-theme="future"] .future-toggle,
[data-theme="retro"] .future-toggle { left: calc(50% - 74px); }
[data-theme="future"] .retro-toggle,
[data-theme="retro"] .retro-toggle { left: calc(50% - 22px); }
[data-theme="future"] .music-toggle,
[data-theme="retro"] .music-toggle { left: calc(50% + 30px); }
}
.theme-toggle {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 250;
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(150deg, #1A1A2E 0%, #0F0F1C 100%);
border: 1px solid rgba(251,191,36,.22);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 10px 28px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.04) inset,
0 -2px 6px rgba(255,255,255,.04) inset;
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
background .35s ease,
border-color .35s ease,
box-shadow .35s ease;
overflow: visible;
}
.theme-toggle:hover {
transform: translateY(-3px) scale(1.05);
border-color: rgba(251,191,36,.5);
box-shadow:
0 14px 36px rgba(0,0,0,.6),
0 0 28px rgba(251,191,36,.18),
0 0 0 1px rgba(255,255,255,.06) inset;
}
.theme-toggle:active { transform: translateY(-1px) scale(.98); }
.theme-toggle:focus-visible {
outline: 2px solid var(--indigo);
outline-offset: 4px;
}
/* Halo derrière l'ampoule (apparaît en mode clair) */
.theme-toggle__halo {
position: absolute;
inset: -8px;
border-radius: 26px;
background: radial-gradient(circle at 50% 35%, rgba(251,191,36,.55), rgba(251,191,36,0) 60%);
opacity: 0;
filter: blur(6px);
transition: opacity .4s ease;
pointer-events: none;
}
/* Ombre au sol (subtile) */
.theme-toggle__shadow {
position: absolute;
inset: auto 12px -10px 12px;
height: 8px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(0,0,0,.35), transparent 70%);
pointer-events: none;
transition: opacity .35s ease;
}
/* SVG ampoule */
.theme-toggle__svg {
width: 36px;
height: 42px;
position: relative;
z-index: 1;
overflow: visible;
}
/* États visuels — DARK (par défaut, lumière éteinte) */
.theme-toggle__glass {
fill: rgba(148,163,184,.12);
stroke: #94A3B8;
stroke-width: 1.8;
transition: fill .4s ease, stroke .4s ease;
}
.theme-toggle__filament {
stroke: #64748B;
transition: stroke .4s ease, filter .4s ease;
}
.theme-toggle__base {
stroke: #94A3B8;
transition: stroke .4s ease;
}
.theme-toggle__rays {
opacity: 0;
transform-origin: 32px 28px;
transform: scale(.5);
transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* Chip texte ("Allumer" / "Éteindre") qui apparaît au hover */
.theme-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
padding: 7px 14px;
border-radius: 100px;
font-size: .8rem;
font-weight: 600;
letter-spacing: .02em;
background: #0F0F1C;
border: 1px solid rgba(251,191,36,.3);
color: #FCD34D;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.theme-toggle__chip::after {
content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 9px; height: 9px;
background: inherit;
border: inherit;
border-left: 0;
border-bottom: 0;
}
.theme-toggle:hover .theme-toggle__chip,
.theme-toggle:focus-visible .theme-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.theme-toggle__chip-on,
.theme-toggle__chip-off { display: inline; }
[data-theme="light"] .theme-toggle__chip-on { display: none; }
.theme-toggle__chip-off { display: none; }
[data-theme="light"] .theme-toggle__chip-off { display: inline; }
/* ── Pulse "first-time" pour attirer l'œil ── */
.theme-toggle--pulse::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 22px;
border: 2px solid rgba(251,191,36,.55);
animation: themeTogglePulse 2.2s ease-out infinite;
pointer-events: none;
}
@keyframes themeTogglePulse {
0% { transform: scale(.95); opacity: 1; }
70% { transform: scale(1.18); opacity: 0; }
100% { transform: scale(1.18); opacity: 0; }
}
/* ─── Mode futuriste/retro : désactive le bouton lumière (toujours sombre) ── */
[data-theme="future"] #themeToggle,
[data-theme="retro"] #themeToggle {
opacity: .28;
pointer-events: none;
filter: grayscale(1);
cursor: not-allowed;
}
/* ─── États : LIGHT — lumière allumée ───────────────────────── */
[data-theme="light"] .theme-toggle {
background: linear-gradient(150deg, #FFFBEB 0%, #FEF3C7 100%);
border-color: rgba(245,158,11,.45);
box-shadow:
0 10px 28px rgba(245,158,11,.18),
0 0 30px rgba(251,191,36,.25),
0 0 0 1px rgba(255,255,255,.4) inset;
}
[data-theme="light"] .theme-toggle:hover {
box-shadow:
0 14px 36px rgba(245,158,11,.28),
0 0 40px rgba(251,191,36,.4),
0 0 0 1px rgba(255,255,255,.5) inset;
}
[data-theme="light"] .theme-toggle__halo { opacity: 1; }
[data-theme="light"] .theme-toggle__glass {
fill: #FCD34D;
stroke: #D97706;
filter: drop-shadow(0 0 8px rgba(251,191,36,.6));
}
[data-theme="light"] .theme-toggle__filament {
stroke: #B45309;
filter: drop-shadow(0 0 4px rgba(251,191,36,.8));
}
[data-theme="light"] .theme-toggle__base { stroke: #78350F; }
[data-theme="light"] .theme-toggle__rays {
opacity: 1;
transform: scale(1);
animation: themeRaysWiggle 4s ease-in-out infinite;
}
@keyframes themeRaysWiggle {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.05) rotate(8deg); }
}
[data-theme="light"] .theme-toggle__chip {
background: #FFFFFF;
color: #B45309;
border-color: rgba(245,158,11,.5);
}
/* ── Responsive ── */
@media (max-width: 768px) {
.theme-toggle { width: 44px; height: 44px; left: calc(50% + 56px); right: auto; bottom: 16px; border-radius: 13px; }
.theme-toggle__svg { width: 26px; height: 30px; }
.theme-toggle__chip { display: none; }
}
/* ================================================================
FUTURE TOGGLE — bouton mode futuriste (au-dessus de la musique)
================================================================ */
.future-toggle {
position: fixed;
right: 22px;
bottom: 198px; /* music = 110 + 64 + 24 = 198 */
z-index: 250;
width: 64px;
height: 64px;
border-radius: 18px;
background:
radial-gradient(120% 100% at 50% 50%, rgba(99,102,241,.30), transparent 70%),
linear-gradient(150deg, #0F0F2A 0%, #06061A 100%);
border: 1px solid rgba(99,102,241,.35);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #C4B5FD;
box-shadow:
0 8px 22px rgba(0,0,0,.5),
0 0 18px rgba(99,102,241,.15),
inset 0 1px 0 rgba(255,255,255,.06);
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
background .35s ease,
border-color .35s ease,
box-shadow .35s ease,
color .35s ease;
}
.future-toggle:hover {
transform: translateY(-3px) scale(1.05);
border-color: rgba(99,102,241,.7);
color: #E0E7FF;
box-shadow:
0 12px 28px rgba(0,0,0,.55),
0 0 26px rgba(139,92,246,.30),
inset 0 1px 0 rgba(255,255,255,.08);
}
.future-toggle:active { transform: translateY(-1px) scale(.98); }
.future-toggle:focus-visible {
outline: 2px solid var(--violet);
outline-offset: 4px;
}
.future-toggle__svg {
width: 32px;
height: 32px;
filter: drop-shadow(0 0 6px rgba(167,139,250,.45));
animation: futureSpin 18s linear infinite;
margin-bottom: 2px;
}
@keyframes futureSpin { to { transform: rotate(360deg); } }
/* Label persistant sous l'icône — "Futur" */
.future-toggle {
flex-direction: column;
gap: 0;
}
.future-toggle__label {
font-family: var(--font-h);
font-size: .58rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #C4B5FD;
line-height: 1;
pointer-events: none;
}
.future-toggle--on .future-toggle__label { color: #F8FAFC; }
.future-toggle__halo {
position: absolute;
inset: -3px;
border-radius: 22px;
pointer-events: none;
background: radial-gradient(60% 60% at 50% 50%, rgba(139,92,246,.35), transparent 70%);
opacity: 0;
transition: opacity .35s ease;
}
.future-toggle:hover .future-toggle__halo,
.future-toggle--on .future-toggle__halo { opacity: 1; }
/* État ON — bouton lumineux */
.future-toggle--on {
background:
radial-gradient(120% 100% at 50% 50%, rgba(139,92,246,.55), transparent 70%),
linear-gradient(150deg, #1A0F3A 0%, #0A0728 100%);
border-color: rgba(167,139,250,.85);
color: #F5F3FF;
box-shadow:
0 14px 36px rgba(99,102,241,.45),
0 0 32px rgba(139,92,246,.55),
inset 0 1px 0 rgba(255,255,255,.10);
}
.future-toggle--on .future-toggle__svg { animation-duration: 6s; }
/* Bulle "Activer / Revenir en arrière" */
.future-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background: rgba(15, 15, 42, .96);
color: #E0E7FF;
padding: 7px 12px;
border-radius: 8px;
border: 1px solid rgba(139,92,246,.4);
font-size: .78rem;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(139,92,246,.18);
}
.future-toggle__chip::after {
content: '';
position: absolute;
right: -5px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 9px; height: 9px;
background: inherit;
border: inherit;
border-left: 0;
border-bottom: 0;
}
.future-toggle:hover .future-toggle__chip,
.future-toggle:focus-visible .future-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.future-toggle__chip-on, .future-toggle__chip-off { display: inline; }
.future-toggle__chip-off { display: none; }
.future-toggle--on .future-toggle__chip-on { display: none; }
.future-toggle--on .future-toggle__chip-off { display: inline; }
@media (max-width: 768px) {
.future-toggle { width: 44px; height: 44px; left: calc(50% - 100px); right: auto; bottom: 16px; border-radius: 13px; }
.future-toggle__svg { width: 24px; height: 24px; margin-bottom: 1px; }
.future-toggle__label { font-size: .5rem; }
.future-toggle__chip { display: none; }
}
/* ================================================================
FUTURE THEME — palette violet/cyan + grille animée
================================================================ */
[data-theme="future"] {
--bg: #06061A;
--bg-2: #0A0A22;
--bg-card: #0F0F2A;
--border: rgba(139,92,246,.18);
--border-2: rgba(139,92,246,.35);
--text: #E9E3FF;
--muted: #9C95C7;
--muted-2: #B4ADD9;
--orange: #22D3EE; /* accents en cyan */
}
[data-theme="future"] body {
background:
radial-gradient(ellipse 80% 60% at 30% 0%, rgba(99,102,241,.20), transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%, rgba(139,92,246,.16), transparent 60%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(34,211,238,.06), transparent 60%),
#06061A;
color: var(--text);
}
/* Grille subtile sur le viewport */
[data-theme="future"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(139,92,246,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,92,246,.05) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
z-index: 0;
animation: futureGridDrift 30s linear infinite;
}
@keyframes futureGridDrift {
to { background-position: 40px 40px; }
}
/* nav/footer z-index handled separately, body kept fixed */
/* Glow sur les titres */
[data-theme="future"] .hero__h1,
[data-theme="future"] .section__title,
[data-theme="future"] .hero__gradient {
text-shadow: 0 0 28px rgba(139,92,246,.35);
}
[data-theme="future"] .hero__gradient {
background: linear-gradient(90deg, #818CF8 0%, #C4B5FD 45%, #22D3EE 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Cartes & sections */
[data-theme="future"] .plan-card,
[data-theme="future"] .step-card,
[data-theme="future"] .gallery-card,
[data-theme="future"] .testi,
[data-theme="future"] .cfg__form,
[data-theme="future"] .cfg__summary,
[data-theme="future"] .market__table {
background: rgba(15, 15, 42, .55);
border-color: rgba(139,92,246,.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Boutons primaires gardent l'ambiance violet/cyan */
[data-theme="future"] .btn--primary {
background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #22D3EE 100%);
box-shadow: 0 8px 24px rgba(99,102,241,.35), 0 0 18px rgba(34,211,238,.20);
}
/* ================================================================
FUTURE THEME — renforcement (Orbitron, scanlines, néon plus marqué)
================================================================ */
[data-theme="future"] {
--bg: #04041C;
--bg-2: #08083A;
--bg-card: #0E0E3F;
--border: rgba(139,92,246,.32);
--border-2: rgba(139,92,246,.55);
--text: #F5F3FF;
--muted: #B4ADD9;
--muted-2: #D4CFF0;
--violet: #D946EF;
}
[data-theme="future"] body {
background:
radial-gradient(ellipse 70% 50% at 30% -10%, rgba(139,92,246,.45), transparent 65%),
radial-gradient(ellipse 60% 40% at 90% 110%, rgba(34,211,238,.32), transparent 65%),
radial-gradient(ellipse 50% 35% at 50% 50%, rgba(217,70,239,.18), transparent 70%),
#04041C;
}
[data-theme="future"] body::before {
background-image:
linear-gradient(rgba(139,92,246,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,92,246,.10) 1px, transparent 1px);
background-size: 36px 36px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
animation-duration: 22s;
}
/* Scanlines overlay */
[data-theme="future"] body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(
0deg,
rgba(139,92,246,.05) 0 1px,
transparent 1px 4px),
linear-gradient(180deg, rgba(34,211,238,.05), transparent 50%, rgba(217,70,239,.05));
mix-blend-mode: screen;
z-index: 1;
}
/* nav/footer z-index handled separately, body kept fixed */
/* Orbitron + glow néon plus marqué sur les titres */
[data-theme="future"] .hero__h1,
[data-theme="future"] .section__title,
[data-theme="future"] .page-hero__h1 {
font-family: 'Orbitron', 'Syne', 'Inter', sans-serif !important;
letter-spacing: .02em;
text-shadow:
0 0 12px rgba(139,92,246,.7),
0 0 28px rgba(34,211,238,.4),
0 0 48px rgba(217,70,239,.3);
}
[data-theme="future"] .hero__gradient {
background: linear-gradient(90deg, #818CF8 0%, #D946EF 50%, #22D3EE 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 0 18px rgba(217,70,239,.45));
}
[data-theme="future"] .nav__logo .logo-word,
[data-theme="future"] .nav__logo .logo-dot {
font-family: 'Orbitron', sans-serif !important;
letter-spacing: .04em;
text-shadow: 0 0 8px rgba(139,92,246,.7);
}
/* Cartes — bordure néon plus visible + halo */
[data-theme="future"] .plan-card,
[data-theme="future"] .step-card,
[data-theme="future"] .gallery-card,
[data-theme="future"] .testi,
[data-theme="future"] .cfg__form,
[data-theme="future"] .cfg__summary,
[data-theme="future"] .market__table,
[data-theme="future"] .faq__item {
background: rgba(14, 14, 63, .55);
border-color: rgba(139,92,246,.45);
box-shadow:
0 0 0 1px rgba(139,92,246,.18),
0 14px 38px rgba(0,0,0,.55),
0 0 32px rgba(139,92,246,.15);
}
[data-theme="future"] .plan-card:hover,
[data-theme="future"] .step-card:hover,
[data-theme="future"] .gallery-card:hover {
border-color: rgba(34,211,238,.7);
box-shadow:
0 0 0 1px rgba(34,211,238,.35),
0 18px 44px rgba(0,0,0,.65),
0 0 36px rgba(34,211,238,.30);
}
/* Bouton primaire — gradient holographique animé */
[data-theme="future"] .btn--primary,
[data-theme="future"] .nav__cta {
background: linear-gradient(90deg, #6366F1 0%, #D946EF 50%, #22D3EE 100%);
background-size: 200% 100%;
border: 0;
animation: futureBtnSweep 4.5s ease-in-out infinite;
box-shadow:
0 8px 28px rgba(99,102,241,.45),
0 0 22px rgba(34,211,238,.30),
inset 0 0 14px rgba(255,255,255,.10);
}
@keyframes futureBtnSweep {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
[data-theme="future"] .btn--primary:hover {
filter: brightness(1.15) saturate(1.2);
box-shadow:
0 12px 36px rgba(99,102,241,.6),
0 0 32px rgba(217,70,239,.4),
0 0 18px rgba(34,211,238,.35);
}
/* Nav + glow */
[data-theme="future"] .nav,
[data-theme="future"] .nav.scrolled {
background: rgba(4, 4, 28, .75);
border-bottom: 1px solid rgba(139,92,246,.4);
box-shadow: 0 0 24px rgba(139,92,246,.18);
backdrop-filter: blur(14px);
}
/* ================================================================
FUTURE THEME — Arrière-plan poussé : nébuleuses dérivantes,
starfield qui scintille, aurore pulsante, plus de profondeur
================================================================ */
/* Layer 1 : étoiles + ciel profond (sur html::before, sous tout le reste) */
[data-theme="future"]::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-color: #02021A;
background-image:
/* Constellation 1 — petites étoiles blanches */
radial-gradient(1.2px 1.2px at 20% 30%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.6), transparent 50%),
radial-gradient(1.5px 1.5px at 80% 22%, rgba(255,255,255,.9), transparent 50%),
radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(1px 1px at 10% 78%, rgba(255,255,255,.7), transparent 50%),
radial-gradient(1.4px 1.4px at 92% 60%, rgba(255,255,255,.8), transparent 50%),
radial-gradient(1px 1px at 5% 12%, rgba(255,255,255,.5), transparent 50%),
/* Constellation 2 — étoiles colorées plus rares */
radial-gradient(1.3px 1.3px at 30% 55%, rgba(34,211,238,.85), transparent 50%),
radial-gradient(1.5px 1.5px at 70% 92%, rgba(217,70,239,.75), transparent 50%),
radial-gradient(1.4px 1.4px at 88% 40%, rgba(167,139,250,.85), transparent 50%),
radial-gradient(1.6px 1.6px at 12% 45%, rgba(34,211,238,.7), transparent 50%);
background-size:
280px 280px, 320px 320px, 240px 240px, 260px 260px, 290px 290px, 220px 220px, 310px 310px,
420px 420px, 380px 380px, 460px 460px, 400px 400px;
animation:
futureStarsDrift 120s linear infinite,
futureStarsTwinkle 7s ease-in-out infinite alternate;
}
@keyframes futureStarsDrift {
to {
background-position:
0 -280px, 0 -320px, 0 -240px, 0 -260px, 0 -290px, 0 -220px, 0 -310px,
0 -420px, 0 -380px, 0 -460px, 0 -400px;
}
}
@keyframes futureStarsTwinkle {
from { opacity: .9; filter: brightness(1); }
to { opacity: 1; filter: brightness(1.25); }
}
/* Layer 2 : nébuleuses qui dérivent lentement sur body */
[data-theme="future"] body {
background:
/* 5 nuages aurores de couleurs et tailles différentes */
radial-gradient(ellipse 50% 30% at 22% 8%, rgba(139,92,246,.55), transparent 65%),
radial-gradient(ellipse 45% 28% at 78% 12%, rgba(34,211,238,.45), transparent 65%),
radial-gradient(ellipse 60% 38% at 50% 102%, rgba(217,70,239,.42), transparent 65%),
radial-gradient(ellipse 38% 26% at 8% 58%, rgba(99,102,241,.35), transparent 60%),
radial-gradient(ellipse 35% 24% at 92% 68%, rgba(217,70,239,.32), transparent 60%),
/* Voile bleu sombre par-dessus */
linear-gradient(180deg, rgba(4,4,28,.55), rgba(2,2,26,.75));
background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%, 100% 50%, 0 0;
animation: futureNebulaDrift 38s ease-in-out infinite alternate;
color: var(--text);
}
@keyframes futureNebulaDrift {
0% {
background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%, 100% 50%, 0 0;
}
50% {
background-position: 25% 30%, 75% 25%, 35% 75%, 18% 35%, 82% 65%, 0 0;
}
100% {
background-position: 50% 15%, 60% 40%, 30% 90%, 8% 60%, 92% 45%, 0 0;
}
}
/* Layer 3 : grille néon dense + aurore pulsante en haut (body::before) */
[data-theme="future"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
/* Aurore pulsante au sommet */
radial-gradient(ellipse 80% 30% at 50% 0%, rgba(217,70,239,.35), transparent 70%),
radial-gradient(ellipse 60% 25% at 50% 0%, rgba(34,211,238,.30), transparent 70%),
/* Grille néon (XY) */
linear-gradient(rgba(139,92,246,.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,92,246,.12) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
background-repeat: no-repeat, no-repeat, repeat, repeat;
-webkit-mask-image: radial-gradient(ellipse 110% 90% at center, #000 35%, transparent 95%);
mask-image: radial-gradient(ellipse 110% 90% at center, #000 35%, transparent 95%);
animation:
futureGridDrift 22s linear infinite,
futureAuroraPulse 9s ease-in-out infinite alternate;
}
@keyframes futureAuroraPulse {
from { filter: hue-rotate(0deg) brightness(.95); }
to { filter: hue-rotate(35deg) brightness(1.2); }
}
/* Layer 4 : scanlines + sweep coloré (body::after) */
[data-theme="future"] body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
background:
/* Scanlines fines */
repeating-linear-gradient(
0deg,
rgba(139,92,246,.05) 0 1px,
transparent 1px 4px),
/* Sweep diagonal subtil */
linear-gradient(135deg, rgba(34,211,238,.06) 0%, transparent 30%, transparent 70%, rgba(217,70,239,.06) 100%);
mix-blend-mode: screen;
animation: futureSweep 14s ease-in-out infinite alternate;
}
@keyframes futureSweep {
from { opacity: .85; transform: translateY(0); }
to { opacity: 1; transform: translateY(-12px); }
}
/* Le contenu reste au-dessus de toutes les couches */
/* nav/footer z-index handled separately, body kept fixed */
/* ================================================================
FUTURE BG DECOR — éléments sci-fi visibles uniquement en mode futur
(HUD, planète, hexagones, streams, circuits, faisceau, pulse…)
================================================================ */
.future-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
display: none;
overflow: hidden;
}
[data-theme="future"] .future-bg { display: block; }
/* ── HUD corner brackets ── */
.future-bg__corner {
position: absolute;
width: 56px; height: 56px;
border: 2px solid rgba(34,211,238,.65);
filter: drop-shadow(0 0 8px rgba(34,211,238,.55));
animation: futureCornerPulse 4s ease-in-out infinite alternate;
}
.future-bg__corner--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.future-bg__corner--tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.future-bg__corner--bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.future-bg__corner--br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
@keyframes futureCornerPulse {
from { opacity: .55; box-shadow: inset 0 0 4px rgba(34,211,238,.3); }
to { opacity: 1; box-shadow: inset 0 0 12px rgba(34,211,238,.6); }
}
/* ── Texte télémétrie HUD ── */
.future-bg__hud {
position: absolute;
font-family: 'Orbitron', 'Syne', monospace;
font-size: .68rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(34,211,238,.7);
text-shadow: 0 0 6px rgba(34,211,238,.55);
white-space: nowrap;
pointer-events: none;
}
.future-bg__hud--tl { top: 30px; left: 92px; }
.future-bg__hud--tr { top: 30px; right: 92px; color: rgba(217,70,239,.7); text-shadow: 0 0 6px rgba(217,70,239,.55); }
.future-bg__hud--bl { bottom: 30px; left: 92px; color: rgba(167,139,250,.7); text-shadow: 0 0 6px rgba(167,139,250,.55); }
.future-bg__hud--br { bottom: 30px; right: 92px; }
/* ── Planète (haut-droite) avec anneaux ── */
.future-bg__planet {
position: absolute;
top: 8%;
right: -180px;
width: 420px; height: 420px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, #C4B5FD 0%, #6366F1 25%, #312E81 55%, #0E0E3F 90%),
radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,.4) 100%);
background-blend-mode: normal, multiply;
box-shadow:
inset -50px -40px 80px rgba(0,0,0,.7),
inset 30px 30px 50px rgba(217,70,239,.18),
0 0 100px rgba(99,102,241,.4),
0 0 50px rgba(217,70,239,.25);
opacity: .55;
filter: blur(.4px);
animation: futurePlanetFloat 28s ease-in-out infinite alternate;
}
.future-bg__planet::before,
.future-bg__planet::after {
content: '';
position: absolute;
top: 50%; left: 50%;
border-radius: 50%;
border: 2px solid rgba(217,70,239,.55);
box-shadow: 0 0 16px rgba(217,70,239,.35);
}
.future-bg__planet::before {
width: 640px; height: 70px;
margin: -35px 0 0 -320px;
transform: rotate(-22deg);
}
.future-bg__planet::after {
width: 560px; height: 50px;
margin: -25px 0 0 -280px;
transform: rotate(-18deg);
border-color: rgba(34,211,238,.4);
border-width: 1.5px;
box-shadow: 0 0 14px rgba(34,211,238,.35);
}
@keyframes futurePlanetFloat {
from { transform: translateY(0) rotate(0deg); }
to { transform: translateY(-30px) rotate(2deg); }
}
/* ── Globe wireframe (gauche) ── */
.future-bg__globe {
position: absolute;
top: 55%;
left: -80px;
width: 320px; height: 320px;
opacity: .55;
animation: futureGlobeSpin 60s linear infinite;
filter: drop-shadow(0 0 18px rgba(34,211,238,.35));
}
@keyframes futureGlobeSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Hexagones flottants ── */
.future-bg__hex {
position: absolute;
background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.16));
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
filter: drop-shadow(0 0 14px rgba(139,92,246,.45));
animation: futureHexFloat 18s ease-in-out infinite alternate;
}
.future-bg__hex::before {
content: '';
position: absolute;
inset: 4px;
background: rgba(4,4,28,.65);
clip-path: inherit;
}
.future-bg__hex--1 { top: 14%; left: 5%; width: 80px; height: 92px; animation-duration: 14s; }
.future-bg__hex--2 { top: 38%; right: 4%; width: 110px; height: 127px; animation-duration: 22s; animation-delay: -3s; }
.future-bg__hex--3 { bottom: 22%; left: 9%; width: 100px; height: 115px; animation-duration: 18s; animation-delay: -8s; }
.future-bg__hex--4 { top: 70%; right: 18%; width: 70px; height: 80px; animation-duration: 16s; animation-delay: -5s; }
@keyframes futureHexFloat {
from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .85; }
to { transform: translate3d(20px, -40px, 0) rotate(45deg); opacity: 1; }
}
/* ── Streams de données verticaux (Matrix subtil) ── */
.future-bg__stream {
position: absolute;
top: -30vh; bottom: -30vh;
width: 1.5px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(34,211,238,.85) 28%,
rgba(217,70,239,.7) 50%,
rgba(139,92,246,.55) 72%,
transparent 100%);
filter: blur(.4px) drop-shadow(0 0 4px rgba(34,211,238,.4));
animation: futureStreamFall 9s linear infinite;
}
.future-bg__stream--1 { left: 12%; animation-duration: 11s; animation-delay: 0s; }
.future-bg__stream--2 { left: 38%; animation-duration: 14s; animation-delay: -3s; }
.future-bg__stream--3 { left: 64%; animation-duration: 9s; animation-delay: -6s; }
.future-bg__stream--4 { left: 86%; animation-duration: 12s; animation-delay: -1s; }
@keyframes futureStreamFall {
from { transform: translateY(-30vh); }
to { transform: translateY(130vh); }
}
/* ── Trame de circuits SVG ── */
.future-bg__circuit {
position: absolute;
top: 35%;
left: 50%;
width: 600px; height: 600px;
transform: translate(-50%, -50%);
opacity: .25;
animation: futureCircuitPulse 5s ease-in-out infinite alternate;
}
@keyframes futureCircuitPulse {
from { opacity: .15; }
to { opacity: .42; }
}
/* ── Faisceau lumineux balayant ── */
.future-bg__beam {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(70deg,
transparent 42%,
rgba(34,211,238,.10) 49%,
rgba(217,70,239,.10) 51%,
transparent 58%);
animation: futureBeamSweep 16s ease-in-out infinite alternate;
}
@keyframes futureBeamSweep {
from { transform: translate(0%, -8%) rotate(0deg); }
to { transform: translate(0%, 8%) rotate(4deg); }
}
/* ── Crosshair central subtile ── */
.future-bg__crosshair {
position: absolute;
top: 50%; left: 50%;
width: 80px; height: 80px;
transform: translate(-50%, -50%);
opacity: .12;
background:
/* Cercle */
radial-gradient(circle, transparent 38%, rgba(34,211,238,.7) 39%, rgba(34,211,238,.7) 40%, transparent 41%),
/* Croix */
linear-gradient(0deg, transparent 48%, rgba(34,211,238,.7) 48.5%, rgba(34,211,238,.7) 51.5%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(34,211,238,.7) 48.5%, rgba(34,211,238,.7) 51.5%, transparent 52%);
animation: futureCrosshairSpin 24s linear infinite;
}
@keyframes futureCrosshairSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ── Indicateur pulse en bas-gauche ── */
.future-bg__pulse {
position: absolute;
bottom: 80px; left: 50px;
width: 12px; height: 12px;
border-radius: 50%;
background: #22D3EE;
box-shadow: 0 0 12px rgba(34,211,238,.85);
animation: futurePulseBlink 1.4s ease-in-out infinite;
}
@keyframes futurePulseBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.7); }
}
/* ── Cacher quelques détails sur petits écrans ── */
@media (max-width: 768px) {
.future-bg__planet { width: 240px; height: 240px; right: -100px; }
.future-bg__planet::before { width: 360px; margin-left: -180px; }
.future-bg__planet::after { width: 320px; margin-left: -160px; }
.future-bg__globe { width: 200px; height: 200px; left: -60px; }
.future-bg__hud { display: none; }
.future-bg__corner { width: 36px; height: 36px; }
.future-bg__circuit { display: none; }
.future-bg__hex--2, .future-bg__hex--4 { display: none; }
}
/* Réduit le mouvement sur prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.future-bg__planet, .future-bg__globe, .future-bg__hex,
.future-bg__stream, .future-bg__circuit, .future-bg__beam,
.future-bg__crosshair, .future-bg__pulse, .future-bg__corner {
animation: none !important;
}
}
/* ================================================================
FUTURE BG DECOR — supplément de densité (hex grid, lunes, radar,
constellations, glyphes, règles, reticles, orbites, fireflies)
================================================================ */
/* ── Trame hexagonale tapissant tout le viewport ── */
.future-bg__hexgrid {
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 52px;
opacity: .55;
-webkit-mask-image: radial-gradient(ellipse 100% 100% at center, #000 30%, transparent 90%);
mask-image: radial-gradient(ellipse 100% 100% at center, #000 30%, transparent 90%);
animation: futureHexgridDrift 60s linear infinite;
}
@keyframes futureHexgridDrift {
to { background-position: 60px 52px; }
}
/* ── Lunes additionnelles ── */
.future-bg__moon {
position: absolute;
border-radius: 50%;
filter: blur(.3px);
box-shadow: 0 0 24px rgba(34,211,238,.25);
opacity: .55;
}
.future-bg__moon--1 {
top: 22%; left: 32%;
width: 38px; height: 38px;
background: radial-gradient(circle at 30% 30%, #C7D2FE 0%, #6366F1 45%, #1E1B4B 100%);
animation: futureMoonDrift1 36s ease-in-out infinite alternate;
}
.future-bg__moon--2 {
bottom: 30%; right: 28%;
width: 28px; height: 28px;
background: radial-gradient(circle at 35% 30%, #FBCFE8 0%, #D946EF 45%, #4A044E 100%);
box-shadow: 0 0 22px rgba(217,70,239,.45);
animation: futureMoonDrift2 30s ease-in-out infinite alternate;
}
@keyframes futureMoonDrift1 {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(40px, -25px) scale(1.1); }
}
@keyframes futureMoonDrift2 {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-30px, 20px) scale(.85); }
}
/* ── Radar sweep circulaire (bas-droite) ── */
.future-bg__radar {
position: absolute;
bottom: 90px; right: 70px;
width: 140px; height: 140px;
border-radius: 50%;
border: 1px solid rgba(34,211,238,.45);
box-shadow:
inset 0 0 24px rgba(34,211,238,.12),
0 0 14px rgba(34,211,238,.18);
background:
radial-gradient(circle, transparent 0%, transparent 33%, rgba(34,211,238,.18) 33.5%, transparent 34.5%, transparent 66%, rgba(34,211,238,.18) 66.5%, transparent 67.5%),
radial-gradient(circle, rgba(34,211,238,.06), rgba(34,211,238,0) 70%);
overflow: hidden;
opacity: .45;
}
.future-bg__radar::before,
.future-bg__radar::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 80%; height: 1px;
background: rgba(34,211,238,.4);
transform: translate(-50%, -50%);
}
.future-bg__radar::after {
width: 1px; height: 80%;
}
.future-bg__radar-sweep {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: conic-gradient(
from 0deg,
rgba(34,211,238,.55) 0deg,
rgba(34,211,238,.05) 30deg,
transparent 60deg,
transparent 360deg);
border-radius: 50%;
animation: futureRadarSpin 4s linear infinite;
}
@keyframes futureRadarSpin {
to { transform: rotate(360deg); }
}
/* ── Constellations ── */
.future-bg__constellation {
position: absolute;
opacity: .65;
filter: drop-shadow(0 0 4px rgba(34,211,238,.5));
animation: futureConstellationPulse 5s ease-in-out infinite alternate;
}
.future-bg__constellation--1 {
top: 18%; left: 22%;
width: 220px; height: 160px;
}
.future-bg__constellation--2 {
bottom: 14%; right: 18%;
width: 200px; height: 140px;
filter: drop-shadow(0 0 4px rgba(217,70,239,.5));
}
@keyframes futureConstellationPulse {
from { opacity: .45; }
to { opacity: .85; }
}
/* ── Glyphes flottants (triangles, diamants, croix, ⬡) ── */
.future-bg__glyph {
position: absolute;
font-family: 'Orbitron', monospace;
font-weight: 400;
pointer-events: none;
animation: futureGlyphFloat 12s ease-in-out infinite alternate;
}
.future-bg__glyph--tri-1 { top: 8%; left: 45%; font-size: 18px; color: rgba(34,211,238,.55); animation-delay: -2s; }
.future-bg__glyph--tri-2 { bottom: 12%; left: 38%; font-size: 14px; color: rgba(217,70,239,.55); animation-delay: -5s; }
.future-bg__glyph--diamond-1 { top: 32%; right: 38%; font-size: 16px; color: rgba(167,139,250,.6); animation-delay: -1s; }
.future-bg__glyph--diamond-2 { bottom: 38%; left: 18%; font-size: 22px; color: rgba(34,211,238,.55); animation-delay: -4s; }
.future-bg__glyph--cross-1 { top: 24%; left: 64%; font-size: 20px; color: rgba(255,255,255,.5); animation-delay: -2s; }
.future-bg__glyph--cross-2 { top: 58%; left: 58%; font-size: 14px; color: rgba(217,70,239,.55); animation-delay: -7s; }
.future-bg__glyph--cross-3 { bottom: 8%; right: 38%; font-size: 18px; color: rgba(34,211,238,.6); animation-delay: -3s; }
.future-bg__glyph--ring-1 { top: 48%; right: 52%; font-size: 24px; color: rgba(167,139,250,.5); animation-delay: -6s; }
.future-bg__glyph--ring-2 { bottom: 42%; left: 60%; font-size: 18px; color: rgba(217,70,239,.55); animation-delay: -8s; }
@keyframes futureGlyphFloat {
from { transform: translateY(0) rotate(0deg); opacity: .65; }
to { transform: translateY(-18px) rotate(20deg); opacity: 1; }
}
/* ── Étiquettes télémétrie additionnelles ── */
.future-bg__tag {
position: absolute;
font-family: 'Orbitron', monospace;
font-size: .62rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(34,211,238,.65);
text-shadow: 0 0 6px rgba(34,211,238,.55);
background: rgba(4, 4, 28, .55);
padding: 4px 9px;
border: 1px solid rgba(34,211,238,.35);
border-radius: 3px;
white-space: nowrap;
}
.future-bg__tag--1 { top: 28%; left: 4px; color: rgba(167,139,250,.7); border-color: rgba(167,139,250,.35); text-shadow: 0 0 6px rgba(167,139,250,.5); }
.future-bg__tag--2 { top: 60%; right: 4px; color: rgba(217,70,239,.75); border-color: rgba(217,70,239,.4); text-shadow: 0 0 6px rgba(217,70,239,.55); }
.future-bg__tag--3 { bottom: 24%; left: 4px; }
.future-bg__tag--4 { top: 14%; right: 4px; color: rgba(167,139,250,.7); border-color: rgba(167,139,250,.4); }
/* ── Règles graduées sur les bords latéraux ── */
.future-bg__ruler {
position: absolute;
top: 0; bottom: 0;
width: 8px;
background: repeating-linear-gradient(
to bottom,
rgba(34,211,238,.45) 0 1px,
transparent 1px 24px);
opacity: .5;
}
.future-bg__ruler--left { left: 0; }
.future-bg__ruler--right { right: 0; background: repeating-linear-gradient(
to bottom,
rgba(217,70,239,.45) 0 1px,
transparent 1px 24px); }
/* ── Reticles (cibles) supplémentaires plus petites ── */
.future-bg__reticle {
position: absolute;
width: 28px; height: 28px;
opacity: .55;
background:
radial-gradient(circle, transparent 38%, rgba(34,211,238,.85) 39%, rgba(34,211,238,.85) 41%, transparent 42%),
linear-gradient(0deg, transparent 47%, rgba(34,211,238,.7) 48%, rgba(34,211,238,.7) 52%, transparent 53%),
linear-gradient(90deg, transparent 47%, rgba(34,211,238,.7) 48%, rgba(34,211,238,.7) 52%, transparent 53%);
filter: drop-shadow(0 0 4px rgba(34,211,238,.6));
}
.future-bg__reticle--1 { top: 20%; right: 12%; animation: futureReticlePulse 3s ease-in-out infinite alternate; }
.future-bg__reticle--2 { bottom: 25%; left: 28%; transform: scale(.8); animation: futureReticlePulse 4s ease-in-out infinite alternate; animation-delay: -1.5s; }
.future-bg__reticle--3 { top: 65%; right: 38%; transform: scale(1.1); animation: futureReticlePulse 5s ease-in-out infinite alternate; animation-delay: -2.5s; }
@keyframes futureReticlePulse {
from { opacity: .35; filter: drop-shadow(0 0 2px rgba(34,211,238,.4)); }
to { opacity: .9; filter: drop-shadow(0 0 8px rgba(34,211,238,.9)); }
}
/* ── Orbites concentriques ── */
.future-bg__orbit {
position: absolute;
top: 75%; left: 70%;
width: 280px; height: 280px;
pointer-events: none;
opacity: .35;
}
.future-bg__orbit-ring {
position: absolute;
top: 50%; left: 50%;
border: 1px solid rgba(34,211,238,.45);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: futureOrbitSpin 50s linear infinite;
}
.future-bg__orbit-ring--1 {
width: 140px; height: 140px;
border-color: rgba(34,211,238,.45);
animation-duration: 28s;
}
.future-bg__orbit-ring--1::before {
content: '';
position: absolute;
top: -3px; left: 50%;
width: 6px; height: 6px;
margin-left: -3px;
background: #22D3EE;
border-radius: 50%;
box-shadow: 0 0 8px rgba(34,211,238,.85);
}
.future-bg__orbit-ring--2 {
width: 200px; height: 200px;
border-color: rgba(217,70,239,.4);
animation-duration: 42s;
animation-direction: reverse;
}
.future-bg__orbit-ring--2::before {
content: '';
position: absolute;
bottom: -3px; left: 50%;
width: 5px; height: 5px;
margin-left: -2.5px;
background: #D946EF;
border-radius: 50%;
box-shadow: 0 0 8px rgba(217,70,239,.85);
}
.future-bg__orbit-ring--3 {
width: 280px; height: 280px;
border-color: rgba(167,139,250,.35);
animation-duration: 56s;
}
.future-bg__orbit-ring--3::before {
content: '';
position: absolute;
top: 30%; right: -2px;
width: 4px; height: 4px;
background: #A78BFA;
border-radius: 50%;
box-shadow: 0 0 8px rgba(167,139,250,.85);
}
@keyframes futureOrbitSpin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ── Fireflies / particules en dérive ── */
.future-bg__firefly {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(34,211,238,.95);
box-shadow:
0 0 6px rgba(34,211,238,.95),
0 0 14px rgba(34,211,238,.55);
animation: futureFireflyDrift 16s ease-in-out infinite alternate,
futureFireflyBlink 3s ease-in-out infinite alternate;
}
.future-bg__firefly--1 { top: 35%; left: 40%; animation-duration: 14s, 3s; }
.future-bg__firefly--2 { top: 22%; left: 70%; background: rgba(217,70,239,.95);
box-shadow: 0 0 6px rgba(217,70,239,.95), 0 0 14px rgba(217,70,239,.55);
animation-duration: 18s, 4s; animation-delay: -3s, -1s;
}
.future-bg__firefly--3 { top: 60%; left: 22%; background: rgba(167,139,250,.95);
box-shadow: 0 0 6px rgba(167,139,250,.95), 0 0 14px rgba(167,139,250,.55);
animation-duration: 20s, 5s; animation-delay: -7s, -2s;
}
.future-bg__firefly--4 { top: 45%; left: 88%; animation-duration: 16s, 3.5s; animation-delay: -2s; }
.future-bg__firefly--5 { top: 78%; left: 50%; background: rgba(217,70,239,.95);
box-shadow: 0 0 6px rgba(217,70,239,.95), 0 0 14px rgba(217,70,239,.55);
animation-duration: 22s, 4.5s; animation-delay: -10s;
}
.future-bg__firefly--6 { top: 12%; left: 12%; animation-duration: 19s, 3.2s; animation-delay: -5s; }
@keyframes futureFireflyDrift {
from { transform: translate(0, 0); }
to { transform: translate(60px, -40px); }
}
@keyframes futureFireflyBlink {
from { opacity: .3; }
to { opacity: 1; }
}
/* ── Mobile : on cache la moitié des nouveaux éléments pour pas saturer ── */
@media (max-width: 768px) {
.future-bg__radar,
.future-bg__constellation,
.future-bg__tag,
.future-bg__ruler,
.future-bg__orbit,
.future-bg__moon--1, .future-bg__moon--2,
.future-bg__glyph--diamond-2, .future-bg__glyph--ring-1, .future-bg__glyph--ring-2,
.future-bg__firefly--3, .future-bg__firefly--5, .future-bg__firefly--6 {
display: none;
}
}
/* prefers-reduced-motion : on stop les animations ajoutées */
@media (prefers-reduced-motion: reduce) {
.future-bg__hexgrid, .future-bg__moon, .future-bg__radar-sweep,
.future-bg__constellation, .future-bg__glyph, .future-bg__reticle,
.future-bg__orbit-ring, .future-bg__firefly {
animation: none !important;
}
}
/* ================================================================
FUTURE THEME — sections transparentes pour laisser voir le décor
+ boost d'opacité des éléments .future-bg pour qu'ils ressortent
================================================================ */
/* Toutes les sections deviennent transparentes en mode futuriste */
[data-theme="future"] .hero,
[data-theme="future"] .section,
[data-theme="future"] .steps,
[data-theme="future"] .demo-section,
[data-theme="future"] .gallery-section,
[data-theme="future"] .testimonials,
[data-theme="future"] .partners,
[data-theme="future"] .market,
[data-theme="future"] .pricing,
[data-theme="future"] .cfg-section,
[data-theme="future"] .sectors,
[data-theme="future"] .guarantee,
[data-theme="future"] .faq,
[data-theme="future"] .contact,
[data-theme="future"] .page-hero,
[data-theme="future"] footer.footer {
background: transparent !important;
}
[data-theme="future"] .demo-section::before,
[data-theme="future"] .contact::before {
display: none !important;
}
/* Le main aussi (au cas où) */
[data-theme="future"] main { background: transparent !important; }
/* Boost d'opacité des éléments décoratifs ── on doit VOIR le décor */
[data-theme="future"] .future-bg__hexgrid { opacity: .85; }
[data-theme="future"] .future-bg__planet { opacity: .85; }
[data-theme="future"] .future-bg__globe { opacity: .85; }
[data-theme="future"] .future-bg__moon { opacity: .85; }
[data-theme="future"] .future-bg__radar { opacity: .8; }
[data-theme="future"] .future-bg__constellation { opacity: .9; }
[data-theme="future"] .future-bg__circuit { opacity: .55; }
[data-theme="future"] .future-bg__crosshair { opacity: .35; }
[data-theme="future"] .future-bg__orbit { opacity: .7; }
[data-theme="future"] .future-bg__hex { opacity: 1; }
[data-theme="future"] .future-bg__beam { opacity: 1; }
/* Couleurs un peu plus saturées sur les glyphes/tags */
[data-theme="future"] .future-bg__glyph { opacity: 1; }
[data-theme="future"] .future-bg__tag { opacity: 1; }
[data-theme="future"] .future-bg__hud { opacity: 1; }
[data-theme="future"] .future-bg__corner { opacity: 1; }
[data-theme="future"] .future-bg__reticle { opacity: 1; }
[data-theme="future"] .future-bg__firefly { opacity: 1; }
[data-theme="future"] .future-bg__ruler { opacity: .85; }
/* Empile correctement : décor au z-index 1, contenu au z-index 3, mais
la nav/footer doivent rester lisibles donc on garde leur background
semi-transparent. */
[data-theme="future"] .nav,
[data-theme="future"] .nav.scrolled {
background: rgba(4, 4, 28, .60) !important;
}
[data-theme="future"] footer.footer {
background: rgba(4, 4, 28, .55) !important;
border-top: 1px solid rgba(139,92,246,.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Le décor devient un peu plus haut (au-dessus du body bg mais sous contenu) */
[data-theme="future"] .future-bg { z-index: 2; }
/* nav/footer z-index handled separately, body kept fixed */
/* ================================================================
RETRO TOGGLE — bouton mode années 80 (synthwave)
================================================================ */
.retro-toggle {
position: fixed;
right: 22px;
bottom: 286px;
z-index: 250;
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(180deg, #1A0033 0%, #0A0014 65%, #2A0040 100%);
border: 1px solid rgba(255, 0, 255, .55);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 18px rgba(255, 0, 255, .25),
inset 0 0 14px rgba(255, 0, 255, .12);
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
border-color .35s ease,
box-shadow .35s ease;
}
.retro-toggle:hover {
transform: translateY(-3px) scale(1.05);
border-color: rgba(0, 255, 255, .8);
box-shadow:
0 12px 28px rgba(0,0,0,.6),
0 0 28px rgba(255, 0, 255, .45),
0 0 18px rgba(0, 255, 255, .25),
inset 0 0 16px rgba(255, 0, 255, .18);
}
.retro-toggle:active { transform: translateY(-1px) scale(.98); }
.retro-toggle:focus-visible { outline: 2px solid #FF00FF; outline-offset: 4px; }
.retro-toggle__svg {
width: 34px; height: 34px;
filter: drop-shadow(0 0 6px rgba(255, 0, 255, .55)) drop-shadow(0 0 4px rgba(0, 255, 255, .35));
margin-bottom: 2px;
}
/* Label persistant sous l'icône — "80s" */
.retro-toggle {
flex-direction: column;
gap: 0;
}
.retro-toggle__label {
font-family: 'VT323', 'Courier New', monospace;
font-size: .8rem;
font-weight: 400;
letter-spacing: .1em;
color: #FFD000;
line-height: 1;
text-shadow: 0 0 4px rgba(255, 0, 255, .6);
pointer-events: none;
}
.retro-toggle--on .retro-toggle__label {
color: #00FFFF;
text-shadow: 0 0 6px rgba(0, 255, 255, .8);
}
.retro-toggle__halo {
position: absolute;
inset: -3px;
border-radius: 22px;
pointer-events: none;
background: radial-gradient(60% 60% at 50% 50%, rgba(255, 0, 255, .35), transparent 70%);
opacity: 0;
transition: opacity .35s ease;
}
.retro-toggle:hover .retro-toggle__halo,
.retro-toggle--on .retro-toggle__halo { opacity: 1; }
.retro-toggle--on {
border-color: rgba(255, 0, 255, .95);
box-shadow:
0 14px 36px rgba(255, 0, 255, .35),
0 0 32px rgba(255, 0, 255, .55),
0 0 22px rgba(0, 255, 255, .35),
inset 0 0 22px rgba(255, 0, 255, .25);
}
.retro-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background: rgba(15, 0, 25, .96);
color: #FFB6FF;
padding: 7px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 0, 255, .55);
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
font-family: 'VT323', 'Courier New', monospace;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(255, 0, 255, .25);
}
.retro-toggle__chip::after {
content: '';
position: absolute;
right: -5px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 9px; height: 9px;
background: inherit;
border: inherit;
border-left: 0;
border-bottom: 0;
}
.retro-toggle:hover .retro-toggle__chip,
.retro-toggle:focus-visible .retro-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.retro-toggle__chip-on, .retro-toggle__chip-off { display: inline; }
.retro-toggle__chip-off { display: none; }
.retro-toggle--on .retro-toggle__chip-on { display: none; }
.retro-toggle--on .retro-toggle__chip-off { display: inline; }
@media (max-width: 768px) {
.retro-toggle { width: 44px; height: 44px; left: calc(50% - 48px); right: auto; bottom: 16px; border-radius: 13px; }
.retro-toggle__svg { width: 26px; height: 26px; margin-bottom: 1px; }
.retro-toggle__label { font-size: .65rem; }
.retro-toggle__chip { display: none; }
}
/* ================================================================
RETRO THEME — années 80 / synthwave (magenta + cyan + scanlines)
================================================================ */
[data-theme="retro"] {
--bg: #08001A;
--bg-2: #14002D;
--bg-card: #1A0040;
--border: rgba(255, 0, 255, .25);
--border-2: rgba(255, 0, 255, .55);
--text: #FFE6FA;
--muted: #C9A6E0;
--muted-2: #E0BBF0;
--orange: #FFD000;
--indigo: #FF00FF;
--violet: #FF6EC7;
}
[data-theme="retro"] body {
background-attachment: fixed;
background-image:
/* Lueur chaude horizon */
radial-gradient(ellipse 100% 8% at 50% 50%, rgba(255, 30, 0, .50), transparent 65%),
/* Nébuleuses */
radial-gradient(ellipse 45% 35% at 10% 5%, rgba(120, 0, 255, .25), transparent 70%),
radial-gradient(ellipse 45% 35% at 90% 8%, rgba(255, 0, 160, .22), transparent 70%),
radial-gradient(ellipse 20% 18% at 50% 22%, rgba(255, 80, 0, .14), transparent 70%),
/* Silhouette ville */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23060018' d='M0,140 V120 H30 V100 H55 V80 H80 V62 H100 V48 H118 V34 H130 V22 H142 V16 H150 V22 H160 V34 H172 V50 H190 V68 H215 V50 H232 V35 H248 V20 H262 V8 H275 V20 H288 V35 H302 V52 H325 V70 H348 V52 H368 V35 H385 V20 H398 V35 H412 V52 H430 V70 H452 V52 H470 V32 H488 V18 H502 V6 H515 V18 H528 V32 H548 V50 H568 V68 H590 V85 H615 V65 H638 V45 H655 V28 H670 V15 H685 V28 H698 V45 H718 V62 H740 V80 H762 V62 H782 V42 H798 V26 H812 V12 H825 V26 H838 V42 H858 V60 H880 V78 H902 V60 H922 V40 H938 V24 H952 V10 H965 V24 H978 V40 H998 V58 H1020 V75 H1042 V55 H1062 V38 H1078 V22 H1092 V38 H1105 V55 H1125 V72 H1148 V55 H1168 V35 H1185 V18 H1200 V35 H1215 V55 H1235 V72 H1258 V52 H1278 V32 H1295 V15 H1310 V32 H1323 V52 H1345 V70 H1370 V88 H1398 V105 H1420 V122 H1440 V140Z'/%3E%3Crect fill='%23FF00FF' opacity='.85' x='132' y='25' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.65' x='145' y='38' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.85' x='265' y='14' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.70' x='278' y='26' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.85' x='506' y='11' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.70' x='519' y='24' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.80' x='673' y='22' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.85' x='815' y='19' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.75' x='955' y='17' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.80' x='1188' y='26' width='7' height='5'/%3E%3Crect fill='%23FF00FF' opacity='.70' x='1302' y='22' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.80' x='143' y='48' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.70' x='265' y='36' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.80' x='390' y='27' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.70' x='504' y='23' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.80' x='658' y='33' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.65' x='686' y='23' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.80' x='828' y='30' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.70' x='967' y='27' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.80' x='1096' y='44' width='7' height='5'/%3E%3Crect fill='%2300FFFF' opacity='.65' x='1315' y='20' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.65' x='156' y='36' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.55' x='280' y='43' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.65' x='401' y='43' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.55' x='530' y='36' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.60' x='843' y='46' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.55' x='970' y='44' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.65' x='1108' y='62' width='7' height='5'/%3E%3Crect fill='%23FFD700' opacity='.50' x='1325' y='36' width='7' height='5'/%3E%3Ccircle fill='%23FF3300' opacity='.9' cx='150' cy='14' r='2.5'/%3E%3Ccircle fill='%23FF3300' opacity='.8' cx='275' cy='5' r='2.5'/%3E%3Ccircle fill='%23FF3300' opacity='.9' cx='515' cy='4' r='2.5'/%3E%3Ccircle fill='%23FF3300' opacity='.8' cx='685' cy='13' r='2'/%3E%3Ccircle fill='%23FF3300' opacity='.9' cx='825' cy='10' r='2.5'/%3E%3Ccircle fill='%23FF3300' opacity='.8' cx='965' cy='8' r='2.5'/%3E%3Ccircle fill='%23FF3300' opacity='.9' cx='1200' cy='16' r='2'/%3E%3C/svg%3E"),
/* Silhouette montagnes */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230C0025' d='M0,80 0,58 80,30 160,55 240,22 320,50 400,16 480,46 560,12 640,40 720,8 800,36 880,14 960,42 1040,18 1120,44 1200,22 1280,48 1360,26 1440,52 1440,80Z'/%3E%3C/svg%3E"),
/* Ciel profond */
linear-gradient(180deg,
#010009 0%,
#050018 12%,
#0E002B 28%,
#1C0045 40%,
#2E0060 48%,
#3E006E 50%,
#1E003E 55%,
#050016 100%);
background-size:
100% 100%, 100% 100%, 100% 100%, 100% 100%,
100% 50%, 100% 40%,
100% 100%;
background-position:
center center, center center, center center, center center,
center bottom, center bottom,
center center;
background-repeat: no-repeat;
color: var(--text);
}
/* Étoiles — 18 points, taille variable, scintillement */
html[data-theme="retro"]::before {
content: '';
position: fixed;
inset: 0 0 52vh 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle, rgba(255,255,255,1) 1.5px, transparent 1.5px) 6% 8% / 127px 83px,
radial-gradient(circle, rgba(255,200,255,.90) 1px, transparent 1px) 17% 5% / 191px 69px,
radial-gradient(circle, rgba(255,255,255,.95) 1.5px, transparent 1.5px) 31% 18% / 109px 131px,
radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px) 49% 2% / 157px 87px,
radial-gradient(circle, rgba(200,180,255,1) 1.5px, transparent 1.5px) 61% 14% / 79px 113px,
radial-gradient(circle, rgba(255,255,255,.70) 1px, transparent 1px) 75% 7% / 201px 75px,
radial-gradient(circle, rgba(255,255,255,.85) 1.5px, transparent 1.5px) 86% 21% / 121px 91px,
radial-gradient(circle, rgba(180,200,255,.80) 1px, transparent 1px) 11% 35% / 173px 139px,
radial-gradient(circle, rgba(255,255,255,.95) 1.5px, transparent 1.5px) 42% 27% / 95px 115px,
radial-gradient(circle, rgba(255,180,255,.70) 1px, transparent 1px) 69% 38% / 145px 79px,
radial-gradient(circle, rgba(255,255,255,.80) 1px, transparent 1px) 23% 44% / 185px 63px,
radial-gradient(circle, rgba(200,255,255,.75) 1px, transparent 1px) 56% 41% / 107px 97px,
radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1px) 38% 12% / 145px 60px,
radial-gradient(circle, rgba(255,220,255,.65) 1px, transparent 1px) 82% 32% / 165px 88px,
radial-gradient(circle, rgba(220,220,255,.80) 1.5px, transparent 1.5px) 4% 28% / 90px 120px,
radial-gradient(circle, rgba(255,255,255,.70) 1px, transparent 1px) 92% 4% / 118px 74px,
radial-gradient(circle, rgba(255,200,200,.65) 1px, transparent 1px) 28% 3% / 200px 95px,
radial-gradient(circle, rgba(255,255,255,.90) 1px, transparent 1px) 64% 22% / 88px 102px;
animation: retroStarTwinkle 6s ease-in-out infinite alternate;
}
@keyframes retroStarTwinkle {
0% { opacity: 1; }
50% { opacity: .68; }
100% { opacity: 1; }
}
/* Soleil synthwave — plus grand, halos multiples, pulsation */
html[data-theme="retro"]::after {
content: '';
position: fixed;
width: 340px;
height: 170px;
left: 50%;
bottom: 50vh;
transform: translateX(-50%);
border-radius: 170px 170px 0 0;
pointer-events: none;
z-index: 0;
background:
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 7px,
rgba(4,0,15,.92) 7px,
rgba(4,0,15,.92) 11px
),
linear-gradient(0deg, #FF5000 0%, #FF2040 30%, #FF0088 55%, #CC00FF 100%);
box-shadow:
0 0 28px 5px rgba(255, 110, 0, .75),
0 0 70px 18px rgba(255, 20, 80, .60),
0 0 140px 42px rgba(200, 0, 180, .45),
0 0 260px 78px rgba(130, 0, 255, .28),
0 -3px 0 0 rgba(255, 255, 255, .40);
animation: retroSunPulse 4s ease-in-out infinite alternate;
}
@keyframes retroSunPulse {
from { box-shadow:
0 0 28px 5px rgba(255, 110, 0, .75),
0 0 70px 18px rgba(255, 20, 80, .60),
0 0 140px 42px rgba(200, 0, 180, .45),
0 0 260px 78px rgba(130, 0, 255, .28),
0 -3px 0 0 rgba(255, 255, 255, .40); }
to { box-shadow:
0 0 36px 8px rgba(255, 110, 0, .90),
0 0 88px 26px rgba(255, 20, 80, .75),
0 0 170px 58px rgba(200, 0, 180, .60),
0 0 310px 95px rgba(130, 0, 255, .38),
0 -3px 0 0 rgba(255, 255, 255, .55); }
}
[data-theme="retro"] body::before {
content: '';
position: fixed;
left: 0; right: 0;
top: 50vh;
bottom: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 0, 255, .95) 0, rgba(0, 255, 255, .55) 2px, transparent 3px),
repeating-linear-gradient(
to right,
rgba(255, 0, 255, .72) 0 2px,
transparent 2px 50px),
repeating-linear-gradient(
to bottom,
rgba(0, 255, 255, .72) 0 2px,
transparent 2px 50px);
transform: perspective(520px) rotateX(62deg);
transform-origin: top center;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, #000 18%, #000 100%);
mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, #000 18%, #000 100%);
z-index: 0;
animation: retroGridScroll 3s linear infinite;
}
@keyframes retroGridScroll {
to { background-position: 0 0, 0 50px, 0 50px; }
}
[data-theme="retro"] body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background:
/* Voile sombre uniforme — atténue le fond pour que le texte des cartes ressorte */
linear-gradient(rgba(6, 0, 20, .42), rgba(6, 0, 20, .42)),
/* Vignette plus marquée sur les bords */
radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,.85) 100%),
/* Scanlines CRT (signature 80s) */
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, .28) 0 2px,
transparent 2px 4px);
z-index: 1;
}
[data-theme="retro"] main,
[data-theme="retro"] nav,
[data-theme="retro"] footer,
[data-theme="retro"] .hero { position: relative; z-index: 2; }
/* ================================================================
RETRO BG — Éléments injectés dynamiquement (palmiers, shapes, comètes)
================================================================ */
#retro-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* Palmiers — silhouettes sombres à l'horizon */
.retro-bg__palm {
position: absolute;
bottom: 50%;
width: 210px;
height: 370px;
filter: drop-shadow(0 0 18px rgba(255, 0, 255, .35)) drop-shadow(0 0 6px rgba(0, 255, 255, .2));
}
.retro-bg__palm svg { width: 100%; height: 100%; display: block; }
.retro-bg__palm--l { left: -25px; }
.retro-bg__palm--r { right: -25px; transform: scaleX(-1); }
/* Géométrie neon flottante — diamonds */
.retro-bg__geo {
position: absolute;
border: 1.5px solid;
transform: rotate(45deg);
animation: retroGeoFloat ease-in-out infinite alternate;
}
.retro-bg__geo--1 { width:54px; height:54px; top:10%; left:7%; border-color:#FF00FF; box-shadow:0 0 14px #FF00FF, 0 0 28px rgba(255,0,255,.25); animation-duration:8s; }
.retro-bg__geo--2 { width:28px; height:28px; top:6%; left:23%; border-color:#00FFFF; box-shadow:0 0 10px #00FFFF, 0 0 20px rgba(0,255,255,.2); animation-duration:11s; animation-delay:-3s; }
.retro-bg__geo--3 { width:48px; height:48px; top:15%; right:7%; border-color:#FF6EC7; box-shadow:0 0 14px #FF6EC7, 0 0 28px rgba(255,110,199,.25); animation-duration:9.5s; animation-delay:-5s; }
.retro-bg__geo--4 { width:22px; height:22px; top:30%; right:20%; border-color:#FFD700; box-shadow:0 0 10px #FFD700; animation-duration:13s; animation-delay:-7s; }
.retro-bg__geo--5 { width:40px; height:40px; top:42%; left:5%; border-color:#CC00FF; box-shadow:0 0 12px #CC00FF, 0 0 24px rgba(200,0,255,.25); animation-duration:10s; animation-delay:-2s; }
@keyframes retroGeoFloat {
from { transform: rotate(45deg) translateY(0); opacity: .42; }
to { transform: rotate(45deg) translateY(-24px); opacity: .90; }
}
/* Comètes traversant l'écran de gauche à droite */
.retro-bg__comet {
position: absolute;
height: 1.5px;
left: 0;
border-radius: 2px;
animation: retroComet linear infinite;
opacity: 0;
}
.retro-bg__comet--1 { width:180px; top:16%; background:linear-gradient(90deg,transparent,#FF00FF 40%,#00FFFF); box-shadow:0 0 6px rgba(255,0,255,.8); animation-duration:5.5s; animation-delay:0.5s; }
.retro-bg__comet--2 { width:120px; top:30%; background:linear-gradient(90deg,transparent,#00FFFF 40%,#FF00FF); box-shadow:0 0 6px rgba(0,255,255,.8); animation-duration:7s; animation-delay:-2.5s; }
.retro-bg__comet--3 { width:90px; top:23%; background:linear-gradient(90deg,transparent,#FF6EC7 40%,#FFD700); box-shadow:0 0 5px rgba(255,110,199,.8); animation-duration:9s; animation-delay:-5s; }
@keyframes retroComet {
0% { transform: translateX(-220px); opacity: 0; }
4% { opacity: 1; }
94% { opacity: .8; }
100% { transform: translateX(calc(100vw + 250px)); opacity: 0; }
}
/* Lignes de vitesse neon à l'horizon */
.retro-bg__speed {
position: absolute;
left: 0; right: 0;
height: 1px;
pointer-events: none;
}
.retro-bg__speed--1 { top: calc(50% - 20px); background: linear-gradient(90deg, transparent 5%, rgba(255,0,255,.70) 28%, rgba(0,255,255,.50) 72%, transparent 95%); }
.retro-bg__speed--2 { top: calc(50% - 11px); background: linear-gradient(90deg, transparent 10%, rgba(255,0,255,.42) 32%, rgba(0,255,255,.32) 68%, transparent 90%); }
.retro-bg__speed--3 { top: calc(50% - 4px); background: linear-gradient(90deg, transparent 15%, rgba(255,0,255,.22) 38%, rgba(0,255,255,.18) 62%, transparent 85%); }
[data-theme="retro"] .hero__h1,
[data-theme="retro"] .section__title,
[data-theme="retro"] .page-hero__h1 {
font-family: 'VT323', 'Press Start 2P', monospace !important;
font-weight: 400 !important;
letter-spacing: .04em;
text-transform: uppercase;
color: #FFE6FA !important;
text-shadow:
-2px -2px 0 #FF00FF,
2px 2px 0 #00FFFF,
0 0 14px rgba(255, 0, 255, .6),
0 0 28px rgba(255, 0, 255, .3);
}
[data-theme="retro"] .hero__gradient {
background: linear-gradient(180deg, #FFD000 0%, #FF6EC7 45%, #FF00FF 80%, #B266FF 100%);
-webkit-background-clip: text; background-clip: text; color: transparent !important;
filter: drop-shadow(0 2px 0 #00FFFF) drop-shadow(0 0 18px rgba(255, 110, 199, .5));
text-shadow: none;
}
[data-theme="retro"] .hero__sub,
[data-theme="retro"] .section__sub,
[data-theme="retro"] .page-hero__sub {
font-family: 'VT323', monospace;
font-size: 1.2rem;
letter-spacing: .03em;
color: #FFB6FF;
}
[data-theme="retro"] .plan-card,
[data-theme="retro"] .step-card,
[data-theme="retro"] .gallery-card,
[data-theme="retro"] .testi,
[data-theme="retro"] .cfg__form,
[data-theme="retro"] .cfg__summary,
[data-theme="retro"] .market__table,
[data-theme="retro"] .faq__item {
background: rgba(26, 0, 64, .72);
border: 2px solid #FF00FF;
border-radius: 6px;
box-shadow:
0 0 0 1px rgba(0, 255, 255, .35) inset,
0 0 22px rgba(255, 0, 255, .35),
0 14px 40px rgba(0, 0, 0, .6);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
[data-theme="retro"] .plan-card:hover,
[data-theme="retro"] .step-card:hover,
[data-theme="retro"] .gallery-card:hover {
border-color: #00FFFF;
box-shadow:
0 0 0 1px rgba(255, 0, 255, .4) inset,
0 0 32px rgba(0, 255, 255, .55),
0 18px 44px rgba(0, 0, 0, .7);
}
[data-theme="retro"] .btn--primary,
[data-theme="retro"] .nav__cta {
background: linear-gradient(90deg, #FF00FF 0%, #FF6EC7 50%, #00FFFF 100%);
background-size: 200% 100%;
color: #06061A !important;
border: 0;
font-family: 'VT323', 'Inter', monospace;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow:
0 0 0 2px #FF00FF,
0 8px 28px rgba(255, 0, 255, .55),
0 0 22px rgba(0, 255, 255, .35),
inset 0 0 12px rgba(255, 255, 255, .25);
animation: retroBtnSweep 3.5s linear infinite;
text-shadow: none;
}
@keyframes retroBtnSweep {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
[data-theme="retro"] .btn--primary:hover {
filter: brightness(1.15);
box-shadow:
0 0 0 2px #00FFFF,
0 12px 36px rgba(255, 0, 255, .7),
0 0 36px rgba(0, 255, 255, .55),
inset 0 0 14px rgba(255, 255, 255, .3);
}
[data-theme="retro"] .nav,
[data-theme="retro"] .nav.scrolled {
background: rgba(8, 0, 26, .8);
border-bottom: 2px solid #FF00FF;
box-shadow: 0 0 24px rgba(255, 0, 255, .35);
backdrop-filter: blur(10px);
}
[data-theme="retro"] .nav__logo .logo-word,
[data-theme="retro"] .nav__logo .logo-dot {
font-family: 'VT323', monospace;
text-transform: uppercase;
letter-spacing: .08em;
color: #FF00FF;
text-shadow: 0 0 8px rgba(255, 0, 255, .8);
}
[data-theme="retro"] .nav__link {
font-family: 'VT323', monospace;
letter-spacing: .04em;
text-transform: uppercase;
font-size: .95rem;
}
[data-theme="retro"] .nav__link:hover {
color: #00FFFF;
text-shadow: 0 0 8px rgba(0, 255, 255, .8);
}
[data-theme="retro"] .hero__badge {
background: rgba(255, 0, 255, .12);
border: 1px solid rgba(255, 0, 255, .55);
color: #FFB6FF;
font-family: 'VT323', monospace;
letter-spacing: .04em;
}
/* ================================================================
BUTTERFLY — flutters across the page, occasionally lands.
Class name kept as `.seagull` for legacy hooks in JS/CSS.
================================================================ */
.seagull {
position: fixed;
top: 0;
left: 0;
width: 56px;
height: 46px;
color: rgba(196, 181, 253, .85);
pointer-events: auto;
cursor: crosshair;
z-index: 5;
will-change: transform;
transform: translate(-200px, -200px);
transition: opacity .4s ease, color .2s ease;
}
.seagull:hover { color: rgba(251, 191, 36, .95); }
/* "Raté !" toast */
.butterfly-miss {
position: fixed;
pointer-events: none;
font-size: .85rem;
font-weight: 700;
color: #F8FAFC;
background: rgba(15,23,42,.82);
border: 1px solid rgba(99,102,241,.4);
border-radius: 20px;
padding: 5px 12px;
white-space: nowrap;
z-index: 9999;
opacity: 1;
transform: translateY(0);
transition: opacity .6s ease, transform .6s ease;
}
.butterfly-miss.fade { opacity: 0; transform: translateY(-18px); }
.butterfly-catch {
position: fixed;
pointer-events: none;
width: 180px;
height: 180px;
margin-left: -90px;
margin-top: -90px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, rgba(0,200,255,.95) 18%, rgba(30,100,255,.7) 45%, transparent 70%);
box-shadow: 0 0 24px 8px rgba(0,200,255,.6), 0 0 60px 20px rgba(30,100,255,.35);
z-index: 9998;
opacity: 1;
transform: scale(0.08);
transition: opacity .55s ease, transform .6s cubic-bezier(0,.8,.3,1);
}
.butterfly-catch.burst { opacity: 0; transform: scale(5); }
.seagull__svg {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 10px rgba(99, 102, 241, .35));
transition: transform .4s ease;
}
/* Mirror horizontally when travelling right→left */
.seagull[data-facing="left"] .seagull__svg { transform: scaleX(-1); }
/* All poses hidden by default; flap animation cycles flight ones in */
.seagull__pose { opacity: 0; }
.seagull:not(.seagull--perched) .seagull__pose--up { animation: seagullFlapUp .42s steps(1, end) infinite; }
.seagull:not(.seagull--perched) .seagull__pose--mid { animation: seagullFlapMid .42s steps(1, end) infinite; }
.seagull:not(.seagull--perched) .seagull__pose--down { animation: seagullFlapDown .42s steps(1, end) infinite; }
/* Perched: freeze flap, show resting pose */
.seagull--perched .seagull__pose--perched { opacity: 1; }
/* Subtle wing breathing while perched — slow toggle between perched and mid */
.seagull--perched .seagull__pose--mid { animation: seagullPerchedBreathe 3.6s ease-in-out infinite; }
/* 3-frame natural flap: up → mid → down → mid → repeat */
@keyframes seagullFlapUp {
0%, 24.999% { opacity: 1; }
25%, 100% { opacity: 0; }
}
@keyframes seagullFlapMid {
0%, 24.999% { opacity: 0; }
25%, 49.999% { opacity: 1; }
50%, 74.999% { opacity: 0; }
75%, 100% { opacity: 1; }
}
@keyframes seagullFlapDown {
0%, 49.999% { opacity: 0; }
50%, 74.999% { opacity: 1; }
75%, 100% { opacity: 0; }
}
@keyframes seagullPerchedBreathe {
0%, 80%, 100% { opacity: 0; }
90% { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
.seagull { display: none; }
}
@media (max-width: 600px) {
.seagull { width: 42px; height: 34px; }
}
/* ================================================================
FUTURE THEME — override agressif : forcer les sections à laisser
passer le décor (background + image NULLIFIÉS partout)
================================================================ */
html[data-theme="future"] body section,
html[data-theme="future"] body .section,
html[data-theme="future"] body main,
html[data-theme="future"] body main > section,
html[data-theme="future"] body .hero,
html[data-theme="future"] body .steps,
html[data-theme="future"] body .demo-section,
html[data-theme="future"] body .gallery-section,
html[data-theme="future"] body .testimonials,
html[data-theme="future"] body .partners,
html[data-theme="future"] body .market,
html[data-theme="future"] body .pricing,
html[data-theme="future"] body .cfg-section,
html[data-theme="future"] body .sectors,
html[data-theme="future"] body .guarantee,
html[data-theme="future"] body .faq,
html[data-theme="future"] body .contact,
html[data-theme="future"] body .page-hero {
background: none !important;
background-color: transparent !important;
background-image: none !important;
}
html[data-theme="future"] body .demo-section::before,
html[data-theme="future"] body .demo-section::after,
html[data-theme="future"] body .contact::before,
html[data-theme="future"] body .contact::after,
html[data-theme="future"] body .hero::before,
html[data-theme="future"] body .hero::after { display: none !important; }
/* Décor au z-index 2, contenu z-index 3 */
html[data-theme="future"] .future-bg { z-index: 2 !important; opacity: 1 !important; }
html[data-theme="future"] main { position: relative; z-index: 3 !important; background: transparent !important; }
/* Boost MAX d'opacité sur tous les éléments décoratifs */
html[data-theme="future"] .future-bg__planet,
html[data-theme="future"] .future-bg__globe,
html[data-theme="future"] .future-bg__moon,
html[data-theme="future"] .future-bg__hexgrid,
html[data-theme="future"] .future-bg__radar,
html[data-theme="future"] .future-bg__constellation,
html[data-theme="future"] .future-bg__circuit,
html[data-theme="future"] .future-bg__orbit,
html[data-theme="future"] .future-bg__hex,
html[data-theme="future"] .future-bg__corner,
html[data-theme="future"] .future-bg__hud,
html[data-theme="future"] .future-bg__tag,
html[data-theme="future"] .future-bg__glyph,
html[data-theme="future"] .future-bg__reticle,
html[data-theme="future"] .future-bg__firefly,
html[data-theme="future"] .future-bg__ruler,
html[data-theme="future"] .future-bg__pulse,
html[data-theme="future"] .future-bg__crosshair,
html[data-theme="future"] .future-bg__beam,
html[data-theme="future"] .future-bg__stream {
opacity: 1 !important;
}
/* ================================================================
FUTURE — FINAL OVERRIDE : sections et cartes complètement
transparentes pour laisser passer le décor + cards 100% verre
================================================================ */
html[data-theme="future"] body .section,
html[data-theme="future"] body .hero,
html[data-theme="future"] body .steps,
html[data-theme="future"] body .demo-section,
html[data-theme="future"] body .gallery-section,
html[data-theme="future"] body .testimonials,
html[data-theme="future"] body .partners,
html[data-theme="future"] body .market,
html[data-theme="future"] body .pricing,
html[data-theme="future"] body .cfg-section,
html[data-theme="future"] body .sectors,
html[data-theme="future"] body .guarantee,
html[data-theme="future"] body .faq,
html[data-theme="future"] body .contact,
html[data-theme="future"] body .page-hero,
html[data-theme="future"] body .marquee-strip,
html[data-theme="future"] body .recruit-section,
html[data-theme="future"] body .parr-benefits {
background: none transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* Cartes en verre intense (visible sur fond cosmos) */
html[data-theme="future"] body .plan-card,
html[data-theme="future"] body .step-card,
html[data-theme="future"] body .gallery-card,
html[data-theme="future"] body .testi,
html[data-theme="future"] body .cfg__form,
html[data-theme="future"] body .cfg__summary,
html[data-theme="future"] body .market__table,
html[data-theme="future"] body .faq__item,
html[data-theme="future"] body .guarantee__card {
background: rgba(8, 8, 40, .35) !important;
border: 1px solid rgba(139, 92, 246, .55) !important;
backdrop-filter: blur(14px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
box-shadow:
0 0 0 1px rgba(34, 211, 238, .15) inset,
0 12px 36px rgba(0, 0, 0, .55),
0 0 28px rgba(139, 92, 246, .2) !important;
}
/* Footer verre */
html[data-theme="future"] body footer.footer {
background: rgba(4, 4, 28, .55) !important;
backdrop-filter: blur(12px) !important;
border-top: 1px solid rgba(139, 92, 246, .35) !important;
}
/* Nav verre */
html[data-theme="future"] body .nav,
html[data-theme="future"] body .nav.scrolled {
background: rgba(4, 4, 28, .55) !important;
backdrop-filter: blur(14px) !important;
border-bottom: 1px solid rgba(139, 92, 246, .35) !important;
}
/* ================================================================
RETRO BG DECOR — décor synthwave (visible uniquement [data-theme=retro])
Soleil + montagnes + palmiers + cassette + HUD VCR + LED + VU
================================================================ */
.retro-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
display: none;
overflow: hidden;
}
[data-theme="retro"] .retro-bg { display: block; }
/* ── Soleil synthwave (gros disque dégradé avec bandes) ── */
.retro-bg__sun {
position: absolute;
left: 50%;
top: 28vh;
width: 480px;
height: 480px;
margin-left: -240px;
border-radius: 50%;
background:
/* Bandes horizontales sombres qui découpent */
repeating-linear-gradient(
to bottom,
transparent 0 22px,
rgba(8, 0, 26, .9) 22px 28px),
/* Dégradé du soleil */
linear-gradient(180deg,
#FFD000 0%,
#FF6EC7 38%,
#FF00FF 70%,
#B266FF 100%);
box-shadow:
0 0 80px rgba(255, 0, 255, .65),
0 0 200px rgba(255, 110, 199, .45);
filter: drop-shadow(0 0 50px rgba(255, 0, 255, .6));
animation: retroSunBreathe 5s ease-in-out infinite alternate;
}
@keyframes retroSunBreathe {
from { filter: drop-shadow(0 0 30px rgba(255, 0, 255, .45)); }
to { filter: drop-shadow(0 0 70px rgba(255, 0, 255, .85)); }
}
/* Rayons partant du soleil */
.retro-bg__sunrays {
position: absolute;
left: 50%;
top: 28vh;
width: 1200px;
height: 600px;
margin-left: -600px;
margin-top: 240px;
pointer-events: none;
background:
conic-gradient(from 90deg at 50% 0%,
transparent 0deg,
rgba(255, 0, 255, .15) 5deg,
transparent 10deg,
transparent 15deg,
rgba(0, 255, 255, .12) 20deg,
transparent 25deg,
transparent 35deg,
rgba(255, 0, 255, .10) 40deg,
transparent 50deg,
transparent 130deg,
rgba(0, 255, 255, .12) 140deg,
transparent 145deg,
transparent 155deg,
rgba(255, 0, 255, .15) 160deg,
transparent 170deg,
transparent 180deg);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
animation: retroSunraysSwirl 60s linear infinite;
}
@keyframes retroSunraysSwirl {
to { transform: rotate(360deg); }
}
/* ── Montagnes silhouettées (au pied du soleil) ── */
.retro-bg__mountains {
position: absolute;
bottom: 50vh;
left: 0;
right: 0;
width: 100%;
height: 240px;
z-index: 2;
filter: drop-shadow(0 -2px 12px rgba(255, 0, 255, .35));
}
/* ── Palmiers latéraux ── */
.retro-bg__palm {
position: absolute;
bottom: 48vh;
width: 120px;
height: 240px;
z-index: 3;
filter: drop-shadow(2px 0 4px rgba(255, 0, 255, .4));
}
.retro-bg__palm--1 { left: 5%; transform: scaleX(-1); }
.retro-bg__palm--2 { right: 8%; bottom: 50vh; transform: scale(.85); }
/* ── VHS tracking line ── */
.retro-bg__tracking {
position: absolute;
left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 0, 255, .25) 20%,
rgba(255, 255, 255, .85) 50%,
rgba(0, 255, 255, .25) 80%,
transparent 100%);
filter: blur(1px);
pointer-events: none;
animation: retroTrackingScroll 7s linear infinite;
}
@keyframes retroTrackingScroll {
0% { top: -4px; opacity: 0; }
5% { opacity: .9; }
95% { opacity: .9; }
100% { top: 100vh; opacity: 0; }
}
/* ── Coins CRT (brackets pink/cyan) ── */
.retro-bg__bracket {
position: absolute;
width: 60px; height: 60px;
border: 3px solid #FF00FF;
filter: drop-shadow(0 0 8px rgba(255, 0, 255, .7));
animation: retroBracketBlink 2s ease-in-out infinite alternate;
}
.retro-bg__bracket--tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.retro-bg__bracket--tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0; border-color: #00FFFF; filter: drop-shadow(0 0 8px rgba(0, 255, 255, .7)); }
.retro-bg__bracket--bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0; border-color: #00FFFF; filter: drop-shadow(0 0 8px rgba(0, 255, 255, .7)); }
.retro-bg__bracket--br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }
@keyframes retroBracketBlink {
from { opacity: .55; }
to { opacity: 1; }
}
/* ── HUD textes style VCR ── */
.retro-bg__hud {
position: absolute;
font-family: 'VT323', 'Press Start 2P', monospace;
font-size: 1.05rem;
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: 0 0 6px currentColor;
white-space: nowrap;
font-weight: 400;
}
.retro-bg__hud--ch { top: 30px; left: 100px; color: #00FFFF; }
.retro-bg__hud--time { top: 30px; right: 100px; color: #FFD000; }
.retro-bg__hud--rec { top: 60px; right: 100px; color: #FF00FF; display: flex; align-items: center; gap: 8px; }
.retro-bg__hud--track { bottom: 30px; left: 100px; color: #00FFFF; }
.retro-bg__hud--vol { bottom: 30px; right: 100px; color: #FFD000; }
.retro-bg__rec-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
background: #FF00FF;
box-shadow: 0 0 8px #FF00FF;
animation: retroRecBlink 1s steps(1, end) infinite;
}
@keyframes retroRecBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* ── Cassette VHS ── */
.retro-bg__cassette {
position: absolute;
width: 130px;
height: 78px;
bottom: 14vh;
right: 4%;
filter: drop-shadow(0 4px 22px rgba(255, 0, 255, .55));
animation: retroCassetteFloat 6s ease-in-out infinite alternate;
}
@keyframes retroCassetteFloat {
from { transform: translateY(0) rotate(-2deg); }
to { transform: translateY(-12px) rotate(2deg); }
}
/* ── Étoiles synthwave ── */
.retro-bg__star {
position: absolute;
font-size: 1.4rem;
color: #FFD000;
text-shadow: 0 0 8px rgba(255, 208, 0, .85);
animation: retroStarTwinkle2 2.5s ease-in-out infinite alternate;
font-family: 'VT323', monospace;
}
.retro-bg__star--1 { top: 8%; left: 12%; animation-delay: 0s; color: #FFD000; }
.retro-bg__star--2 { top: 12%; left: 28%; animation-delay: -.5s; color: #FF6EC7; text-shadow: 0 0 8px rgba(255, 110, 199, .85); font-size: 1.1rem; }
.retro-bg__star--3 { top: 6%; left: 52%; animation-delay: -1s; color: #00FFFF; text-shadow: 0 0 8px rgba(0, 255, 255, .85); }
.retro-bg__star--4 { top: 14%; left: 72%; animation-delay: -1.5s; color: #FFD000; }
.retro-bg__star--5 { top: 10%; left: 88%; animation-delay: -2s; color: #FF00FF; text-shadow: 0 0 8px rgba(255, 0, 255, .85); font-size: 1.2rem; }
.retro-bg__star--6 { top: 18%; left: 8%; animation-delay: -.7s; color: #00FFFF; text-shadow: 0 0 8px rgba(0, 255, 255, .85); font-size: .9rem; }
.retro-bg__star--7 { top: 22%; left: 42%; animation-delay: -1.2s; color: #FF6EC7; text-shadow: 0 0 8px rgba(255, 110, 199, .85); }
@keyframes retroStarTwinkle2 {
from { opacity: .55; transform: scale(.85); }
to { opacity: 1; transform: scale(1.15); }
}
/* ── Lightning bolts ── */
.retro-bg__bolt {
position: absolute;
font-size: 2.2rem;
color: #FFD000;
text-shadow: 0 0 12px rgba(255, 208, 0, .9), 0 0 24px rgba(255, 110, 199, .6);
animation: retroBoltZap 3s steps(1, end) infinite;
}
.retro-bg__bolt--1 { top: 24%; right: 12%; animation-delay: 0s; transform: rotate(-8deg); }
.retro-bg__bolt--2 { bottom: 30%; left: 18%; animation-delay: -1.5s; transform: rotate(15deg); font-size: 1.6rem; }
@keyframes retroBoltZap {
0%, 89% { opacity: .25; }
90%, 95% { opacity: 1; transform: scale(1.1); }
96%, 100% { opacity: .25; }
}
/* ── Triangles/diamants néon ── */
.retro-bg__neon {
position: absolute;
font-family: 'VT323', monospace;
font-size: 2rem;
text-shadow: 0 0 10px currentColor;
animation: retroNeonGlow 2s ease-in-out infinite alternate;
}
.retro-bg__neon--tri-1 { top: 35%; left: 8%; color: #00FFFF; transform: rotate(15deg); }
.retro-bg__neon--tri-2 { bottom: 25%; right: 22%; color: #FF6EC7; font-size: 1.4rem; }
.retro-bg__neon--diamond { top: 42%; right: 6%; color: #FFD000; font-size: 1.6rem; }
@keyframes retroNeonGlow {
from { opacity: .55; }
to { opacity: 1; }
}
/* ── Big year text "1985" ── */
.retro-bg__year {
position: absolute;
top: 62%;
left: 50%;
transform: translateX(-50%);
font-family: 'VT323', 'Press Start 2P', monospace;
font-size: 9rem;
font-weight: 400;
letter-spacing: .12em;
background: linear-gradient(180deg, #FFD000 0%, #FF6EC7 50%, #FF00FF 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow:
0 0 30px rgba(255, 0, 255, .7),
0 0 60px rgba(255, 110, 199, .4);
pointer-events: none;
opacity: .5;
z-index: 0;
filter: drop-shadow(2px 2px 0 rgba(0, 255, 255, .55));
animation: retroYearFlicker 4s ease-in-out infinite;
}
@keyframes retroYearFlicker {
0%, 96%, 100% { opacity: .5; }
97%, 99% { opacity: .15; }
}
/* ── VU meter (barres latérales gauche) ── */
.retro-bg__vu {
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 4px;
pointer-events: none;
}
.retro-bg__vu span {
display: block;
width: 28px;
height: 8px;
border: 1px solid rgba(255, 0, 255, .55);
border-radius: 1px;
}
.retro-bg__vu span:nth-child(1) { background: #00FF41; box-shadow: 0 0 6px #00FF41; }
.retro-bg__vu span:nth-child(2) { background: #00FF41; box-shadow: 0 0 6px #00FF41; animation: retroVuBlink 1.2s ease-in-out infinite; }
.retro-bg__vu span:nth-child(3) { background: #FFD000; box-shadow: 0 0 6px #FFD000; animation: retroVuBlink 1.6s ease-in-out infinite; }
.retro-bg__vu span:nth-child(4) { background: #FFD000; box-shadow: 0 0 6px #FFD000; animation: retroVuBlink 1s ease-in-out infinite; }
.retro-bg__vu span:nth-child(5) { background: #FF6EC7; box-shadow: 0 0 6px #FF6EC7; animation: retroVuBlink 2s ease-in-out infinite; }
.retro-bg__vu span:nth-child(6) { background: #FF00FF; box-shadow: 0 0 6px #FF00FF; animation: retroVuBlink 1.4s ease-in-out infinite; opacity: .35; }
.retro-bg__vu span:nth-child(7) { opacity: .25; }
.retro-bg__vu span:nth-child(8) { opacity: .15; }
@keyframes retroVuBlink {
0%, 60%, 100% { opacity: 1; transform: scaleX(1); }
70% { opacity: .3; transform: scaleX(.6); }
}
/* ────────────────────────────────────────────────────────────────
RETRO — sections transparentes pour qu'on voie le décor
──────────────────────────────────────────────────────────────── */
html[data-theme="retro"] body section,
html[data-theme="retro"] body .section,
html[data-theme="retro"] body main,
html[data-theme="retro"] body .hero,
html[data-theme="retro"] body .steps,
html[data-theme="retro"] body .demo-section,
html[data-theme="retro"] body .gallery-section,
html[data-theme="retro"] body .testimonials,
html[data-theme="retro"] body .partners,
html[data-theme="retro"] body .market,
html[data-theme="retro"] body .pricing,
html[data-theme="retro"] body .cfg-section,
html[data-theme="retro"] body .sectors,
html[data-theme="retro"] body .guarantee,
html[data-theme="retro"] body .faq,
html[data-theme="retro"] body .contact,
html[data-theme="retro"] body .page-hero,
html[data-theme="retro"] body .marquee-strip {
background: none transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* Décor sous le contenu, sections lisibles avec un wrap glass */
html[data-theme="retro"] .retro-bg { z-index: 2 !important; }
html[data-theme="retro"] main { position: relative; z-index: 3 !important; background: transparent !important; }
html[data-theme="retro"] nav,
html[data-theme="retro"] footer { position: relative; z-index: 4 !important; }
/* Cards — verre néon magenta */
html[data-theme="retro"] body .plan-card,
html[data-theme="retro"] body .step-card,
html[data-theme="retro"] body .gallery-card,
html[data-theme="retro"] body .testi,
html[data-theme="retro"] body .cfg__form,
html[data-theme="retro"] body .cfg__summary,
html[data-theme="retro"] body .market__table,
html[data-theme="retro"] body .faq__item,
html[data-theme="retro"] body .guarantee__card {
background: rgba(8, 0, 26, .55) !important;
border: 2px solid #FF00FF !important;
backdrop-filter: blur(8px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.4) !important;
box-shadow:
0 0 0 1px rgba(0, 255, 255, .35) inset,
0 12px 36px rgba(0, 0, 0, .55),
0 0 28px rgba(255, 0, 255, .25) !important;
}
/* Mobile — alléger les détails */
@media (max-width: 768px) {
.retro-bg__palm,
.retro-bg__hud--ch,
.retro-bg__hud--time,
.retro-bg__hud--rec,
.retro-bg__hud--vol,
.retro-bg__cassette,
.retro-bg__year,
.retro-bg__vu,
.retro-bg__bracket,
.retro-bg__bolt {
display: none;
}
.retro-bg__sun { width: 280px; height: 280px; margin-left: -140px; }
.retro-bg__mountains { height: 140px; }
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.retro-bg__sun, .retro-bg__sunrays, .retro-bg__tracking, .retro-bg__bracket,
.retro-bg__rec-dot, .retro-bg__cassette, .retro-bg__star, .retro-bg__bolt,
.retro-bg__neon, .retro-bg__year, .retro-bg__vu span {
animation: none !important;
}
}
/* ================================================================
FUTURE — keep nav fixed on top regardless of scroll
================================================================ */
html[data-theme="future"] .nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 200 !important;
}
html[data-theme="future"] .future-bg { z-index: 1 !important; }
html[data-theme="future"] main { z-index: 2 !important; }
html[data-theme="future"] footer.footer { z-index: 5 !important; position: relative; }
/* Same fix for retro mode */
html[data-theme="retro"] .nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 200 !important;
}
html[data-theme="retro"] .retro-bg { z-index: 1 !important; }
html[data-theme="retro"] main { z-index: 2 !important; }
html[data-theme="retro"] footer.footer { z-index: 5 !important; position: relative; }
/* Le bracket HUD bas-droit chevauchait la pile de toggles flottants
(thème/musique/futur/retro). On le retire en mode futuriste.
Idem top-right qui peut entrer en conflit avec le sélecteur de langues. */
[data-theme="future"] .future-bg__corner--br,
[data-theme="future"] .future-bg__corner--tr {
display: none;
}