/* ============================================================
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; }
/* ── DEMO BANNER (notice "site de démo") ── */
.demo-banner {
position: relative; z-index: 200;
background: linear-gradient(90deg, rgba(251,146,60,.18), rgba(251,146,60,.10));
border-bottom: 1px solid rgba(251,146,60,.35);
color: #FED7AA;
font-size: .8125rem;
}
.demo-banner__inner {
display: flex; align-items: center; justify-content: center;
gap: 12px; flex-wrap: wrap;
padding: 8px 16px;
text-align: center;
}
.demo-banner__icon { font-size: 1rem; line-height: 1; }
.demo-banner__text strong { color: #FFEDD5; font-weight: 700; }
.demo-banner__link {
display: inline-flex; align-items: center; gap: 4px;
color: #FFEDD5; font-weight: 600; text-decoration: underline;
text-underline-offset: 3px; text-decoration-color: rgba(255,237,213,.5);
transition: color .15s ease, text-decoration-color .15s ease;
}
.demo-banner__link:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
[data-theme="light"] .demo-banner {
background: linear-gradient(90deg, rgba(251,146,60,.14), rgba(251,146,60,.08));
border-bottom-color: rgba(194,65,12,.35);
color: #7C2D12;
}
[data-theme="light"] .demo-banner__text strong,
[data-theme="light"] .demo-banner__link { color: #9A3412; }
[data-theme="light"] .demo-banner__link:hover { color: #7C2D12; }
@media (max-width: 480px) {
.demo-banner { font-size: .75rem; }
.demo-banner__inner { gap: 8px; padding: 6px 12px; }
}
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"] {
color: #5B21B6;
font-weight: 600;
background: rgba(109, 40, 217, .08);
border: 1px solid rgba(109, 40, 217, .22);
text-shadow: none;
}
[data-theme="light"] .nav__link[href*="parrainage"]:hover {
color: #4C1D95;
background: rgba(109, 40, 217, .14);
border-color: rgba(109, 40, 217, .4);
}
[data-theme="light"] .nav__link.active { color: #0F172A; background: rgba(15,23,42,.06); }
[data-theme="light"] .nav__link[href*="parrainage"].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 !important; }
@media (max-width: 768px) {
[data-theme="light"] .nav__burger,
[data-theme="usa"] .nav__burger {
background: rgba(255, 255, 255, .92) !important;
border-color: rgba(15, 23, 42, .2) !important;
}
[data-theme="light"] .nav__burger span,
[data-theme="usa"] .nav__burger span {
background: #0F172A !important;
box-shadow: none !important;
}
}
[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 em { color: inherit; }
.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: sticky;
top: 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: 2px; list-style: none; }
.nav__link {
font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.65);
padding: 8px 12px; border-radius: var(--r-sm); transition: var(--t);
white-space: nowrap;
}
.nav__link:hover { color: #fff; background: var(--border-2); }
.nav__link.active { color: #fff; background: var(--border-2); }
/* "Nous contacter" — outline discret, sans fond plein */
.nav__cta {
background: transparent !important;
color: #C4B5FD !important;
border: 1.5px solid rgba(139, 92, 246, .45) !important;
box-shadow: none !important;
}
.nav__cta:hover {
background: rgba(99, 102, 241, .12) !important;
border-color: rgba(139, 92, 246, .75) !important;
color: #fff !important;
box-shadow: 0 0 14px rgba(99, 102, 241, .22) !important;
transform: translateY(-1px);
}
[data-theme="light"] .nav__cta {
background: transparent !important;
color: #5B21B6 !important;
border-color: rgba(109, 40, 217, .4) !important;
box-shadow: none !important;
}
[data-theme="light"] .nav__cta:hover {
background: rgba(109, 40, 217, .07) !important;
border-color: rgba(109, 40, 217, .7) !important;
color: #4C1D95 !important;
}
.nav__link[href*="parrainage"].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"] {
position: relative;
color: #DDD6FE;
font-weight: 600;
background: rgba(99, 102, 241, .13);
border: 1px solid rgba(139, 92, 246, .28);
text-shadow: 0 0 12px rgba(139, 92, 246, .45);
}
/* Badge étoile avant le texte */
.nav__link[href*="parrainage"]::before {
content: '★';
font-size: .65em;
vertical-align: .15em;
margin-right: 4px;
color: #A78BFA;
animation: parrainStar 2.4s ease-in-out infinite;
}
/* Filet lumineux en bas */
.nav__link[href*="parrainage"]::after {
content: '';
position: absolute;
left: 10px; right: 10px; bottom: 3px;
height: 2px;
background: linear-gradient(90deg, transparent, #818CF8 25%, #A78BFA 50%, #818CF8 75%, transparent);
border-radius: 2px;
transform-origin: 50% 50%;
animation: parrainShine 2.8s ease-in-out infinite;
box-shadow: 0 0 6px rgba(139, 92, 246, .6);
}
.nav__link[href*="parrainage"]:hover {
color: #fff;
background: rgba(99, 102, 241, .22);
border-color: rgba(139, 92, 246, .55);
text-shadow: 0 0 18px rgba(139, 92, 246, .8);
}
.nav__link[href*="parrainage"]:hover::after {
animation-duration: 1.4s;
}
@keyframes parrainShine {
0%, 100% { opacity: .5; transform: scaleX(.7); }
50% { opacity: 1; transform: scaleX(1); }
}
@keyframes parrainStar {
0%, 100% { opacity: .6; transform: scale(.85) rotate(-10deg); }
50% { opacity: 1; transform: scale(1.1) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
.nav__link[href*="parrainage"]::before { animation: none; }
.nav__link[href*="parrainage"]::after { animation: none; opacity: .8; }
}
/* ────────────────────────────────────────────────────────────
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;
align-items: center;
gap: 14px;
}
.social-rail::before,
.social-rail::after {
content: '';
display: block;
width: 1px;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(148,163,184,.85) 50%, transparent);
margin: 8px auto;
flex-shrink: 0;
}
.social-rail__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 50%;
color: var(--muted-2);
background: var(--bg-card);
border: 1px solid var(--border-2);
overflow: hidden;
flex-shrink: 0;
transition: transform .28s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s, border-color .25s, color .25s;
}
.social-rail__link svg { width: 20px; height: 20px; }
.social-rail__link--tw svg { width: 18px; height: 18px; }
.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--tw::before {
background: linear-gradient(135deg, #000000 0%, #1F1F1F 100%);
}
.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); }
.social-rail__link--tw:hover { box-shadow: 0 8px 22px rgba(0,0,0,.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);
max-width: 100%;
white-space: nowrap;
}
.hero__badge > span:not(.hero__badge-dot) {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
@media (max-width: 560px) {
.hero__badge { font-size: .75rem; padding: 6px 14px; }
.hero__badge-extra { display: none; }
}
.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 column : empile les cartes preview + le switcher de thèmes */
.hero__right {
display: flex;
flex-direction: column;
gap: 28px;
align-self: start; /* remonte le bloc en haut de la grille */
padding-top: 20px; /* léger air en haut pour le badge "Prix" */
}
/* 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);
}
/* Barre de progression autoplay — se remplit de gauche à droite */
.demo__tab::before {
content: '';
position: absolute;
bottom: 0; left: 0;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
border-radius: 2px;
background: currentColor;
opacity: .7;
}
.demo__tab--ticking::before {
animation: demoProgress 3.5s linear forwards;
}
@keyframes demoProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.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);
}
/* "Sur mesure" — onglet informatif non cliquable, dégradé indigo/orange */
.demo__tab--custom {
cursor: default;
position: relative;
border-style: dashed;
border-color: rgba(249,115,22,.65);
color: #FFFFFF;
background: linear-gradient(135deg, rgba(99,102,241,.30), rgba(249,115,22,.30));
font-weight: 700;
text-shadow: 0 1px 6px rgba(0,0,0,.45);
user-select: none;
}
.demo__tab--custom:hover { transform: none; }
.demo__tab--custom .demo__tab-dot {
background: linear-gradient(135deg, #818CF8 0%, #F97316 100%);
box-shadow: 0 0 8px 2px rgba(249,115,22,.55);
}
.demo__tab--custom .demo__tab-price {
margin-left: 8px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
padding: 3px 9px;
border-radius: 999px;
background: linear-gradient(90deg, #818CF8, #F97316);
color: #FFFFFF;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(249,115,22,.35);
text-shadow: none;
}
[data-theme="light"] .demo__tab--custom {
color: #7C2D12;
background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(249,115,22,.22));
border-color: rgba(249,115,22,.65);
text-shadow: none;
}
@media (max-width: 560px) {
.demo__tab--custom .demo__tab-price {
font-size: .65rem;
padding: 2px 7px;
}
}
/* 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 — Premium artisan / Maison de tradition ── */
.ds--classic {
background: #FAF7F2;
color: #1A2138;
font-family: 'Inter', sans-serif;
}
.ds--classic::before {
/* Subtle paper-grain texture */
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
radial-gradient(circle at 20% 10%, rgba(200,149,109,.06) 0, transparent 35%),
radial-gradient(circle at 90% 95%, rgba(26,33,56,.04) 0, transparent 40%);
}
.ds__topbar--classic {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 16px;
background: #1A2138; color: #E5D7C3;
font-size: .56rem; font-weight: 500; letter-spacing: .04em;
border-bottom: 1px solid rgba(200,149,109,.25);
}
.ds__stars--classic { letter-spacing: .05em; color: #C8956D; }
.ds__nav--classic {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
background: #FAF7F2;
border-bottom: 1px solid rgba(26,33,56,.08);
}
.ds__brand--classic {
font-family: 'Playfair Display', serif;
font-size: .92rem; color: #1A2138; font-style: normal; font-weight: 700;
letter-spacing: -.005em;
}
.ds__brand--classic em {
font-style: italic; color: #C8956D;
font-weight: 700;
}
.ds__nav--classic nav { display: flex; gap: 16px; }
.ds__nav--classic nav a {
color: #46506B; font-size: .58rem; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
position: relative; padding-bottom: 2px;
}
.ds__nav--classic nav a:first-child::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
height: 1px; background: #C8956D;
}
.ds__btn--classic {
font-size: .58rem; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase;
background: #1A2138; color: #FAF7F2;
padding: 6px 14px; border-radius: 2px;
border: 1px solid #1A2138;
transition: all .25s ease;
}
.ds__hero--classic {
position: relative; overflow: hidden; height: 175px;
z-index: 1;
}
.ds__hero-bg--classic {
position: absolute; inset: 0;
background:
linear-gradient(135deg, #0F1628 0%, #1A2138 50%, #2A3252 100%);
}
.ds__hero-bg--classic::before {
/* Decorative gold corner ornament */
content: '';
position: absolute; top: 14px; right: 14px;
width: 70px; height: 70px;
background:
linear-gradient(45deg, transparent 48%, #C8956D 48%, #C8956D 52%, transparent 52%) no-repeat,
linear-gradient(-45deg, transparent 48%, #C8956D 48%, #C8956D 52%, transparent 52%) no-repeat;
background-size: 100% 1px, 1px 100%;
background-position: top right, top right;
opacity: .6;
border-top: 1px solid #C8956D;
border-right: 1px solid #C8956D;
width: 40px; height: 40px;
background: none;
}
.ds__hero-bg--classic::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 80% 30%, rgba(200,149,109,.16) 0%, transparent 55%),
radial-gradient(ellipse at 15% 85%, rgba(26,33,56,.6) 0%, transparent 45%);
}
.ds__hero-content--classic {
position: relative; z-index: 1;
padding: 16px 22px;
height: 100%;
display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
.ds__trust-row--classic {
display: flex; flex-wrap: wrap; gap: 12px;
font-size: .52rem; font-weight: 500; letter-spacing: .08em;
text-transform: uppercase;
color: #C8956D;
}
.ds__trust-row--classic span {
position: relative;
padding-right: 12px;
}
.ds__trust-row--classic span:not(:last-child)::after {
content: ''; position: absolute; right: 0; top: 50%;
width: 3px; height: 3px; border-radius: 50%;
background: rgba(200,149,109,.5);
transform: translateY(-50%);
}
.ds__hero-h2--classic {
font-family: 'Playfair Display', serif;
font-size: 1.35rem; color: #FAF7F2; line-height: 1.2; margin: 0;
letter-spacing: -.015em; font-weight: 700;
}
.ds__city--classic {
color: #C8956D; font-style: italic;
position: relative;
}
.ds__cta { display: inline-block; font-size: .65rem; font-weight: 600; border-radius: 2px; padding: 8px 18px; margin-top: 4px; width: fit-content; letter-spacing: .06em; text-transform: uppercase; }
.ds__cta--classic {
background: linear-gradient(135deg, #C8956D 0%, #B07A52 100%);
color: #FAF7F2;
border: 1px solid #C8956D;
box-shadow: 0 4px 12px rgba(200,149,109,.3);
}
.ds__services--classic {
position: relative; z-index: 1;
display: flex; gap: 10px;
padding: 14px 16px;
background: #FAF7F2;
}
.ds__service--classic {
flex: 1;
display: flex; flex-direction: column; align-items: flex-start;
gap: 4px; text-align: left;
padding: 12px 14px;
background: #FFFFFF;
border: 1px solid rgba(26,33,56,.08);
border-radius: 3px;
font-size: .68rem;
position: relative;
transition: all .3s ease;
}
.ds__service--classic::before {
content: '';
position: absolute; left: 0; top: 12px; bottom: 12px;
width: 2px; background: #C8956D;
}
.ds__svc-icon { font-size: 1rem; opacity: .85; }
.ds__service--classic strong {
font-family: 'Playfair Display', serif;
font-size: .72rem; color: #1A2138; font-weight: 700;
}
.ds__service--classic small {
color: #6B7488; font-size: .55rem;
letter-spacing: .04em;
}
/* ── RETRO 80s DEMO ── */
.ds--retro {
background: #000;
color: #00FF41;
font-family: 'VT323', monospace;
}
.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 — Holographic / cyberpunk-lite ── */
.ds--future {
background:
radial-gradient(ellipse at 20% 0%, rgba(99,102,241,.18), transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(236,72,153,.12), transparent 55%),
#04060F;
color: #E2E8F0;
font-family: 'Inter', sans-serif;
isolation: isolate;
}
.ds--future::before {
/* Hex / scan grid */
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.ds--future::after {
/* Subtle scan-line sweep */
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
}
.ds__nav--future {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 10px 18px;
background: linear-gradient(180deg, rgba(4,6,15,.95), rgba(4,6,15,.7));
border-bottom: 1px solid rgba(34,211,238,.22);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(99,102,241,.15), 0 8px 30px rgba(0,0,0,.4);
}
.ds__nav--future::after {
/* Glowing underline accent */
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent 10%, #22D3EE 30%, #A78BFA 60%, transparent 90%);
opacity: .45;
}
.ds__logo--future {
font-family: 'Orbitron', sans-serif;
font-size: .85rem; font-weight: 800;
background: linear-gradient(135deg, #67E8F9 0%, #C7D2FE 50%, #F0ABFC 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
letter-spacing: .14em;
filter: drop-shadow(0 0 12px rgba(34,211,238,.45));
}
.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: 4px;
font-weight: 700;
}
.ds__nav--future nav { display: flex; gap: 16px; }
.ds__nav--future nav a {
color: rgba(199,210,254,.55); font-size: .58rem;
letter-spacing: .12em; text-transform: uppercase;
position: relative; padding-bottom: 2px;
transition: color .25s ease;
}
.ds__nav--future nav a::after {
content: ''; position: absolute; left: 50%; bottom: 0;
width: 0; height: 1px; background: #22D3EE;
transform: translateX(-50%); transition: width .25s ease;
box-shadow: 0 0 6px #22D3EE;
}
.ds__nav--future nav a:hover { color: #67E8F9; }
.ds__nav--future nav a:hover::after { width: 100%; }
.ds__tel--future {
font-size: .6rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase;
background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(167,139,250,.18));
color: #67E8F9;
border: 1px solid rgba(34,211,238,.5);
padding: 4px 12px; border-radius: 3px;
text-shadow: 0 0 10px rgba(34,211,238,.55);
box-shadow: 0 0 16px rgba(34,211,238,.12), inset 0 0 10px rgba(34,211,238,.06);
position: relative; overflow: hidden;
}
.ds__tel--future::before {
/* Pulse line */
content: ''; position: absolute; left: -100%; top: 0; bottom: 0; width: 60%;
background: linear-gradient(90deg, transparent, rgba(103,232,249,.35), transparent);
animation: futureSweep 3.2s linear infinite;
}
@keyframes futureSweep {
0% { left: -100%; }
100% { left: 200%; }
}
.ds__hero--future {
position: relative; z-index: 1; height: 200px; overflow: hidden;
display: flex; align-items: center;
padding: 16px 22px;
background:
radial-gradient(circle at 70% 30%, rgba(99,102,241,.12), transparent 55%),
radial-gradient(circle at 30% 80%, rgba(236,72,153,.08), transparent 50%);
}
.ds__future-orb {
position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
width: 240px; height: 240px; top: -90px; right: -40px;
background: radial-gradient(circle, rgba(34,211,238,.45), transparent 65%);
animation: futureOrbFloat 8s ease-in-out infinite;
}
.ds__future-orb--2 {
width: 180px; height: 180px; bottom: -80px; left: 10px; top: auto;
background: radial-gradient(circle, rgba(236,72,153,.32), rgba(167,139,250,.2) 40%, transparent 70%);
animation: futureOrbFloat 11s ease-in-out -2s infinite reverse;
}
@keyframes futureOrbFloat {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
50% { transform: translate(-20px, 15px) scale(1.08); opacity: .8; }
}
.ds__future-content { position: relative; z-index: 1; }
.ds__future-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: .56rem; font-weight: 700;
font-family: 'Orbitron', sans-serif; letter-spacing: .12em;
text-transform: uppercase;
background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(167,139,250,.16));
border: 1px solid rgba(34,211,238,.45);
color: #67E8F9; padding: 4px 12px; border-radius: 2px;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(34,211,238,.6);
box-shadow: 0 0 14px rgba(34,211,238,.18), inset 0 0 8px rgba(34,211,238,.08);
position: relative;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}
.ds__future-chip::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #22D3EE; box-shadow: 0 0 10px #22D3EE, 0 0 20px #22D3EE;
animation: futurePulse 1.6s ease-in-out infinite;
}
@keyframes futurePulse {
0%, 100% { opacity: 1; box-shadow: 0 0 10px #22D3EE, 0 0 20px #22D3EE; transform: scale(1); }
50% { opacity: .35; box-shadow: 0 0 4px #22D3EE; transform: scale(.85); }
}
.ds__future-h2 {
font-family: 'Orbitron', sans-serif;
font-size: 1.45rem; line-height: 1.05; letter-spacing: .04em;
color: #F8FAFC; margin-bottom: 8px;
text-shadow: 0 0 24px rgba(99,102,241,.35);
font-weight: 800;
}
.ds__future-gradient {
background:
linear-gradient(135deg, #22D3EE 0%, #818CF8 40%, #C084FC 70%, #F472B6 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: futureGradientShift 6s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(167,139,250,.4));
}
@keyframes futureGradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.ds__future-sub {
font-size: .64rem; color: rgba(199,210,254,.55); line-height: 1.55;
margin-bottom: 14px; max-width: 320px;
letter-spacing: .02em;
}
.ds__future-actions { display: flex; gap: 8px; align-items: center; }
.ds__cta--future {
font-size: .6rem; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(167,139,250,.22));
border: 1px solid rgba(34,211,238,.6);
color: #FFFFFF; padding: 7px 16px; border-radius: 3px;
text-shadow: 0 0 12px rgba(34,211,238,.6);
box-shadow:
0 0 24px rgba(34,211,238,.18),
inset 0 0 14px rgba(34,211,238,.08),
inset 0 1px 0 rgba(255,255,255,.1);
position: relative; overflow: hidden;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
transition: all .3s ease;
}
.ds__cta--future::before {
content: ''; position: absolute; left: -100%; top: 0; bottom: 0; width: 60%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
animation: futureSweep 2.4s linear infinite;
}
.ds__cta--future-ghost {
font-size: .6rem; font-weight: 600; letter-spacing: .08em;
font-family: 'Inter', sans-serif;
background: rgba(255,255,255,.04);
border: 1px solid rgba(199,210,254,.18);
color: rgba(199,210,254,.7);
padding: 7px 14px; border-radius: 3px;
backdrop-filter: blur(4px);
}
.ds__services--future {
position: relative; z-index: 1;
display: flex; gap: 8px; padding: 12px 14px;
background: linear-gradient(180deg, rgba(4,6,15,.4), rgba(4,6,15,.85));
border-top: 1px solid rgba(34,211,238,.18);
}
.ds__service--future {
flex: 1;
background:
linear-gradient(135deg, rgba(34,211,238,.05), rgba(167,139,250,.05));
border: 1px solid rgba(34,211,238,.18);
border-radius: 4px;
padding: 10px 6px;
text-align: center;
font-size: .63rem;
position: relative; overflow: hidden;
transition: all .3s ease;
}
.ds__service--future::before {
/* Top scan line */
content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(34,211,238,.7), transparent);
box-shadow: 0 0 6px rgba(34,211,238,.4);
}
.ds__service--future::after {
/* Corner accent */
content: ''; position: absolute; top: 0; left: 0;
width: 8px; height: 8px;
border-top: 1px solid #22D3EE;
border-left: 1px solid #22D3EE;
opacity: .6;
}
.ds__f-icon {
font-size: 1.05rem; color: #22D3EE;
text-shadow: 0 0 12px rgba(34,211,238,.85), 0 0 20px rgba(34,211,238,.4);
margin-bottom: 5px;
display: block;
}
.ds__service--future strong {
display: block; color: #F8FAFC; font-size: .65rem; font-weight: 700;
letter-spacing: .04em;
}
.ds__service--future small {
color: rgba(199,210,254,.4); font-size: .55rem;
letter-spacing: .04em;
}
.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); }
/* ── USA — assurer la lisibilité des textes du tableau comparatif ── */
[data-theme="usa"] .market__cell { color: #1F2D5C !important; }
[data-theme="usa"] .market__cell strong { color: #0A1F66 !important; }
[data-theme="usa"] .market__cell small { color: #4A5A8A !important; }
[data-theme="usa"] .market__price { color: #0A1F66 !important; }
[data-theme="usa"] .market__highlight { color: #0A1F66 !important; }
[data-theme="usa"] .market__sub { color: #1F2D5C !important; }
[data-theme="usa"] .market__row--head .market__cell { color: #0A1F66 !important; }
[data-theme="usa"] .market__row--us .market__cell,
[data-theme="usa"] .market__row--us .market__cell strong { color: #0A1F66 !important; }
/* Dégradé prix Triskell — passe à un dégradé bleu→rouge USA bien contrasté */
[data-theme="usa"] .market__price--us {
background: linear-gradient(90deg, #0A1F66 0%, #4F46E5 45%, #C8102E 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 6px rgba(10,31,102,.25));
}
[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-promo {
display: inline-block;
margin-top: 14px;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(16,185,129,.18), rgba(99,102,241,.18));
border: 1px solid rgba(16,185,129,.45);
color: #6EE7B7;
font-size: .875rem;
line-height: 1.4;
}
.options-promo strong { color: #FFFFFF; font-weight: 700; }
[data-theme="light"] .options-promo {
background: linear-gradient(90deg, rgba(5,150,105,.10), rgba(99,102,241,.10));
border-color: rgba(5,150,105,.45);
color: #065F46;
}
[data-theme="light"] .options-promo strong { color: #064E3B; }
[data-theme="usa"] .options-promo {
background: linear-gradient(90deg, rgba(10,31,102,.12), rgba(200,16,46,.12)) !important;
border: 1px solid #0A1F66 !important;
color: #0A1F66 !important;
font-weight: 600;
}
[data-theme="usa"] .options-promo strong { color: #C8102E !important; }
.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; }
}
/* ================================================================
ÉCOSYSTÈME / CROSS-SELL (Pack Élec, Eliks)
================================================================ */
.ecosystem { background: var(--bg); }
.ecosystem__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1080px;
margin-inline: auto;
}
.eco-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px 28px 28px;
transition: var(--t);
overflow: hidden;
isolation: isolate;
}
.eco-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(160deg, var(--eco-accent, rgba(99,102,241,.10)) 0%, transparent 55%);
opacity: .6;
z-index: -1;
transition: opacity var(--t);
pointer-events: none;
}
.eco-card:hover {
transform: translateY(-4px);
border-color: var(--eco-border, rgba(99,102,241,.35));
box-shadow: var(--sh-card);
}
.eco-card:hover::before { opacity: 1; }
.eco-card--elec {
--eco-accent: rgba(249,115,22,.12);
--eco-border: rgba(249,115,22,.4);
}
.eco-card--eliks {
--eco-accent: rgba(99,102,241,.12);
--eco-border: rgba(99,102,241,.45);
}
.eco-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.eco-card__brand {
display: inline-flex;
align-items: center;
gap: 10px;
}
.eco-card__logo {
flex-shrink: 0;
display: inline-flex;
width: 40px; height: 40px;
border-radius: 9px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.eco-card__logo svg { display: block; width: 100%; height: 100%; }
.eco-card__badge {
display: inline-block;
font-size: .68rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #FB923C;
background: rgba(249,115,22,.12);
border: 1px solid rgba(249,115,22,.3);
padding: 4px 11px;
border-radius: 100px;
}
.eco-card__badge--alt {
color: var(--indigo);
background: rgba(99,102,241,.12);
border-color: rgba(99,102,241,.3);
}
.eco-card__price {
font-size: .8125rem;
color: var(--muted-2);
white-space: nowrap;
}
.eco-card__price strong { color: #F8FAFC; font-weight: 700; }
.eco-card__title {
font-size: 1.5rem;
color: #F8FAFC;
font-family: var(--font-h);
font-weight: 800;
margin-bottom: 12px;
letter-spacing: -.02em;
}
.eco-card__lead {
font-size: .9375rem;
color: var(--muted-2);
line-height: 1.65;
margin-bottom: 20px;
}
.eco-card__features {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.eco-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .9rem;
color: #E2E8F0;
line-height: 1.5;
}
.eco-card__features svg {
flex-shrink: 0;
margin-top: 4px;
color: #34D399;
}
.eco-card--eliks .eco-card__features svg { color: #818CF8; }
.eco-card__cta {
align-self: flex-start;
padding: 12px 22px;
font-size: .9375rem;
margin-top: auto;
}
.eco-card__hint {
display: block;
font-size: .78rem;
color: var(--muted);
margin-top: 10px;
}
[data-theme="light"] .eco-card {
background: #FFFFFF;
border-color: rgba(15,23,42,.08);
}
[data-theme="light"] .eco-card__title { color: #0F172A; }
[data-theme="light"] .eco-card__lead { color: #475569; }
[data-theme="light"] .eco-card__features li { color: #1E293B; }
[data-theme="light"] .eco-card__price strong { color: #0F172A; }
@media (max-width: 760px) {
.ecosystem__grid { grid-template-columns: 1fr; gap: 18px; }
.eco-card { padding: 26px 22px 24px; }
.eco-card__title { font-size: 1.3rem; }
.eco-card__head { flex-wrap: wrap; }
}
/* ================================================================
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 !important;
order: 99; /* toujours à l'extrême droite */
margin-left: auto; /* pousse à droite si flex-wrap */
width: 44px; height: 44px;
align-items: center; justify-content: center;
gap: 5px;
background: rgba(15, 15, 28, .85);
border: 1px solid rgba(255, 255, 255, .15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
z-index: 220;
}
.nav__burger span {
width: 20px; height: 2.5px;
background: #fff !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.nav__links {
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
background: #08080F !important;
background-color: #08080F !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column !important;
justify-content: center !important;
align-items: stretch !important;
gap: 4px !important;
padding: 80px 24px 24px !important;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
z-index: 210 !important;
overflow-y: auto;
}
.nav__links.open { transform: none !important; }
.nav__link {
font-size: 1.1rem !important;
padding: 14px 20px !important;
width: 100% !important;
text-align: center !important;
/* On nuke toutes les pastilles décoratives qui débordent en mode vertical */
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255,255,255,.92) !important;
}
/* Cibler en force "Sur mesure" et "Parrainage" pour leur retirer leur pill */
.nav__links .nav__link--custom,
.nav__links .nav__link--custom:hover,
.nav__links .nav__link[href*="parrainage"],
.nav__links .nav__link[href*="parrainage"]:hover,
.nav__links .nav__link[href*="parrainage"].active {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255,255,255,.92) !important;
text-shadow: none !important;
}
.nav__links .nav__link--custom::before,
.nav__links .nav__link[href*="parrainage"]::before,
.nav__links .nav__link[href*="parrainage"]::after {
display: none !important;
content: none !important;
animation: none !important;
}
.nav__cta { margin-top: 12px; width: 100% !important; justify-content: center; padding: 16px !important; }
/* 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; }
.footer__links { grid-template-columns: 1fr; }
}
/* ================================================================
PLAN CARD — "0 € engagement" + "Mai 2026 création offerte"
================================================================ */
.plan-card__feature--free {
color: var(--text) !important;
font-size: .92rem !important;
background: linear-gradient(90deg,
color-mix(in srgb, #10B981 8%, transparent) 0%,
transparent 100%);
border-radius: 8px;
padding: 6px 10px !important;
margin: 4px -4px !important;
}
.plan-card__feature--free svg {
width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
color: #10B981;
}
.plan-card__feature--free strong { color: #10B981; }
.plan-card__feature--may {
color: var(--text) !important;
font-size: .92rem !important;
background: linear-gradient(90deg,
color-mix(in srgb, var(--indigo, #6366F1) 12%, transparent) 0%,
color-mix(in srgb, #F97316 8%, transparent) 100%);
border-radius: 8px;
padding: 6px 10px !important;
margin: 4px -4px 8px !important;
position: relative;
}
.plan-card__feature--may svg {
width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
color: #F97316;
animation: may-star-twinkle 2.4s ease-in-out infinite;
}
@keyframes may-star-twinkle {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(72deg) scale(1.1); }
}
.plan-card__feature--may strong { color: var(--indigo, #6366F1); }
.plan-card__feature--may .plan-card__strike {
text-decoration: line-through;
opacity: .55;
font-weight: 500;
margin-left: 4px;
}
@media (prefers-reduced-motion: reduce) {
.plan-card__feature--may svg { animation: none; }
}
/* Récap configurateur — ligne "Mai 2026 création offerte" mise en avant */
.cfg__included--may {
background: linear-gradient(90deg,
color-mix(in srgb, var(--indigo, #6366F1) 12%, transparent) 0%,
color-mix(in srgb, #F97316 8%, transparent) 100%);
border-radius: 8px;
padding: 8px 12px;
font-weight: 600;
}
.cfg__included--may strong {
color: var(--indigo, #6366F1);
}
/* 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;
}
/* Pill "Tarif de lancement" en bandeau au-dessus de la ligne Trio + prix */
.cfg__radio-launch {
align-self: flex-start;
margin-bottom: 10px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--orange);
background: rgba(249,115,22,.10);
border: 1px solid rgba(249,115,22,.35);
padding: 4px 12px;
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; }
@media (max-width: 480px) {
.cfg__radio-launch { white-space: normal; line-height: 1.35; }
}
/* 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;
position: relative;
}
/* Pouce 👍 animé qui apparaît à la sélection d'une option du configurateur */
.cfg__thumb-pop {
position: absolute;
top: -10px;
right: -8px;
font-size: 1.6rem;
line-height: 1;
pointer-events: none;
z-index: 10;
opacity: 0;
transform: scale(.4) rotate(-12deg);
filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.cfg__thumb-pop.is-on {
animation: cfgThumbBounce .9s cubic-bezier(.5,.1,.2,1) forwards;
}
@keyframes cfgThumbBounce {
0% { opacity: 0; transform: scale(.4) rotate(-12deg) translateY(0); }
18% { opacity: 1; transform: scale(1.4) rotate(8deg) translateY(-2px); }
40% { opacity: 1; transform: scale(1) rotate(-2deg) translateY(-4px); }
70% { opacity: 1; transform: scale(1) rotate(0) translateY(-10px); }
100% { opacity: 0; transform: scale(.7) rotate(0) translateY(-30px); }
}
@media (prefers-reduced-motion: reduce) {
.cfg__thumb-pop.is-on { animation: cfgThumbFade .4s ease forwards; }
@keyframes cfgThumbFade {
0% { opacity: 0; transform: scale(.8) translateY(0); }
50% { opacity: 1; transform: scale(1) translateY(-6px); }
100% { opacity: 0; transform: scale(1) translateY(-14px); }
}
}
/* Pouce en bas 👎 — affiché à la désélection d'une option */
.cfg__thumb-pop--down {
filter: drop-shadow(0 4px 10px rgba(220, 38, 38, .45));
}
.cfg__thumb-pop--down.is-on {
animation: cfgThumbDownDrop .9s cubic-bezier(.5,.1,.2,1) forwards;
}
@keyframes cfgThumbDownDrop {
0% { opacity: 0; transform: scale(.4) rotate(12deg) translateY(-6px); }
18% { opacity: 1; transform: scale(1.35) rotate(-8deg) translateY(2px); }
45% { opacity: 1; transform: scale(1) rotate(4deg) translateY(6px); }
75% { opacity: 1; transform: scale(1) rotate(0) translateY(10px); }
100% { opacity: 0; transform: scale(.7) rotate(0) translateY(28px); }
}
@media (prefers-reduced-motion: reduce) {
.cfg__thumb-pop--down.is-on { animation: cfgThumbFade .4s ease forwards; }
}
.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;
font-size: 1.0625rem;
padding: 18px 32px;
letter-spacing: .01em;
box-shadow: 0 4px 20px rgba(99, 102, 241, .4);
}
.cfg__cta:hover {
box-shadow: 0 6px 28px rgba(99, 102, 241, .6);
}
.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: 28px 20px; }
}
/* ────────────────────────────────────────────────────────────────
PAGE PARRAINAGE — corrections mobiles
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Pas de débordement horizontal */
body.page-parrainage { overflow-x: hidden; }
body.page-parrainage main,
body.page-parrainage section { max-width: 100vw; overflow-x: hidden; }
/* Titres et textes longs : on autorise la coupure pour éviter les overflows */
body.page-parrainage h1,
body.page-parrainage h2,
body.page-parrainage .parr-cta__title,
body.page-parrainage .parr-cta__lead,
body.page-parrainage .parr-hero__title,
body.page-parrainage .parr-hero__sub {
overflow-wrap: anywhere;
word-break: normal;
hyphens: auto;
}
/* Hide les toggles thèmes décoratifs (rétro / futuriste) sur mobile parrainage */
body.page-parrainage .retro-toggle,
body.page-parrainage .future-toggle {
display: none !important;
}
}
/* ================================================================
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 — 6 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(5, 1fr);
gap: 14px;
}
.gallery-note {
margin-top: 32px;
padding: 18px 24px;
border-radius: var(--r-lg);
background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.06));
border: 1px solid rgba(99,102,241,.18);
text-align: center;
font-size: .95rem;
line-height: 1.6;
color: var(--text);
}
.gallery-note span[aria-hidden="true"] {
color: var(--indigo, #6366f1);
margin-right: 6px;
font-weight: 700;
}
.gallery-note strong { color: var(--text); font-weight: 600; }
.gallery-note a {
color: var(--indigo, #6366f1);
font-weight: 600;
text-decoration: none;
margin-left: 6px;
white-space: nowrap;
transition: var(--t);
}
.gallery-note a:hover { text-decoration: underline; }
@media (max-width: 640px) {
.gallery-note { font-size: .88rem; padding: 14px 16px; }
.gallery-note a { display: inline-block; margin-top: 4px; }
}
.gallery-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px;
text-align: left;
cursor: pointer;
transition: var(--t);
display: flex;
flex-direction: column;
gap: 8px;
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: 8px;
padding: 6px 9px;
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
border-radius: 6px;
}
.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: .62rem;
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;
aspect-ratio: 4 / 3;
height: auto;
border-radius: 8px;
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: 4px;
padding: 0 2px;
flex: 1;
}
.gallery-card__sector {
font-size: .78rem;
font-weight: 500;
color: #E2E8F0;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gallery-card__tags {
display: none; /* Hidden in compact 5-col grid; tags would clutter */
}
.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: .72rem;
font-weight: 600;
color: var(--indigo);
padding-top: 4px;
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); }
/* ================================================================
AVANT / APRÈS — comparaison visuelle
================================================================ */
.ba-compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: center;
margin: 32px auto 48px;
max-width: 1000px;
}
.ba-compare__side {
display: flex; flex-direction: column; gap: 16px;
}
.ba-compare__tag {
display: inline-block;
align-self: flex-start;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255,255,255,.05);
color: var(--muted);
font-size: .78rem;
font-weight: 600;
letter-spacing: .02em;
border: 1px solid var(--border-2);
}
.ba-compare__tag--accent {
background: linear-gradient(135deg, var(--indigo) 0%, var(--violet, var(--indigo)) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.ba-compare__arrow {
font-size: 28px;
color: var(--indigo);
font-weight: 700;
text-align: center;
align-self: center;
}
.ba-compare__list {
list-style: none !important;
list-style-type: none !important;
padding: 0 !important;
margin: 0;
font-size: .85rem;
color: var(--muted);
line-height: 1.8;
}
.ba-compare__list li {
list-style: none !important;
list-style-type: none !important;
}
.ba-compare__list li::marker { content: '' !important; display: none; }
.ba-compare__list--accent { color: var(--text); }
/* Mockups (pure CSS) */
.ba-compare__mock {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0,0,0,.4);
aspect-ratio: 4/3;
display: flex; flex-direction: column;
}
.ba-compare__mock--before { filter: grayscale(.7) opacity(.85); }
.ba-mock__chrome {
display: flex; align-items: center; gap: 6px;
background: #ECECEC;
padding: 8px 12px;
border-bottom: 1px solid #E0E0E0;
}
.ba-mock__chrome span {
width: 10px; height: 10px; border-radius: 50%; background: #BBB;
}
.ba-mock__chrome span:first-child { background: #FF5F57; }
.ba-mock__chrome span:nth-child(2) { background: #FEBC2E; }
.ba-mock__chrome span:nth-child(3) { background: #28C840; }
.ba-mock__hero {
flex: 1.2;
padding: 16px;
display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.ba-mock__hero--gray { background: #DDD; }
.ba-mock__hero--photo {
background: linear-gradient(135deg, #1F2937 0%, #4F46E5 100%);
color: #fff;
position: relative;
}
.ba-mock__hero--photo::after {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.6));
}
.ba-mock__hero--photo > * { position: relative; z-index: 1; }
.ba-mock__title-line {
height: 8px; border-radius: 3px; background: #999;
}
.ba-mock__title-line--lg { width: 75%; height: 14px; }
.ba-mock__title-line--md { width: 50%; height: 9px; }
.ba-mock__brand {
font-family: 'Fraunces', Georgia, serif;
font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.ba-mock__sub { font-size: 9px; opacity: .85; }
.ba-mock__btn {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
align-self: flex-start;
margin-top: 6px;
}
.ba-mock__btn--gray { background: #999; width: 60px; height: 12px; padding: 0; }
.ba-mock__btn--accent {
background: #C8A977;
color: #1F2937;
}
.ba-mock__body {
padding: 12px 16px;
display: flex; flex-direction: column; gap: 6px;
flex: .8;
background: #FAFAFA;
}
.ba-mock__line {
height: 6px; border-radius: 2px; background: #DDD;
}
.ba-mock__line--short { width: 60%; }
.ba-mock__line--accent { background: #C8A977; width: 80%; }
/* URL dans la barre chrome */
.ba-mock__url {
margin-left: 12px;
background: #fff;
padding: 3px 10px;
border-radius: 4px;
font-size: 9px;
color: #999;
font-family: monospace;
}
.ba-mock__url--accent { color: #1F2937; font-weight: 500; }
/* Hero "placeholder" pour la version Avant */
.ba-mock__hero--placeholder {
background: linear-gradient(135deg, #D8D8D8 0%, #C8C8C8 100%);
align-items: center;
text-align: center;
position: relative;
}
.ba-mock__placeholder-icon {
color: #999;
margin-bottom: 4px;
}
.ba-mock__placeholder-label {
color: #888;
font-size: 10px;
font-style: italic;
margin-bottom: 4px;
}
/* Hero "photo" pour la version Après */
.ba-mock__hero--photo {
background: linear-gradient(135deg, #1F2937 0%, #4F46E5 100%);
color: #fff;
position: relative;
overflow: hidden;
align-items: flex-start;
}
.ba-mock__hero-bg {
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1568471173242-461f0a730452?w=900&q=80&auto=format&fit=crop');
background-size: cover;
background-position: center;
opacity: .6;
}
.ba-mock__hero--photo::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 100%);
z-index: 1;
}
.ba-mock__hero--photo > * { position: relative; z-index: 2; }
.ba-mock__contact-row {
display: flex; gap: 6px; margin-top: 8px;
}
.ba-mock__btn--ghost {
background: rgba(255,255,255,.18);
color: #fff;
border: 1px solid rgba(255,255,255,.3);
font-size: 8px;
padding: 4px 8px;
}
/* Cards (mini galerie sous le hero) */
.ba-mock__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 6px 8px 0;
background: #FAFAFA;
}
.ba-compare__mock--before .ba-mock__card {
height: 24px;
background: #DDD;
border-radius: 2px;
}
.ba-mock__card--photo {
height: 32px;
border-radius: 3px;
background-size: cover;
background-position: center;
}
.ba-mock__card--p1 {
background-image: url('https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=300&q=80&auto=format&fit=crop');
}
.ba-mock__card--p2 {
background-image: url('https://images.unsplash.com/photo-1606312619070-d48b4c652a52?w=300&q=80&auto=format&fit=crop');
}
.ba-mock__card--p3 {
background-image: url('https://images.unsplash.com/photo-1623334044303-241021148842?w=300&q=80&auto=format&fit=crop');
}
/* Glow sur le mockup "Après" */
.ba-compare__mock--after {
box-shadow:
0 0 0 1px rgba(200,169,119,.4),
0 16px 40px rgba(99,102,241,.35),
0 8px 24px rgba(0,0,0,.45);
}
/* ── Enrichissements visuels du mockup "Après" ────────────────── */
.ba-mock__open-pill {
position: absolute; top: 8px; right: 10px;
background: #10B981;
color: #fff;
font-size: 8px; font-weight: 700;
padding: 3px 8px; border-radius: 999px;
letter-spacing: .04em;
z-index: 3;
box-shadow: 0 0 0 0 rgba(16,185,129,.6);
animation: sim-dot-pulse 1.6s ease-in-out infinite;
}
.ba-mock__rating-mini {
display: inline-flex; align-items: center; gap: 5px;
font-size: 9px;
color: #fff;
margin-top: 4px;
margin-bottom: 4px;
}
.ba-mock__stars-mini { color: #FACC15; font-size: 11px; letter-spacing: .04em; }
.ba-mock__rating-mini strong { font-weight: 700; }
.ba-mock__section-label {
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
color: #A65A2A;
padding: 8px 8px 2px;
background: #FAFAFA;
}
.ba-mock__footer-mini {
display: flex; gap: 4px; flex-wrap: wrap;
padding: 6px 8px 8px;
background: #FAFAFA;
font-size: 8px;
color: #888;
border-top: 1px solid #EEE;
}
/* ── Tag gold pour le mockup "full" (vrai site Triskell) ── */
.ba-compare__tag--gold {
background: linear-gradient(135deg, #C8A977 0%, #E8C896 50%, #F4D03F 100%);
color: #2A1810;
border-color: transparent;
box-shadow: 0 6px 20px rgba(200,169,119,.45);
font-weight: 700;
}
/* ── Mockup "full site" — version PRO complète ── */
.ba-compare__mock--full {
aspect-ratio: auto;
background: #fff;
border-radius: 12px;
box-shadow:
0 0 0 2px #C8A977,
0 24px 60px rgba(200,169,119,.45),
0 16px 40px rgba(0,0,0,.55);
overflow: hidden;
position: relative;
}
.ba-mock__chrome--gold {
background: linear-gradient(180deg, #F5EFE0 0%, #ECECEC 100%);
}
.ba-mock__url--secured {
font-weight: 600;
font-family: monospace;
}
.ba-mock__live-dot {
display: inline-block;
width: 7px; height: 7px; border-radius: 50%;
background: #10B981;
margin-left: auto;
box-shadow: 0 0 0 0 rgba(16,185,129,.7);
animation: sim-dot-pulse 1.6s ease-in-out infinite;
}
/* Hero — full image */
.ba-mock__full-hero {
position: relative;
padding: 22px 18px 18px;
color: #fff;
overflow: hidden;
min-height: 220px;
display: flex; flex-direction: column; gap: 8px;
}
.ba-mock__full-hero-bg {
position: absolute; inset: 0;
background-image: url('https://images.unsplash.com/photo-1568471173242-461f0a730452?w=1200&q=85&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
.ba-mock__full-hero::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(58,36,24,.55) 0%, rgba(166,90,42,.65) 100%);
}
.ba-mock__full-hero > * { position: relative; z-index: 1; }
.ba-mock__status-pill {
display: inline-block;
align-self: flex-start;
padding: 4px 11px;
border-radius: 999px;
background: rgba(16,185,129,.95);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
}
.ba-mock__full-eyebrow {
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
opacity: .85;
margin-top: 2px;
}
.ba-mock__full-h1 {
font-family: 'Fraunces', Georgia, serif;
font-size: 24px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -.02em;
margin: 4px 0 6px;
}
.ba-mock__full-h1 em { font-style: italic; color: #FACC15; }
.ba-mock__full-rating {
display: flex; align-items: center; gap: 6px;
font-size: 10px;
}
.ba-mock__stars { color: #FACC15; letter-spacing: .04em; font-size: 12px; }
.ba-mock__rating-num { opacity: .9; }
.ba-mock__rating-num strong { font-weight: 700; }
.ba-mock__full-cta {
display: flex; gap: 6px; margin-top: 8px;
flex-wrap: wrap;
}
.ba-mock__btn-big {
font-size: 10px;
font-weight: 700;
padding: 7px 11px;
border-radius: 6px;
display: inline-block;
}
.ba-mock__btn-big--primary {
background: #FACC15;
color: #2A1810;
}
.ba-mock__btn-big--ghost {
background: rgba(255,255,255,.18);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
}
/* Sections sous le hero */
.ba-mock__full-section {
padding: 14px 18px;
border-top: 1px solid #EEE5D2;
background: #FFFCF5;
}
.ba-mock__full-section--rythme {
background: linear-gradient(180deg, #F5EFE0 0%, #FFFCF5 100%);
}
.ba-mock__full-section-title {
font-family: 'Fraunces', Georgia, serif;
font-size: 13px;
font-weight: 600;
color: #3A2418;
margin-bottom: 8px;
}
.ba-mock__full-section-title span {
color: #A65A2A;
font-weight: 400;
font-style: italic;
font-size: 11px;
}
/* Rythme du four */
.ba-mock__rythme {
display: flex; gap: 4px; flex-wrap: wrap;
}
.ba-mock__rythme-step {
font-size: 9px;
padding: 4px 8px;
border-radius: 4px;
background: #F5EFE0;
color: #7A604A;
border: 1px solid #E2D3B8;
white-space: nowrap;
}
.ba-mock__rythme-step--past {
opacity: .55;
text-decoration: line-through;
}
.ba-mock__rythme-step--current {
background: #A65A2A;
color: #FFFCF5;
border-color: #A65A2A;
box-shadow: 0 2px 8px rgba(166,90,42,.45);
font-weight: 700;
}
/* Produits */
.ba-mock__full-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.ba-mock__product {
display: flex; flex-direction: column; gap: 4px;
}
.ba-mock__product-photo {
height: 50px;
border-radius: 4px;
background-size: cover;
background-position: center;
}
.ba-mock__product-photo--p1 {
background-image: url('https://images.unsplash.com/photo-1586444248902-2f64eddc13df?w=300&q=80&auto=format&fit=crop');
}
.ba-mock__product-photo--p2 {
background-image: url('https://images.unsplash.com/photo-1606312619070-d48b4c652a52?w=300&q=80&auto=format&fit=crop');
}
.ba-mock__product-photo--p3 {
background-image: url('https://images.unsplash.com/photo-1509365465985-25d11c17e812?w=300&q=80&auto=format&fit=crop');
}
.ba-mock__product-info { display: flex; flex-direction: column; gap: 1px; }
.ba-mock__product-info strong {
font-size: 9px; font-weight: 600; color: #2A1810;
line-height: 1.2;
}
.ba-mock__product-info small {
font-size: 9px; color: #A65A2A; font-weight: 700;
}
/* Avis */
.ba-mock__full-section--review {
background: linear-gradient(180deg, #FFFCF5 0%, #F5EFE0 100%);
}
.ba-mock__review {
display: flex; flex-direction: column; gap: 4px;
font-size: 10px;
color: #3A2418;
}
.ba-mock__review-stars { color: #F0C674; font-size: 11px; }
.ba-mock__review-text { font-style: italic; line-height: 1.45; }
.ba-mock__review-author { font-size: 9px; color: #7A604A; font-weight: 600; }
/* Liste gold (à droite) */
.ba-compare__list--gold {
color: var(--text);
line-height: 1.9;
}
.ba-compare__list--gold li {
position: relative;
padding-left: 0;
}
.ba-compare__list--gold .ba-check {
background: linear-gradient(135deg, #C8A977 0%, #F4D03F 100%);
color: #2A1810;
}
/* Croix et checks dans les listes */
.ba-x, .ba-check {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
margin-right: 8px;
}
.ba-x { background: rgba(239,68,68,.15); color: #EF4444; }
.ba-check {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: #fff;
}
/* Flèche centrale animée */
.ba-compare__arrow {
display: flex; flex-direction: column; align-items: center; gap: 4px;
font-size: 32px;
color: var(--indigo);
}
.ba-compare__arrow-pulse {
animation: ba-arrow-pulse 1.5s ease-in-out infinite;
display: inline-block;
}
.ba-compare__arrow-label {
font-size: .7rem;
font-weight: 600;
color: var(--muted);
background: rgba(99,102,241,.12);
padding: 3px 10px;
border-radius: 999px;
letter-spacing: .03em;
}
@keyframes ba-arrow-pulse {
0%, 100% { transform: translateX(0); opacity: .8; }
50% { transform: translateX(4px); opacity: 1; }
}
@media (max-width: 800px) {
.ba-compare {
grid-template-columns: 1fr;
gap: 16px;
max-width: 480px;
}
.ba-compare__arrow { transform: rotate(90deg); }
}
@media (max-width: 480px) {
.ba-compare { padding: 0 8px; }
.ba-compare__side { gap: 12px; }
.ba-compare__list { font-size: .8rem; }
.ba-mock__brand { font-size: 13px; }
.ba-mock__sub { font-size: 9px; }
.ba-mock__rating-mini { font-size: 9px; }
}
/* ================================================================
TITRE SIMULATEUR — distinctif, impossible à louper
================================================================ */
.section__header--simulator {
position: relative;
text-align: center;
margin-bottom: 48px;
padding: 32px 24px 28px;
}
/* Halo diffus, sans rectangle visible — déborde largement et flou fort */
.section__header--simulator::before {
content: '';
position: absolute;
inset: -120px -80px;
background:
radial-gradient(circle at 50% 35%, rgba(99,102,241,.18) 0%, transparent 50%),
radial-gradient(circle at 50% 85%, rgba(249,115,22,.10) 0%, transparent 55%);
z-index: 0;
pointer-events: none;
filter: blur(40px);
opacity: .9;
}
.section__header--simulator > * { position: relative; z-index: 1; }
/* Badge supérieur "SIMULATEUR EN LIGNE..." */
.sim-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 18px;
background: rgba(0,0,0,.4);
border: 1px solid rgba(99,102,241,.5);
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
color: var(--text);
text-transform: uppercase;
margin-bottom: 22px;
box-shadow: 0 0 0 1px rgba(99,102,241,.2), 0 8px 24px rgba(99,102,241,.18);
}
.sim-badge__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 0 rgba(16,185,129,.6);
animation: sim-dot-pulse 1.6s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes sim-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}
/* Titre principal — sur 2 niveaux (line + big) */
.sim-title {
margin: 0 auto 18px;
max-width: 920px;
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.05;
}
.sim-title__line {
display: block;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
color: var(--muted);
font-weight: 500;
font-style: italic;
margin-bottom: 4px;
}
.sim-title__big {
display: block;
font-size: clamp(2rem, 5.2vw, 4rem);
font-weight: 700;
color: var(--text);
line-height: 1.05;
text-shadow: 0 4px 30px rgba(99,102,241,.35);
word-break: break-word;
}
@media (max-width: 480px) {
.sim-title__big { font-size: clamp(1.7rem, 8vw, 2.4rem); }
.sim-title__line { font-size: 1.05rem; }
.section__header--simulator { padding: 24px 12px 22px; }
.sim-badge {
font-size: .68rem;
padding: 6px 12px;
letter-spacing: .08em;
}
}
/* Surlignage animé sur "30 secondes" (effet marker fluo) */
.sim-title__mark {
position: relative;
background: transparent;
color: var(--text);
display: inline-block;
padding: 0 .12em;
font-style: italic;
font-weight: 800;
z-index: 1;
}
.sim-title__mark::before {
content: '';
position: absolute;
inset: 8% -.05em 14% -.05em;
background: linear-gradient(120deg, #FACC15 0%, #F97316 60%, #EC4899 100%);
z-index: -1;
transform: skewX(-6deg);
border-radius: 4px;
box-shadow: 0 6px 22px rgba(249,115,22,.55);
animation: sim-mark-pulse 2.5s ease-in-out infinite;
}
@keyframes sim-mark-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.18); }
}
/* Sous-titre */
.sim-sub {
max-width: 720px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.7;
color: var(--muted-2);
}
.sim-sub strong { color: var(--text); }
/* ================================================================
"COMMENT ÇA MARCHE" — 3 étapes visuelles
================================================================ */
.how-3-steps {
list-style: none !important;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 12px;
max-width: 1000px;
margin: 0 auto 36px;
padding: 0 !important;
}
.how-3-steps li,
.how-3-steps > *,
.how-3-step,
.how-3-step__arrow {
list-style: none !important;
list-style-type: none !important;
}
.how-3-step::marker,
.how-3-step__arrow::marker,
.how-3-steps li::marker { content: '' !important; display: none; }
.how-3-step {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 22px 16px;
background: linear-gradient(180deg, rgba(99,102,241,.08) 0%, rgba(99,102,241,.02) 100%);
border: 1px solid rgba(99,102,241,.25);
border-radius: 14px;
position: relative;
transition: var(--t);
}
.how-3-step:hover {
border-color: rgba(99,102,241,.55);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(99,102,241,.18);
}
.how-3-step__num {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--indigo) 0%, #8B5CF6 100%);
color: #fff;
font-weight: 800;
font-size: .85rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(99,102,241,.45);
}
.how-3-step__icon {
font-size: 30px;
line-height: 1;
margin-bottom: 8px;
}
.how-3-step__title {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
letter-spacing: -.005em;
}
.how-3-step__desc {
font-size: .82rem;
color: var(--muted);
line-height: 1.5;
}
.how-3-step__arrow {
list-style: none;
font-size: 24px;
font-weight: 700;
color: var(--indigo);
text-align: center;
}
@media (max-width: 800px) {
.how-3-steps {
grid-template-columns: 1fr;
}
.how-3-step__arrow { transform: rotate(90deg); padding: 4px 0; }
}
@media (max-width: 480px) {
.how-3-steps { gap: 14px; }
.how-3-step { padding: 18px 14px; }
.how-3-step__icon { font-size: 26px; }
.how-3-step__title { font-size: .95rem; }
.how-3-step__desc { font-size: .76rem; }
}
/* ================================================================
POINTER "↓ Choisissez votre métier"
================================================================ */
.gallery-pointer {
text-align: center;
margin: 0 auto 18px;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.1rem;
color: var(--text);
font-weight: 600;
letter-spacing: -.005em;
}
.gallery-pointer__text {
display: block;
font-style: italic;
margin-bottom: 4px;
background: linear-gradient(90deg, var(--indigo) 0%, #8B5CF6 50%, #F97316 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gallery-pointer__arrow {
display: inline-block;
font-size: 1.6rem;
font-style: normal;
color: var(--indigo);
animation: gallery-pointer-bounce 1.4s ease-in-out infinite;
}
@keyframes gallery-pointer-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* ================================================================
FILTRES par catégorie
================================================================ */
.gallery-filters {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px;
margin: 0 auto 28px;
max-width: 1100px;
}
.gallery-filter {
background: rgba(255,255,255,.04);
border: 1px solid var(--border-2);
color: var(--muted);
padding: 8px 14px;
border-radius: 999px;
font: inherit;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
transition: var(--t);
display: inline-flex; align-items: center; gap: 5px;
white-space: nowrap;
}
.gallery-filter:hover {
background: rgba(255,255,255,.08);
border-color: var(--text);
color: var(--text);
}
.gallery-filter.is-active {
background: var(--indigo);
border-color: var(--indigo);
color: #fff;
box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.gallery-filter__count {
background: rgba(255,255,255,.15);
padding: 1px 8px;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
}
/* ================================================================
HOVER OVERLAY sur les cartes
================================================================ */
/* Fallback : icône emoji visible si l'image ne charge pas */
.gallery-card__preview::before {
content: attr(data-icon);
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 56px;
color: rgba(255,255,255,.92);
text-shadow: 0 4px 18px rgba(0,0,0,.4);
z-index: 0;
pointer-events: none;
}
.gallery-card__screenshot {
position: relative;
z-index: 1;
}
.gallery-card__screenshot.is-broken {
display: none;
}
.gallery-card__overlay {
position: absolute;
inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
z-index: 2;
background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);
color: #fff;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
text-align: center;
padding: 16px;
}
.gallery-card__overlay-cta {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -.01em;
}
.gallery-card__overlay-cta em {
color: var(--indigo);
font-style: italic;
}
.gallery-card__overlay-sub {
font-size: .78rem;
color: rgba(255,255,255,.85);
letter-spacing: .03em;
}
.gallery-card__preview { position: relative; }
.gallery-card:hover .gallery-card__overlay,
.gallery-card:focus-visible .gallery-card__overlay { opacity: 1; }
.gallery-card.is-hidden {
display: none !important;
}
/* ================================================================
FILETS RESPONSIVES GLOBAUX
================================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
.container { max-width: 100%; }
/* ================================================================
TOP BANNER — promo simulateur, sticky en haut du site
================================================================ */
.top-banner {
position: sticky;
top: var(--promo-h, 0px);
display: block;
width: 100%;
z-index: 199;
background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #F97316 100%);
background-size: 200% 100%;
color: #fff;
text-decoration: none;
text-align: center;
padding: 11px 16px;
font-size: .92rem;
line-height: 1.4;
font-weight: 500;
overflow: hidden;
animation: top-banner-shine 8s linear infinite;
}
@keyframes top-banner-shine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.top-banner__inner {
display: inline-flex; align-items: center; gap: 14px;
max-width: 1100px;
flex-wrap: wrap;
justify-content: center;
}
.top-banner__pulse {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255,255,255,.7);
animation: top-banner-pulse 1.5s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes top-banner-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); transform: scale(1); }
60% { box-shadow: 0 0 0 12px rgba(255,255,255,0); transform: scale(1.2); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}
.top-banner__label { color: #fff; }
.top-banner__label em {
font-style: italic;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-color: rgba(255,255,255,.7);
}
.top-banner__cta {
display: inline-flex; align-items: center;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.35);
padding: 5px 14px;
border-radius: 999px;
font-weight: 700;
white-space: nowrap;
transition: background .2s, transform .15s;
}
.top-banner:hover .top-banner__cta {
background: rgba(255,255,255,.3);
transform: translateX(2px);
}
@media (max-width: 700px) {
.top-banner { font-size: .82rem; padding: 9px 12px; }
.top-banner__inner { gap: 8px; }
.top-banner__cta { padding: 4px 12px; font-size: .8rem; }
}
@media (max-width: 480px) {
.top-banner { font-size: .75rem; padding: 8px 10px; line-height: 1.3; }
.top-banner__inner { flex-direction: column; gap: 6px; }
.top-banner__pulse { display: none; }
.top-banner__label em {
text-decoration: none;
font-weight: 700;
}
.top-banner__cta { padding: 6px 14px; font-size: .82rem; }
}
/* ================================================================
BOUTON "Voir les X autres univers" (mode collapsed)
================================================================ */
.gallery-expand {
text-align: center;
margin: 28px auto 0;
}
.gallery-expand__btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--indigo) 0%, #8B5CF6 100%);
color: #fff;
border: 0;
border-radius: 999px;
font: inherit;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 24px rgba(99,102,241,.35);
transition: transform .15s, box-shadow .15s;
}
.gallery-expand__btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(99,102,241,.5);
}
.gallery-expand__btn strong { font-weight: 700; }
/* ================================================================
TRUST LINE après la grille
================================================================ */
.gallery-trust {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 24px 36px;
margin: 36px auto 0;
max-width: 900px;
font-size: .9rem;
color: var(--muted);
text-align: center;
}
.gallery-trust span {
display: inline-flex; align-items: center; gap: 6px;
}
.gallery-trust strong { color: var(--text); }
.gallery-trust span::before {
content: '✓';
color: var(--indigo);
font-weight: 700;
}
/* ── Responsive grille / filtres / trust ── */
@media (max-width: 1100px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gallery-legend { gap: 10px 20px; margin-top: -16px; }
.gallery-filter { font-size: .78rem; padding: 7px 12px; }
}
@media (max-width: 480px) {
.gallery-grid { grid-template-columns: 1fr; gap: 14px; }
.gallery-filter { font-size: .72rem; padding: 6px 10px; }
.gallery-filter__count { font-size: .68rem; padding: 1px 6px; }
.gallery-pointer { font-size: .95rem; }
.gallery-pointer__arrow { font-size: 1.4rem; }
.gallery-trust { gap: 14px; font-size: .82rem; }
.gallery-expand__btn { font-size: .9rem; padding: 12px 22px; }
}
/* ================================================================
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__live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
background: var(--indigo, #6366f1);
color: #fff;
font-size: .82rem;
font-weight: 600;
letter-spacing: .01em;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: var(--t);
}
.demo-modal__live:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
.demo-modal__live span {
font-size: .9em;
opacity: .9;
}
@media (max-width: 600px) {
.demo-modal__live { padding: 6px 10px; font-size: .75rem; }
.demo-modal__live span { display: none; }
}
.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) {
/* Mobile : la pile droite ne contient plus que music + theme (les
5 themes sont passes dans la rangee du hero). On les empile a
droite, taille reduite. */
.music-toggle { width: 48px; height: 48px; right: 14px; left: auto; bottom: 76px; border-radius: 14px; }
.music-toggle__bars { height: 20px; 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 */
html[data-theme="future"] .theme-toggle,
html[data-theme="retro"] .theme-toggle,
html[data-theme="future"] #themeToggle,
html[data-theme="retro"] #themeToggle {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Les 5 themes sont desormais dans la rangee du hero : leurs
anciennes regles fixe + recentrage mobile sont obsoletes et
neutralisees ici. */
/* Masquer l'ampoule sur les thèmes immersifs (zombie, usa, médiéval) */
html[data-theme="zombie"] .theme-toggle,
html[data-theme="usa"] .theme-toggle,
html[data-theme="medieval"] .theme-toggle {
display: none !important;
}
.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) {
/* Ampoule en bas a droite, accolee au coin (la pile mobile ne
contient plus que music au-dessus + theme en bas). */
.theme-toggle { width: 48px; height: 48px; right: 14px; left: auto; bottom: 16px; border-radius: 14px; }
.theme-toggle__svg { width: 28px; height: 32px; }
.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 */
/* ================================================================
ZOMBIE TOGGLE — bouton mode horreur (au-dessus du retro)
================================================================ */
.zombie-toggle {
position: fixed;
right: 22px;
bottom: 374px; /* retro = 286 + 64 + 24 */
z-index: 250;
width: 64px;
height: 64px;
border-radius: 18px;
background:
radial-gradient(120% 100% at 50% 30%, rgba(155, 255, 110, .18), transparent 70%),
radial-gradient(80% 80% at 50% 110%, rgba(180, 0, 30, .25), transparent 65%),
linear-gradient(160deg, #0A1A0A 0%, #050B08 60%, #1A0A0A 100%);
border: 1px solid rgba(155, 255, 110, .35);
cursor: pointer;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
justify-content: center;
color: #9BFF6E;
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 18px rgba(155, 255, 110, .18),
inset 0 0 14px rgba(155, 255, 110, .08);
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
border-color .35s ease,
box-shadow .35s ease,
filter .35s ease;
overflow: visible;
}
.zombie-toggle:hover {
transform: translateY(-3px) scale(1.04) rotate(-1deg);
border-color: rgba(155, 255, 110, .65);
box-shadow:
0 12px 28px rgba(0,0,0,.65),
0 0 28px rgba(155, 255, 110, .35),
0 0 10px rgba(180, 0, 30, .35),
inset 0 0 14px rgba(155, 255, 110, .14);
filter: hue-rotate(-2deg);
}
.zombie-toggle__svg {
width: 30px; height: 30px;
filter: drop-shadow(0 0 6px rgba(155, 255, 110, .55));
animation: zombieIdle 4.5s ease-in-out infinite;
}
.zombie-toggle--on .zombie-toggle__svg {
filter: drop-shadow(0 0 10px rgba(155, 255, 110, .85)) drop-shadow(0 0 4px rgba(180, 0, 30, .6));
}
@keyframes zombieIdle {
0%, 90%, 100% { transform: translate(0, 0) rotate(0); }
92% { transform: translate(-1px, 1px) rotate(-2deg); }
94% { transform: translate(1px, -1px) rotate(2deg); }
96% { transform: translate(-1px, 0) rotate(0); }
}
.zombie-toggle__label {
font-family: 'Creepster', 'Press Start 2P', cursive;
font-size: .72rem;
font-weight: 400;
letter-spacing: .15em;
color: #9BFF6E;
line-height: 1;
text-shadow: 0 0 6px rgba(155, 255, 110, .65), 0 0 2px rgba(180, 0, 30, .5);
pointer-events: none;
margin-top: 2px;
}
.zombie-toggle--on .zombie-toggle__label {
color: #FFE6E6;
text-shadow: 0 0 8px rgba(180, 0, 30, .9), 0 0 3px rgba(255, 255, 255, .6);
}
.zombie-toggle__halo {
position: absolute;
inset: -3px;
border-radius: 22px;
pointer-events: none;
background: radial-gradient(60% 60% at 50% 50%, rgba(155, 255, 110, .35), rgba(180, 0, 30, .15) 70%, transparent 100%);
opacity: 0;
transition: opacity .35s ease;
filter: blur(7px);
}
.zombie-toggle:hover .zombie-toggle__halo,
.zombie-toggle--on .zombie-toggle__halo { opacity: .9; }
/* Goutte de "sang" qui coule depuis le haut */
.zombie-toggle__drip {
position: absolute;
top: -2px; left: 50%;
width: 4px; height: 8px;
background: linear-gradient(180deg, #B8001E 0%, #6B000F 100%);
border-radius: 0 0 50% 50%;
transform: translate(-50%, -100%);
animation: zombieDrip 6s ease-in-out infinite;
box-shadow: 0 0 4px rgba(180, 0, 30, .8);
pointer-events: none;
}
.zombie-toggle__drip::after {
content: "";
position: absolute;
top: 100%; left: 50%;
width: 0; height: 0;
background: #B8001E;
border-radius: 50%;
transform: translateX(-50%);
}
@keyframes zombieDrip {
0%, 100% { height: 4px; transform: translate(-50%, -50%); opacity: .55; }
40% { height: 14px; transform: translate(-50%, -10%); opacity: 1; }
50% { height: 4px; transform: translate(-50%, 200%); opacity: 0; }
60% { height: 0; transform: translate(-50%, -50%); opacity: 0; }
}
/* Chip popup au survol */
.zombie-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(-6px);
background: rgba(10, 18, 8, .96);
border: 1px solid rgba(155, 255, 110, .4);
color: #9BFF6E;
padding: 8px 14px;
border-radius: 10px;
white-space: nowrap;
font-size: .82rem;
font-weight: 600;
letter-spacing: .02em;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
.zombie-toggle__chip-on,
.zombie-toggle__chip-off { display: block; }
.zombie-toggle__chip-on { display: none; }
.zombie-toggle--on .zombie-toggle__chip-off { display: none; }
.zombie-toggle--on .zombie-toggle__chip-on { display: block; }
.zombie-toggle:hover .zombie-toggle__chip,
.zombie-toggle:focus-visible .zombie-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* ════════════════════════════════════════════════════════════════
USA TOGGLE — bouton mode patriotique (rouge / blanc / bleu)
Empilé au-dessus du zombie (zombie 374 + 64 + 24 = 462)
════════════════════════════════════════════════════════════════ */
.usa-toggle {
position: fixed;
right: 22px;
bottom: 462px;
z-index: 250;
width: 64px; height: 64px;
border-radius: 18px;
background:
linear-gradient(160deg, #0A1F66 0%, #0E2978 50%, #C8102E 100%);
border: 1px solid rgba(255,255,255,.45);
cursor: pointer;
padding: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #FFFFFF;
box-shadow:
0 8px 22px rgba(10,31,102,.45),
0 0 18px rgba(200,16,46,.25),
inset 0 0 14px rgba(255,255,255,.10);
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
border-color .35s ease,
box-shadow .35s ease;
overflow: visible;
}
.usa-toggle:hover {
transform: translateY(-3px) scale(1.05);
border-color: #FFFFFF;
box-shadow:
0 12px 28px rgba(10,31,102,.55),
0 0 28px rgba(200,16,46,.45),
0 0 12px rgba(255,255,255,.35),
inset 0 0 14px rgba(255,255,255,.18);
}
.usa-toggle__svg {
width: 30px; height: 30px;
filter: drop-shadow(0 0 4px rgba(255,255,255,.55));
animation: usaWave 4.5s ease-in-out infinite;
transform-origin: 50% 65%;
}
@keyframes usaWave {
0%,100% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
75% { transform: rotate(3deg); }
}
.usa-toggle--on .usa-toggle__svg {
filter: drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(200,16,46,.7));
}
.usa-toggle__label {
font-family: 'Inter', system-ui, sans-serif;
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
color: #FFFFFF;
line-height: 1;
text-shadow: 0 0 6px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.3);
pointer-events: none;
margin-top: 3px;
}
.usa-toggle__halo {
position: absolute;
inset: -3px;
border-radius: 22px;
pointer-events: none;
background: radial-gradient(60% 60% at 50% 50%, rgba(200,16,46,.45), rgba(10,31,102,.25) 70%, transparent 100%);
opacity: 0;
transition: opacity .35s ease;
filter: blur(7px);
}
.usa-toggle:hover .usa-toggle__halo,
.usa-toggle--on .usa-toggle__halo { opacity: .9; }
.usa-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(-6px);
background: rgba(10,31,102,.96);
border: 1px solid rgba(255,255,255,.45);
color: #FFFFFF;
padding: 8px 14px;
border-radius: 10px;
white-space: nowrap;
font-size: .82rem;
font-weight: 700;
letter-spacing: .02em;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
.usa-toggle__chip-on,
.usa-toggle__chip-off { display: block; }
.usa-toggle__chip-on { display: none; }
.usa-toggle--on .usa-toggle__chip-off { display: none; }
.usa-toggle--on .usa-toggle__chip-on { display: block; }
.usa-toggle:hover .usa-toggle__chip,
.usa-toggle:focus-visible .usa-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* ════════════════════════════════════════════════════════════════
THÈME USA — palette patriotique (navy / blanc cassé / rouge)
════════════════════════════════════════════════════════════════ */
[data-theme="usa"] {
--bg: #F4F4F8;
--bg-2: #FFFFFF;
--bg-card: #FFFFFF;
--text: #0A1F66;
--muted: #4A5A8A;
--muted-2: #1F2D5C;
--border: rgba(10,31,102,.14);
--border-2: rgba(10,31,102,.28);
--indigo: #0A1F66;
--indigo-dk: #061548;
--violet: #1E3A8A;
--orange: #C8102E;
--green: #0A6B3F;
}
[data-theme="usa"] body {
color: #0A1F66;
background:
radial-gradient(900px 700px at 15% 0%, rgba(10,31,102,.18), transparent 65%),
radial-gradient(800px 600px at 85% 5%, rgba(200,16,46,.15), transparent 60%),
radial-gradient(1100px 500px at 50% 100%, rgba(10,31,102,.14), transparent 65%),
radial-gradient(2px 2px at 12% 18%, rgba(10,31,102,.45), transparent),
radial-gradient(2px 2px at 38% 42%, rgba(200,16,46,.35), transparent),
radial-gradient(2px 2px at 72% 28%, rgba(10,31,102,.40), transparent),
radial-gradient(2px 2px at 88% 62%, rgba(200,16,46,.32), transparent),
radial-gradient(2px 2px at 22% 78%, rgba(10,31,102,.32), transparent),
repeating-linear-gradient(135deg, transparent 0 24px, rgba(200,16,46,.04) 24px 25px, transparent 25px 49px, rgba(10,31,102,.04) 49px 50px),
linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 50%, #F4F4F8 100%);
background-size: auto, auto, auto, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, auto, auto;
background-attachment: fixed, fixed, fixed, auto, auto, auto, auto, auto, auto, auto;
position: relative;
}
/* USA scene decoration : voir css/usa-scene.css */
/* Header navy avec liseré rouge */
[data-theme="usa"] .nav,
[data-theme="usa"] .nav.scrolled {
background: rgba(10,31,102,.92) !important;
border-bottom: 3px solid #C8102E;
backdrop-filter: blur(16px);
}
[data-theme="usa"] .nav__link,
[data-theme="usa"] .logo-word,
[data-theme="usa"] .logo-dot { color: #FFFFFF !important; }
[data-theme="usa"] .nav__link:hover { color: #FFD700 !important; background: rgba(255,255,255,.08) !important; }
/* Titres en navy bold */
[data-theme="usa"] h1,
[data-theme="usa"] h2,
[data-theme="usa"] h3,
[data-theme="usa"] .hero__h1,
[data-theme="usa"] .section__title { color: #0A1F66 !important; }
[data-theme="usa"] em { color: #C8102E !important; font-style: italic; }
/* Boutons primary — drapeau */
[data-theme="usa"] .btn--primary,
[data-theme="usa"] .nav__cta {
background: linear-gradient(135deg, #C8102E 0%, #0A1F66 100%) !important;
color: #FFFFFF !important;
border: 2px solid #FFFFFF !important;
box-shadow: 0 0 0 1px #C8102E, 0 8px 22px rgba(10,31,102,.35) !important;
font-weight: 800 !important;
letter-spacing: .04em;
}
[data-theme="usa"] .btn--primary:hover,
[data-theme="usa"] .nav__cta:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 0 0 1px #C8102E, 0 12px 32px rgba(200,16,46,.55) !important;
}
/* Hero badge avec étoile */
[data-theme="usa"] .hero__badge {
background: linear-gradient(90deg, rgba(10,31,102,.92), rgba(200,16,46,.92)) !important;
color: #FFFFFF !important;
border: 1px solid #FFD700 !important;
font-weight: 700;
letter-spacing: .05em;
}
[data-theme="usa"] .hero__badge-dot { background: #FFD700 !important; box-shadow: 0 0 10px #FFD700 !important; }
/* Cartes plans avec liseré drapeau */
[data-theme="usa"] .plan-card {
background: #FFFFFF !important;
border: 2px solid #0A1F66 !important;
position: relative;
}
[data-theme="usa"] .plan-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 6px;
background: repeating-linear-gradient(90deg, #C8102E 0 14px, #FFFFFF 14px 28px, #0A1F66 28px 42px);
border-radius: var(--r-xl) var(--r-xl) 0 0;
}
[data-theme="usa"] .plan-card__name { color: #0A1F66 !important; }
[data-theme="usa"] .plan-card__amount { color: #C8102E !important; }
[data-theme="usa"] .ci { color: #0A6B3F !important; }
/* Footer drapeau */
[data-theme="usa"] .footer {
background: #0A1F66 !important;
color: #FFFFFF !important;
border-top: 4px solid #C8102E;
}
[data-theme="usa"] .footer a,
[data-theme="usa"] .footer__brand { color: #FFFFFF !important; }
/* Sections — léger fond */
[data-theme="usa"] section { background-color: transparent !important; }
[data-theme="usa"] .section--alt { background: rgba(10,31,102,.04) !important; }
/* Bandeau sticky en haut "Made in USA" stripes — animé */
[data-theme="usa"] body::before {
content: '';
position: fixed; top: 0; left: 0; right: 0;
height: 6px;
background: repeating-linear-gradient(90deg, #C8102E 0 30px, #FFFFFF 30px 32px, #0A1F66 32px 62px, #FFFFFF 62px 64px);
background-size: 64px 100%;
z-index: 300;
pointer-events: none;
animation: usaStripesScroll 12s linear infinite;
box-shadow: 0 2px 8px rgba(10,31,102,.25);
}
/* Bandeau symétrique en bas pour encadrer la page */
[data-theme="usa"] body::after {
content: '';
position: fixed; bottom: 0; left: 0; right: 0;
height: 6px;
background: repeating-linear-gradient(90deg, #0A1F66 0 30px, #FFFFFF 30px 32px, #C8102E 32px 62px, #FFFFFF 62px 64px);
background-size: 64px 100%;
z-index: 300;
pointer-events: none;
animation: usaStripesScroll 14s linear infinite reverse;
box-shadow: 0 -2px 8px rgba(200,16,46,.25);
}
@keyframes usaStripesScroll {
to { background-position: -64px 0; }
}
/* ════════════════════════════════════════════════════════════════
ZOMBIE — Medal Badge "Prix de l Innovation" version horror
════════════════════════════════════════════════════════════════ */
[data-theme="zombie"] .medal-badge {
background: linear-gradient(110deg, rgba(139,0,0,.85) 0%, rgba(20,8,8,.95) 100%) !important;
border: 1.5px solid rgba(180,10,20,.65) !important;
box-shadow:
0 8px 24px rgba(0,0,0,.6),
0 0 0 1px rgba(155,255,110,.18),
inset 0 1px 0 rgba(180,10,20,.35) !important;
/* On NE force PAS position: relative ici — sinon ça écrase
position: absolute de la variante .medal-badge--float, qui se retrouve
plaquée dans le flux normal au lieu d'être en coin de carte. */
}
/* Lezardes / fissures sur le badge (pseudo-element) */
[data-theme="zombie"] .medal-badge::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(45deg, transparent 48%, rgba(155,255,110,.22) 49%, transparent 50%),
linear-gradient(-30deg, transparent 60%, rgba(180,10,20,.30) 61%, transparent 62%),
linear-gradient(15deg, transparent 30%, rgba(155,255,110,.15) 31%, transparent 32%);
background-size: 80% 100%, 100% 80%, 60% 100%;
background-position: 30% 50%, 60% 30%, 80% 70%;
background-repeat: no-repeat;
pointer-events: none;
mix-blend-mode: overlay;
opacity: .85;
}
/* Goutte de sang qui coule depuis le badge */
[data-theme="zombie"] .medal-badge::after {
content: "";
position: absolute;
bottom: -8px;
left: 38%;
width: 4px;
height: 14px;
background: linear-gradient(180deg, #8b0000 0%, #5a0000 100%);
border-radius: 0 0 50% 50%;
filter: drop-shadow(0 2px 4px rgba(139,0,0,.6));
animation: zomBadgeBlood 5s ease-in-out infinite;
}
@keyframes zomBadgeBlood {
0%, 80%, 100% { transform: scaleY(1) translateY(0); opacity: .9; }
90% { transform: scaleY(1.5) translateY(8px); opacity: .5; }
}
/* Pastille centrale : du dore au sang fonce + halo vert toxique */
[data-theme="zombie"] .medal-badge__coin {
background: conic-gradient(
from 135deg,
#2a0a0a 0deg, #8b0000 40deg, #b40a14 80deg,
#c0210d 120deg, #6b0303 160deg, #8b0000 200deg,
#b40a14 240deg, #5a0000 280deg, #2a0a0a 360deg
) !important;
box-shadow:
0 0 0 2px rgba(155,255,110,.5),
0 0 24px rgba(180,10,20,.7),
0 0 36px rgba(155,255,110,.35),
inset 0 2px 4px rgba(255,200,180,.18),
inset 0 -3px 5px rgba(0,0,0,.55) !important;
color: #1a0808 !important;
animation: zomCoinPulse 2.5s ease-in-out infinite;
}
@keyframes zomCoinPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(155,255,110,.5), 0 0 24px rgba(180,10,20,.7), 0 0 36px rgba(155,255,110,.35), inset 0 2px 4px rgba(255,200,180,.18), inset 0 -3px 5px rgba(0,0,0,.55); }
50% { box-shadow: 0 0 0 3px rgba(155,255,110,.7), 0 0 32px rgba(180,10,20,.9), 0 0 50px rgba(155,255,110,.55), inset 0 2px 4px rgba(255,200,180,.18), inset 0 -3px 5px rgba(0,0,0,.55); }
}
/* L etoile dans la piece passe en blanc cassé/os, avec un drop-shadow rouge */
[data-theme="zombie"] .medal-badge__coin svg {
color: #e8e0c8 !important;
fill: #e8e0c8;
filter: drop-shadow(0 0 6px rgba(180,10,20,.85)) drop-shadow(0 0 2px #c0210d);
}
[data-theme="zombie"] .medal-badge__coin svg path {
fill: #e8e0c8 !important;
stroke: #2a0a0a !important;
stroke-width: .8 !important;
}
/* Rubans : sang qui coule + dechire */
[data-theme="zombie"] .medal-badge__ribbons span:first-child {
background: #8b0000 !important;
clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 72%, 60% 100%, 50% 88%, 30% 100%, 5% 72%, 0 50%) !important;
height: 22px !important;
filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
[data-theme="zombie"] .medal-badge__ribbons span:last-child {
background: #2a0a0a !important;
clip-path: polygon(0 0, 100% 0, 100% 60%, 80% 100%, 50% 80%, 20% 100%, 0 65%) !important;
height: 24px !important;
filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
/* Textes : nom + categorie en typo horror — couleurs boostées pour passer
le contraste WCAG AA sur fond rouge sang foncé. */
[data-theme="zombie"] .medal-badge__name {
color: #FFD66B !important; /* Or chaud lumineux au lieu du rouge sombre */
font-family: "Creepster", "Special Elite", cursive !important;
font-weight: 400 !important;
font-size: 1rem !important;
letter-spacing: .05em !important;
text-shadow:
0 0 4px rgba(155,255,110,.55), /* Halo vert toxique */
0 0 10px rgba(180,10,20,.75), /* Halo sang */
1px 1px 0 #1a0606, /* Outline noir 4 directions */
-1px 0 0 #1a0606,
1px 0 0 #1a0606,
0 -1px 0 #1a0606;
animation: zomBadgeText 4s ease-in-out infinite;
}
[data-theme="zombie"] .medal-badge__cat {
color: #B5FF8E !important; /* Vert toxique CLAIR (au lieu de #9bff6e à 85%) */
opacity: 1 !important;
font-family: "Special Elite", "Courier New", monospace !important;
font-size: .72rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
text-shadow:
0 0 4px rgba(155,255,110,.7),
1px 1px 0 #1a0606;
}
/* Le nom "Prix de l Innovation" qui flicker comme un neon casse */
@keyframes zomBadgeText {
0%, 90%, 100% {
opacity: 1;
text-shadow:
0 0 4px rgba(155,255,110,.55),
0 0 10px rgba(180,10,20,.75),
1px 1px 0 #1a0606, -1px 0 0 #1a0606, 1px 0 0 #1a0606, 0 -1px 0 #1a0606;
}
92%, 94% { opacity: .55; text-shadow: 0 0 2px rgba(155,255,110,.4), 1px 1px 0 #1a0606; }
93% { opacity: .9; }
}
/* Float variant : on garde l effet flottant mais avec ombre rouge */
[data-theme="zombie"] .medal-badge--float {
background: linear-gradient(110deg, rgba(139,0,0,.92) 0%, rgba(20,8,8,.97) 100%) !important;
border-color: rgba(180,10,20,.75) !important;
box-shadow:
0 14px 40px rgba(0,0,0,.65),
0 0 36px rgba(180,10,20,.35),
0 0 24px rgba(155,255,110,.22),
inset 0 1px 0 rgba(180,10,20,.5) !important;
}
[data-theme="zombie"] .medal-badge--float::after {
background: radial-gradient(120% 100% at 0% 50%, rgba(180,10,20,.30), transparent 60%) !important;
}
/* ════════════════════════════════════════════════════════════════
ZOMBIE SCENE — silhouettes peeking de derriere les sections
Cachees par defaut, visibles uniquement quand [data-theme="zombie"]
════════════════════════════════════════════════════════════════ */
.zombie-scene { display: none; }
[data-theme="zombie"] .zombie-scene {
display: block;
position: fixed; inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
[data-theme="zombie"] .zombie-scene > * { position: fixed; pointer-events: none; }
/* ── Lune sanglante ── */
[data-theme="zombie"] .zombie-moon {
top: 6vh; right: 8vw;
width: 180px; height: 180px;
border-radius: 50%;
background:
radial-gradient(circle at 38% 35%, rgba(255,200,180,.95) 0%, rgba(220,140,120,.85) 25%, rgba(155,40,30,.65) 60%, rgba(100,20,15,.5) 100%);
box-shadow:
0 0 60px 10px rgba(180,10,20,.45),
0 0 120px 30px rgba(155,40,30,.30),
inset -20px -10px 40px rgba(0,0,0,.45);
filter: blur(.6px);
animation: zomMoon 20s ease-in-out infinite alternate;
}
[data-theme="zombie"] .zombie-moon::before,
[data-theme="zombie"] .zombie-moon::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(80,15,15,.35);
}
[data-theme="zombie"] .zombie-moon::before { top: 28%; left: 22%; width: 24px; height: 18px; }
[data-theme="zombie"] .zombie-moon::after { top: 58%; left: 56%; width: 18px; height: 14px; }
@keyframes zomMoon {
0%,100% { transform: scale(1); filter: blur(.6px) hue-rotate(0deg); }
50% { transform: scale(1.04); filter: blur(.8px) hue-rotate(-8deg); }
}
/* ── Arbres morts au loin ── */
[data-theme="zombie"] .zombie-tree {
bottom: 0;
width: clamp(140px, 16vw, 240px);
height: auto;
opacity: .55;
filter: drop-shadow(0 0 6px rgba(0,0,0,.5));
animation: zomTreeSway 8s ease-in-out infinite;
}
[data-theme="zombie"] .zombie-tree--left { left: 4vw; transform-origin: bottom center; }
[data-theme="zombie"] .zombie-tree--right { right: 4vw; transform-origin: bottom center; animation-delay: -4s; animation-duration: 10s; }
@keyframes zomTreeSway {
0%,100% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
}
/* ── Brouillard toxique au milieu ── */
[data-theme="zombie"] .zombie-fog--mid {
bottom: 30vh; left: 0; right: 0;
height: 40vh;
background:
radial-gradient(60% 50% at 25% 50%, rgba(111,181,63,.18), transparent 70%),
radial-gradient(50% 40% at 75% 50%, rgba(155,255,110,.12), transparent 70%);
filter: blur(20px);
opacity: .6;
animation: zomFogMid 18s ease-in-out infinite alternate;
}
@keyframes zomFogMid {
0% { transform: translateX(-3%); }
100% { transform: translateX(3%); }
}
/* ── Zombies — base ── */
[data-theme="zombie"] .zombie {
filter: drop-shadow(0 6px 14px rgba(0,0,0,.7));
will-change: transform;
}
[data-theme="zombie"] .zombie svg { display: block; }
/* ── Zombie 1 : qui sort par la GAUCHE (peek) ── */
[data-theme="zombie"] .zombie--peek-left {
top: 28%; left: -50px;
width: 150px; height: 240px;
transform-origin: left center;
animation: zomPeekL 8s ease-in-out infinite;
}
@keyframes zomPeekL {
0%, 18%, 100% { transform: translateX(-90px) rotate(-3deg); }
35%, 55% { transform: translateX(0px) rotate(-1deg); }
70%, 88% { transform: translateX(-50px) rotate(-3deg); }
}
/* ── Zombie 2 : qui sort par la DROITE ── */
[data-theme="zombie"] .zombie--peek-right {
top: 56%; right: -50px;
width: 150px; height: 240px;
transform-origin: right center;
animation: zomPeekR 11s ease-in-out infinite;
animation-delay: -3s;
}
@keyframes zomPeekR {
0%, 22%, 100% { transform: translateX(90px) rotate(3deg); }
40%, 58% { transform: translateX(-10px) rotate(1deg); }
72%, 90% { transform: translateX(50px) rotate(3deg); }
}
/* ── Zombie 3 : par-dessus le HAUT (peek-top) ── */
[data-theme="zombie"] .zombie--peek-top {
top: -60px; left: 50%;
width: 240px; height: 90px;
transform: translateX(-50%);
animation: zomPeekTop 9s ease-in-out infinite;
animation-delay: -1.5s;
}
@keyframes zomPeekTop {
0%, 25%, 100% { transform: translateX(-50%) translateY(-65px); }
45%, 65% { transform: translateX(-50%) translateY(0px); }
85% { transform: translateX(-50%) translateY(-40px); }
}
/* ── Zombie 4 : qui rampe par le BAS ── */
[data-theme="zombie"] .zombie--peek-bottom {
bottom: -10px; left: 22%;
width: 240px; height: 100px;
animation: zomPeekBottom 12s ease-in-out infinite;
animation-delay: -5s;
}
@keyframes zomPeekBottom {
0%, 30%, 100% { transform: translateY(70px) translateX(0); }
50%, 70% { transform: translateY(0px) translateX(20px); }
85% { transform: translateY(40px) translateX(10px); }
}
/* ── Zombie 5 : silhouette lointaine au centre, dans la brume ── */
[data-theme="zombie"] .zombie--distant {
top: 38%; left: 50%;
width: 60px; height: 130px;
transform: translateX(-50%);
opacity: .5;
filter: blur(1.5px) drop-shadow(0 0 8px rgba(0,0,0,.7));
animation: zomDistantWalk 24s ease-in-out infinite;
}
@keyframes zomDistantWalk {
0% { transform: translateX(-50%) translateX(-180px) scale(.85); opacity: .35; }
50% { transform: translateX(-50%) translateX(0) scale(1); opacity: .65; }
100% { transform: translateX(-50%) translateX(180px) scale(.85); opacity: .35; }
}
/* ── Zombie 6 : main sanglante qui sort du bord droit ── */
[data-theme="zombie"] .zombie--hand-right {
top: 14%; right: -30px;
width: 100px; height: 140px;
animation: zomHand 7s ease-in-out infinite;
animation-delay: -2s;
}
@keyframes zomHand {
0%, 30%, 100% { transform: translateX(40px) rotate(8deg); }
50%, 65% { transform: translateX(-10px) rotate(-2deg); }
80% { transform: translateX(20px) rotate(5deg); }
}
/* ── Yeux qui clignotent / brillent ── */
[data-theme="zombie"] .zombie__eye {
filter: drop-shadow(0 0 4px currentColor);
animation: zomEyeBlink 3.5s ease-in-out infinite;
}
[data-theme="zombie"] .zombie--peek-right .zombie__eye { animation-delay: -1s; }
[data-theme="zombie"] .zombie--peek-top .zombie__eye { animation-delay: -2s; }
[data-theme="zombie"] .zombie--peek-bottom .zombie__eye { animation-delay: -.7s; }
[data-theme="zombie"] .zombie__eye--green {
filter: drop-shadow(0 0 6px #9bff6e);
}
@keyframes zomEyeBlink {
0%, 92%, 100% { opacity: 1; transform: scaleY(1); }
94%, 96% { opacity: 0; transform: scaleY(.1); }
}
/* ── Sang qui goutte ── */
[data-theme="zombie"] .zombie__drip {
animation: zomDrip 4s ease-in infinite;
transform-origin: top center;
}
@keyframes zomDrip {
0%, 70%, 100% { transform: translateY(0) scaleY(1); opacity: .9; }
80% { transform: translateY(40px) scaleY(1.5); opacity: .6; }
90% { transform: translateY(80px) scaleY(.5); opacity: 0; }
}
[data-theme="zombie"] .zombie__drool {
stroke-dasharray: 12;
animation: zomDrool 3s linear infinite;
}
@keyframes zomDrool {
0% { stroke-dashoffset: 12; opacity: 1; }
100% { stroke-dashoffset: -12; opacity: 0; }
}
/* ── Adaptation mobile : on garde 3 zombies cles ── */
@media (max-width: 720px) {
[data-theme="zombie"] .zombie--distant,
[data-theme="zombie"] .zombie--hand-right,
[data-theme="zombie"] .zombie-tree--right { display: none; }
[data-theme="zombie"] .zombie--peek-left,
[data-theme="zombie"] .zombie--peek-right { width: 110px; height: 175px; }
[data-theme="zombie"] .zombie-moon { width: 110px; height: 110px; top: 4vh; right: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
[data-theme="zombie"] .zombie,
[data-theme="zombie"] .zombie__eye,
[data-theme="zombie"] .zombie__drip,
[data-theme="zombie"] .zombie__drool,
[data-theme="zombie"] .zombie-tree,
[data-theme="zombie"] .zombie-fog--mid,
[data-theme="zombie"] .zombie-moon {
animation: none !important;
}
}
/* ════════════════════════════════════════════════════════════════
USA DECOR — toute la couche décorative patriotique
(drapeau, aigle, statue, capitole, étoiles, feux, tampon)
Cachée par défaut, visible uniquement quand [data-theme="usa"]
════════════════════════════════════════════════════════════════ */
.usa-decor { display: none; }
[data-theme="usa"] .usa-decor {
display: block;
position: fixed; inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
[data-theme="usa"] .usa-decor > * { position: fixed; pointer-events: none; }
/* ── DRAPEAU en haut à droite, sous le header, à l'écart du social-rail
(qui est à gauche, vertical centre). ── */
[data-theme="usa"] .usa-decor__flag {
top: clamp(90px, 12vh, 140px);
bottom: auto;
right: clamp(20px, 3vw, 60px);
left: auto;
width: clamp(110px, 13vw, 180px);
height: clamp(68px, 8vw, 110px);
filter: drop-shadow(0 10px 20px rgba(10,31,102,.28));
opacity: .9;
-webkit-mask-image: linear-gradient(to left, transparent 0%, #000 25%, #000 100%);
mask-image: linear-gradient(to left, transparent 0%, #000 25%, #000 100%);
}
[data-theme="usa"] .usa-decor__flag-pole {
position: absolute;
left: -6px; top: -14px;
width: 3px; height: calc(100% + 30px);
background: linear-gradient(180deg, #FFD700 0%, #C9A961 50%, #8B6914 100%);
border-radius: 2px;
opacity: .55;
}
[data-theme="usa"] .usa-decor__flag-pole::before {
content: ''; position: absolute;
top: -6px; left: -2px;
width: 7px; height: 7px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #FFD700, #8B6914);
box-shadow: 0 0 6px rgba(255,215,0,.5);
}
[data-theme="usa"] .usa-decor__flag-svg {
width: 100%; height: 100%;
transform-origin: left center;
animation: usaFlagWave 4s ease-in-out infinite;
border: 0;
}
@media (max-width: 900px) {
[data-theme="usa"] .usa-decor__flag { display: none; }
}
@keyframes usaFlagWave {
0%,100% { transform: skew(-2deg, 0deg) scaleX(1); }
25% { transform: skew( 1deg, 1deg) scaleX(1.01); }
50% { transform: skew( 2deg, 0deg) scaleX(.99); }
75% { transform: skew(-1deg,-1deg) scaleX(1.01); }
}
.usa-stars-row { animation: usaStarsBlink 5s ease-in-out infinite; }
/* ── AIGLE héraldique sur la marge gauche ─────────────────────── */
[data-theme="usa"] .usa-decor__eagle {
top: 38%;
left: clamp(-10px, 1vw, 30px);
width: clamp(140px, 14vw, 220px);
height: auto;
opacity: .25;
filter: drop-shadow(0 18px 30px rgba(10,31,102,.35));
animation: usaEagleFloat 8s ease-in-out infinite;
}
@keyframes usaEagleFloat {
0%,100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-12px) rotate(1deg); }
}
/* ── STATUE DE LA LIBERTÉ silhouette — déplacée à gauche pour ne pas
être cachée par la pile de boutons flottants à droite ───────── */
[data-theme="usa"] .usa-decor__liberty {
top: 30%;
left: clamp(8px, 2vw, 40px);
right: auto;
width: clamp(70px, 8vw, 130px);
height: auto;
color: #0A1F66;
opacity: .14;
}
[data-theme="usa"] .usa-decor__liberty .torch,
[data-theme="usa"] .usa-decor__liberty path[fill="#FFD700"] {
filter: drop-shadow(0 0 8px rgba(255,215,0,.6));
}
/* ── CAPITOLE en bas à gauche ─────────────────────────────────── */
[data-theme="usa"] .usa-decor__capitol {
bottom: 24px;
left: clamp(-20px, 1vw, 40px);
width: clamp(180px, 22vw, 320px);
height: auto;
opacity: .12;
}
/* ── ÉTOILES qui scintillent partout ──────────────────────────── */
[data-theme="usa"] .usa-decor__star {
top: var(--y);
left: var(--x);
width: calc(var(--s, 12) * 1px);
height: calc(var(--s, 12) * 1px);
background:
conic-gradient(
from 0deg,
transparent 0%, transparent 8%,
#FFD700 8%, #FFD700 12%,
transparent 12%, transparent 33%,
#FFD700 33%, #FFD700 37%,
transparent 37%, transparent 58%,
#FFD700 58%, #FFD700 62%,
transparent 62%, transparent 83%,
#FFD700 83%, #FFD700 87%,
transparent 87%, transparent 100%
);
clip-path: polygon(50% 0%, 61% 38%, 98% 38%, 68% 60%, 79% 96%, 50% 75%, 21% 96%, 32% 60%, 2% 38%, 39% 38%);
background: #FFD700;
filter: drop-shadow(0 0 6px rgba(255,215,0,.7));
animation: usaStarTwinkle 3.5s ease-in-out infinite;
animation-delay: var(--d, 0s);
opacity: 0;
}
@keyframes usaStarTwinkle {
0%, 100% { opacity: 0; transform: scale(.7) rotate(0deg); }
20% { opacity: .9; transform: scale(1.1) rotate(15deg); }
50% { opacity: .55; transform: scale(.95) rotate(0deg); }
80% { opacity: .85; transform: scale(1.05) rotate(-10deg); }
}
@keyframes usaStarsBlink {
0%,100% { opacity: 1; }
50% { opacity: .82; }
}
/* ── TAMPON "100% PATRIOT" — déplacé en bas à gauche pour ne pas
chevaucher les FAB à droite ───────────────────────────────── */
[data-theme="usa"] .usa-decor__stamp {
bottom: clamp(40px, 6vh, 90px);
left: clamp(20px, 3vw, 80px);
right: auto;
width: clamp(100px, 11vw, 150px);
height: clamp(100px, 11vw, 150px);
opacity: .35;
filter: drop-shadow(0 8px 18px rgba(200,16,46,.3));
animation: usaStampRotate 30s linear infinite;
}
@keyframes usaStampRotate {
to { transform: rotate(360deg); }
}
/* ── AIGLE qui survole horizontalement ────────────────────────── */
[data-theme="usa"] .usa-decor__flying-eagle {
top: 18%;
left: -80px;
width: 60px; height: 30px;
opacity: 0;
animation: usaEagleFly 18s linear infinite;
animation-delay: 4s;
}
@keyframes usaEagleFly {
0% { opacity: 0; left: -80px; transform: translateY(0); }
10% { opacity: .55; }
50% { opacity: .55; transform: translateY(-30px); }
90% { opacity: .55; transform: translateY(0); }
100% { opacity: 0; left: 110vw; }
}
/* ── FEUX D'ARTIFICE — éclatent en boucle ─────────────────────── */
[data-theme="usa"] .usa-decor__firework {
width: 6px; height: 6px;
border-radius: 50%;
opacity: 0;
}
[data-theme="usa"] .usa-decor__firework--1 {
top: 22%; left: 20%;
background: #C8102E;
box-shadow:
0 -22px 0 #C8102E, 0 22px 0 #C8102E,
-22px 0 0 #FFFFFF, 22px 0 0 #FFFFFF,
-16px -16px 0 #0A1F66, 16px -16px 0 #0A1F66,
-16px 16px 0 #FFD700, 16px 16px 0 #FFD700;
animation: usaFireworkBoom 5s ease-out infinite;
}
[data-theme="usa"] .usa-decor__firework--2 {
top: 30%; right: 26%; left: auto;
background: #FFD700;
box-shadow:
0 -28px 0 #FFD700, 0 28px 0 #FFD700,
-28px 0 0 #C8102E, 28px 0 0 #C8102E,
-20px -20px 0 #0A1F66, 20px -20px 0 #0A1F66,
-20px 20px 0 #FFFFFF, 20px 20px 0 #FFFFFF;
animation: usaFireworkBoom 6s ease-out 1.5s infinite;
}
[data-theme="usa"] .usa-decor__firework--3 {
top: 16%; left: 60%;
background: #FFFFFF;
box-shadow:
0 -24px 0 #FFFFFF, 0 24px 0 #FFFFFF,
-24px 0 0 #FFD700, 24px 0 0 #FFD700,
-18px -18px 0 #C8102E, 18px -18px 0 #C8102E,
-18px 18px 0 #0A1F66, 18px 18px 0 #0A1F66;
animation: usaFireworkBoom 7s ease-out 3s infinite;
}
@keyframes usaFireworkBoom {
0%,12% { opacity: 0; transform: scale(.2); }
18% { opacity: 1; transform: scale(.5); }
35% { opacity: .85; transform: scale(1); }
60% { opacity: 0; transform: scale(1.4); }
100% { opacity: 0; transform: scale(1.4); }
}
/* ════════════════════════════════════════════════════════════════
USA — RENFORCEMENT TYPOGRAPHIQUE & THÉMATIQUE
════════════════════════════════════════════════════════════════ */
/* Hero héroïque + gros impact */
[data-theme="usa"] .hero__h1 {
text-shadow:
2px 2px 0 rgba(200,16,46,.18),
4px 4px 0 rgba(10,31,102,.10);
font-weight: 900 !important;
font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important;
letter-spacing: -.01em;
}
/* Garde "Votre site est" sur une seule ligne en thème USA */
[data-theme="usa"] .hero__h1 > span:first-child {
white-space: nowrap;
}
[data-theme="usa"] .hero__h1 em::after {
content: ' ★';
color: #FFD700;
font-style: normal;
filter: drop-shadow(0 0 8px rgba(255,215,0,.7));
animation: usaStarPulse 2s ease-in-out infinite;
}
@keyframes usaStarPulse {
0%,100% { opacity: 1; transform: scale(1) rotate(0); }
50% { opacity: .7; transform: scale(1.18) rotate(15deg); }
}
/* Section titres : étoile dorée flottante avant l'em */
[data-theme="usa"] .section__title em::before {
content: '★ ';
color: #FFD700;
font-style: normal;
}
/* Cards / sections — léger fond rayures discrètes */
[data-theme="usa"] .pricing,
[data-theme="usa"] .demo-section,
[data-theme="usa"] .gallery-section,
[data-theme="usa"] .testimonials,
[data-theme="usa"] .faq,
[data-theme="usa"] .partners {
position: relative;
}
[data-theme="usa"] .pricing::before,
[data-theme="usa"] .demo-section::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 3px;
background: repeating-linear-gradient(90deg, #C8102E 0 20px, #FFFFFF 20px 22px, #0A1F66 22px 42px, #FFFFFF 42px 44px);
opacity: .6;
}
/* Plan cards : le top stripes plus animées + étoiles dorées */
[data-theme="usa"] .plan-card::before {
background-size: 84px 6px;
animation: usaStripesScroll 10s linear infinite;
}
[data-theme="usa"] .plan-card::after {
content: '★';
position: absolute;
top: 14px; right: 16px;
color: #FFD700;
font-size: 1.4rem;
filter: drop-shadow(0 0 6px rgba(255,215,0,.5));
animation: usaStarPulse 3s ease-in-out infinite;
}
/* Boutons primary plus impactants */
[data-theme="usa"] .btn--primary,
[data-theme="usa"] .nav__cta {
text-transform: uppercase;
letter-spacing: .08em !important;
position: relative;
overflow: hidden;
}
[data-theme="usa"] .btn--primary::before,
[data-theme="usa"] .nav__cta::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent 0 14px,
rgba(255,255,255,.10) 14px 16px
);
pointer-events: none;
}
/* Hero badge plus pavoisé */
[data-theme="usa"] .hero__badge::before {
content: '★';
color: #FFD700;
margin-right: 6px;
font-size: .9em;
filter: drop-shadow(0 0 4px rgba(255,215,0,.7));
}
[data-theme="usa"] .hero__badge::after {
content: '★';
color: #FFD700;
margin-left: 6px;
font-size: .9em;
filter: drop-shadow(0 0 4px rgba(255,215,0,.7));
}
/* Testimonials : palette drapeau US complète sur fond blanc
(les couleurs par défaut sont en gris pâle, invisibles sur white) */
[data-theme="usa"] .testi__quote::before {
background: linear-gradient(135deg, #C8102E 0%, #0A1F66 100%) !important;
color: #FFFFFF !important;
}
[data-theme="usa"] .testi {
background: #FFFFFF !important;
border-color: rgba(10, 31, 102, .18) !important;
}
[data-theme="usa"] .testi:hover {
border-color: #C8102E !important;
box-shadow: 0 14px 32px rgba(10, 31, 102, .18) !important;
}
[data-theme="usa"] .testi--featured {
background:
radial-gradient(120% 80% at 0% 0%, rgba(200, 16, 46, .08), transparent 60%),
#FFFFFF !important;
border-color: rgba(200, 16, 46, .35) !important;
}
[data-theme="usa"] .testi__quote { color: #1E293B !important; }
[data-theme="usa"] .testi__quote strong { color: #0A1F66 !important; }
[data-theme="usa"] .testi__author strong { color: #0A1F66 !important; }
[data-theme="usa"] .testi__author span { color: #4A5A8A !important; }
[data-theme="usa"] .testi__meta {
color: #4A5A8A !important;
border-top-color: rgba(10, 31, 102, .15) !important;
}
[data-theme="usa"] .testi__avatar {
background: linear-gradient(135deg, #C8102E 0%, #0A1F66 100%) !important;
color: #FFFFFF !important;
border: 2px solid #FFD700 !important;
box-shadow: 0 4px 12px rgba(200, 16, 46, .3) !important;
}
[data-theme="usa"] .testi__stars { color: #FFD700 !important; filter: drop-shadow(0 0 4px rgba(255, 215, 0, .5)); }
/* Section header de Testimonials : titre + sous-titre */
[data-theme="usa"] .testimonials .section__title { color: #0A1F66 !important; }
[data-theme="usa"] .testimonials .section__title em { color: #C8102E !important; }
[data-theme="usa"] .testimonials .section__sub,
[data-theme="usa"] .testimonials__sub { color: #1F2D5C !important; }
/* Note du bas "4,9/5 sur Trustpilot" — visible sur le fond clair */
[data-theme="usa"] .testimonials__note { color: #1F2D5C !important; }
[data-theme="usa"] .testimonials__note strong { color: #0A1F66 !important; }
[data-theme="usa"] .testimonials__note a { color: #C8102E !important; text-decoration-color: #C8102E !important; }
[data-theme="usa"] .testimonials__note a:hover { color: #0A1F66 !important; }
/* Footer plus élaboré : drapeaux + étoiles */
[data-theme="usa"] .footer::before {
content: '★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★';
display: block;
text-align: center;
color: #FFD700;
font-size: 1.1rem;
letter-spacing: .25em;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,.18);
margin-bottom: 14px;
filter: drop-shadow(0 0 4px rgba(255,215,0,.4));
}
[data-theme="usa"] .footer::after {
content: 'GOD BLESS THE SITES · SHIPPED FROM BRITTANY · ★★★';
display: block;
text-align: center;
color: rgba(255,255,255,.5);
font-size: .72rem;
letter-spacing: .2em;
font-weight: 700;
padding: 12px 0;
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 14px;
}
/* Le toggle USA : version "active" plus glorieuse */
[data-theme="usa"] .usa-toggle {
box-shadow:
0 0 0 2px #FFD700,
0 0 24px rgba(255,215,0,.5),
0 8px 22px rgba(200,16,46,.5);
animation: usaTogglePulse 2.5s ease-in-out infinite;
}
@keyframes usaTogglePulse {
0%,100% { box-shadow: 0 0 0 2px #FFD700, 0 0 24px rgba(255,215,0,.5), 0 8px 22px rgba(200,16,46,.5); }
50% { box-shadow: 0 0 0 3px #FFD700, 0 0 36px rgba(255,215,0,.8), 0 12px 30px rgba(200,16,46,.65); }
}
/* ── USA — Lisibilité des cartes de prix sur fond avec photos ──
Les photos en transparence + le bandeau 6px du haut peuvent réduire
le contraste perçu. Ici on force des fonds opaques, des prix nets,
un sizing strict des SVG et une ombre franche pour bien détacher
les cards des éléments décoratifs en arrière-plan. */
[data-theme="usa"] .plan-card {
background: #FFFFFF !important;
box-shadow:
0 0 0 2px #0A1F66,
0 18px 40px -10px rgba(10,31,102,.35),
0 6px 18px rgba(0,0,0,.10) !important;
position: relative;
z-index: 2;
isolation: isolate;
}
/* Plan card text général : navy plein pour max contraste */
[data-theme="usa"] .plan-card,
[data-theme="usa"] .plan-card__features li,
[data-theme="usa"] .plan-card__desc { color: #0A1F66 !important; }
[data-theme="usa"] .plan-card__name { color: #0A1F66 !important; font-weight: 800 !important; }
[data-theme="usa"] .plan-card__features strong { color: #0A1F66 !important; }
/* Prix : rouge plein, ombre légère pour le séparer du fond */
[data-theme="usa"] .plan-card__amount,
[data-theme="usa"] .plan-card__cents,
[data-theme="usa"] .plan-card__currency {
color: #C8102E !important;
text-shadow: 1px 1px 0 rgba(10,31,102,.10);
background: none !important;
-webkit-text-fill-color: #C8102E !important;
}
[data-theme="usa"] .plan-card__period { color: rgba(10,31,102,.7) !important; }
/* Forcer le sizing des SVG des features (lock + star) qui sinon
passent en taille par défaut du navigateur (300x150) sur certains
builds — visible bug en mode USA. */
[data-theme="usa"] .plan-card__feature--free svg,
[data-theme="usa"] .plan-card__feature--may svg,
[data-theme="usa"] .plan-card__features li svg,
[data-theme="usa"] .plan-card__features .ci {
width: 18px !important;
height: 18px !important;
flex-shrink: 0;
}
/* Strikethrough "490 € HT" plus discret */
[data-theme="usa"] .plan-card__strike {
color: rgba(10,31,102,.55) !important;
font-weight: 500;
}
/* Ligne "0 € d engagement" : fond vert très léger pour la mettre en avant */
[data-theme="usa"] .plan-card__feature--free {
background: linear-gradient(90deg, rgba(10,107,63,.10), transparent) !important;
}
[data-theme="usa"] .plan-card__feature--free svg { color: #0A6B3F !important; }
[data-theme="usa"] .plan-card__feature--free strong { color: #0A6B3F !important; }
/* Ligne "Mai 2026 création offerte" : fond bleu/rouge léger */
[data-theme="usa"] .plan-card__feature--may {
background: linear-gradient(90deg, rgba(10,31,102,.10), rgba(200,16,46,.08)) !important;
}
[data-theme="usa"] .plan-card__feature--may svg { color: #C8102E !important; }
[data-theme="usa"] .plan-card__feature--may strong { color: #0A1F66 !important; }
/* CTA "Configurer X" en bas des cards : encadré rouge/blanc/bleu plein */
[data-theme="usa"] .plan-card .btn--outline {
border: 2px solid #0A1F66 !important;
color: #0A1F66 !important;
background: #FFFFFF !important;
font-weight: 700 !important;
}
[data-theme="usa"] .plan-card .btn--outline:hover {
background: #0A1F66 !important;
color: #FFFFFF !important;
}
/* Adaptations mobile — on garde les éléments mais plus petits */
@media (max-width: 720px) {
[data-theme="usa"] .usa-decor__flag { display: none; }
[data-theme="usa"] .usa-decor__eagle { width: 100px; left: -30px; }
[data-theme="usa"] .usa-decor__liberty { width: 60px; left: 4px; right: auto; }
[data-theme="usa"] .usa-decor__capitol { width: 140px; bottom: 14px; }
[data-theme="usa"] .usa-decor__stamp { width: 80px; height: 80px; bottom: 14px; left: 14px; right: auto; }
[data-theme="usa"] .usa-decor__flying-eagle { display: none; }
}
/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
.usa-toggle__svg,
[data-theme="usa"] body::before,
[data-theme="usa"] body::after,
[data-theme="usa"] .usa-decor__flag-svg,
[data-theme="usa"] .usa-decor__eagle,
[data-theme="usa"] .usa-decor__star,
[data-theme="usa"] .usa-decor__stamp,
[data-theme="usa"] .usa-decor__flying-eagle,
[data-theme="usa"] .usa-decor__firework,
[data-theme="usa"] .hero__h1 em::after,
[data-theme="usa"] .plan-card::after,
[data-theme="usa"] .plan-card::before,
[data-theme="usa"] .usa-toggle,
.usa-stars-row {
animation: none !important;
}
}
/* État actif (zombie mode ON) */
.zombie-toggle--on {
background:
radial-gradient(120% 100% at 50% 30%, rgba(180, 0, 30, .35), transparent 70%),
radial-gradient(80% 80% at 50% 110%, rgba(155, 255, 110, .18), transparent 65%),
linear-gradient(160deg, #1A0A0A 0%, #2A0008 60%, #0A1A0A 100%);
border-color: rgba(180, 0, 30, .7);
box-shadow:
0 0 0 2px rgba(155, 255, 110, .35),
0 0 28px rgba(180, 0, 30, .55),
inset 0 0 18px rgba(180, 0, 30, .25);
animation: zombiePulse 2.4s ease-in-out infinite;
}
@keyframes zombiePulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(155, 255, 110, .35), 0 0 28px rgba(180, 0, 30, .55), inset 0 0 18px rgba(180, 0, 30, .25); }
50% { box-shadow: 0 0 0 3px rgba(155, 255, 110, .5), 0 0 36px rgba(180, 0, 30, .8), inset 0 0 22px rgba(180, 0, 30, .35); }
}
/* L'ampoule clair/sombre n'a pas de sens en mode zombie non plus */
html[data-theme="zombie"] .theme-toggle,
html[data-theme="zombie"] #themeToggle {
display: none !important;
visibility: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
.zombie-toggle, .zombie-toggle__svg, .zombie-toggle__drip, .zombie-toggle--on { animation: none; }
}
/* Mobile : empile dans la rangée du bas avec les autres toggles */
@media (max-width: 600px) {
.zombie-toggle { width: 44px; height: 44px; right: 22px; bottom: 246px; border-radius: 13px; }
.zombie-toggle__svg { width: 22px; height: 22px; }
.zombie-toggle__label { font-size: .58rem; }
.zombie-toggle__chip { display: none; }
}
/* ================================================================
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;
}
/* ===========================================================
THEME ZOMBIE / HORREUR
=========================================================== */
[data-theme="zombie"] {
--c-bg: #0a0d08;
--c-surface: #14180f;
--c-text: #d8e6c8;
--c-muted: #8a9c78;
--c-line: #2a3322;
--c-accent: #9bff6e;
--c-accent-2: #b40a14;
--c-blood: #8b0000;
--c-toxic: #6fb53f;
--c-bone: #e8e0c8;
}
html[data-theme="zombie"] {
cursor: url("data:image/svg+xml;utf8,") 14 14, crosshair;
}
html[data-theme="zombie"] body {
/* Fond eclairci : du quasi-noir vers une atmosphere apocalyptique
verdatre/brunatre ou les zombies sont vraiment visibles */
background-color: #1a2418 !important;
background-image:
radial-gradient(1100px 800px at 18% -8%, rgba(180, 10, 20, 0.32), transparent 70%),
radial-gradient(1000px 900px at 90% 12%, rgba(111, 181, 63, 0.30), transparent 65%),
radial-gradient(800px 700px at 50% 110%, rgba(180, 10, 20, 0.28), transparent 70%),
radial-gradient(600px 500px at 70% 50%, rgba(155, 255, 110, 0.10), transparent 60%),
linear-gradient(180deg, #1a2418 0%, #1f1a14 50%, #14201c 100%);
color: var(--c-text);
font-family: "Special Elite", "Courier New", monospace;
}
/* Scanlines + grain overlay */
html[data-theme="zombie"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px),
radial-gradient(2px 2px at 20% 30%, rgba(155,255,110,0.05) 50%, transparent 51%),
radial-gradient(1px 1px at 80% 70%, rgba(180,10,20,0.06) 50%, transparent 51%);
mix-blend-mode: overlay;
opacity: .85;
animation: zomScan 8s steps(60) infinite;
}
@keyframes zomScan {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 0 -40px, 0 0, 0 0; }
}
/* Vignette */
html[data-theme="zombie"] body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9997;
box-shadow:
inset 0 0 200px 40px rgba(0,0,0,0.55),
inset 0 0 80px 20px rgba(180,10,20,0.18);
}
/* Filet de sang — positionné juste sous le bandeau promo (qui occupe le top) */
html[data-theme="zombie"]::before {
content: "";
position: fixed;
top: var(--promo-h, 0px); left: 0; right: 0;
height: 12px;
z-index: 199; /* sous le bandeau (z=201) et sous la nav (z=200) — affleure entre les deux */
pointer-events: none;
background:
radial-gradient(ellipse at 8% 0, #8b0000 0 6px, transparent 7px),
radial-gradient(ellipse at 22% 0, #b40a14 0 4px, transparent 5px),
radial-gradient(ellipse at 38% 0, #8b0000 0 7px, transparent 8px),
radial-gradient(ellipse at 55% 0, #b40a14 0 5px, transparent 6px),
radial-gradient(ellipse at 70% 0, #8b0000 0 8px, transparent 9px),
radial-gradient(ellipse at 85% 0, #b40a14 0 4px, transparent 5px),
linear-gradient(180deg, #8b0000 0%, #5a0000 60%, transparent 100%);
filter: drop-shadow(0 4px 6px rgba(139,0,0,0.6));
}
/* Le bandeau promo doit rester lisible au-dessus de tous les overlays zombies */
html[data-theme="zombie"] .may-promo {
z-index: 10002 !important;
background: linear-gradient(90deg, #5a0000 0%, #8b0000 50%, #5a0000 100%) !important;
color: #e8e0c8 !important;
box-shadow: 0 4px 18px rgba(139,0,0,.45);
border-bottom: 1px solid rgba(155,255,110,.25);
}
html[data-theme="zombie"] .may-promo strong { color: #9bff6e; }
html[data-theme="zombie"] .may-promo__pill {
background: rgba(0,0,0,.4) !important;
border: 1px solid rgba(155,255,110,.4) !important;
color: #e8e0c8 !important;
}
/* Nav doit aussi passer au-dessus des scanlines/vignette en mode zombie */
html[data-theme="zombie"] .nav { z-index: 10000 !important; }
/* Brouillard toxique flottant en bas */
html[data-theme="zombie"]::after {
content: "";
position: fixed;
inset: auto 0 0 0;
height: 28vh;
pointer-events: none;
z-index: 9996;
background:
radial-gradient(60% 70% at 30% 90%, rgba(111,181,63,0.18), transparent 70%),
radial-gradient(50% 60% at 70% 95%, rgba(155,255,110,0.12), transparent 70%);
filter: blur(8px);
animation: zomFog 14s ease-in-out infinite alternate;
}
@keyframes zomFog {
0% { transform: translateX(-3%); opacity: .7; }
100% { transform: translateX(3%); opacity: 1; }
}
/* Typographie d'horreur */
html[data-theme="zombie"] h1,
html[data-theme="zombie"] .hero__title,
html[data-theme="zombie"] .section__title,
html[data-theme="zombie"] .plan__name {
font-family: "Creepster", "Special Elite", cursive;
letter-spacing: .02em;
color: #e8e0c8;
text-shadow:
0 0 1px #9bff6e,
2px 2px 0 #8b0000,
4px 4px 12px rgba(180,10,20,0.55),
0 0 30px rgba(155,255,110,0.18);
animation: zomFlicker 4.5s infinite;
}
html[data-theme="zombie"] h2,
html[data-theme="zombie"] h3 {
font-family: "Creepster", "Special Elite", cursive;
color: #b8c8a0;
text-shadow: 1px 1px 0 #8b0000, 0 0 12px rgba(155,255,110,0.18);
}
@keyframes zomFlicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
20%, 24%, 55% { opacity: .55; }
}
html[data-theme="zombie"] body,
html[data-theme="zombie"] p,
html[data-theme="zombie"] li,
html[data-theme="zombie"] a {
font-family: "Special Elite", "Courier New", monospace;
}
/* Sélection */
html[data-theme="zombie"] ::selection {
background: #8b0000;
color: #e8e0c8;
}
/* Nav */
html[data-theme="zombie"] .nav {
background: linear-gradient(180deg, rgba(6,8,10,0.95), rgba(10,13,8,0.85)) !important;
border-bottom: 1px solid rgba(155,255,110,0.18);
box-shadow: 0 6px 24px rgba(180,10,20,0.18);
}
html[data-theme="zombie"] .nav__brand,
html[data-theme="zombie"] .nav a {
color: #d8e6c8 !important;
}
html[data-theme="zombie"] .nav a:hover {
color: #9bff6e !important;
text-shadow: 0 0 8px rgba(155,255,110,0.6);
}
/* Hero */
html[data-theme="zombie"] .hero {
background: transparent !important;
}
html[data-theme="zombie"] .hero__sub,
html[data-theme="zombie"] .hero__lead {
color: #b8c8a0;
}
html[data-theme="zombie"] .hero__eyebrow,
html[data-theme="zombie"] .eyebrow {
color: #9bff6e !important;
letter-spacing: .25em;
text-shadow: 0 0 6px rgba(155,255,110,0.5);
}
/* Buttons */
html[data-theme="zombie"] .btn,
html[data-theme="zombie"] button.btn {
font-family: "Special Elite", "Courier New", monospace;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 0;
}
html[data-theme="zombie"] .btn-primary,
html[data-theme="zombie"] button.btn-primary {
background: linear-gradient(180deg, #8b0000 0%, #5a0000 100%) !important;
color: #e8e0c8 !important;
border: 1px solid #b40a14 !important;
box-shadow: 0 0 0 1px rgba(155,255,110,0.18), 0 8px 24px rgba(139,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
text-shadow: 1px 1px 0 #000;
}
html[data-theme="zombie"] .btn-primary:hover {
background: linear-gradient(180deg, #b40a14 0%, #8b0000 100%) !important;
box-shadow: 0 0 24px rgba(180,10,20,0.6), 0 0 0 1px rgba(155,255,110,0.4);
transform: translateY(-1px) skewX(-1deg);
}
html[data-theme="zombie"] .btn-secondary,
html[data-theme="zombie"] .btn-ghost {
background: rgba(20,24,15,0.7) !important;
color: #9bff6e !important;
border: 1px solid rgba(155,255,110,0.4) !important;
}
html[data-theme="zombie"] .btn-secondary:hover {
background: rgba(155,255,110,0.12) !important;
box-shadow: 0 0 18px rgba(155,255,110,0.35);
}
/* Promo banner */
html[data-theme="zombie"] .promo-banner,
html[data-theme="zombie"] .topbar {
background: linear-gradient(90deg, #5a0000, #8b0000, #5a0000) !important;
color: #e8e0c8 !important;
border-bottom: 1px solid #b40a14;
font-family: "Creepster", cursive;
letter-spacing: .08em;
}
/* Plan cards avec coulures */
html[data-theme="zombie"] .plan,
html[data-theme="zombie"] .plan-card,
html[data-theme="zombie"] .card {
background: linear-gradient(180deg, rgba(20,24,15,0.92), rgba(10,13,8,0.95)) !important;
border: 1px solid rgba(155,255,110,0.18) !important;
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(180,10,20,0.12);
position: relative;
overflow: visible;
}
html[data-theme="zombie"] .plan::before,
html[data-theme="zombie"] .plan-card::before {
content: "";
position: absolute;
inset: -2px -2px auto -2px;
height: 18px;
background:
radial-gradient(ellipse at 12% 0, #8b0000 0 5px, transparent 6px),
radial-gradient(ellipse at 32% 0, #b40a14 0 4px, transparent 5px),
radial-gradient(ellipse at 55% 0, #8b0000 0 6px, transparent 7px),
radial-gradient(ellipse at 78% 0, #b40a14 0 4px, transparent 5px),
linear-gradient(180deg, #8b0000 0%, transparent 100%);
pointer-events: none;
filter: drop-shadow(0 3px 4px rgba(139,0,0,0.5));
}
html[data-theme="zombie"] .plan h3,
html[data-theme="zombie"] .plan__name {
color: #e8e0c8;
}
html[data-theme="zombie"] .plan__price,
html[data-theme="zombie"] .price {
color: #9bff6e !important;
text-shadow: 0 0 10px rgba(155,255,110,0.55);
font-family: "Creepster", cursive;
}
/* Options grid */
html[data-theme="zombie"] .options-grid li,
html[data-theme="zombie"] .option-card {
background: rgba(20,24,15,0.85) !important;
border: 1px solid rgba(155,255,110,0.22) !important;
color: #d8e6c8;
}
html[data-theme="zombie"] .options-grid li:hover {
border-color: #9bff6e !important;
box-shadow: 0 0 18px rgba(155,255,110,0.35);
}
html[data-theme="zombie"] .opt-badge {
background: linear-gradient(135deg, #8b0000, #b40a14) !important;
color: #e8e0c8 !important;
box-shadow: 0 0 12px rgba(180,10,20,0.55);
}
/* Configurateur */
html[data-theme="zombie"] .cfg,
html[data-theme="zombie"] .cfg__card,
html[data-theme="zombie"] .cfg__panel {
background: rgba(14,18,12,0.92) !important;
border: 1px solid rgba(155,255,110,0.22) !important;
color: #d8e6c8;
}
html[data-theme="zombie"] .cfg__opt {
background: rgba(20,24,15,0.8) !important;
border: 1px solid rgba(155,255,110,0.18) !important;
color: #d8e6c8;
}
html[data-theme="zombie"] .cfg__opt:hover {
border-color: #b40a14 !important;
background: rgba(40,15,15,0.7) !important;
}
html[data-theme="zombie"] .cfg__total,
html[data-theme="zombie"] .cfg__price {
color: #9bff6e !important;
font-family: "Creepster", cursive;
text-shadow: 0 0 12px rgba(155,255,110,0.5);
}
/* Inputs */
html[data-theme="zombie"] input,
html[data-theme="zombie"] textarea,
html[data-theme="zombie"] select {
background: rgba(10,13,8,0.85) !important;
border: 1px solid rgba(155,255,110,0.28) !important;
color: #d8e6c8 !important;
font-family: "Special Elite", monospace;
}
html[data-theme="zombie"] input:focus,
html[data-theme="zombie"] textarea:focus {
border-color: #b40a14 !important;
box-shadow: 0 0 0 3px rgba(180,10,20,0.25);
}
html[data-theme="zombie"] label {
color: #b8c8a0;
}
/* Footer */
html[data-theme="zombie"] footer.footer,
html[data-theme="zombie"] .footer {
background: linear-gradient(180deg, #06080a 0%, #0a0d08 100%) !important;
color: #b8c8a0 !important;
border-top: 1px solid rgba(155,255,110,0.18);
}
html[data-theme="zombie"] .footer a {
color: #9bff6e !important;
}
/* Cache les fonds spéciaux */
html[data-theme="zombie"] .future-bg,
html[data-theme="zombie"] .retro-bg {
display: none !important;
}
/* Cache la pastille thème classique en zombie pour éviter conflit */
html[data-theme="zombie"] .theme-toggle {
display: none !important;
}
/* Quand le theme zombie est actif, on rehausse fortement la
visibilite du bouton zombie pour qu il ressorte du fond rouge/vert
apocalyptique au lieu de s y fondre. Bordure verte solide + double
halo rouge/vert + fond plus contraste.
On COUPE l animation zombiePulse car elle ecrasait notre box-shadow
pendant son cycle, ce qui faisait disparaitre le bouton de temps
en temps. Au lieu de pulse, on force un anneau pulsant sur ::after. */
html[data-theme="zombie"] .zombie-toggle,
html[data-theme="zombie"] .zombie-toggle.zombie-toggle--on {
background:
radial-gradient(120% 100% at 50% 30%, rgba(155,255,110,.45), transparent 70%),
radial-gradient(80% 80% at 50% 110%, rgba(180,10,20,.55), transparent 65%),
linear-gradient(160deg, #3A2A1A 0%, #4A0014 60%, #2A3A2A 100%) !important;
border: 3px solid #9BFF6E !important;
box-shadow:
0 0 0 4px rgba(180,10,20,.75),
0 0 42px rgba(155,255,110,.70),
0 0 22px rgba(180,0,30,.85),
inset 0 0 18px rgba(155,255,110,.35) !important;
filter: drop-shadow(0 0 14px rgba(180,10,20,.8)) !important;
animation: none !important;
opacity: 1 !important;
visibility: visible !important;
/* CRUCIAL : doit passer AU-DESSUS des scanlines (9998), de la
vignette (9997), du brouillard (9996) et du bandeau de sang
(10001) qui couvrent toute la page en mode zombie. */
z-index: 10010 !important;
isolation: isolate;
}
/* On isole aussi le bouton du mix-blend-mode des scanlines en
placant son contenu dans un nouveau stacking context. */
html[data-theme="zombie"] .zombie-toggle > * {
position: relative;
z-index: 1;
}
html[data-theme="zombie"] .zombie-toggle .zombie-toggle__svg {
filter: drop-shadow(0 0 8px rgba(155,255,110,.95)) drop-shadow(0 0 4px rgba(180,10,20,.7)) !important;
}
html[data-theme="zombie"] .zombie-toggle .zombie-toggle__label {
color: #9BFF6E !important;
text-shadow:
0 0 8px rgba(155,255,110,.95),
0 0 4px rgba(180,10,20,.7),
0 0 1px #000 !important;
}
/* Anneau de pulsation supplementaire pour bien attirer le regard */
html[data-theme="zombie"] .zombie-toggle::after {
content: "";
position: absolute;
inset: -8px;
border-radius: inherit;
border: 2px solid rgba(155,255,110,.55);
animation: zomToggleRing 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes zomToggleRing {
0% { transform: scale(.92); opacity: 0; }
35% { opacity: .9; }
100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="zombie"] .zombie-toggle::after { animation: none; }
}
/* Texte chuchoté sous certains titres */
html[data-theme="zombie"] .hero__title::after {
content: " 🩸";
font-size: .6em;
vertical-align: super;
filter: drop-shadow(0 0 4px #8b0000);
}
/* ═══════════════════════════════════════════════════════════════
OFFRE MAI 2026 — bannière haute, sticky au-dessus du header
Met en avant : 0 engagement + frais de création offerts (490 €)
═══════════════════════════════════════════════════════════════ */
/* Variable de hauteur du bandeau (utilisée par la nav pour ne pas se superposer).
Mesurée à 55 px sur desktop ; ajustée par JS au runtime pour précision. */
:root { --promo-h: 56px; }
@media (max-width: 700px) { :root { --promo-h: 96px; } }
.may-promo {
position: relative;
z-index: 201;
min-height: var(--promo-h);
display: flex;
align-items: center;
background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #F97316 100%);
background-size: 300% 100%;
color: #fff;
font-size: .92rem;
line-height: 1.4;
box-shadow: 0 4px 18px rgba(99, 102, 241, .35);
animation: may-promo-flow 12s ease-in-out infinite;
}
@keyframes may-promo-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.may-promo__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
padding: 8px 20px;
text-align: center;
width: 100%;
}
.may-promo__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
background: rgba(0, 0, 0, .25);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 999px;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
flex-shrink: 0;
}
.may-promo__pill-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
animation: may-promo-dot 2s ease-out infinite;
}
@keyframes may-promo-dot {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}
.may-promo__text {
margin: 0;
font-size: .95rem;
letter-spacing: .005em;
}
.may-promo__text strong {
font-weight: 700;
color: #fff;
}
.may-promo__strike {
text-decoration: line-through;
opacity: .8;
font-size: .85em;
margin-left: 4px;
font-weight: 600;
}
.may-promo__sep {
margin: 0 4px;
opacity: .6;
}
.may-promo__cta-line {
font-style: italic;
opacity: .9;
}
.may-promo__cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
background: #fff;
color: #4338CA;
border-radius: 999px;
font-weight: 700;
font-size: .85rem;
text-decoration: none;
letter-spacing: .01em;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.may-promo__cta:hover {
transform: translateY(-2px);
background: #FFEDD5;
box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
@media (max-width: 720px) {
.may-promo__inner { gap: 10px; padding: 9px 14px; }
.may-promo__text { font-size: .82rem; }
.may-promo__cta { padding: 7px 14px; font-size: .78rem; }
.may-promo__pill { font-size: .65rem; }
}
@media (max-width: 480px) {
.may-promo__sep { display: none; }
.may-promo__cta-line { display: block; width: 100%; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.may-promo, .may-promo__pill-dot { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════
ZOMBIE MODE — rail social avec glow néon vert toxique + sang
Sur fond rouge-sang quasi-noir, le rail était illisible.
On force des couleurs bien contrastées avec une pulse inquiétante.
═══════════════════════════════════════════════════════════════ */
/* Note : on garde les dimensions du base.css (1px × 80px, marge 8px)
pour que le rail ait la même hauteur totale que dans les autres thèmes
— sinon le badge ✨ ancré en haut du rail se décale verticalement. */
html[data-theme="zombie"] .social-rail::before,
html[data-theme="zombie"] .social-rail::after {
background: linear-gradient(to bottom,
transparent,
#9bff6e 30%,
#b40a14 50%,
#9bff6e 70%,
transparent);
opacity: .95;
filter: drop-shadow(0 0 6px rgba(155, 255, 110, .55));
}
html[data-theme="zombie"] .social-rail__link {
background: rgba(10, 13, 8, .9) !important;
border: 2px solid #9bff6e !important;
color: #9bff6e !important;
box-shadow:
0 0 0 0 rgba(180, 10, 20, 0),
0 0 14px rgba(155, 255, 110, .35),
inset 0 0 6px rgba(155, 255, 110, .15) !important;
animation: zombie-rail-pulse 3.2s ease-in-out infinite;
}
html[data-theme="zombie"] .social-rail__link svg {
filter: drop-shadow(0 0 3px rgba(155, 255, 110, .7));
}
@keyframes zombie-rail-pulse {
0%, 100% {
box-shadow:
0 0 0 0 rgba(180, 10, 20, .5),
0 0 14px rgba(155, 255, 110, .35),
inset 0 0 6px rgba(155, 255, 110, .15);
}
50% {
box-shadow:
0 0 0 6px rgba(180, 10, 20, 0),
0 0 22px rgba(155, 255, 110, .55),
inset 0 0 10px rgba(155, 255, 110, .25);
}
}
/* Désynchronisation des 3 boutons pour un effet "vivants" inquiétant */
html[data-theme="zombie"] .social-rail__link:nth-of-type(1) { animation-delay: 0s; }
html[data-theme="zombie"] .social-rail__link:nth-of-type(2) { animation-delay: -1s; }
html[data-theme="zombie"] .social-rail__link:nth-of-type(3) { animation-delay: -2.1s; }
/* Survol : passage en rouge sang avec glow vif blanc */
html[data-theme="zombie"] .social-rail__link:hover,
html[data-theme="zombie"] .social-rail__link:focus-visible {
background: #b40a14 !important;
border-color: #9bff6e !important;
color: #fff !important;
transform: translateX(4px) scale(1.1);
box-shadow:
0 0 28px rgba(180, 10, 20, .85),
0 0 14px rgba(155, 255, 110, .6),
inset 0 0 12px rgba(255, 255, 255, .15) !important;
animation: none;
}
html[data-theme="zombie"] .social-rail__link:hover svg,
html[data-theme="zombie"] .social-rail__link:focus-visible svg {
filter: drop-shadow(0 0 4px #fff);
}
/* On désactive les ::before colorés des marques (FB bleu, IG dégradé)
en zombie pour garder l'identité horror cohérente */
html[data-theme="zombie"] .social-rail__link--fb::before,
html[data-theme="zombie"] .social-rail__link--ig::before,
html[data-theme="zombie"] .social-rail__link--tw::before {
display: none;
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="zombie"] .social-rail__link { animation: none; }
}
/* ============================================================================
MEDIEVAL TOGGLE BUTTON — bouclier doré + flamme de torche
============================================================================ */
.medieval-toggle {
position: fixed;
right: 22px;
bottom: 550px; /* usa = 462 + 64 + 24 */
z-index: 250;
width: 64px;
height: 64px;
border-radius: 18px;
background:
radial-gradient(120% 100% at 50% 25%, rgba(232,200,121,.32), transparent 70%),
radial-gradient(80% 80% at 50% 110%, rgba(92,31,27,.55), transparent 65%),
linear-gradient(160deg, #2A1A0B 0%, #1A0F08 55%, #3D1F0F 100%);
border: 1px solid rgba(201,169,97,.55);
cursor: pointer;
padding: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #E8C879;
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 18px rgba(201,169,97,.22),
inset 0 0 14px rgba(232,200,121,.12);
transition: transform .35s cubic-bezier(.34,1.56,.64,1),
border-color .35s ease,
box-shadow .35s ease;
overflow: visible;
}
.medieval-toggle:hover {
transform: translateY(-3px) scale(1.05) rotate(-2deg);
border-color: #E8C879;
box-shadow:
0 12px 28px rgba(0,0,0,.65),
0 0 28px rgba(232,200,121,.45),
0 0 12px rgba(201,169,97,.6),
inset 0 0 14px rgba(232,200,121,.22);
}
.medieval-toggle__halo {
position: absolute;
inset: -8px;
border-radius: 22px;
background: radial-gradient(closest-side, rgba(232,200,121,.35), transparent 70%);
opacity: 0;
transition: opacity .35s;
pointer-events: none;
}
.medieval-toggle:hover .medieval-toggle__halo { opacity: 1; }
.medieval-toggle__svg {
width: 30px; height: 30px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
animation: medShieldGleam 4.5s ease-in-out infinite;
transform-origin: 50% 60%;
}
@keyframes medShieldGleam {
0%, 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 2px rgba(232,200,121,.4)); }
50% { transform: rotate(2deg) scale(1.04); filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(232,200,121,.85)); }
}
.medieval-toggle__flame {
position: absolute;
top: -6px;
left: 50%;
width: 14px; height: 18px;
transform: translateX(-50%);
background:
radial-gradient(50% 70% at 50% 70%, #FFD66B 0 30%, #FF8A1A 40%, #C8330A 75%, transparent 100%);
border-radius: 60% 60% 50% 50% / 80% 80% 40% 40%;
filter: drop-shadow(0 0 6px rgba(255,138,26,.7));
animation: medFlame 1.2s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes medFlame {
0% { transform: translateX(-50%) scaleY(1) skewX(-2deg); opacity: .92; }
100% { transform: translateX(-50%) scaleY(1.18) skewX(2deg); opacity: 1; }
}
.medieval-toggle__label {
position: absolute;
bottom: 4px;
font-family: "Cinzel", serif;
font-size: 10px;
font-weight: 900;
color: #E8C879;
letter-spacing: .15em;
text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
.medieval-toggle__chip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background: linear-gradient(180deg, #F5E6C8 0%, #E8D5A8 100%);
color: #3D1F0F;
font-family: "Cinzel", serif;
font-weight: 700;
font-size: 12px;
padding: 8px 14px;
border-radius: 4px;
border: 1px solid #C9A961;
box-shadow: 0 6px 18px rgba(0,0,0,.5);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s, transform .25s;
}
.medieval-toggle__chip::after {
content: "";
position: absolute;
right: -6px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 10px; height: 10px;
background: #E8D5A8;
border-right: 1px solid #C9A961;
border-top: 1px solid #C9A961;
}
.medieval-toggle:hover .medieval-toggle__chip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.medieval-toggle__chip-on { display: none; }
.medieval-toggle--on .medieval-toggle__chip-on { display: inline; }
.medieval-toggle--on .medieval-toggle__chip-off { display: none; }
.medieval-toggle:not(.medieval-toggle--on) .medieval-toggle__chip-on { display: none; }
.medieval-toggle:not(.medieval-toggle--on) .medieval-toggle__chip-off { display: inline; }
/* Bouton ON → couleur dorée saturée */
.medieval-toggle--on {
border-color: #E8C879;
box-shadow:
0 0 0 2px rgba(232,200,121,.35),
0 12px 28px rgba(92,31,27,.55),
0 0 28px rgba(232,200,121,.5);
}
@media (max-width: 720px) {
.medieval-toggle { width: 44px; height: 44px; right: 22px; bottom: 408px; border-radius: 13px; }
.medieval-toggle__svg { width: 22px; height: 22px; }
.medieval-toggle__label { font-size: 8px; bottom: 2px; }
.medieval-toggle__flame { width: 10px; height: 13px; top: -4px; }
}
/* ============================================================================
THEME MEDIEVAL / FANTASY — ciel d'orage, château fort, dragons, torches
============================================================================ */
[data-theme="medieval"] {
--c-bg: #0A0612; /* nuit profonde */
--c-surface: #F5E6C8; /* parchemin pour cards */
--c-text: #F5E6C8; /* ivoire pour texte sur fond sombre */
--c-text-dark: #2C1810; /* texte sombre sur parchemin */
--c-muted: #C9A961;
--c-line: #C9A961;
--c-accent: #E8C879; /* or éclatant */
--c-accent-2: #8B0000; /* sang dragon */
--c-fire: #FF8A1A; /* feu de torche */
--c-deep: #3E5C3E; /* vert mousse */
--c-leather: #4A2E1A; /* brun cuir */
--c-parch: #F5E6C8;
--c-stone: #2A1F2A;
}
html[data-theme="medieval"] {
cursor: url("data:image/svg+xml;utf8,") 16 2, crosshair;
}
html[data-theme="medieval"] body {
background-color: #F0E0B8 !important;
/* Texture parchemin : grain + tâches sépia */
background-image:
radial-gradient(circle at 12% 18%, rgba(92, 31, 27, 0.10) 0, transparent 22%),
radial-gradient(circle at 88% 24%, rgba(74, 46, 26, 0.12) 0, transparent 25%),
radial-gradient(circle at 22% 78%, rgba(62, 92, 62, 0.10) 0, transparent 30%),
radial-gradient(circle at 78% 88%, rgba(92, 31, 27, 0.08) 0, transparent 25%),
radial-gradient(ellipse at 50% 50%, rgba(245, 230, 200, 0.4) 0, transparent 70%),
repeating-linear-gradient(45deg, rgba(107, 74, 42, 0.025) 0 2px, transparent 2px 6px),
repeating-linear-gradient(-45deg, rgba(107, 74, 42, 0.02) 0 1px, transparent 1px 5px),
linear-gradient(180deg, #F5E6C8 0%, #F0E0B8 50%, #E8D5A0 100%);
color: var(--c-text);
font-family: "IM Fell DW Pica", "Cinzel", "Garamond", serif;
}
/* Vignette sépia tournant autour */
html[data-theme="medieval"] body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9997;
box-shadow: inset 0 0 220px 60px rgba(92, 50, 20, 0.35), inset 0 0 80px 20px rgba(60, 30, 10, 0.18);
}
/* Étincelles dorées flottantes (braises) */
html[data-theme="medieval"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9996;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(232,200,121,.6) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,180,80,.5) 50%, transparent 51%),
radial-gradient(2px 2px at 50% 80%, rgba(232,200,121,.55) 50%, transparent 51%),
radial-gradient(1px 1px at 35% 50%, rgba(255,200,100,.6) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 65% 25%, rgba(232,200,121,.45) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 12% 70%, rgba(255,180,80,.5) 50%, transparent 51%),
radial-gradient(1px 1px at 90% 90%, rgba(232,200,121,.55) 50%, transparent 51%);
background-size: 100% 100%;
animation: medEmbers 22s linear infinite;
opacity: .9;
}
@keyframes medEmbers {
0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
100% { background-position: 0 -200vh, 0 -180vh, 0 -220vh, 0 -210vh, 0 -190vh, 0 -200vh, 0 -180vh; }
}
/* Bordure dorée enluminée sur tout le viewport (cadre de manuscrit) */
html[data-theme="medieval"]::before {
content: "";
position: fixed;
inset: 8px;
z-index: 9995;
pointer-events: none;
border: 2px solid transparent;
border-image: repeating-linear-gradient(
45deg,
#C9A961 0 8px,
#8C6A2A 8px 12px,
#E8C879 12px 16px,
#5C1F1B 16px 20px
) 2;
box-shadow: inset 0 0 0 1px rgba(201,169,97,.4), 0 0 0 1px rgba(201,169,97,.4);
}
/* Coins ornementaux SVG (4 coins du viewport) */
html[data-theme="medieval"]::after {
content: "";
position: fixed;
pointer-events: none;
z-index: 9994;
inset: 0;
background:
/* Coin haut-gauche */
url("data:image/svg+xml;utf8,") top left no-repeat,
/* Coin haut-droit */
url("data:image/svg+xml;utf8,") top right no-repeat,
/* Coin bas-gauche */
url("data:image/svg+xml;utf8,") bottom left no-repeat,
/* Coin bas-droit */
url("data:image/svg+xml;utf8,") bottom right no-repeat;
background-size: 80px 80px;
}
/* Typographie blackletter / gothique */
html[data-theme="medieval"] h1,
html[data-theme="medieval"] .hero__title {
font-family: "UnifrakturMaguntia", "Cinzel Decorative", serif;
color: #5C1F1B;
text-shadow: 1px 1px 0 rgba(232,200,121,.6), 2px 2px 4px rgba(60,30,10,.3);
letter-spacing: .01em;
font-weight: normal;
line-height: 1.1;
}
html[data-theme="medieval"] h2,
html[data-theme="medieval"] .section__title,
html[data-theme="medieval"] .plan__name {
font-family: "Cinzel", "UnifrakturMaguntia", serif;
font-weight: 900;
color: #3D1F0F;
letter-spacing: .08em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(232,200,121,.5);
}
html[data-theme="medieval"] h3 {
font-family: "Cinzel", serif;
font-weight: 700;
color: #5C1F1B;
letter-spacing: .06em;
text-transform: uppercase;
}
html[data-theme="medieval"] h4, html[data-theme="medieval"] h5 {
font-family: "Cinzel", serif;
color: #4A2E1A;
}
/* Lettrines : première lettre de chaque */
html[data-theme="medieval"] .hero__lead::first-letter,
html[data-theme="medieval"] .hero__sub::first-letter,
html[data-theme="medieval"] .lead::first-letter,
html[data-theme="medieval"] .section__lead::first-letter {
font-family: "UnifrakturMaguntia", serif;
font-size: 3.4em;
float: left;
line-height: .85;
padding: .08em .12em 0 0;
color: #5C1F1B;
text-shadow: 2px 2px 0 #C9A961, 4px 4px 6px rgba(60,30,10,.4);
}
/* Sélection — parchemin doré + encre médiévale, sans text-shadow hérité */
html[data-theme="medieval"] ::selection {
background: #E8C879;
color: #2C1810;
text-shadow: none;
}
html[data-theme="medieval"] ::-moz-selection {
background: #E8C879;
color: #2C1810;
text-shadow: none;
}
/* Eyebrows / kicker en doré */
html[data-theme="medieval"] .hero__eyebrow,
html[data-theme="medieval"] .eyebrow,
html[data-theme="medieval"] .kicker {
color: #8C6A2A !important;
font-family: "Cinzel", serif;
letter-spacing: .35em;
text-transform: uppercase;
font-weight: 700;
}
html[data-theme="medieval"] .hero__eyebrow::before,
html[data-theme="medieval"] .eyebrow::before { content: "✦ "; color: #C9A961; }
html[data-theme="medieval"] .hero__eyebrow::after,
html[data-theme="medieval"] .eyebrow::after { content: " ✦"; color: #C9A961; }
/* Promo banner — proclamation royale */
html[data-theme="medieval"] .may-promo {
z-index: 10002 !important;
background:
repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 4px, transparent 4px 8px),
linear-gradient(90deg, #5C1F1B 0%, #8C2A24 50%, #5C1F1B 100%) !important;
color: #F5E6C8 !important;
font-family: "Cinzel", serif;
letter-spacing: .12em;
border-bottom: 2px solid #C9A961;
box-shadow: 0 4px 18px rgba(60, 30, 10, .55);
}
html[data-theme="medieval"] .may-promo strong {
color: #E8C879;
text-shadow: 0 0 8px rgba(232,200,121,.5);
}
html[data-theme="medieval"] .may-promo__pill {
background: rgba(0,0,0,.35) !important;
border: 1px solid #C9A961 !important;
color: #E8C879 !important;
font-family: "UnifrakturMaguntia", serif;
letter-spacing: .04em;
}
html[data-theme="medieval"] .may-promo__pill-dot { background: #E8C879 !important; box-shadow: 0 0 8px #E8C879; }
/* Nav — bandeau cuir & or */
html[data-theme="medieval"] .nav {
z-index: 10000 !important;
background:
repeating-linear-gradient(90deg, rgba(60,30,10,0.08) 0 2px, transparent 2px 6px),
linear-gradient(180deg, #4A2E1A 0%, #2A1A0B 100%) !important;
border-bottom: 2px solid #C9A961;
box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
html[data-theme="medieval"] .nav__brand,
html[data-theme="medieval"] .nav a {
color: #E8C879 !important;
font-family: "Cinzel", serif;
letter-spacing: .08em;
}
html[data-theme="medieval"] .nav a:hover {
color: #FFE89A !important;
text-shadow: 0 0 8px rgba(232,200,121,.7);
}
/* Hero */
html[data-theme="medieval"] .hero { background: transparent !important; }
html[data-theme="medieval"] .hero__sub,
html[data-theme="medieval"] .hero__lead { color: #4A2E1A; font-style: italic; }
/* Boutons — sceau de cire */
html[data-theme="medieval"] .btn,
html[data-theme="medieval"] button.btn {
font-family: "Cinzel", serif;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
border-radius: 4px;
}
html[data-theme="medieval"] .btn-primary,
html[data-theme="medieval"] button.btn-primary {
background:
radial-gradient(circle at 30% 30%, #8C2A24 0%, #5C1F1B 70%, #3D1410 100%) !important;
color: #E8C879 !important;
border: 2px solid #C9A961 !important;
box-shadow:
0 0 0 1px rgba(60,30,10,.6) inset,
0 4px 12px rgba(60,30,10,.45),
0 0 16px rgba(92,31,27,.45);
text-shadow: 1px 1px 0 #3D1410;
position: relative;
}
html[data-theme="medieval"] .btn-primary::before {
content: "❦";
position: absolute;
left: 10px; top: 50%;
transform: translateY(-50%);
color: #C9A961;
font-size: .9em;
opacity: .7;
}
html[data-theme="medieval"] .btn-primary::after {
content: "❦";
position: absolute;
right: 10px; top: 50%;
transform: translateY(-50%);
color: #C9A961;
font-size: .9em;
opacity: .7;
}
html[data-theme="medieval"] .btn-primary:hover {
background: radial-gradient(circle at 30% 30%, #B83A30 0%, #8C2A24 70%, #5C1F1B 100%) !important;
box-shadow:
0 0 0 1px rgba(60,30,10,.6) inset,
0 8px 22px rgba(60,30,10,.65),
0 0 24px rgba(232,200,121,.55);
transform: translateY(-2px);
}
html[data-theme="medieval"] .btn-secondary,
html[data-theme="medieval"] .btn-ghost {
background: rgba(245,230,200,.7) !important;
color: #3D1F0F !important;
border: 2px solid #8C6A2A !important;
box-shadow: 0 2px 8px rgba(60,30,10,.25);
}
html[data-theme="medieval"] .btn-secondary:hover {
background: rgba(232,213,168,.95) !important;
border-color: #5C1F1B !important;
}
/* Cards / plans en parchemin avec bordure dorée */
html[data-theme="medieval"] .plan,
html[data-theme="medieval"] .plan-card,
html[data-theme="medieval"] .card {
background:
radial-gradient(circle at 15% 20%, rgba(92,31,27,.06), transparent 30%),
radial-gradient(circle at 85% 80%, rgba(74,46,26,.06), transparent 30%),
linear-gradient(180deg, #F5E6C8 0%, #EBD8A8 100%) !important;
border: 1px solid #C9A961 !important;
box-shadow:
inset 0 0 0 4px rgba(245,230,200,.6),
inset 0 0 0 5px #C9A961,
0 12px 32px rgba(60,30,10,.25);
color: #3D1F0F;
position: relative;
}
html[data-theme="medieval"] .plan h3,
html[data-theme="medieval"] .plan__name {
color: #5C1F1B;
font-family: "UnifrakturMaguntia", serif;
font-weight: normal;
text-transform: none;
letter-spacing: 0;
}
html[data-theme="medieval"] .plan__price,
html[data-theme="medieval"] .price {
color: #5C1F1B !important;
font-family: "Cinzel", serif;
font-weight: 900;
text-shadow: 1px 1px 0 #E8C879;
}
/* Options grid */
html[data-theme="medieval"] .options-grid li,
html[data-theme="medieval"] .option-card {
background: linear-gradient(180deg, #F5E6C8 0%, #EBD8A8 100%) !important;
border: 1px solid #C9A961 !important;
color: #3D1F0F;
font-family: "IM Fell DW Pica", serif;
}
html[data-theme="medieval"] .options-grid li:hover {
border-color: #5C1F1B !important;
box-shadow: 0 0 18px rgba(201,169,97,.55);
}
html[data-theme="medieval"] .opt-badge {
background: linear-gradient(135deg, #C9A961, #8C6A2A) !important;
color: #3D1F0F !important;
border: 1px solid #5C1F1B !important;
box-shadow: 0 0 12px rgba(201,169,97,.55);
font-family: "Cinzel", serif;
}
/* Configurateur */
html[data-theme="medieval"] .cfg,
html[data-theme="medieval"] .cfg__card,
html[data-theme="medieval"] .cfg__panel {
background: linear-gradient(180deg, #F5E6C8 0%, #EBD8A8 100%) !important;
border: 2px solid #C9A961 !important;
color: #3D1F0F;
box-shadow: inset 0 0 0 4px rgba(245,230,200,.5), 0 12px 28px rgba(60,30,10,.3);
}
html[data-theme="medieval"] .cfg__opt {
background: rgba(245,230,200,.7) !important;
border: 1px solid #C9A961 !important;
color: #3D1F0F !important;
font-family: "IM Fell DW Pica", serif;
}
html[data-theme="medieval"] .cfg__opt:hover {
border-color: #5C1F1B !important;
background: rgba(232,213,168,.9) !important;
}
html[data-theme="medieval"] .cfg__total,
html[data-theme="medieval"] .cfg__price {
color: #5C1F1B !important;
font-family: "UnifrakturMaguntia", serif;
font-weight: normal;
text-shadow: 2px 2px 0 #C9A961;
}
/* Inputs */
html[data-theme="medieval"] input,
html[data-theme="medieval"] textarea,
html[data-theme="medieval"] select {
background: rgba(245,230,200,.85) !important;
border: 1px solid #8C6A2A !important;
color: #3D1F0F !important;
font-family: "IM Fell DW Pica", serif;
}
html[data-theme="medieval"] input:focus,
html[data-theme="medieval"] textarea:focus {
border-color: #5C1F1B !important;
box-shadow: 0 0 0 3px rgba(201,169,97,.35);
}
html[data-theme="medieval"] label {
color: #4A2E1A;
font-family: "Cinzel", serif;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Footer parchemin foncé */
html[data-theme="medieval"] footer.footer,
html[data-theme="medieval"] .footer {
background:
repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 6px),
linear-gradient(180deg, #4A2E1A 0%, #2A1A0B 100%) !important;
color: #E8C879 !important;
border-top: 2px solid #C9A961;
}
html[data-theme="medieval"] .footer h2,
html[data-theme="medieval"] .footer h3,
html[data-theme="medieval"] .footer h4 { color: #E8C879 !important; }
html[data-theme="medieval"] .footer a {
color: #C9A961 !important;
font-family: "Cinzel", serif;
}
html[data-theme="medieval"] .footer a:hover { color: #FFE89A !important; }
/* Désactive backgrounds spéciaux des autres modes */
html[data-theme="medieval"] .future-bg,
html[data-theme="medieval"] .retro-bg { display: none !important; }
/* Cache la pastille thème classique en médiéval (la torche prend sa place) */
html[data-theme="medieval"] .theme-toggle { display: none !important; }
/* Glow en mode actif */
html[data-theme="medieval"] .medieval-toggle {
filter: drop-shadow(0 0 14px rgba(232,200,121,.5));
}
/* Sceaux décoratifs flottants : 3 sceaux animés autour du hero */
html[data-theme="medieval"] .hero::before {
content: "";
position: absolute;
left: 6%; top: 30%;
width: 80px; height: 80px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
filter: drop-shadow(0 4px 12px rgba(60,30,10,.5));
animation: medSealFloat 8s ease-in-out infinite;
pointer-events: none;
z-index: 1;
opacity: .85;
}
html[data-theme="medieval"] .hero::after {
content: "";
position: absolute;
right: 8%; top: 22%;
width: 70px; height: 70px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
filter: drop-shadow(0 4px 12px rgba(60,30,10,.5));
animation: medSealFloat 8s ease-in-out infinite reverse;
pointer-events: none;
z-index: 1;
opacity: .85;
}
@keyframes medSealFloat {
0%, 100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-12px) rotate(4deg); }
}
/* Dragon volant (silhouette) qui traverse l'écran toutes les ~30s */
html[data-theme="medieval"] .nav::after {
content: "";
position: fixed;
top: 22%;
left: -120px;
width: 100px;
height: 60px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
pointer-events: none;
z-index: 9990;
animation: medDragonFly 32s linear infinite;
animation-delay: 4s;
}
@keyframes medDragonFly {
0% { transform: translate(0, 0) scaleX(1) rotate(-2deg); opacity: 0; }
3% { opacity: .7; }
50% { transform: translate(70vw, -60px) scaleX(1) rotate(3deg); opacity: .9; }
92% { opacity: .6; }
100% { transform: translate(110vw, -120px) scaleX(1) rotate(-2deg); opacity: 0; }
}
/* Flamme de torche dans le coin inferieur gauche du viewport (ambiance).
Anciennement attachee a .nav::before (sticky), ce qui pouvait
provoquer des doublons / clones du pseudo-element selon le rendu.
Place sur html::before (fixe + unique), c est garanti une seule
torche partout. */
html[data-theme="medieval"]::before {
content: "";
position: fixed;
bottom: 24px;
left: 30px;
width: 26px;
height: 60px;
background:
radial-gradient(50% 60% at 50% 70%, #FFD66B 0 22%, #FF8A1A 35%, #C8330A 65%, transparent 100%);
border-radius: 60% 60% 50% 50% / 70% 70% 30% 30%;
filter: drop-shadow(0 0 12px rgba(255,138,26,.85)) drop-shadow(0 0 30px rgba(255,138,26,.4));
animation: medTorch 1.4s ease-in-out infinite alternate;
pointer-events: none;
z-index: 9991;
}
/* Si une vieille version de .nav::before subsiste en cache, on la
neutralise expressement. */
html[data-theme="medieval"] .nav::before {
content: none !important;
display: none !important;
}
@keyframes medTorch {
0% { transform: scaleY(1) skewX(-3deg); opacity: .92; }
50% { transform: scaleY(1.15) skewX(2deg); opacity: 1; }
100% { transform: scaleY(.95) skewX(-1deg); opacity: .96; }
}
/* Liens du contenu dorés */
html[data-theme="medieval"] main a:not(.btn):not(.nav__brand):not(.social-rail__link) {
color: #5C1F1B;
text-decoration: underline;
text-decoration-color: #C9A961;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
html[data-theme="medieval"] main a:not(.btn):hover {
color: #8C2A24;
text-decoration-color: #5C1F1B;
}
/* Social rail couleur médiéval */
html[data-theme="medieval"] .social-rail__link {
background: linear-gradient(180deg, #F5E6C8 0%, #EBD8A8 100%) !important;
border: 1px solid #C9A961 !important;
color: #5C1F1B !important;
}
html[data-theme="medieval"] .social-rail__link:hover {
background: linear-gradient(180deg, #5C1F1B 0%, #3D1410 100%) !important;
color: #E8C879 !important;
border-color: #C9A961 !important;
box-shadow: 0 0 18px rgba(232,200,121,.5);
}
html[data-theme="medieval"] .social-rail__link--fb::before,
html[data-theme="medieval"] .social-rail__link--ig::before,
html[data-theme="medieval"] .social-rail__link--tw::before {
display: none;
}
html[data-theme="medieval"] .social-rail::before,
html[data-theme="medieval"] .social-rail::after {
background: linear-gradient(to bottom, transparent, rgba(201,169,97,.85) 50%, transparent);
}
/* Trait de séparation "fleurons" entre sections */
html[data-theme="medieval"] section {
position: relative;
}
/* Reduce-motion : on calme tout */
@media (prefers-reduced-motion: reduce) {
html[data-theme="medieval"] body::before,
html[data-theme="medieval"] .hero::before,
html[data-theme="medieval"] .hero::after,
html[data-theme="medieval"]::before,
html[data-theme="medieval"] .nav::after,
html[data-theme="medieval"] .medieval-toggle__svg,
html[data-theme="medieval"] .medieval-toggle__flame { animation: none !important; }
}
/* ════════════════════════════════════════════════════════════════
HERO THEME ROW — boutons de thème regroupes en ligne dans le hero
Les boutons (retro / zombie / medieval / usa / future / theme)
sont deplaces ici par JS au chargement (cf. js/main.js).
On override leur position fixe + leur taille pour qu ils tiennent
en rangee, puis on cache leur chip-tooltip (decalee pour fixed).
════════════════════════════════════════════════════════════════ */
.hero__theme-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0; /* le parent .hero__right gère l'espacement via gap */
padding: 14px 18px 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Le label prend toute la ligne — les 5 boutons forment ensuite une rangée
propre et centrée en dessous, plutôt que d'être éparpillés. */
.hero__theme-row-label {
flex: 0 0 100%;
text-align: center;
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted-2, rgba(255,255,255,.7));
margin: 0 0 4px;
white-space: nowrap;
}
[data-theme="light"] .hero__theme-row {
background: rgba(15, 23, 42, .04);
border-color: rgba(15, 23, 42, .10);
}
[data-theme="light"] .hero__theme-row-label { color: #475569; }
/* Reset complet de la position pour tous les boutons une fois places
dans la rangee (ils etaient en position: fixed sur les bords) */
.hero__theme-row > .retro-toggle,
.hero__theme-row > .zombie-toggle,
.hero__theme-row > .medieval-toggle,
.hero__theme-row > .usa-toggle,
.hero__theme-row > .future-toggle,
.hero__theme-row > .theme-toggle {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 54px !important;
height: 54px !important;
margin: 0 !important;
flex: 0 0 auto;
border-radius: 14px !important;
z-index: 1;
}
/* Le label "USA / 80s / FUTUR / Z" sous chaque bouton est masque
en mode rangee (ils sont trop empiles, on garde juste l icone) */
.hero__theme-row > .retro-toggle .retro-toggle__label,
.hero__theme-row > .zombie-toggle .zombie-toggle__label,
.hero__theme-row > .medieval-toggle .medieval-toggle__label,
.hero__theme-row > .usa-toggle .usa-toggle__label,
.hero__theme-row > .future-toggle .future-toggle__label {
display: none !important;
}
/* Reduit le SVG pour qu il rentre dans le 54px */
.hero__theme-row > .retro-toggle .retro-toggle__svg,
.hero__theme-row > .zombie-toggle .zombie-toggle__svg,
.hero__theme-row > .medieval-toggle .medieval-toggle__svg,
.hero__theme-row > .usa-toggle .usa-toggle__svg,
.hero__theme-row > .future-toggle .future-toggle__svg {
width: 30px !important;
height: 30px !important;
}
.hero__theme-row > .theme-toggle .theme-toggle__svg {
width: 32px !important;
height: 38px !important;
}
/* Tooltips "chip" : on les remet au-dessus du bouton dans la rangee
(par defaut elles sortent vers la gauche, ce qui collait quand
le bouton etait sur le bord droit de l ecran) */
.hero__theme-row > button .retro-toggle__chip,
.hero__theme-row > button .zombie-toggle__chip,
.hero__theme-row > button .medieval-toggle__chip,
.hero__theme-row > button .usa-toggle__chip,
.hero__theme-row > button .future-toggle__chip,
.hero__theme-row > button .theme-toggle__chip {
top: auto !important;
bottom: calc(100% + 10px) !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) translateY(8px) !important;
}
.hero__theme-row > button:hover .retro-toggle__chip,
.hero__theme-row > button:hover .zombie-toggle__chip,
.hero__theme-row > button:hover .medieval-toggle__chip,
.hero__theme-row > button:hover .usa-toggle__chip,
.hero__theme-row > button:hover .future-toggle__chip,
.hero__theme-row > button:hover .theme-toggle__chip,
.hero__theme-row > button:focus-visible .retro-toggle__chip,
.hero__theme-row > button:focus-visible .zombie-toggle__chip,
.hero__theme-row > button:focus-visible .medieval-toggle__chip,
.hero__theme-row > button:focus-visible .usa-toggle__chip,
.hero__theme-row > button:focus-visible .future-toggle__chip,
.hero__theme-row > button:focus-visible .theme-toggle__chip {
transform: translateX(-50%) translateY(0) !important;
}
/* Au survol : leger lift + bordure d accent */
.hero__theme-row > button {
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hero__theme-row > button:hover {
transform: translateY(-3px);
}
/* Mobile : la rangee s adapte */
@media (max-width: 540px) {
.hero__theme-row { gap: 8px; padding: 10px 10px; }
.hero__theme-row-label { width: 100%; margin-bottom: 4px; font-size: .75rem; }
.hero__theme-row > .retro-toggle,
.hero__theme-row > .zombie-toggle,
.hero__theme-row > .medieval-toggle,
.hero__theme-row > .usa-toggle,
.hero__theme-row > .future-toggle,
.hero__theme-row > .theme-toggle {
width: 46px !important;
height: 46px !important;
}
.hero__theme-row > .retro-toggle .retro-toggle__svg,
.hero__theme-row > .zombie-toggle .zombie-toggle__svg,
.hero__theme-row > .medieval-toggle .medieval-toggle__svg,
.hero__theme-row > .usa-toggle .usa-toggle__svg,
.hero__theme-row > .future-toggle .future-toggle__svg {
width: 26px !important;
height: 26px !important;
}
}
/* ════════════════════════════════════════════════════════════════
HERO THEME ROW — overrides FORCES + STYLE PREMIUM
Les 5 boutons de theme (retro / zombie / medieval / usa / future)
sont presentes comme des CARTES avec icone + nom du theme.
Le bouton ampoule (theme-toggle) reste sur le cote pres de la
musique (il n est plus dans la rangee).
════════════════════════════════════════════════════════════════ */
.hero__theme-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
padding: 16px 20px 18px !important;
background:
linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(139,92,246,.05) 50%, rgba(249,115,22,.06) 100%);
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
box-shadow:
0 18px 50px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.08);
position: relative;
overflow: hidden;
}
.hero__theme-row::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 80% at 0% 0%, rgba(99,102,241,.10), transparent 60%),
radial-gradient(60% 80% at 100% 100%, rgba(249,115,22,.10), transparent 60%);
pointer-events: none;
}
[data-theme="light"] .hero__theme-row {
background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(139,92,246,.03), rgba(249,115,22,.04));
border-color: rgba(15,23,42,.10);
box-shadow: 0 12px 36px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.hero__theme-row-label {
flex-basis: 100% !important;
width: 100%;
font-size: .82rem !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
color: rgba(255,255,255,.65) !important;
text-align: center !important;
margin: 0 0 4px !important;
white-space: nowrap;
position: relative;
}
[data-theme="light"] .hero__theme-row-label { color: rgba(15,23,42,.65) !important; }
[data-theme="usa"] .hero__theme-row-label {
color: #0A1F66 !important;
font-weight: 800 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 8px rgba(255,255,255,.5);
}
[data-theme="usa"] .hero__theme-row {
background: rgba(255, 255, 255, .55) !important;
border: 1px solid rgba(10, 31, 102, .25) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
html .hero__theme-row #retroToggle,
html .hero__theme-row #zombieToggle,
html .hero__theme-row #medievalToggle,
html .hero__theme-row #usaToggle,
html .hero__theme-row #futureToggle {
position: relative !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
margin: 0 !important;
flex: 0 0 auto !important;
z-index: auto !important;
width: 78px !important;
height: 88px !important;
border-radius: 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 12px 6px 10px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: transform .25s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s ease,
border-color .25s ease,
background .25s ease !important;
}
html .hero__theme-row .retro-toggle__svg,
html .hero__theme-row .zombie-toggle__svg,
html .hero__theme-row .medieval-toggle__svg,
html .hero__theme-row .usa-toggle__svg,
html .hero__theme-row .future-toggle__svg {
width: 38px !important;
height: 38px !important;
flex-shrink: 0;
}
html .hero__theme-row .retro-toggle__label,
html .hero__theme-row .zombie-toggle__label,
html .hero__theme-row .medieval-toggle__label,
html .hero__theme-row .usa-toggle__label,
html .hero__theme-row .future-toggle__label {
display: block !important;
font-size: .68rem !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
margin: 0 !important;
line-height: 1 !important;
white-space: nowrap;
}
html .hero__theme-row .retro-toggle__chip,
html .hero__theme-row .zombie-toggle__chip,
html .hero__theme-row .medieval-toggle__chip,
html .hero__theme-row .usa-toggle__chip,
html .hero__theme-row .future-toggle__chip { display: none !important; }
html .hero__theme-row #retroToggle:hover,
html .hero__theme-row #zombieToggle:hover,
html .hero__theme-row #medievalToggle:hover,
html .hero__theme-row #usaToggle:hover,
html .hero__theme-row #futureToggle:hover {
transform: translateY(-4px) scale(1.04) !important;
}
html .hero__theme-row #retroToggle:hover {
box-shadow:
0 14px 32px rgba(255,0,228,.45),
0 0 24px rgba(0,245,255,.35),
inset 0 0 12px rgba(255,0,228,.18) !important;
border-color: rgba(255,0,228,.6) !important;
}
html .hero__theme-row #zombieToggle:hover {
box-shadow:
0 14px 32px rgba(155,255,110,.50),
0 0 22px rgba(180,10,20,.55),
inset 0 0 12px rgba(155,255,110,.20) !important;
border-color: rgba(155,255,110,.7) !important;
}
html .hero__theme-row #medievalToggle:hover {
box-shadow:
0 14px 32px rgba(201,169,97,.55),
0 0 22px rgba(232,200,121,.45),
inset 0 0 12px rgba(201,169,97,.20) !important;
border-color: rgba(232,200,121,.7) !important;
}
html .hero__theme-row #usaToggle:hover {
box-shadow:
0 14px 32px rgba(200,16,46,.50),
0 0 22px rgba(10,31,102,.55),
inset 0 0 12px rgba(200,16,46,.18) !important;
border-color: rgba(200,16,46,.7) !important;
}
html .hero__theme-row #futureToggle:hover {
box-shadow:
0 14px 32px rgba(34,211,238,.50),
0 0 22px rgba(167,139,250,.55),
inset 0 0 12px rgba(34,211,238,.20) !important;
border-color: rgba(34,211,238,.7) !important;
}
html .hero__theme-row #retroToggle.retro-toggle--on,
html .hero__theme-row #zombieToggle.zombie-toggle--on,
html .hero__theme-row #medievalToggle.medieval-toggle--on,
html .hero__theme-row #usaToggle.usa-toggle--on,
html .hero__theme-row #futureToggle.future-toggle--on {
transform: translateY(-2px) !important;
}
html .hero__theme-row #retroToggle.retro-toggle--on {
box-shadow:
0 0 0 2px rgba(255,0,228,.6),
0 12px 28px rgba(255,0,228,.45),
0 0 22px rgba(0,245,255,.35) !important;
}
html .hero__theme-row #zombieToggle.zombie-toggle--on {
box-shadow:
0 0 0 2px rgba(155,255,110,.7),
0 12px 28px rgba(155,255,110,.45),
0 0 22px rgba(180,10,20,.55) !important;
}
html .hero__theme-row #medievalToggle.medieval-toggle--on {
box-shadow:
0 0 0 2px rgba(232,200,121,.7),
0 12px 28px rgba(201,169,97,.50) !important;
}
html .hero__theme-row #usaToggle.usa-toggle--on {
box-shadow:
0 0 0 2px rgba(200,16,46,.7),
0 12px 28px rgba(200,16,46,.45),
0 0 22px rgba(10,31,102,.45) !important;
}
html .hero__theme-row #futureToggle.future-toggle--on {
box-shadow:
0 0 0 2px rgba(34,211,238,.7),
0 12px 28px rgba(34,211,238,.45),
0 0 22px rgba(167,139,250,.45) !important;
}
@media (max-width: 540px) {
.hero__theme-row { gap: 8px !important; padding: 14px !important; }
.hero__theme-row-label { width: 100%; margin-bottom: 6px !important; font-size: .72rem !important; }
html .hero__theme-row #retroToggle,
html .hero__theme-row #zombieToggle,
html .hero__theme-row #medievalToggle,
html .hero__theme-row #usaToggle,
html .hero__theme-row #futureToggle {
width: 64px !important;
height: 76px !important;
}
html .hero__theme-row .retro-toggle__svg,
html .hero__theme-row .zombie-toggle__svg,
html .hero__theme-row .medieval-toggle__svg,
html .hero__theme-row .usa-toggle__svg,
html .hero__theme-row .future-toggle__svg {
width: 30px !important; height: 30px !important;
}
html .hero__theme-row .retro-toggle__label,
html .hero__theme-row .zombie-toggle__label,
html .hero__theme-row .medieval-toggle__label,
html .hero__theme-row .usa-toggle__label,
html .hero__theme-row .future-toggle__label {
font-size: .58rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
THEME ACTIVE → bouton transformé en "Classique" (retour défaut)
Quand un thème spécial (rétro, zombie, médiéval, USA, futur) est
actif, son bouton dans la rangée se mue visuellement en bouton
"Classique" avec un grand "C" italique en dégradé or sur ivoire.
Cliquer dessus revient au thème normal (logique JS déjà en place).
═══════════════════════════════════════════════════════════════ */
.hero__theme-row > .retro-toggle,
.hero__theme-row > .zombie-toggle,
.hero__theme-row > .medieval-toggle,
.hero__theme-row > .usa-toggle,
.hero__theme-row > .future-toggle {
position: relative; /* ancrage pour le ::after "C" */
}
/* Quand actif (classe -toggle--on ajoutée par JS) → sceau classique élégant
Style "wax seal" : dégradé subtil cream → champagne, anneau or fin,
ombre interne pour effet gravé, "C" italique élégant centré + fleurons. */
.hero__theme-row > .retro-toggle.retro-toggle--on,
.hero__theme-row > .zombie-toggle.zombie-toggle--on,
.hero__theme-row > .medieval-toggle.medieval-toggle--on,
.hero__theme-row > .usa-toggle.usa-toggle--on,
.hero__theme-row > .future-toggle.future-toggle--on {
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%),
linear-gradient(135deg, #FAF6E8 0%, #E5CD8E 50%, #C9A961 100%) !important;
border: 1.5px solid #B8924A !important;
box-shadow:
inset 0 0 0 3px #FAF6E8, /* anneau crème intérieur */
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -2px 4px rgba(150,110,40,.25),
0 4px 14px rgba(184, 146, 74, .35) !important;
color: #2C1F18 !important;
}
/* Masque tout le contenu d'origine (svg, label, chip, halo, flame, etc.) */
.hero__theme-row > .retro-toggle.retro-toggle--on > *,
.hero__theme-row > .zombie-toggle.zombie-toggle--on > *,
.hero__theme-row > .medieval-toggle.medieval-toggle--on > *,
.hero__theme-row > .usa-toggle.usa-toggle--on > *,
.hero__theme-row > .future-toggle.future-toggle--on > * {
visibility: hidden !important;
}
/* Affiche un "C" italique élégant + petits fleurons en haut/bas
On utilise BOTH ::before (fleurons) ET ::after (le C) pour un rendu type
monogramme de manuscrit. */
.hero__theme-row > .retro-toggle.retro-toggle--on::before,
.hero__theme-row > .zombie-toggle.zombie-toggle--on::before,
.hero__theme-row > .medieval-toggle.medieval-toggle--on::before,
.hero__theme-row > .usa-toggle.usa-toggle--on::before,
.hero__theme-row > .future-toggle.future-toggle--on::before {
content: "❦";
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
font-size: .62rem;
color: #8B6F2A;
pointer-events: none;
z-index: 2;
}
.hero__theme-row > .retro-toggle.retro-toggle--on::after,
.hero__theme-row > .zombie-toggle.zombie-toggle--on::after,
.hero__theme-row > .medieval-toggle.medieval-toggle--on::after,
.hero__theme-row > .usa-toggle.usa-toggle--on::after,
.hero__theme-row > .future-toggle.future-toggle--on::after {
content: "C";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: "Fraunces", "Playfair Display", "Cormorant Garamond", Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 1.85rem;
line-height: 1;
color: #4A2E12;
letter-spacing: -.02em;
pointer-events: none;
text-shadow:
1px 1px 0 rgba(255,255,255,.55),
0 -1px 0 rgba(74,46,18,.15);
z-index: 1;
}
/* Effet hover : lift + ombre or plus profonde, l'anneau crème intérieur s'étend */
.hero__theme-row > .retro-toggle.retro-toggle--on:hover,
.hero__theme-row > .zombie-toggle.zombie-toggle--on:hover,
.hero__theme-row > .medieval-toggle.medieval-toggle--on:hover,
.hero__theme-row > .usa-toggle.usa-toggle--on:hover,
.hero__theme-row > .future-toggle.future-toggle--on:hover {
transform: translateY(-2px) !important;
border-color: #8B6F2A !important;
box-shadow:
inset 0 0 0 3px #FAF6E8,
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -2px 6px rgba(150,110,40,.35),
0 10px 24px rgba(184, 146, 74, .5) !important;
}
.hero__theme-row > .retro-toggle.retro-toggle--on:hover::before,
.hero__theme-row > .zombie-toggle.zombie-toggle--on:hover::before,
.hero__theme-row > .medieval-toggle.medieval-toggle--on:hover::before,
.hero__theme-row > .usa-toggle.usa-toggle--on:hover::before,
.hero__theme-row > .future-toggle.future-toggle--on:hover::before {
color: #B8350F; /* le fleuron passe en bordeaux profond au survol */
}
/* Theme row : si 5 boutons ne tiennent pas, le wrap-center
produit naturellement 3 sur la 1ere ligne + 2 centres dessous. */
@media (max-width: 880px) {
html .hero__theme-row #retroToggle,
html .hero__theme-row #zombieToggle,
html .hero__theme-row #medievalToggle,
html .hero__theme-row #usaToggle,
html .hero__theme-row #futureToggle {
width: 72px !important;
height: 82px !important;
}
html .hero__theme-row .retro-toggle__svg,
html .hero__theme-row .zombie-toggle__svg,
html .hero__theme-row .medieval-toggle__svg,
html .hero__theme-row .usa-toggle__svg,
html .hero__theme-row .future-toggle__svg { width: 34px !important; height: 34px !important; }
}
/* ════════════════════════════════════════════════════════════════
RESPONSIVE FIXES — corrections d audit mobile
════════════════════════════════════════════════════════════════ */
/* 1. Parrainage timeline : 4 col -> 2 col tablet -> 1 col phone.
Le rail decoratif horizontal disparait (ne fait sens qu en 4-col). */
@media (max-width: 900px) {
.parr-timeline {
grid-template-columns: repeat(2, 1fr) !important;
}
.parr-timeline::before { display: none; }
}
@media (max-width: 540px) {
.parr-timeline {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* 2. Temoignages : 3 col -> 1 col mobile. Sur tablet on garde 2 col
pour ne pas perdre tout le contenu en 1 colonne. */
@media (max-width: 880px) {
.testimonials__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.testimonials__grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* 3. May promo : MASQUE TOTAL sur mobile (≤768px) — libère l'espace
en haut pour le burger menu et évite les conflits de layout. */
@media (max-width: 768px) {
:root { --promo-h: 0px !important; }
.may-promo { display: none !important; }
}
/* 4. Recruit grid : auto-fit minmax(340px, 1fr) pouvait deborder sur
iPhone SE (320px). On baisse le min a 280px puis 1 col total. */
.recruit-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (max-width: 520px) {
.recruit-grid {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* 5. Demo mockup gallery : 4 col -> 3 -> 2 -> 1. Garantit que les
visuels ne descendent jamais sous 75px de large. */
@media (max-width: 720px) {
.demo-mockup__gallery-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 480px) {
.demo-mockup__gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
@media (max-width: 360px) {
.demo-mockup__gallery-grid {
grid-template-columns: 1fr !important;
}
}
/* BONUS : la rangee theme du hero respire mieux sur tres petit ecran */
@media (max-width: 380px) {
.hero__theme-row { padding: 12px 10px 14px !important; gap: 8px !important; }
html .hero__theme-row #retroToggle,
html .hero__theme-row #zombieToggle,
html .hero__theme-row #medievalToggle,
html .hero__theme-row #usaToggle,
html .hero__theme-row #futureToggle {
width: 60px !important;
height: 72px !important;
}
html .hero__theme-row .retro-toggle__svg,
html .hero__theme-row .zombie-toggle__svg,
html .hero__theme-row .medieval-toggle__svg,
html .hero__theme-row .usa-toggle__svg,
html .hero__theme-row .future-toggle__svg {
width: 28px !important;
height: 28px !important;
}
html .hero__theme-row .retro-toggle__label,
html .hero__theme-row .zombie-toggle__label,
html .hero__theme-row .medieval-toggle__label,
html .hero__theme-row .usa-toggle__label,
html .hero__theme-row .future-toggle__label {
font-size: .56rem !important;
}
}