/** Shopify CDN: Minification failed
Line 4348:0 Unexpected "@media"
**/
/* ===== POLICES INTÉGRÉES (aucune dépendance réseau) ===== */
@font-face {font-family: 'Fraunces';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(fonts-fraunces-italic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Fraunces';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts-fraunces-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts-inter-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(fonts-space-grotesk-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* =============================================================
AVIS AZUR — Feuille de style
Direction : "L'or de la Côte d'Azur, la vitesse du sans-contact"
Palette :
- Ivory #F8F4EC fond chaleureux (mistral, sable clair)
- Deep Azure #0A3D62 nuit méditerranéenne, profondeur
- Signal #2476B8 bleu vif, action
- Riviera #C89238 or provençal, prestige
- Champagne #EBD7A1 lumière dorée
- Ink #14212B texte sombre
- Graphite #4A5460 texte secondaire
Typo :
- Fraunces (display) — serif éditorial, caractère
- Inter (body) — lisibilité moderne
- Space Grotesk (data) — chiffres et métriques
============================================================= */
/* ===== 1. VARIABLES ===== */
:root {
/* Ivoires — fonds progressifs pour rythmer les sections */
--ivory: #F8F4EC;
--ivory-warm: #F1E9D6;
--ivory-deep: #E4D8B8;
/* Azur — famille bleu Méditerranée cohérente */
--azure-deep: #0A3D62;
--azure-night: #052538;
--azure-signal: #2476B8; /* bleu plus sophistiqué, moins "Material" */
--azure-mist: #C6DEEE;
/* Or riviera — un cran plus profond pour meilleur contraste */
--riviera: #C89238;
--riviera-light: #E1BC72;
--champagne: #EBD7A1;
--riviera-deep: #8F6420; /* pour texte or lisible sur ivoire */
/* Neutres */
--ink: #14212B;
--graphite: #4A5460;
--graphite-soft: #6C7683;
--line: #DDD1B4;
--line-soft: #ECE3CA;
--whatsapp: #25D366;
--success: #10B981;
--danger: #DC2626;
--radius: 20px;
--radius-sm: 12px;
--radius-xs: 8px;
--radius-pill: 999px;
--shadow-sm: 0 4px 12px rgba(10, 61, 98, 0.07);
--shadow-md: 0 14px 34px rgba(10, 61, 98, 0.10);
--shadow-lg: 0 26px 64px rgba(10, 61, 98, 0.15);
--shadow-gold: 0 14px 34px rgba(200, 146, 56, 0.30);
--shadow-azure: 0 14px 34px rgba(36, 118, 184, 0.25);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-quick: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 0.4s;
--duration-quick: 0.2s;
--container: 1200px;
--container-narrow: 880px;
--header-h: 76px;
--font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Space Grotesk', 'SF Mono', Menlo, monospace;
}
/* ===== 2. RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--ivory);
line-height: 1.65;
font-size: 17px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--duration-quick) var(--ease-quick); }
/* Typographie */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 0;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 500; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 500; letter-spacing: -0.025em; }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; font-weight: 600; }
.italic-serif { font-style: italic; font-family: var(--font-display); font-variation-settings: "SOFT" 100; }
p { color: var(--graphite); }
strong { color: var(--ink); font-weight: 600; }
::selection { background: var(--champagne); color: var(--azure-night); }
/* Accessibilité */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 2000;
background: var(--ink); color: var(--champagne);
padding: 12px 20px; border-radius: 0 0 var(--radius-xs) 0;
font-weight: 500;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--riviera);
outline-offset: 3px;
border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===== 3. UTILITAIRES ===== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem;
font-weight: 600; color: var(--riviera-deep); margin-bottom: 14px;
font-family: var(--font-body);
}
.eyebrow::before {
content: ''; width: 24px; height: 1.5px; background: var(--riviera);
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
content: ''; width: 24px; height: 1.5px; background: var(--riviera);
}
.section { padding: clamp(64px, 7.5vw, 88px) 0; position: relative; }
.section-alt { background: var(--ivory-warm); }
.section-dark {
background: linear-gradient(135deg, var(--azure-night) 0%, var(--azure-deep) 100%);
color: var(--ivory);
}
.section-dark h2, .section-dark h3 { color: var(--ivory); }
.section-dark p { color: rgba(248, 244, 236, 0.75); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-intro { margin-top: 18px; font-size: 1.08rem; color: var(--graphite); }
.section-dark .section-intro { color: rgba(248, 244, 236, 0.8); }
/* Accent doré/serif dans les titres */
.h-accent {
font-style: italic;
color: var(--riviera-deep);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.section-dark .h-accent { color: var(--champagne); }
/* Boutons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
padding: 15px 28px; border-radius: var(--radius-pill); cursor: pointer;
border: 1.5px solid transparent; text-align: center; line-height: 1.1;
transition: transform var(--duration-quick) var(--ease-quick),
box-shadow var(--duration-quick) var(--ease-quick),
background var(--duration-quick) var(--ease-quick),
color var(--duration-quick) var(--ease-quick);
position: relative; overflow: hidden;
white-space: nowrap;
}
.btn::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%); transition: transform 0.6s var(--ease);
}
.btn:hover::after { transform: translateX(100%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
background: linear-gradient(135deg, var(--riviera-light) 0%, var(--riviera) 100%);
color: var(--azure-night);
box-shadow: var(--shadow-gold);
}
.btn-gold:hover { box-shadow: 0 16px 40px rgba(212,162,76,0.4); }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: var(--azure-deep); }
.btn-azure {
background: linear-gradient(135deg, var(--azure-signal) 0%, var(--azure-deep) 100%);
color: white;
box-shadow: var(--shadow-azure);
}
.btn-azure:hover { box-shadow: 0 16px 40px rgba(30,136,229,0.35); }
.btn-outline {
background: transparent; color: var(--ink);
border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--ivory); }
.section-dark .btn-outline { color: var(--ivory); border-color: rgba(248,244,236,0.4); }
.section-dark .btn-outline:hover { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); }
.btn-whatsapp { background: var(--whatsapp); color: white; }
.btn-whatsapp:hover { background: #1FBB59; }
.btn-sm { padding: 11px 20px; font-size: 0.9rem; }
.btn-lg { padding: 17px 36px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-ghost {
background: transparent; color: var(--ink);
border-color: transparent; padding: 12px 20px;
}
.btn-ghost:hover { background: rgba(20,33,43,0.06); }
/* Scroll progress bar */
.scroll-progress {
position: fixed; top: 0; left: 0; right: 0;
height: 3px; z-index: 1500;
background: linear-gradient(90deg, var(--riviera) 0%, var(--riviera-light) 100%);
transform-origin: left; transform: scaleX(0);
transition: transform 0.1s linear;
}
/* ===== 4. HEADER ===== */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
height: var(--header-h);
background: rgba(248, 244, 236, 0.72);
backdrop-filter: saturate(170%) blur(14px); -webkit-backdrop-filter: saturate(170%) blur(14px);
border-bottom: 1px solid transparent;
transition: background var(--duration-quick) var(--ease-quick),
border-color var(--duration-quick) var(--ease-quick),
box-shadow var(--duration-quick) var(--ease-quick);
}
.site-header.scrolled {
background: rgba(248, 244, 236, 0.92);
border-bottom-color: var(--line-soft);
box-shadow: 0 1px 0 rgba(10, 61, 98, 0.04);
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
height: 100%;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
width: 40px; height: 40px; border-radius: 11px;
background: linear-gradient(135deg, var(--azure-signal), var(--azure-deep));
display: grid; place-items: center; position: relative;
box-shadow: 0 4px 14px rgba(10, 61, 98, 0.25);
}
.brand-mark svg { color: var(--champagne); }
.brand-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.28rem;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
}
.brand-name .accent {
font-style: italic;
color: var(--riviera-deep);
font-variation-settings: "SOFT" 100;
}
.brand-tag {
display: block;
font-family: var(--font-body);
font-size: 0.63rem;
letter-spacing: 0.22em;
color: var(--graphite-soft);
text-transform: uppercase;
margin-top: 4px;
font-weight: 500;
}
.main-nav ul { list-style: none; display: flex; gap: 6px; align-items: center; }
.main-nav a {
font-weight: 500; font-size: 0.94rem; color: var(--graphite);
padding: 8px 14px; border-radius: var(--radius-xs);
transition: background var(--duration-quick), color var(--duration-quick);
}
.main-nav a:hover { color: var(--ink); background: rgba(20,33,43,0.05); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
display: none; flex-direction: column; gap: 5px; background: none;
border: none; cursor: pointer; padding: 10px; margin: -10px;
}
.menu-toggle span {
width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
transition: transform var(--duration-quick), opacity var(--duration-quick);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== 5. HERO ===== */
.hero {
padding: calc(var(--header-h) + 48px) 0 76px;
position: relative; overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 15% 10%, rgba(184, 221, 243, 0.55) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 90% 100%, rgba(237, 215, 158, 0.35) 0%, transparent 55%),
linear-gradient(180deg, var(--ivory) 0%, var(--ivory-warm) 100%);
}
.hero::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
opacity: 0.5;
}
.hero-grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px;
align-items: center; position: relative; z-index: 2;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px 8px 8px; border-radius: var(--radius-pill);
background: rgba(255,255,255,0.7); border: 1px solid var(--line);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
font-size: 0.82rem; font-weight: 500; color: var(--graphite);
margin-bottom: 24px;
}
.hero-badge .badge-dot {
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, var(--riviera-light), var(--riviera));
display: grid; place-items: center; color: var(--azure-night);
font-size: 0.7rem;
}
.hero-badge strong { color: var(--ink); font-weight: 600; }
.hero-title { margin-bottom: 22px; }
.hero-lead {
font-size: 1.18rem; max-width: 540px; margin-bottom: 36px;
color: var(--graphite); line-height: 1.6;
}
.hero-lead strong { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.hero-trust {
display: flex; flex-wrap: wrap; gap: 16px 32px;
padding-top: 32px; border-top: 1px solid var(--line);
max-width: 560px;
}
.hero-trust-item {
display: flex; align-items: center; gap: 10px;
font-size: 0.9rem; color: var(--graphite); font-weight: 500;
}
.hero-trust-item svg { color: var(--riviera); flex-shrink: 0; }
/* Hero visuel : carte NFC animée */
.hero-visual { position: relative; height: 560px; perspective: 1200px; }
.floating-card {
position: absolute; top: 50%; left: 50%;
width: 340px; height: 220px;
transform: translate(-50%, -50%) rotate(-8deg);
border-radius: 22px;
background: linear-gradient(135deg, var(--azure-deep) 0%, var(--azure-night) 100%);
box-shadow:
0 40px 80px -20px rgba(10, 61, 98, 0.5),
0 20px 40px -15px rgba(10, 61, 98, 0.35),
inset 0 1px 1px rgba(255,255,255,0.15);
padding: 28px;
color: var(--ivory);
animation: cardFloat 6s ease-in-out infinite;
z-index: 2;
}
.floating-card::before {
content: ''; position: absolute; inset: 1px; border-radius: 21px;
background: linear-gradient(135deg, transparent 45%, rgba(212, 162, 76, 0.15) 100%);
pointer-events: none;
}
.floating-card .card-gold-line {
position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
background: linear-gradient(90deg, transparent, var(--riviera), transparent);
opacity: 0.6;
}
.card-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 20px;
}
.card-logo {
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, var(--riviera-light), var(--riviera));
display: grid; place-items: center;
color: var(--azure-night); font-family: var(--font-display);
font-weight: 700; font-size: 1.4rem;
}
.card-waves {
color: var(--riviera-light); opacity: 0.9;
}
.card-name {
font-family: var(--font-display); font-size: 1.35rem;
font-weight: 500; letter-spacing: -0.02em;
color: var(--ivory); margin-bottom: 4px;
}
.card-role {
font-size: 0.82rem; color: rgba(248,244,236,0.7);
letter-spacing: 0.02em;
}
.card-bottom {
position: absolute; bottom: 24px; left: 28px; right: 28px;
display: flex; justify-content: space-between; align-items: flex-end;
}
.card-brand-mini {
font-family: var(--font-display); font-size: 0.82rem;
color: var(--champagne); font-style: italic;
}
.card-chip {
width: 32px; height: 24px; border-radius: 5px;
background: linear-gradient(135deg, var(--riviera-light), var(--riviera-deep));
position: relative;
}
.card-chip::before {
content: ''; position: absolute; inset: 3px;
background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.15) 2px 3px);
border-radius: 3px;
}
/* Phone à côté */
.floating-phone {
position: absolute; top: 10%; right: 5%;
width: 200px; height: 400px;
background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
border-radius: 32px; padding: 8px;
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5), 0 20px 40px -15px rgba(0,0,0,0.3);
transform: rotate(6deg);
animation: phoneFloat 6s ease-in-out infinite;
animation-delay: 0.5s;
z-index: 3;
}
.floating-phone::before {
content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
width: 60px; height: 16px; background: #000; border-radius: 0 0 10px 10px;
z-index: 3;
}
.phone-screen {
width: 100%; height: 100%; background: white;
border-radius: 24px; overflow: hidden;
display: flex; flex-direction: column;
position: relative;
}
.phone-notification {
padding: 32px 14px 12px;
background: linear-gradient(180deg, var(--azure-deep), var(--azure-night));
color: white; text-align: center;
}
.phone-notification-icon {
width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 10px;
background: linear-gradient(135deg, var(--riviera-light), var(--riviera));
display: grid; place-items: center; color: var(--azure-night);
}
.phone-notification h4 {
font-family: var(--font-display); color: white;
font-size: 0.9rem; margin-bottom: 2px;
}
.phone-notification p {
color: rgba(255,255,255,0.7); font-size: 0.7rem;
}
.phone-content {
flex: 1; padding: 16px 12px; display: flex; flex-direction: column;
gap: 10px; background: white;
}
.phone-stars {
color: var(--riviera); font-size: 1.4rem; letter-spacing: 3px;
text-align: center; margin-bottom: 4px;
}
.phone-review-title {
font-family: var(--font-display); font-size: 0.82rem; text-align: center;
color: var(--ink); font-weight: 600;
}
.phone-line {
height: 6px; background: #F0F0F0; border-radius: 3px;
}
.phone-line.short { width: 60%; }
.phone-cta {
margin-top: auto; text-align: center;
background: linear-gradient(135deg, var(--riviera-light), var(--riviera));
color: var(--azure-night);
padding: 10px; border-radius: 20px;
font-size: 0.7rem; font-weight: 700;
}
/* Ondes NFC animées */
.nfc-waves {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100%; height: 100%;
pointer-events: none; z-index: 1;
}
.nfc-wave {
position: absolute; top: 50%; left: 50%;
border: 1.5px solid var(--riviera);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: nfcWave 3s ease-out infinite;
}
.nfc-wave:nth-child(1) { animation-delay: 0s; }
.nfc-wave:nth-child(2) { animation-delay: 1s; }
.nfc-wave:nth-child(3) { animation-delay: 2s; }
@keyframes nfcWave {
0% { width: 100px; height: 100px; opacity: 0.6; }
100% { width: 500px; height: 500px; opacity: 0; }
}
@keyframes cardFloat {
0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
50% { transform: translate(-50%, calc(-50% - 12px)) rotate(-8deg); }
}
@keyframes phoneFloat {
0%, 100% { transform: rotate(6deg) translateY(0); }
50% { transform: rotate(6deg) translateY(-14px); }
}
/* Décorations hero : étoiles flottantes */
.hero-sparkle {
position: absolute; color: var(--riviera);
pointer-events: none; opacity: 0.6;
animation: sparkle 3s ease-in-out infinite;
}
.hero-sparkle:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.hero-sparkle:nth-child(2) { bottom: 20%; left: 15%; animation-delay: 1s; }
.hero-sparkle:nth-child(3) { top: 30%; right: 25%; animation-delay: 2s; }
@keyframes sparkle {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 0.7; transform: scale(1.1); }
}
/* ===== 6. STATS BAR ===== */
.stats-bar {
background: var(--ink);
padding: 40px 0;
position: relative; overflow: hidden;
}
.stats-bar::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 40% 60% at 20% 50%, rgba(30,136,229,0.15) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 80% 50%, rgba(212,162,76,0.12) 0%, transparent 60%);
}
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 40px; position: relative; z-index: 1;
}
.stat-item { text-align: center; }
.stat-value {
font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 500; color: var(--champagne);
letter-spacing: -0.03em; line-height: 1;
margin-bottom: 10px;
font-variation-settings: "SOFT" 60;
}
.stat-value .stat-unit {
font-size: 0.6em; color: var(--riviera-light);
font-style: italic;
}
.stat-label {
color: rgba(248,244,236,0.75);
font-size: 0.88rem; font-weight: 500;
letter-spacing: 0.02em;
}
/* ===== 7. SECTIONS DE CONTENU ===== */
/* --- NFC expliqué --- */
.nfc-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 60px; align-items: center;
}
.nfc-text p {
font-size: 1.05rem; margin-bottom: 18px; line-height: 1.7;
}
.nfc-highlight-box {
background: white; border: 1px solid var(--line-soft);
border-left: 3px solid var(--riviera);
padding: 22px 24px; border-radius: var(--radius-sm);
margin-top: 22px; box-shadow: var(--shadow-sm);
display: flex; gap: 16px;
}
.nfc-highlight-box .quote-icon {
color: var(--riviera); flex-shrink: 0; margin-top: 2px;
}
.nfc-highlight-box p {
color: var(--ink); font-family: var(--font-display);
font-style: italic; font-size: 1.02rem;
font-variation-settings: "SOFT" 100;
margin: 0;
}
/* Steps card */
.steps-card {
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius); padding: 34px;
box-shadow: var(--shadow-md); position: relative;
}
.steps-card::before {
content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px;
background: linear-gradient(90deg, var(--riviera), var(--riviera-light));
border-radius: 3px;
}
.steps-title {
font-size: 1.15rem; margin-bottom: 22px;
color: var(--ink); font-weight: 600;
}
.steps-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.steps-list li { display: flex; gap: 16px; align-items: flex-start; }
.step-badge {
flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--azure-signal), var(--azure-deep));
color: white; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
box-shadow: 0 4px 10px rgba(10,61,98,0.2);
}
.step-content strong {
display: block; color: var(--ink); margin-bottom: 3px; font-size: 1rem;
}
.step-content p { font-size: 0.94rem; margin: 0; }
/* --- Bénéfices --- */
.benefits-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.benefit-card {
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius); padding: 28px 22px;
box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
transition: transform var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
}
.benefit-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--riviera), var(--riviera-light));
transform: scaleX(0); transform-origin: left;
transition: transform var(--duration) var(--ease);
}
.benefit-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.benefit-card:hover::before { transform: scaleX(1); }
.benefit-icon {
width: 48px; height: 48px; border-radius: 12px;
background: linear-gradient(135deg, var(--ivory-warm), var(--ivory-deep));
display: grid; place-items: center; margin-bottom: 16px;
color: var(--riviera-deep);
}
.benefit-card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.benefit-card p { font-size: 0.93rem; }
/* --- Solutions --- */
.solutions-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.solution-card {
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
transition: transform var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
position: relative;
}
.solution-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.solution-visual {
aspect-ratio: 3/2; overflow: hidden; position: relative;
background: linear-gradient(135deg, var(--azure-deep), var(--azure-night));
}
.solution-visual svg { width: 100%; height: 100%; display: block; }
.solution-tag {
position: absolute; top: 16px; left: 16px;
background: rgba(248,244,236,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
color: var(--azure-night);
padding: 6px 12px; border-radius: var(--radius-pill);
font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
}
.solution-body { padding: 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.solution-body h3 { color: var(--ink); font-size: 1.3rem; }
.solution-body > p { font-size: 0.97rem; }
.solution-for {
font-size: 0.86rem !important; color: var(--graphite-soft) !important;
padding: 12px 14px; background: var(--ivory-warm);
border-radius: var(--radius-xs); line-height: 1.5;
}
.solution-for strong { color: var(--ink); }
.solution-body .btn { margin-top: auto; }
.solutions-note {
text-align: center; margin-top: 44px;
max-width: 720px; margin-left: auto; margin-right: auto;
color: var(--graphite);
padding: 22px 26px; background: white; border-radius: var(--radius);
border: 1px dashed var(--line);
}
/* --- Secteurs --- */
.sectors-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.sector-card {
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius-sm); padding: 24px 20px;
transition: transform var(--duration) var(--ease),
background var(--duration) var(--ease),
border-color var(--duration) var(--ease);
cursor: default;
}
.sector-card:hover {
transform: translateY(-3px);
background: var(--ink); border-color: var(--ink);
}
.sector-card:hover h3, .sector-card:hover p { color: var(--ivory); }
.sector-card:hover .sector-icon { background: var(--riviera); color: var(--azure-night); }
.sector-card h3, .sector-card p { transition: color var(--duration-quick); }
.sector-icon {
width: 42px; height: 42px; border-radius: 10px;
background: var(--ivory-warm); color: var(--riviera-deep);
display: grid; place-items: center; margin-bottom: 14px;
transition: background var(--duration-quick), color var(--duration-quick);
}
.sector-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.sector-card p { font-size: 0.88rem; }
/* --- Processus (timeline horizontale) --- */
.process-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
position: relative;
}
.process-step {
position: relative; padding: 32px 24px; text-align: center;
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius);
transition: transform var(--duration) var(--ease), box-shadow var(--duration);
}
.process-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.process-num {
display: inline-block; font-family: var(--font-display);
font-size: 3.2rem; font-weight: 500;
background: linear-gradient(135deg, var(--riviera), var(--riviera-deep));
-webkit-background-clip: text; background-clip: text;
color: transparent; line-height: 1;
margin-bottom: 8px;
font-variation-settings: "SOFT" 80;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--ink); }
.process-step p { font-size: 0.9rem; }
.process-reassure {
margin: 44px auto 0; max-width: 720px; text-align: center;
padding: 18px 26px;
background: linear-gradient(135deg, var(--ivory-warm), var(--ivory-deep));
border: 1px solid var(--line);
border-radius: var(--radius-pill);
color: var(--ink); font-weight: 500; font-size: 0.94rem;
display: inline-flex; align-items: center; gap: 10px;
}
.process-reassure-wrap { text-align: center; }
.process-reassure svg { color: var(--riviera-deep); }
/* --- Tableau comparatif --- */
.compare-wrap {
background: white; border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-md);
border: 1px solid var(--line-soft);
}
.compare-table {
width: 100%; border-collapse: collapse; background: white;
}
.compare-table th, .compare-table td {
padding: 18px 22px; text-align: left;
border-bottom: 1px solid var(--line-soft);
}
.compare-table thead th {
background: var(--ink); color: var(--ivory);
font-family: var(--font-display); font-weight: 600;
font-size: 1rem; letter-spacing: -0.01em;
}
.compare-table thead th:nth-child(2) { color: var(--champagne); }
.compare-table thead th:nth-child(3) { color: rgba(248,244,236,0.7); }
.compare-table tbody th {
font-weight: 600; color: var(--ink); background: var(--ivory-warm);
width: 32%; font-family: var(--font-body); font-size: 0.95rem;
}
.compare-table tbody td { color: var(--graphite); font-size: 0.95rem; }
.compare-table tbody tr:last-child td {
text-align: center; font-weight: 500; color: var(--ink);
background: linear-gradient(135deg, var(--ivory-warm), var(--ivory-deep));
}
.compare-check { color: var(--success); font-weight: 600; }
.compare-cross { color: var(--danger); font-weight: 600; }
/* --- Tarifs --- */
.pricing-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px; align-items: stretch;
}
.price-card { min-width: 0; }
.price-card .btn { white-space: normal; }
.price-card {
position: relative; background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius); padding: 36px 30px;
box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.price-tagline { color: var(--graphite-soft); font-size: 0.9rem; margin-bottom: 22px; }
.price-amount {
font-family: var(--font-display); font-weight: 500;
font-size: 2.6rem; color: var(--ink);
margin-bottom: 24px; line-height: 1;
letter-spacing: -0.03em;
font-variation-settings: "SOFT" 40;
}
.price-amount .price-from {
display: block; font-family: var(--font-body); font-size: 0.72rem;
font-weight: 500; color: var(--graphite-soft);
text-transform: uppercase; letter-spacing: 0.14em;
margin-bottom: 6px;
}
.price-amount .price-currency { font-size: 0.6em; opacity: 0.8; }
.price-features {
list-style: none; display: flex; flex-direction: column;
gap: 12px; margin-bottom: 28px; flex: 1;
}
.price-features li {
position: relative; padding-left: 26px; font-size: 0.94rem; color: var(--ink);
}
.price-features li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 14px; height: 8px;
border-left: 2px solid var(--riviera);
border-bottom: 2px solid var(--riviera);
transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; }
.price-featured {
border: 2px solid var(--riviera);
box-shadow: var(--shadow-lg);
transform: translateY(-8px);
background: linear-gradient(180deg, #FFFCF4 0%, white 100%);
}
.price-featured:hover { transform: translateY(-12px); }
.price-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--riviera-light), var(--riviera));
color: var(--azure-night);
font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
padding: 7px 20px; border-radius: var(--radius-pill);
white-space: nowrap; box-shadow: 0 8px 20px rgba(212,162,76,0.4);
letter-spacing: 0.02em;
}
.pricing-note {
text-align: center; margin-top: 32px; font-size: 0.9rem;
max-width: 720px; margin-left: auto; margin-right: auto;
color: var(--graphite);
}
/* --- Démonstration interactive --- */
.demo-wrap {
display: grid; grid-template-columns: 320px 1fr;
gap: 60px; align-items: center; max-width: 920px; margin: 0 auto;
}
.demo-phone-container {
width: 290px; height: 580px; margin: 0 auto;
background: linear-gradient(160deg, #2a2a2a, #0a0a0a);
border-radius: 44px; padding: 12px;
box-shadow: 0 40px 80px -10px rgba(0,0,0,0.4);
position: relative;
}
.demo-notch {
position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
width: 90px; height: 20px; background: #000; border-radius: 0 0 14px 14px; z-index: 2;
}
.demo-screen {
width: 100%; height: 100%; background: white;
border-radius: 32px; overflow: hidden;
display: flex; flex-direction: column; position: relative;
}
.demo-content {
display: flex; flex-direction: column; height: 100%;
animation: demoFade 0.4s var(--ease);
}
@keyframes demoFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.demo-header {
padding: 44px 22px 20px; color: white; text-align: center;
}
.demo-header h4 { color: white; font-size: 1.05rem; }
.demo-header p { color: rgba(255,255,255,0.85); font-size: 0.82rem; margin-top: 4px; }
.demo-avatar {
width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px;
display: grid; place-items: center; font-size: 1.9rem;
background: rgba(255,255,255,0.15);
}
.demo-body {
padding: 20px 20px 24px; flex: 1; display: flex;
flex-direction: column; gap: 12px; background: white;
}
.demo-line {
display: flex; align-items: center; gap: 12px;
font-size: 0.86rem; color: var(--ink);
}
.demo-line span:first-child { font-size: 1rem; }
.demo-pill {
margin-top: auto; text-align: center;
padding: 12px; border-radius: 24px;
font-family: var(--font-body); font-weight: 700; font-size: 0.86rem;
}
.demo-stars {
text-align: center; color: var(--riviera); font-size: 1.5rem;
letter-spacing: 4px; margin-bottom: 8px;
}
.demo-controls { display: flex; flex-direction: column; gap: 12px; }
.demo-btn {
font-family: var(--font-body); font-weight: 500; font-size: 0.98rem;
text-align: left; padding: 16px 22px;
border-radius: 14px; border: 1.5px solid var(--line);
background: white; color: var(--ink); cursor: pointer;
transition: all var(--duration-quick) var(--ease-quick);
display: flex; align-items: center; gap: 14px;
}
.demo-btn:hover { border-color: var(--riviera); transform: translateX(4px); }
.demo-btn.is-active {
background: var(--ink); color: white; border-color: var(--ink);
}
.demo-btn.is-active .demo-btn-icon { color: var(--champagne); }
.demo-btn-icon {
width: 28px; height: 28px; border-radius: 8px;
background: var(--ivory-warm); color: var(--riviera-deep);
display: grid; place-items: center; flex-shrink: 0;
transition: all var(--duration-quick);
}
/* --- Galerie / Réalisations --- */
.gallery-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.gallery-item {
border-radius: var(--radius-sm); overflow: hidden;
box-shadow: var(--shadow-sm); position: relative;
aspect-ratio: 4/3; background: var(--ivory-warm);
}
.gallery-item::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(10,61,98,0.4) 100%);
opacity: 0; transition: opacity var(--duration-quick);
}
.gallery-item svg, .gallery-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s var(--ease);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover svg, .gallery-item:hover img { transform: scale(1.08); }
.gallery-caption {
position: absolute; bottom: 12px; left: 14px; right: 14px;
color: white; font-size: 0.82rem; font-weight: 500;
opacity: 0; transform: translateY(6px);
transition: opacity var(--duration-quick), transform var(--duration-quick);
z-index: 2;
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
/* --- Carrousel de témoignages --- */
.testimonials-carousel {
position: relative; max-width: 1000px; margin: 0 auto;
}
.testimonials-track-wrap {
overflow: hidden; border-radius: var(--radius); padding: 8px 4px;
}
.testimonials-track {
display: flex; gap: 24px;
transition: transform 0.65s var(--ease);
will-change: transform;
}
.testimonial-card {
flex: 0 0 calc((100% - 48px) / 3);
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius); padding: 32px 30px;
box-shadow: var(--shadow-sm); position: relative;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
display: flex; flex-direction: column;
}
.testimonial-card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(160deg, rgba(200,146,56,0.06), transparent 60%);
opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card:hover::before { opacity: 1; }
.testimonial-quote-mark {
position: absolute; top: 18px; right: 26px;
font-family: var(--font-display); font-size: 4rem; font-weight: 700;
color: var(--riviera); opacity: 0.14; line-height: 1;
}
.testimonial-stars {
color: var(--riviera); font-size: 1.05rem;
letter-spacing: 3px; margin-bottom: 16px;
}
.testimonial-card blockquote {
font-family: var(--font-display); font-size: 1.05rem;
color: var(--ink); font-style: italic;
margin-bottom: 22px; line-height: 1.55; flex: 1;
font-variation-settings: "SOFT" 100;
}
.testimonial-author {
display: flex; align-items: center; gap: 12px;
padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.testimonial-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--azure-signal), var(--azure-deep));
color: white; display: grid; place-items: center; flex-shrink: 0;
font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
box-shadow: 0 4px 10px rgba(10,61,98,0.18);
}
.testimonial-name { font-weight: 600; font-size: 0.93rem; color: var(--ink); }
.testimonial-role { font-size: 0.8rem; color: var(--graphite-soft); margin-top: 2px; }
/* Contrôles carrousel */
.carousel-controls {
display: flex; align-items: center; justify-content: center;
gap: 22px; margin-top: 34px;
}
.carousel-arrow {
width: 46px; height: 46px; border-radius: 50%;
background: white; border: 1px solid var(--line);
color: var(--azure-deep); display: grid; place-items: center;
cursor: pointer; transition: all 0.3s var(--ease);
box-shadow: var(--shadow-sm);
}
.carousel-arrow:hover:not(:disabled) {
background: var(--azure-deep); color: white; border-color: var(--azure-deep);
transform: scale(1.05);
}
.carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-dots {
display: flex; gap: 9px; align-items: center;
}
.carousel-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--line); border: 0; padding: 0; cursor: pointer;
transition: all 0.35s var(--ease);
}
/* V41 : pastille gérée via ::before (cible tactile 30px) */
.carousel-dot:hover:not(.is-active) { background: var(--graphite-soft); }
/* ===== 8. FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius-sm); overflow: hidden;
transition: border-color var(--duration-quick), box-shadow var(--duration-quick);
}
.faq-item:hover { border-color: var(--line); }
.faq-item.open { border-color: var(--riviera); box-shadow: var(--shadow-sm); }
.faq-question {
width: 100%; text-align: left; background: none; border: none; cursor: pointer;
padding: 22px 26px; font-family: var(--font-body); font-weight: 600;
font-size: 1rem; color: var(--ink);
display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-chevron {
position: relative; width: 16px; height: 16px; flex-shrink: 0;
transition: transform var(--duration-quick);
}
.faq-chevron::before, .faq-chevron::after {
content: ''; position: absolute; background: var(--riviera-deep);
border-radius: 2px;
}
.faq-chevron::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-chevron::after {
top: 0; left: 7px; width: 2px; height: 16px;
transition: transform var(--duration-quick);
}
.faq-item.open .faq-chevron::after { transform: scaleY(0); }
.faq-answer {
max-height: 0; overflow: hidden;
transition: max-height 0.4s var(--ease);
}
.faq-answer-inner { padding: 0 26px 24px; font-size: 0.97rem; color: var(--graphite); line-height: 1.65; }
/* ===== 9. FORMULAIRE & CONTACT ===== */
.section-contact { background: var(--ivory-warm); position: relative; overflow: hidden; }
.section-contact::before {
content: ''; position: absolute; top: -100px; right: -100px;
width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(237,215,158,0.4) 0%, transparent 70%);
pointer-events: none;
}
.section-contact::after {
content: ''; position: absolute; bottom: -150px; left: -150px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(184,221,243,0.3) 0%, transparent 70%);
pointer-events: none;
}
.contact-grid {
display: grid; grid-template-columns: 0.85fr 1.15fr;
gap: 40px; align-items: start; position: relative; z-index: 1;
}
.contact-info {
background: linear-gradient(160deg, var(--azure-deep) 0%, var(--azure-night) 100%);
color: var(--ivory); border-radius: var(--radius);
padding: 40px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.contact-info::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--riviera-light), var(--riviera));
}
.contact-info::after {
content: ''; position: absolute; bottom: -80px; right: -80px;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(212,162,76,0.15) 0%, transparent 70%);
}
.contact-info h3 { color: var(--ivory); margin-bottom: 8px; font-size: 1.6rem; }
.contact-info-lead { color: rgba(248,244,236,0.75); font-size: 0.98rem; margin-bottom: 26px; }
.contact-list {
list-style: none; display: flex; flex-direction: column;
gap: 16px; margin-bottom: 28px; position: relative; z-index: 1;
}
.contact-list li {
display: flex; align-items: center; gap: 14px;
font-size: 0.96rem; color: rgba(248,244,236,0.9);
}
.contact-list a { color: var(--champagne); font-weight: 500; }
.contact-list a:hover { color: var(--ivory); }
.contact-list-icon {
width: 38px; height: 38px; border-radius: 10px;
background: rgba(212,162,76,0.15); color: var(--champagne);
display: grid; place-items: center; flex-shrink: 0;
}
.contact-buttons {
display: flex; flex-direction: column; gap: 10px;
position: relative; z-index: 1;
}
.contact-form-wrap {
background: white; border: 1px solid var(--line-soft);
border-radius: var(--radius); padding: 40px;
box-shadow: var(--shadow-md);
}
.form-title {
font-family: var(--font-display); font-size: 1.4rem;
color: var(--ink); margin-bottom: 6px;
}
.form-subtitle { color: var(--graphite); font-size: 0.94rem; margin-bottom: 28px; }
.quote-form { 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: 0.88rem; font-weight: 600; color: var(--ink);
letter-spacing: -0.005em;
}
.req { color: var(--danger); }
.quote-form input, .quote-form select, .quote-form textarea {
font-family: var(--font-body); font-size: 0.98rem; color: var(--ink);
padding: 13px 16px; border: 1.5px solid var(--line);
border-radius: 10px; background: var(--ivory);
transition: border-color var(--duration-quick),
box-shadow var(--duration-quick),
background var(--duration-quick);
width: 100%;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
outline: none; border-color: var(--riviera);
background: white;
box-shadow: 0 0 0 4px rgba(212,162,76,0.12);
}
.quote-form textarea { resize: vertical; min-height: 100px; }
.error-msg { font-size: 0.82rem; color: var(--danger); min-height: 0; }
.form-group.invalid input, .form-group.invalid select {
border-color: var(--danger);
}
.form-check { flex-direction: row; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.form-check input { width: auto; margin-top: 4px; accent-color: var(--riviera); }
.form-check label { font-weight: 400; font-size: 0.88rem; color: var(--graphite); }
.form-check a { color: var(--riviera-deep); text-decoration: underline; }
.form-feedback { margin-top: 6px; padding: 0; font-weight: 500; font-size: 0.94rem; }
.form-feedback.success {
color: #065F46; background: #ECFDF5; padding: 14px 18px;
border-radius: 10px; border: 1px solid #A7F3D0;
}
.form-feedback.error { color: var(--danger); }
/* ===== 10. FOOTER ===== */
.site-footer {
background: linear-gradient(160deg, var(--azure-night) 0%, #030f1c 100%);
color: rgba(248,244,236,0.75);
padding: 70px 0 0; position: relative; overflow: hidden;
}
.site-footer::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--riviera), transparent);
}
.footer-inner {
display: grid; grid-template-columns: 1.5fr 1fr 1fr;
gap: 40px; padding-bottom: 50px;
}
.footer-brand-block { max-width: 340px; }
.footer-brand-logo {
display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.footer-brand-name {
font-family: var(--font-display); font-weight: 600;
font-size: 1.32rem; color: white;
}
.footer-brand-name .accent {
color: var(--champagne); font-style: italic;
font-variation-settings: "SOFT" 100;
}
.footer-tagline {
color: var(--champagne); font-style: italic;
font-family: var(--font-display); font-size: 1rem;
margin-bottom: 20px;
font-variation-settings: "SOFT" 80;
}
.footer-contact { font-size: 0.92rem; line-height: 1.9; color: rgba(248,244,236,0.7); }
.footer-contact a { color: var(--champagne); }
.footer-contact a:hover { color: white; }
.site-footer h3 {
color: white; margin-bottom: 20px; font-size: 1.05rem;
font-weight: 600; letter-spacing: -0.01em;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
color: rgba(248,244,236,0.65); font-size: 0.92rem;
transition: color var(--duration-quick);
}
.footer-links a:hover { color: var(--champagne); }
.footer-social { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.footer-social a {
display: inline-flex; align-items: center; gap: 10px;
color: rgba(248,244,236,0.65); font-size: 0.92rem;
}
.footer-social a:hover { color: var(--champagne); }
.footer-social-icon {
width: 32px; height: 32px; border-radius: 8px;
background: rgba(212,162,76,0.15); color: var(--champagne);
display: grid; place-items: center;
}
.footer-bottom {
border-top: 1px solid rgba(248,244,236,0.1);
padding: 22px 0; text-align: center;
}
.footer-bottom p { font-size: 0.84rem; color: rgba(248,244,236,0.5); }
/* ===== 11. BOUTONS FLOTTANTS ===== */
.whatsapp-float {
position: fixed;
bottom: calc(26px + env(safe-area-inset-bottom, 0px));
right: calc(26px + env(safe-area-inset-right, 0px));
z-index: 900;
width: 60px; height: 60px; border-radius: 50%;
background: var(--whatsapp); color: white;
display: grid; place-items: center;
box-shadow: 0 10px 30px rgba(37,211,102,0.4);
transition: transform var(--duration-quick) var(--ease-quick),
box-shadow var(--duration-quick);
animation: whatsappPulse 2.4s infinite;
}
.whatsapp-float:hover { transform: scale(1.08); }
@keyframes whatsappPulse {
0% { box-shadow: 0 10px 30px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.35); }
70% { box-shadow: 0 10px 30px rgba(37,211,102,0.4), 0 0 0 18px rgba(37,211,102,0); }
100% { box-shadow: 0 10px 30px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0); }
}
.back-to-top {
position: fixed;
bottom: calc(100px + env(safe-area-inset-bottom, 0px));
right: calc(30px + env(safe-area-inset-right, 0px));
z-index: 900;
width: 46px; height: 46px; border-radius: 50%;
border: none; cursor: pointer;
background: var(--ink); color: var(--champagne);
display: grid; place-items: center;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity var(--duration-quick), visibility var(--duration-quick),
transform var(--duration-quick), background var(--duration-quick);
box-shadow: var(--shadow-md);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* ===== Correctifs audit conversion — 01/09/2026 ===== */
.col-info .fb-line,.cf-tools .fb-line{color:#C6DEEE;}
.col-info .fb-line strong,.col-info .fb-line b,.cf-tools .fb-line strong,.cf-tools .fb-line b{color:#FBF7EF;}
.fq-m,.fq-p{min-width:44px;min-height:44px;}
.fb-grid-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 6px;}
.ci-skip{min-height:44px;}
@media (max-width:860px){.whatsapp-float{bottom:calc(90px + env(safe-area-inset-bottom,0px));}}
/* ===== fin correctifs ===== */
.back-to-top.cta-clash { opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; }
.back-to-top:hover { background: var(--azure-deep); }
/* Sticky mobile CTA */
.mobile-sticky-cta {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 950;
padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
background: rgba(248,244,236,0.95);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
border-top: 1px solid var(--line);
display: none;
transform: translateY(100%); transition: transform var(--duration) var(--ease);
}
.mobile-sticky-cta.visible { transform: translateY(0); }
.mobile-sticky-cta .btn { width: 100%; }
/* ===== 12. ANIMATIONS AU DÉFILEMENT ===== */
.reveal {
opacity: 0; transform: translateY(28px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
/* ===== 13. RESPONSIVE ===== */
/* Tablette large */
@media (max-width: 1200px) {
.header-cta { display: none; }
.main-nav ul { gap: 2px; }
.main-nav a { padding: 6px 10px; font-size: 0.88rem; }
}
@media (max-width: 1024px) {
.benefits-grid { grid-template-columns: repeat(2, 1fr); }
.solutions-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-card { flex-basis: calc((100% - 24px) / 2); }
.sectors-grid { grid-template-columns: repeat(3, 1fr); }
.process-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.hero-grid { gap: 40px; }
.hero-visual { height: 480px; }
}
/* Tablette */
@media (max-width: 860px) {
.menu-toggle { display: flex; }
.header-cta { display: none; }
.main-nav {
position: fixed; top: var(--header-h); left: 0; right: 0;
background: rgba(248,244,236,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
max-height: 0; overflow: hidden;
transition: max-height 0.4s var(--ease); box-shadow: var(--shadow-md);
}
.main-nav.open { max-height: 80vh; }
.main-nav ul {
flex-direction: column; gap: 0;
padding: 12px 24px 24px; align-items: stretch;
}
.main-nav li { border-bottom: 1px solid var(--line-soft); }
.main-nav a {
display: block; padding: 16px 0;
font-size: 1.05rem; border-radius: 0;
}
.main-nav a:hover { background: transparent; }
.hero-grid { grid-template-columns: 1fr; text-align: center; }
.hero-badge { margin-left: auto; margin-right: auto; }
.hero-lead { margin-left: auto; margin-right: auto; }
.hero-cta { justify-content: center; }
.hero-trust { justify-content: center; margin-left: auto; margin-right: auto; }
.hero-visual { order: -1; height: 460px; }
.nfc-grid { grid-template-columns: 1fr; gap: 40px; }
.demo-wrap { grid-template-columns: 1fr; gap: 40px; }
.contact-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand-block { grid-column: 1 / -1; max-width: none; }
.mobile-sticky-cta { display: block; }
}
/* Mobile */
@media (max-width: 560px) {
body { font-size: 16px; }
.section { padding: 72px 0; }
.container { padding: 0 20px; }
.benefits-grid, .solutions-grid, .sectors-grid,
.pricing-grid, .gallery-grid,
.process-grid { grid-template-columns: 1fr; }
.testimonial-card { flex-basis: 100%; padding: 26px 22px; }
.carousel-controls { margin-top: 26px; gap: 16px; }
.carousel-arrow { width: 42px; height: 42px; }
.stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.form-row { grid-template-columns: 1fr; }
.price-featured { transform: none; }
.price-featured:hover { transform: translateY(-4px); }
.footer-inner { grid-template-columns: 1fr; }
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; }
.contact-info, .contact-form-wrap { padding: 28px 24px; }
/* V41 : montée déplacée vers le media 860px */
.back-to-top {
bottom: calc(150px + env(safe-area-inset-bottom, 0px));
right: calc(22px + env(safe-area-inset-right, 0px));
}
.section-head { margin-bottom: 44px; }
.floating-card { width: 280px; height: 180px; padding: 22px; }
.floating-phone { width: 160px; height: 320px; }
.card-name { font-size: 1.15rem; }
}
/* =============================================================
V2 — COUCHE CINÉMATIQUE
Hero diaporama, marquee, sliders photo, bandes parallax,
lightbox, curseur, portraits. Les règles ci-dessous priment
(cascade) sur les règles historiques conservées plus haut.
============================================================= */
/* --- Voile d'introduction --- */
.intro-veil {
position: fixed; inset: 0; z-index: 3000; pointer-events: none;
background: linear-gradient(160deg, var(--azure-night), var(--azure-deep));
display: grid; place-items: center;
animation: veilOut 0.9s var(--ease) 1.5s forwards;
}
.intro-center { text-align: center; }
.intro-logo {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--ivory);
letter-spacing: -0.02em; opacity: 0;
animation: introIn 0.9s var(--ease) 0.15s forwards;
}
.intro-logo .accent { font-style: italic; color: var(--champagne); font-variation-settings: "SOFT" 100; }
.intro-line {
width: 220px; transform: scaleX(0); height: 1.5px; margin: 18px auto 14px;
background: linear-gradient(90deg, transparent, var(--riviera), transparent);
animation: lineGrow 1s var(--ease) 0.4s forwards;
}
.intro-sub {
font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
color: rgba(248,244,236,0.55); opacity: 0;
animation: introIn 0.9s var(--ease) 0.55s forwards;
}
@media (max-width: 374px) {
/* Le texte est zoomé (scale 1.16) à la sortie du préchargeur : on réduit
le tracking pour qu'il ne dépasse jamais du viewport le plus étroit. */
.intro-sub { font-size: 0.66rem; letter-spacing: 0.2em; }
}
@keyframes introIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { to { transform: scaleX(1); } }
@keyframes veilOut { to { opacity: 0; visibility: hidden; } }
/* --- HERO cinématique --- */
.hero {
min-height: 100svh;
display: flex; align-items: center;
padding: calc(var(--header-h) + 48px) 0 120px;
background: var(--azure-night);
color: var(--ivory);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
position: absolute; inset: 0; opacity: 0;
transition: opacity 1.3s var(--ease-quick);
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-active img { animation: kenBurns 9s linear forwards; }
@keyframes kenBurns { from { transform: scale(1.03); } to { transform: scale(1.15); } }
.hero-veil {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(3,18,30,0.94) 0%, rgba(5,37,56,0.82) 38%, rgba(5,37,56,0.34) 72%, rgba(3,18,30,0.55) 100%);
}
.hero-veil::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(3,18,30,0.42) 0%, transparent 24%, transparent 60%, rgba(3,15,26,0.8) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-title { color: var(--ivory); text-shadow: 0 2px 30px rgba(3,18,30,0.4); }
.hero-title .h-accent { color: var(--champagne); }
.hero-lead { color: rgba(248,244,236,0.85); }
.hero-lead strong { color: #fff; }
.hero-badge {
background: rgba(5,37,56,0.5); border-color: rgba(235,215,161,0.3);
color: rgba(248,244,236,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hero-badge strong { color: var(--champagne); }
.hero-trust { border-top-color: rgba(248,244,236,0.22); }
.hero-trust-item { color: rgba(248,244,236,0.82); }
.hero-trust-item svg { color: var(--riviera-light); }
.hero .btn-outline { color: var(--ivory); border-color: rgba(248,244,236,0.55); }
.hero .btn-outline:hover { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); }
.hero-sparkle { display: none; }
/* Navigation du diaporama */
.hero-slidenav { display: flex; align-items: center; gap: 18px; margin-top: 46px; }
.hero-slidenav-item {
display: inline-flex; align-items: center; gap: 10px;
background: none; border: 0; cursor: pointer; padding: 8px 2px;
color: rgba(248,244,236,0.55);
font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
transition: color 0.3s var(--ease-quick);
}
.hero-slidenav-item:hover { color: var(--ivory); }
.hero-slidenav-item .bar {
width: 36px; height: 2px; border-radius: 2px;
background: rgba(248,244,236,0.25); position: relative; overflow: hidden;
}
.hero-slidenav-item .bar::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, var(--riviera), var(--champagne));
transform: scaleX(0); transform-origin: left;
}
.hero-slidenav-item.is-active { color: var(--champagne); }
.hero-slidenav-item.is-active .bar::after { animation: lineGrow var(--hero-delay, 7s) linear forwards; }
.hero-slide-caption {
position: absolute; right: 28px; bottom: 30px; z-index: 2;
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 18px; border-radius: var(--radius-pill);
background: rgba(3,18,30,0.5); border: 1px solid rgba(235,215,161,0.25);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
color: rgba(248,244,236,0.85);
font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
}
.hero-slide-caption .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--riviera); box-shadow: 0 0 12px var(--riviera);
}
.hero-scroll {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
color: rgba(248,244,236,0.6);
display: flex; flex-direction: column; align-items: center; gap: 9px;
font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.hero-scroll .mouse {
width: 24px; height: 38px; border: 1.5px solid rgba(248,244,236,0.4);
border-radius: 14px; display: flex; justify-content: center; padding-top: 7px;
}
.hero-scroll .mouse span {
width: 3px; height: 8px; border-radius: 2px; background: var(--champagne);
animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }
/* Inclinaison 3D du visuel */
.hero-visual { perspective: 1300px; }
#hero-tilt {
position: absolute; inset: 0;
transform-style: preserve-3d;
transition: transform 0.3s ease-out;
will-change: transform;
}
.floating-card { box-shadow: 0 50px 100px -20px rgba(0,0,0,0.65), 0 20px 40px -15px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.15); }
/* --- Marquee Côte d'Azur --- */
.marquee {
background: var(--azure-night);
border-top: 1px solid rgba(235,215,161,0.16);
border-bottom: 1px solid rgba(235,215,161,0.16);
padding: 15px 0; overflow: hidden; position: relative; z-index: 2;
}
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
display: inline-flex; align-items: center; gap: 24px; padding: 0 24px;
font-family: var(--font-display); font-size: 1rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(248,244,236,0.55); white-space: nowrap;
}
.marquee-item .star { color: var(--riviera); font-size: 0.75em; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
/* --- Solutions : photos --- */
.solution-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.solution-card:hover .solution-visual img { transform: scale(1.06); }
.solution-visual::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(5,37,56,0.14) 0%, rgba(5,37,56,0) 40%, rgba(5,37,56,0.5) 100%);
}
.solution-visual .solution-tag { z-index: 2; }
.solution-nfc {
position: absolute; right: 14px; bottom: 12px; z-index: 2;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(248,244,236,0.94); color: var(--azure-deep);
display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
/* --- Secteurs : slider photo --- */
.sectors-slider-wrap { position: relative; }
.sectors-slider {
display: flex; gap: 18px;
overflow-x: auto; scroll-snap-type: x mandatory;
padding: 6px 4px 24px; cursor: grab;
scrollbar-width: none; -ms-overflow-style: none;
}
.sectors-slider::-webkit-scrollbar { display: none; }
.sectors-slider.dragging { cursor: grabbing; scroll-snap-type: none; }
.sector-photo-card {
position: relative; flex: 0 0 282px; aspect-ratio: 3/4;
border-radius: var(--radius); overflow: hidden;
scroll-snap-align: start; box-shadow: var(--shadow-md);
isolation: isolate; user-select: none;
}
.sector-photo-card img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: -1;
transition: transform 0.9s var(--ease);
-webkit-user-drag: none;
}
.sector-photo-card:hover img { transform: scale(1.08); }
.sector-photo-card::after {
content: ''; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(5,37,56,0.06) 30%, rgba(3,18,30,0.88) 100%);
}
.sector-photo-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 1; }
.sector-photo-body h3 { color: var(--ivory); font-size: 1.22rem; margin-bottom: 6px; }
.sector-photo-body p { color: rgba(248,244,236,0.8); font-size: 0.89rem; margin: 0; line-height: 1.5; }
.sector-photo-num {
position: absolute; top: 16px; left: 18px; z-index: 1;
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
color: var(--champagne);
background: rgba(3,18,30,0.45); border: 1px solid rgba(235,215,161,0.3);
padding: 5px 12px; border-radius: var(--radius-pill);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sectors-nav { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
/* --- Bandes parallax --- */
.band {
position: relative; padding: 140px 0; overflow: hidden;
color: var(--ivory); text-align: center;
}
.band-bg { position: absolute; inset: 0; }
.band-bg img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.18); will-change: transform;
}
.band::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(5,37,56,0.78), rgba(3,18,30,0.84));
}
.band .container { position: relative; z-index: 2; }
.band-quote {
font-family: var(--font-display); font-style: italic;
font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.25;
color: var(--ivory); max-width: 860px; margin: 0 auto 16px;
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.band-quote .gold { color: var(--champagne); }
.band-sub { color: rgba(248,244,236,0.78); font-size: 1.04rem; margin-bottom: 34px; }
.band .btn-outline { color: var(--ivory); border-color: rgba(248,244,236,0.55); }
.band .btn-outline:hover { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); }
/* --- Galerie : captions visibles + zoom --- */
.gallery-item { cursor: zoom-in; }
.gallery-item::after {
opacity: 1;
background: linear-gradient(180deg, transparent 52%, rgba(3,18,30,0.78) 100%);
}
.gallery-caption { opacity: 1; transform: none; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
/* --- Lightbox --- */
.lightbox {
position: fixed; inset: 0; z-index: 2500;
background: rgba(3,15,26,0.94);
display: grid; place-items: center;
opacity: 0; visibility: hidden;
transition: opacity 0.35s var(--ease-quick), visibility 0.35s;
padding: 24px;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: min(1100px, 94vw); margin: 0; transform: scale(0.96); transition: transform 0.35s var(--ease); }
.lightbox.open .lightbox-figure { transform: scale(1); }
.lightbox-figure img {
max-width: 100%; max-height: 78vh; object-fit: contain;
border-radius: 14px; box-shadow: 0 50px 140px rgba(0,0,0,0.55);
margin: 0 auto;
}
.lightbox-caption {
text-align: center; color: rgba(248,244,236,0.88);
margin-top: 16px; font-size: 0.96rem;
font-family: var(--font-display); font-style: italic;
}
.lightbox-btn { position: absolute; z-index: 2; background: rgba(248,244,236,0.1); border-color: rgba(248,244,236,0.25); color: var(--ivory); }
.lightbox-btn:hover:not(:disabled) { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); transform: scale(1.05); }
.lightbox-close-btn { top: 22px; right: 22px; }
.lightbox-prev-btn { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-next-btn { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-prev-btn:hover, .lightbox-next-btn:hover { transform: translateY(-50%) scale(1.05) !important; }
/* --- Témoignages : portraits --- */
.testimonial-avatar { overflow: hidden; padding: 0; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* --- Curseur personnalisé --- */
@media (pointer: fine) {
.cursor-dot, .cursor-ring {
position: fixed; top: 0; left: 0; z-index: 4000;
pointer-events: none; border-radius: 50%;
transform: translate(-50%, -50%);
}
.cursor-dot { width: 7px; height: 7px; background: var(--riviera); }
.cursor-ring {
width: 38px; height: 38px;
border: 1.5px solid rgba(200,146,56,0.55);
transition: width 0.25s var(--ease-quick), height 0.25s var(--ease-quick),
border-color 0.25s, background 0.25s;
}
.cursor-ring.is-hover {
width: 60px; height: 60px;
border-color: var(--champagne);
background: rgba(235,215,161,0.08);
}
}
@media (prefers-reduced-motion: reduce) {
.cursor-dot, .cursor-ring { display: none; }
}
/* --- Responsive V2 --- */
@media (max-width: 1024px) {
.hero-visual { height: 470px; }
}
@media (max-width: 860px) {
.hero { min-height: auto; padding-bottom: 96px; }
.hero-visual { height: 430px; }
.hero-slidenav { justify-content: center; }
.hero-slide-caption { right: 16px; bottom: 16px; font-size: 0.66rem; padding: 8px 14px; }
.hero-scroll { display: none; }
.band { padding: 96px 0; }
.sector-photo-card { flex-basis: 246px; }
.lightbox-prev-btn { left: 10px; }
.lightbox-next-btn { right: 10px; }
}
@media (max-width: 560px) {
.hero-slidenav { gap: 10px; flex-wrap: wrap; }
.marquee-item { font-size: 0.82rem; padding: 0 16px; gap: 16px; }
.sector-photo-card { flex-basis: 78vw; }
.band-quote { font-size: 1.5rem; }
.hero-slide-caption { display: none; }
}
/* =============================================================
V3 — DIRECTION ARTISTIQUE « NUIT RIVIERA »
Palette approfondie, sections sombres en verre, header
adaptatif, typographie éditoriale élargie.
============================================================= */
:root {
--ivory: #FBF7EF;
--ivory-warm: #F4EBDA;
--ink: #0B1620;
--azure-night: #061421;
--azure-deep: #0B2A44;
--night-2: #0A2238;
--riviera-light: #E6C077;
--champagne: #F0DCA8;
--shadow-lg: 0 30px 80px rgba(6, 20, 33, 0.18);
}
body { background: var(--ivory); }
/* Typographie éditoriale élargie */
h1 { font-size: clamp(2.7rem, 6vw, 4.7rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.section-head { margin-bottom: 72px; }
.hero-lead { font-size: 1.22rem; }
/* Boutons or plus riches */
.btn-gold {
background: linear-gradient(135deg, #F0DCA8 0%, #DCA94F 48%, #C89238 100%);
box-shadow: 0 14px 34px rgba(200, 146, 56, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-gold:hover { box-shadow: 0 20px 48px rgba(200, 146, 56, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
/* --- Header adaptatif : transparent sur le hero, ivoire au scroll --- */
.site-header:not(.scrolled) {
background: linear-gradient(180deg, rgba(4, 14, 24, 0.6) 0%, rgba(4, 14, 24, 0) 100%);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-bottom-color: transparent;
}
.site-header:not(.scrolled) .brand-name { color: #fff; }
.site-header:not(.scrolled) .brand-name .accent { color: var(--champagne); }
.site-header:not(.scrolled) .brand-tag { color: rgba(248, 244, 236, 0.65); }
.site-header:not(.scrolled) .main-nav a { color: rgba(248, 244, 236, 0.85); }
.site-header:not(.scrolled) .main-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.site-header:not(.scrolled) .menu-toggle span { background: #fff; }
.site-header:not(.scrolled) .lang-toggle { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); }
@media (max-width: 860px) {
.site-header:not(.scrolled) .main-nav a { color: var(--graphite); }
}
/* --- Sections claires : papier champagne dégradé --- */
.section-alt { background: linear-gradient(180deg, var(--ivory-warm) 0%, var(--ivory) 100%); }
/* --- Sections sombres « nuit Riviera » --- */
.section-dark2 {
background:
radial-gradient(ellipse 80% 60% at 18% 0%, rgba(36, 118, 184, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 85% 100%, rgba(200, 146, 56, 0.14) 0%, transparent 60%),
linear-gradient(165deg, #081A2C 0%, #061421 100%);
}
.section-dark2::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.05;
}
.section-dark2 > .container { position: relative; z-index: 1; }
.section-dark2 h2, .section-dark2 h3 { color: var(--ivory); }
.section-dark2 .h-accent { color: var(--champagne); }
.section-dark2 p, .section-dark2 .section-intro { color: rgba(248, 244, 236, 0.72); }
.section-dark2 .eyebrow { color: var(--champagne); }
/* Cartes bénéfices en verre */
.section-dark2 .benefit-card {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(240, 220, 168, 0.15);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: none;
}
.section-dark2 .benefit-card:hover {
background: rgba(255, 255, 255, 0.075);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4);
}
.section-dark2 .benefit-card h3 { color: var(--ivory); }
.section-dark2 .benefit-card p { color: rgba(248, 244, 236, 0.68); }
.section-dark2 .benefit-icon { background: rgba(240, 220, 168, 0.12); color: var(--champagne); }
/* Témoignages en verre */
.section-dark2 .testimonial-card {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(240, 220, 168, 0.15);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: none;
}
.section-dark2 .testimonial-card:hover { box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4); }
.section-dark2 .testimonial-card blockquote { color: var(--ivory); }
.section-dark2 .testimonial-name { color: #fff; }
.section-dark2 .testimonial-role { color: rgba(248, 244, 236, 0.6); }
.section-dark2 .testimonial-author { border-top-color: rgba(248, 244, 236, 0.15); }
.section-dark2 .testimonial-quote-mark { opacity: 0.25; }
.section-dark2 .carousel-arrow {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(248, 244, 236, 0.25); color: var(--ivory);
}
.section-dark2 .carousel-arrow:hover:not(:disabled) { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); }
.section-dark2 .carousel-dot { background: rgba(248, 244, 236, 0.25); }
.section-dark2
/* --- Stats bar accordée à la nuit --- */
.stats-bar { background: linear-gradient(180deg, #061421 0%, #0A2238 100%); }
/* --- Tarifs : formule vedette en nuit + or --- */
.price-featured {
background: linear-gradient(165deg, #0B2A44 0%, #061421 100%);
border-color: rgba(200, 146, 56, 0.55);
}
.price-featured h3, .price-featured .price-amount { color: var(--ivory); }
.price-featured .price-tagline { color: rgba(248, 244, 236, 0.6); }
.price-featured .price-features li { color: rgba(248, 244, 236, 0.9); }
/* --- Hero : voile allégé pour révéler la photo --- */
.hero-veil {
background: linear-gradient(100deg, rgba(3, 16, 27, 0.93) 0%, rgba(5, 30, 48, 0.76) 36%, rgba(5, 30, 48, 0.2) 72%, rgba(3, 16, 27, 0.5) 100%);
}
/* --- Galerie : révélation clip-path + élévation --- */
.gallery-item { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(6, 20, 33, 0.28); }
.gallery-item.reveal {
clip-path: inset(10% 10% 10% 10% round 14px);
transition: clip-path 1s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.gallery-item.reveal.visible { clip-path: inset(0 0 0 0 round 12px); }
/* --- Solutions : cartes plus haut de gamme --- */
.solution-card { border-color: rgba(11, 42, 68, 0.08); }
.solution-body h3 { font-size: 1.35rem; }
/* --- Marquee un peu plus présent --- */
.marquee-item { font-size: 1.08rem; color: rgba(248, 244, 236, 0.6); }
/* =============================================================
V4 — FORMULAIRE PREMIUM, DÉMO PHOTO, FINITIONS
============================================================= */
/* --- Section devis : alignement & style --- */
.section-contact { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-warm) 100%); }
.contact-grid { gap: 32px; }
.contact-info {
position: sticky; top: calc(var(--header-h) + 28px);
border-radius: 24px; padding: 44px 40px;
}
.contact-form-wrap {
border-radius: 24px; padding: 48px;
border: 1px solid rgba(11, 42, 68, 0.08);
box-shadow: 0 34px 90px rgba(6, 20, 33, 0.12);
}
.form-title { font-size: 1.7rem; }
.form-subtitle { margin-bottom: 30px; }
.quote-form { gap: 20px; }
.form-row { gap: 18px; }
.form-group { gap: 8px; }
.form-group label {
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
font-weight: 600; color: var(--ink);
}
.quote-form input, .quote-form select, .quote-form textarea {
padding: 14px 16px; border-radius: 12px;
background: #FDFBF5; border-color: #E6DCC4;
font-size: 0.97rem;
}
.quote-form input, .quote-form select { height: 52px; }
.quote-form input:hover, .quote-form select:hover, .quote-form textarea:hover { border-color: #CDBD97; }
.quote-form select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center;
padding-right: 42px; cursor: pointer;
}
.quote-form textarea { min-height: 120px; }
.error-msg:empty { display: none; }
.form-check {
background: rgba(200, 146, 56, 0.07);
border: 1px dashed rgba(200, 146, 56, 0.4);
border-radius: 12px; padding: 14px 16px;
}
.form-check input { width: 18px; height: 18px; flex-shrink: 0; }
.form-check label { flex: 1; min-width: 200px; }
.form-note {
display: flex; align-items: center; justify-content: center; gap: 8px;
color: var(--graphite-soft); font-size: 0.84rem; margin-top: -4px;
}
.form-note svg { color: var(--riviera-deep); flex-shrink: 0; }
@media (max-width: 860px) {
.contact-info { position: static; }
.contact-form-wrap { padding: 32px 24px; }
}
/* --- Démo : en-tête photo + avatar portrait --- */
.demo-header { position: relative; }
.demo-avatar-photo {
padding: 0; overflow: hidden; background: none;
border: 2px solid rgba(240, 220, 168, 0.85);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.demo-avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.demo-phone-container { box-shadow: 0 40px 90px -10px rgba(6, 20, 33, 0.45), 0 0 0 1px rgba(200, 146, 56, 0.15); }
/* --- Tableau comparatif accordé à la nuit --- */
.compare-table thead th { background: linear-gradient(165deg, #0B2A44 0%, #061421 100%); }
/* --- FAQ raffinée --- */
.faq-item { border-radius: 14px; }
.faq-item.open { border-color: rgba(200, 146, 56, 0.55); }
.faq-question { transition: color var(--duration-quick); }
.faq-item:hover .faq-question { color: var(--riviera-deep); }
/* --- Hero mobile : visuel mieux cadré --- */
@media (max-width: 560px) {
.hero-visual { height: 400px; }
.floating-card { width: 248px; height: 162px; padding: 20px; }
.floating-phone { width: 150px; height: 300px; right: 2%; }
}
/* =============================================================
V5 — MODALES LÉGALES + CORRECTIFS DE CONTRASTE
============================================================= */
.legal-modal {
position: fixed; inset: 0; z-index: 2600;
background: rgba(3, 15, 26, 0.82);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: grid; place-items: center; padding: 24px;
opacity: 0; visibility: hidden;
transition: opacity 0.3s var(--ease-quick), visibility 0.3s;
}
.legal-modal.open { opacity: 1; visibility: visible; }
.legal-sheet {
position: relative; background: var(--ivory);
max-width: 740px; width: 100%; max-height: 82vh; overflow-y: auto;
border-radius: 20px; padding: 44px 46px;
box-shadow: 0 50px 140px rgba(0, 0, 0, 0.5);
transform: translateY(16px); transition: transform 0.35s var(--ease);
}
.legal-modal.open .legal-sheet { transform: none; }
.legal-close {
position: absolute; top: 20px; right: 20px; z-index: 2;
background: rgba(248, 244, 236, 0.12); border-color: rgba(248, 244, 236, 0.35); color: #fff;
}
.legal-close:hover { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); }
.legal-article { display: none; }
.legal-article.active { display: block; }
.legal-article h3 {
font-size: 1.7rem; margin-bottom: 20px; color: var(--ink);
padding-bottom: 14px; border-bottom: 2px solid var(--champagne);
}
.legal-article h3 { margin: 22px 0 8px; font-size: 1.02rem; color: var(--ink); }
.legal-article p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 10px; }
.legal-article a { color: var(--riviera-deep); text-decoration: underline; }
.legal-note {
background: rgba(200, 146, 56, 0.08);
border: 1px dashed rgba(200, 146, 56, 0.4);
padding: 12px 16px; border-radius: 10px; font-size: 0.86rem !important;
}
@media (max-width: 560px) { .legal-sheet { padding: 30px 22px; max-height: 86vh; } }
/* Bouton "Appeler maintenant" lisible sur carte sombre */
.contact-info .btn-outline { color: var(--ivory); border-color: rgba(248, 244, 236, 0.5); }
.contact-info .btn-outline:hover { background: var(--ivory); color: var(--azure-night); border-color: var(--ivory); }
/* =============================================================
V6 — DEVIS « NUIT RIVIERA » + MOBILE PARFAIT
============================================================= */
/* --- Section devis : nuit + verre + or --- */
.section-contact {
background:
radial-gradient(ellipse 80% 60% at 15% 0%, rgba(36, 118, 184, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 65% 55% at 88% 100%, rgba(200, 146, 56, 0.15) 0%, transparent 60%),
linear-gradient(165deg, #081A2C 0%, #061421 100%);
}
.section-contact::before { background: radial-gradient(circle, rgba(200, 146, 56, 0.13) 0%, transparent 70%); }
.section-contact::after { background: radial-gradient(circle, rgba(36, 118, 184, 0.15) 0%, transparent 70%); }
.section-contact .eyebrow { color: var(--champagne); }
.section-contact h2 { color: var(--ivory); }
.section-contact .section-intro { color: rgba(248, 244, 236, 0.75); }
.contact-info {
background: linear-gradient(160deg, #0B2A44 0%, #061421 100%);
border: 1px solid rgba(240, 220, 168, 0.22);
}
.contact-form-wrap {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(240, 220, 168, 0.18);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
}
.form-title { color: var(--ivory); }
.form-subtitle { color: rgba(248, 244, 236, 0.65); }
.form-group label { color: rgba(240, 220, 168, 0.92); }
.req { color: #FCA5A5; }
.quote-form input, .quote-form select, .quote-form textarea {
background: rgba(6, 20, 33, 0.55);
border-color: rgba(240, 220, 168, 0.25);
color: var(--ivory);
}
.quote-form input::placeholder, .quote-form textarea::placeholder { color: rgba(248, 244, 236, 0.4); }
.quote-form input:hover, .quote-form select:hover, .quote-form textarea:hover { border-color: rgba(240, 220, 168, 0.5); }
.quote-form input:focus, .quote-form textarea:focus {
background: rgba(6, 20, 33, 0.8);
border-color: var(--riviera);
box-shadow: 0 0 0 4px rgba(200, 146, 56, 0.2);
}
.quote-form select {
background: rgba(6, 20, 33, 0.55) url("data:image/svg+xml;utf8,") no-repeat right 16px center;
}
.quote-form select:focus {
background: rgba(6, 20, 33, 0.8) url("data:image/svg+xml;utf8,") no-repeat right 16px center;
border-color: var(--riviera);
box-shadow: 0 0 0 4px rgba(200, 146, 56, 0.2);
}
.quote-form select option { color: var(--ink); background: var(--ivory); }
.form-check { background: rgba(240, 220, 168, 0.07); border-color: rgba(240, 220, 168, 0.35); }
.form-check label { color: rgba(248, 244, 236, 0.78); }
.form-check a { color: var(--champagne); }
.error-msg { color: #FCA5A5; }
.form-group.invalid input, .form-group.invalid select { border-color: #F87171; }
.form-feedback.error { color: #FCA5A5; }
.form-note { color: rgba(248, 244, 236, 0.6); }
.form-note svg { color: var(--champagne); }
/* --- Mobile parfait --- */
@media (max-width: 860px) {
/* iOS : >=16px dans les champs = pas de zoom forcé au focus */
.quote-form input, .quote-form select, .quote-form textarea { font-size: 16px; }
}
@media (max-width: 560px) {
.intro-logo { font-size: 2.2rem; }
.section-head { margin-bottom: 42px; }
.demo-controls { gap: 10px; }
.demo-phone-container { width: 270px; height: 540px; }
.legal-sheet { max-height: 88vh; }
.band .btn { width: 100%; max-width: 340px; }
.marquee { padding: 12px 0; }
.contact-form-wrap { padding: 30px 20px; }
.contact-info { padding: 30px 24px; }
.stats-grid { gap: 20px; }
.stat-value { font-size: 1.9rem; }
}
/* La barre sticky s'efface quand le formulaire est à l'écran */
.mobile-sticky-cta.near-contact { transform: translateY(100%) !important; }
/* =============================================================
V9 — SANS JAVASCRIPT, TOUT RESTE VISIBLE
(lecteurs de fichiers mobiles, aperçus, QuickLook iOS…)
============================================================= */
html:not(.js) .reveal {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
/* voile d'intro conservé : son animation est 100 % CSS */
html:not(.js) #demo { display: none; } /* écran construit en JS */
html:not(.js) .carousel-controls { display: none; }
html:not(.js) .sectors-nav { display: none; }
html:not(.js) .hero-slidenav { display: none; }
html:not(.js) .back-to-top { display: none; }
html:not(.js) .scroll-progress { display: none; }
/* Sécurité supplémentaire : même avec JS, le voile disparaît toujours */
html:not(.js) .intro-veil { animation: veilOut 0.75s var(--ease) 0.55s forwards; }
html:not(.js) .pl-line, html:not(.js) .pl-pct, html:not(.js) .pl-p { display: none; }
/* =============================================================
V10 — MENU MOBILE 100 % CSS (fonctionne sans JavaScript)
============================================================= */
.nav-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
#nav-check:checked ~ .main-nav { max-height: 80vh; }
#nav-check:checked ~ .header-actions .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-check:checked ~ .header-actions .menu-toggle span:nth-child(2) { opacity: 0; }
#nav-check:checked ~ .header-actions .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Sans JS, le header reste toujours en version ivoire lisible
(la détection de scroll est en JavaScript) */
html:not(.js) .site-header:not(.scrolled) {
background: rgba(248, 244, 236, 0.96);
border-bottom-color: var(--line-soft);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not(.js) .site-header:not(.scrolled) .brand-name { color: var(--ink); }
html:not(.js) .site-header:not(.scrolled) .brand-name .accent { color: var(--riviera-deep); }
html:not(.js) .site-header:not(.scrolled) .brand-tag { color: var(--graphite-soft); }
html:not(.js) .site-header:not(.scrolled) .main-nav a { color: var(--graphite); }
html:not(.js) .site-header:not(.scrolled) .menu-toggle span { background: var(--ink); }
html:not(.js) .site-header:not(.scrolled) .lang-toggle { color: inherit; border-color: rgba(240, 220, 168, 0.4); }
/* =============================================================
V12 — ANIMATIONS SIGNATURE + OFFRE SITE INTERNET
============================================================= */
/* --- Carte large "Création de site internet" --- */
.solution-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.solution-wide .solution-visual { aspect-ratio: auto; min-height: 300px; height: 100%; }
.solution-wide .solution-body { justify-content: center; padding: 34px 38px; }
.solution-wide h3 { font-size: 1.6rem; }
@media (max-width: 860px) {
.solution-wide { grid-template-columns: 1fr; }
.solution-wide .solution-visual { aspect-ratio: 3/2; min-height: 0; height: auto; }
}
/* --- Orbe doré flottant (hero) --- */
.hero-moon {
position: absolute; top: -8%; right: -6%;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle at 38% 35%, rgba(240, 220, 168, 0.85) 0%, rgba(200, 146, 56, 0.5) 42%, rgba(200, 146, 56, 0) 72%);
filter: blur(6px); opacity: 0.5; z-index: 0;
animation: moonFloat 11s ease-in-out infinite;
pointer-events: none;
}
@keyframes moonFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
50% { transform: translateY(-26px) scale(1.05); opacity: 0.65; }
}
/* --- Titres révélés mot à mot --- */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.14em 0.18em 0.06em 0; margin: -0.14em -0.18em -0.06em 0; /* V49 : italiques non tronquées */ }
.split .wi {
display: inline-block; transform: translateY(115%);
transition: transform 0.8s var(--ease);
transition-delay: calc(var(--base, 0s) + var(--i, 0) * 0.055s);
}
.split.split-in .wi { transform: none; }
@media (prefers-reduced-motion: reduce) { .split .wi { transform: none !important; } }
/* --- Parallax de profondeur sur les images --- */
.solution-visual img, .gallery-item img {
transform: translateY(var(--py, 0px)) scale(1.12);
transition: none;
will-change: transform;
}
.solution-card:hover .solution-visual img { transform: translateY(var(--py, 0px)) scale(1.18); transition: transform 0.8s var(--ease); }
.gallery-item:hover img { transform: translateY(var(--py, 0px)) scale(1.18); transition: transform 0.6s var(--ease); }
html:not(.js) .solution-visual img, html:not(.js) .gallery-item img { transform: none; }
/* --- Menu mobile plein écran « nuit » --- */
@media (max-width: 860px) {
.header-inner { position: relative; z-index: 2; }
.site-header .brand, .site-header .header-actions { position: relative; z-index: 3; }
.main-nav {
position: fixed; inset: 0; top: 0; height: 100dvh; max-height: none;
display: grid; place-items: center;
background:
radial-gradient(ellipse 80% 55% at 20% 8%, rgba(36, 118, 184, 0.22) 0%, transparent 55%),
radial-gradient(ellipse 65% 50% at 85% 95%, rgba(200, 146, 56, 0.18) 0%, transparent 60%),
linear-gradient(165deg, #081A2C 0%, #061421 100%);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.45s var(--ease), visibility 0.45s;
overflow: hidden; border: 0; box-shadow: none; backdrop-filter: none;
z-index: 1;
}
#nav-check:checked ~ .main-nav { opacity: 1; visibility: visible; pointer-events: auto; max-height: none; }
.main-nav ul { flex-direction: column; gap: 4px; padding: 0; align-items: center; text-align: center; }
.main-nav li { border: 0; opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
#nav-check:checked ~ .main-nav li { opacity: 1; transform: none; }
#nav-check:checked ~ .main-nav li:nth-child(1) { transition-delay: 0.10s; }
#nav-check:checked ~ .main-nav li:nth-child(2) { transition-delay: 0.16s; }
#nav-check:checked ~ .main-nav li:nth-child(3) { transition-delay: 0.22s; }
#nav-check:checked ~ .main-nav li:nth-child(4) { transition-delay: 0.28s; }
#nav-check:checked ~ .main-nav li:nth-child(5) { transition-delay: 0.34s; }
#nav-check:checked ~ .main-nav li:nth-child(6) { transition-delay: 0.40s; }
#nav-check:checked ~ .main-nav li:nth-child(7) { transition-delay: 0.46s; }
.main-nav a {
display: inline-block;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.7rem, 7.5vw, 2.4rem); letter-spacing: -0.02em;
color: var(--ivory) !important; padding: 8px 18px; border-radius: 12px;
}
.main-nav a:hover { color: var(--champagne) !important; background: none; }
#nav-check:checked ~ .header-actions .menu-toggle span { background: #fff; }
}
/* =============================================================
V13 — DESIGN POUSSÉ À FOND
============================================================= */
/* --- Scrollbar signature or/nuit --- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0A1826; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #E6C077, #8F6420);
border-radius: 8px; border: 2px solid #0A1826;
}
html { scrollbar-color: #C89238 #0A1826; scrollbar-width: thin; }
/* --- Loader : anneau orbital --- */
.intro-center { position: relative; }
.intro-ring {
position: absolute; top: 50%; left: 50%;
width: 230px; height: 230px; margin: -115px 0 0 -115px;
border-radius: 50%;
border: 1px solid rgba(240, 220, 168, 0.22);
animation: ringSpin 7s linear infinite;
}
.intro-ring::before {
content: '✦'; position: absolute; top: -10px; left: 50%;
transform: translateX(-50%);
color: var(--champagne); font-size: 13px;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
/* --- Soulignement or animé du mot accentué du hero --- */
.hero-title .wi.h-accent { position: relative; }
.hero-title .wi.h-accent::after {
content: ''; position: absolute; left: 3%; right: 3%; bottom: 0.06em; height: 2px;
background: linear-gradient(90deg, var(--riviera), var(--champagne));
border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform 0.9s var(--ease);
transition-delay: calc(var(--base, 0s) + 1s);
}
.hero-title.split-in .wi.h-accent::after { transform: scaleX(1); }
/* --- Process horizontal cinématique (desktop + JS) --- */
@media (min-width: 1025px) {
html.js .process-sticky { height: 240vh; }
html.js .process-stage {
position: sticky; top: var(--header-h);
height: calc(100vh - var(--header-h));
display: flex; align-items: center; overflow: hidden;
}
html.js .process-sticky .process-grid {
display: flex; gap: 28px; width: max-content;
transform: translateX(var(--px, 0px));
will-change: transform;
}
html.js .process-sticky .process-step {
flex: 0 0 430px; width: 430px;
text-align: left; padding: 46px 40px;
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-md);
}
html.js .process-sticky .process-num { font-size: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
html.js .process-sticky { height: auto; }
html.js .process-stage { position: static; height: auto; display: block; overflow: visible; }
html.js .process-sticky .process-grid { display: grid; width: auto; transform: none; }
}
/* --- Réassurance tarifs --- */
.assurance-row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px; margin-top: 26px;
}
.assurance-chip {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 20px; border-radius: var(--radius-pill);
background: linear-gradient(135deg, var(--ivory-warm), #EFE2C4);
border: 1px solid rgba(200, 146, 56, 0.35);
color: var(--ink); font-weight: 600; font-size: 0.88rem;
}
.assurance-chip svg { color: var(--riviera-deep); flex-shrink: 0; }
/* --- FAQ numérotée --- */
.faq-list { counter-reset: faq; }
.faq-question { counter-increment: faq; }
.faq-question::before {
content: counter(faq, decimal-leading-zero);
font-family: var(--font-mono); font-size: 0.72rem;
color: var(--riviera-deep); letter-spacing: 0.12em;
margin-right: 4px; flex-shrink: 0;
}
/* --- Verre : liseré or au survol --- */
.section-dark2 .benefit-card:hover,
.section-dark2 .testimonial-card:hover { border-color: rgba(240, 220, 168, 0.45); }
/* --- Stats : chiffres majestueux --- */
.stat-value { font-size: clamp(2.4rem, 5.4vw, 3.6rem); }
/* --- Marquee services (sens inverse, serif italique) --- */
.marquee-services { background: #04101B; padding: 18px 0; }
.marquee-services .marquee-track { animation: marqueeScroll 38s linear infinite reverse; }
.marquee-services .marquee-item {
font-style: italic; text-transform: none; letter-spacing: 0.04em;
font-size: 1.15rem; color: rgba(240, 220, 168, 0.7);
font-variation-settings: "SOFT" 100;
}
/* --- Footer : filigrane géant --- */
.site-footer { overflow: hidden; }
.footer-watermark {
position: absolute; left: 50%; bottom: -0.16em;
transform: translateX(-50%);
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(90px, 17vw, 230px); line-height: 1;
color: rgba(240, 220, 168, 0.05);
white-space: nowrap; pointer-events: none; user-select: none;
font-variation-settings: "SOFT" 100;
}
.site-footer .footer-bottom { position: relative; z-index: 1; }
.site-footer { padding-bottom: 40px; }
/* --- Boutons : réponse tactile --- */
.btn:active { transform: translateY(0) scale(0.97); }
/* =============================================================
V16 — LA SCÈNE SIGNATURE (scrollytelling épinglé)
============================================================= */
.sig { background: var(--azure-night); position: relative; }
html.js .sig-wrap { height: 195vh; }
.sig-stage {
position: sticky; top: 0; height: 100svh; min-height: 560px;
overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4vh;
background:
radial-gradient(ellipse 70% 55% at 22% 12%, rgba(36, 118, 184, 0.20) 0%, transparent 55%),
radial-gradient(ellipse 55% 45% at 82% 88%, rgba(200, 146, 56, 0.16) 0%, transparent 60%),
linear-gradient(170deg, #081A2C 0%, #061421 55%, #04101B 100%);
}
/* Ciel étoilé discret */
.sig-field {
position: absolute; inset: 0; opacity: 0.5;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(240,220,168,0.8) 50%, transparent 51%),
radial-gradient(1px 1px at 28% 64%, rgba(248,244,236,0.6) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 44% 14%, rgba(240,220,168,0.5) 50%, transparent 51%),
radial-gradient(1px 1px at 63% 78%, rgba(248,244,236,0.55) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 76% 30%, rgba(240,220,168,0.7) 50%, transparent 51%),
radial-gradient(1px 1px at 88% 58%, rgba(248,244,236,0.5) 50%, transparent 51%),
radial-gradient(1px 1px at 6% 84%, rgba(240,220,168,0.5) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 94% 10%, rgba(248,244,236,0.6) 50%, transparent 51%);
transform: translateY(calc(var(--p, 0) * -4vh));
}
.sig-halo {
position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%;
background: radial-gradient(circle, rgba(200, 146, 56, calc(0.10 + var(--p, 0) * 0.14)) 0%, transparent 65%);
filter: blur(10px); pointer-events: none;
}
/* Titre en deux temps */
.sig-head { text-align: center; position: relative; z-index: 3; min-height: 4.6em; }
.sig-kicker {
text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.74rem;
color: var(--champagne); font-weight: 600; margin-bottom: 12px;
}
.sig-title { position: relative; height: 1.3em; font-size: clamp(2rem, 5.4vw, 3.6rem); }
.sig-line {
position: absolute; left: 50%; transform: translateX(-50%) translateY(14px);
white-space: nowrap; color: var(--ivory); opacity: 0;
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.sig-line em { font-style: italic; color: var(--champagne); font-variation-settings: "opsz" 144, "SOFT" 100; }
.sig-dot { color: var(--riviera); }
.sig-stage:not(.is-contact) .sig-line1 { opacity: 1; transform: translateX(-50%) translateY(0); }
.sig-stage.is-contact .sig-line2 { opacity: 1; transform: translateX(-50%) translateY(0); }
/* La scène */
.sig-scene {
position: relative; z-index: 2;
width: min(860px, 92vw); height: min(400px, 44svh); min-height: 300px;
}
/* Plaque */
.sig-plaque {
position: absolute; left: 50%; top: 50%;
width: 250px; height: 300px;
transform: translate(calc(-50% - 90px), -50%);
border-radius: 22px; padding: 26px 22px;
background: linear-gradient(160deg, #0B2A44 0%, #061421 100%);
border: 1.5px solid rgba(240, 220, 168, 0.45);
box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.12);
text-align: center;
transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.sig-stage.is-contact .sig-plaque {
border-color: var(--champagne);
box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6), 0 0 60px rgba(200, 146, 56, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.sig-plaque-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; }
.sig-plaque-logo {
width: 30px; height: 30px; border-radius: 9px;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
display: grid; place-items: center; color: var(--azure-night);
}
.sig-plaque-brand { font-family: var(--font-display); font-style: italic; color: var(--champagne); font-size: 0.95rem; }
.sig-plaque-stars { color: var(--riviera-light); font-size: 1.5rem; letter-spacing: 5px; margin-bottom: 8px; }
.sig-plaque-txt { font-family: var(--font-display); color: var(--ivory); font-size: 1.12rem; line-height: 1.3; margin-bottom: 18px; }
.sig-plaque-waves { color: var(--riviera-light); margin: 0 auto; opacity: 0.9; }
/* Ondes au contact */
.sig-rings { position: absolute; top: 50%; left: 50%; pointer-events: none; }
.sig-rings i {
position: absolute; top: 0; left: 0;
width: 70px; height: 70px; margin: -35px;
border: 1.5px solid var(--riviera); border-radius: 50%;
opacity: 0; transform: scale(0.4);
}
.sig-stage.is-contact .sig-rings i { animation: sigWave 2s ease-out infinite; }
.sig-stage.is-contact .sig-rings i:nth-child(2) { animation-delay: 0.55s; }
.sig-stage.is-contact .sig-rings i:nth-child(3) { animation-delay: 1.1s; }
@keyframes sigWave {
0% { opacity: 0.7; transform: scale(0.4); }
100% { opacity: 0; transform: scale(3.4); }
}
/* Téléphone : approche pilotée par --p-move */
.sig-phone {
position: absolute; left: 50%; top: 50%;
width: 190px; height: 380px; margin: -190px 0 0 -20px;
background: linear-gradient(160deg, #23262B, #0a0a0a);
border-radius: 30px; padding: 9px;
box-shadow: 0 40px 80px -18px rgba(0, 0, 0, 0.65);
transform:
translate(calc((1 - var(--p-move, 0)) * 52vw + var(--p-move, 0) * 120px),
calc((1 - var(--p-move, 0)) * 16vh))
rotate(calc(16deg - var(--p-move, 0) * 9deg));
will-change: transform;
}
.sig-phone::before {
content: ''; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
width: 54px; height: 14px; background: #000; border-radius: 0 0 9px 9px; z-index: 2;
}
.sig-phone-screen {
width: 100%; height: 100%; border-radius: 22px; overflow: hidden;
background: #FDFBF6; display: flex; flex-direction: column;
}
.sig-phone-head {
padding: 34px 14px 14px; text-align: center; color: #fff;
background: linear-gradient(165deg, #0B2A44, #061421);
}
.sig-phone-avatar {
width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 8px;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
display: grid; place-items: center; color: var(--azure-night); font-size: 1.1rem;
}
.sig-phone-name { font-family: var(--font-display); font-size: 0.95rem; }
.sig-phone-sub { font-size: 0.68rem; color: rgba(248, 244, 236, 0.65); margin-top: 2px; }
.sig-phone-stars {
display: flex; justify-content: center; gap: 6px;
font-size: 1.45rem; padding: 18px 0 6px;
}
.sig-phone-stars span { color: #D8D2C4; transition: color 0.35s var(--ease), transform 0.35s var(--ease); transform: scale(0.9); }
.sig-stage.s1 .ps1, .sig-stage.s2 .ps2, .sig-stage.s3 .ps3, .sig-stage.s4 .ps4, .sig-stage.s5 .ps5 {
color: var(--riviera); transform: scale(1.12);
}
.sig-phone-pill {
margin: auto 16px 18px; padding: 10px; border-radius: 18px; text-align: center;
font-weight: 700; font-size: 0.8rem; color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
opacity: 0.35; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.sig-stage.s5 .sig-phone-pill { opacity: 1; transform: scale(1.04); }
/* Étoiles qui s'envolent au-dessus de la plaque */
.sig-flight {
position: absolute; left: 50%; top: 50%;
transform: translate(calc(-50% - 90px), calc(-50% - 150px));
width: 250px; height: 0; pointer-events: none; z-index: 3;
}
.sig-star {
position: absolute; bottom: 0;
color: var(--champagne); text-shadow: 0 0 18px rgba(240, 220, 168, 0.65);
opacity: 0; transform: translateY(30px) scale(0.4);
transition: opacity 0.55s var(--ease), transform 0.75s var(--ease);
}
.sig-star.st1 { left: 8%; font-size: 1.2rem; }
.sig-star.st2 { left: 28%; font-size: 1.7rem; }
.sig-star.st3 { left: 47%; font-size: 2.3rem; }
.sig-star.st4 { left: 68%; font-size: 1.7rem; }
.sig-star.st5 { left: 86%; font-size: 1.3rem; }
.sig-stage.s1 .st1 { opacity: 1; transform: translateY(-16px) scale(1) rotate(-10deg); }
.sig-stage.s2 .st2 { opacity: 1; transform: translateY(-44px) scale(1) rotate(7deg); }
.sig-stage.s3 .st3 { opacity: 1; transform: translateY(-70px) scale(1); }
.sig-stage.s4 .st4 { opacity: 1; transform: translateY(-44px) scale(1) rotate(-7deg); }
.sig-stage.s5 .st5 { opacity: 1; transform: translateY(-16px) scale(1) rotate(10deg); }
/* CTA final + progression */
.sig-cta {
position: relative; z-index: 3;
opacity: 0; transform: translateY(16px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
pointer-events: none;
}
.sig-stage.is-final .sig-cta { opacity: 1; transform: none; pointer-events: auto; }
.sig-progress {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
width: min(320px, 60vw); height: 2px; border-radius: 2px;
background: rgba(248, 244, 236, 0.15); overflow: hidden;
}
.sig-progress span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--riviera), var(--champagne));
transform: scaleX(var(--p, 0)); transform-origin: left;
}
/* Sans JS / reduced-motion : scène aboutie, section normale */
html:not(.js) .sig-wrap { height: auto; }
html:not(.js) .sig-stage { position: static; height: auto; min-height: 0; padding: 90px 0; }
html:not(.js) .sig-phone { transform: translate(120px, 0) rotate(7deg); }
html:not(.js) .sig-line2, html:not(.js) .sig-cta { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .sig-line2 { position: absolute; transform: translateX(-50%); }
html:not(.js) .sig-line1 { opacity: 0 !important; }
html:not(.js) .sig-phone-stars span { color: var(--riviera); }
html:not(.js) .sig-star { opacity: 1; transform: translateY(-40px) scale(1); }
html:not(.js) .sig-progress { display: none; }
/* Mobile */
@media (max-width: 700px) {
.sig-scene { height: 340px; min-height: 300px; }
.sig-plaque { width: 196px; height: 244px; padding: 20px 14px; transform: translate(calc(-50% - 52px), -50%); }
.sig-plaque-stars { font-size: 1.2rem; }
.sig-plaque-txt { font-size: 0.95rem; margin-bottom: 12px; }
.sig-phone { width: 148px; height: 300px; margin: -150px 0 0 -6px;
transform:
translate(calc((1 - var(--p-move, 0)) * 60vw + var(--p-move, 0) * 76px),
calc((1 - var(--p-move, 0)) * 14vh))
rotate(calc(16deg - var(--p-move, 0) * 9deg)); }
.sig-phone-stars { font-size: 1.1rem; padding-top: 12px; }
.sig-flight { transform: translate(calc(-50% - 52px), calc(-50% - 122px)); width: 196px; }
.sig-title { font-size: 1.9rem; }
html.js .sig-wrap { height: 260vh; }
}
/* =============================================================
V17 — CINÉMA TOTAL
============================================================= */
/* Ciel étoilé injecté dans chaque scène (parallax lié à --sp) */
.starfield {
position: absolute; inset: -60px 0; pointer-events: none; z-index: 1;
opacity: 0.45;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(240,220,168,0.8) 50%, transparent 51%),
radial-gradient(1px 1px at 28% 64%, rgba(248,244,236,0.6) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 44% 14%, rgba(240,220,168,0.5) 50%, transparent 51%),
radial-gradient(1px 1px at 63% 78%, rgba(248,244,236,0.55) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 76% 30%, rgba(240,220,168,0.7) 50%, transparent 51%),
radial-gradient(1px 1px at 88% 58%, rgba(248,244,236,0.5) 50%, transparent 51%),
radial-gradient(1px 1px at 6% 84%, rgba(240,220,168,0.5) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 94% 10%, rgba(248,244,236,0.6) 50%, transparent 51%),
radial-gradient(1px 1px at 52% 44%, rgba(248,244,236,0.45) 50%, transparent 51%);
background-size: 640px 640px;
transform: translateY(calc(var(--sp, 0) * -46px));
will-change: transform;
}
/* Fondu de sortie des scènes (la scène qui part s'assombrit) */
/* V58.1 : fondu de sortie SUPPRIMÉ — les sections gardaient une opacité 0.55
qui délavait les couleurs de la charte (effet « fond qui change »). */
@media (prefers-reduced-motion: no-preference) {
html.js [data-cine] { opacity: 1; }
}
/* Le halo des scènes sombres respire avec la progression */
html.js .section-dark2[data-cine] { --halo: calc(0.1 + var(--sp, 0) * 0.1); }
/* Travelling auto du slider métiers */
.sectors-slider.drifting { scroll-snap-type: none; }
/* =============================================================
V18 — VIDÉO RÉELLE, LOGOS OFFICIELS, AXE SITES WEB
============================================================= */
/* Hero vidéo */
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
/* Bande logos officiels */
.logo-strip {
margin-top: 44px; padding-top: 34px;
border-top: 1px solid rgba(240, 220, 168, 0.15);
text-align: center; position: relative; z-index: 1;
}
.logo-strip-label {
font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(248, 244, 236, 0.55); margin-bottom: 20px; font-weight: 600;
}
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.logo-chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 20px; border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(240, 220, 168, 0.18);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.logo-chip:hover { transform: translateY(-3px); border-color: rgba(240, 220, 168, 0.45); background: rgba(255, 255, 255, 0.09); }
.logo-chip b { color: var(--ivory); font-weight: 600; font-size: 0.92rem; }
.logo-chip svg { flex-shrink: 0; }
/* Photo encadrée section NFC */
.nfc-photo { margin-top: 24px; }
.nfc-photo img {
width: 100%; aspect-ratio: 16/9; object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid rgba(200, 146, 56, 0.4);
box-shadow: var(--shadow-md);
}
.nfc-photo figcaption {
margin-top: 10px; font-family: var(--font-display); font-style: italic;
color: var(--graphite-soft); font-size: 0.92rem; text-align: center;
}
/* Section création de sites */
.web-grid {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: 54px; align-items: center; position: relative; z-index: 2;
}
.web-features { display: flex; flex-direction: column; gap: 16px; }
.web-feature {
display: flex; gap: 16px; align-items: flex-start;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(240, 220, 168, 0.16);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: var(--radius); padding: 22px 24px;
transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.web-feature:hover { border-color: rgba(240, 220, 168, 0.45); background: rgba(255, 255, 255, 0.08); }
.web-feature-icon {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
background: rgba(240, 220, 168, 0.12); color: var(--champagne);
display: grid; place-items: center;
}
.web-feature h3 { color: var(--ivory); font-size: 1.12rem; margin-bottom: 5px; }
.web-feature p { color: rgba(248, 244, 236, 0.7); font-size: 0.92rem; margin: 0; }
.web-cta { margin-top: 14px; }
.web-note { margin-top: 14px; color: rgba(248, 244, 236, 0.7); font-size: 0.92rem; }
.web-note em { color: var(--champagne); font-family: var(--font-display); }
.web-visual { position: relative; min-height: 420px; }
.web-img-main {
width: 92%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--radius);
border: 1px solid rgba(240, 220, 168, 0.35);
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.web-img-over {
position: absolute; right: 0; bottom: -26px;
width: 46%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid rgba(240, 220, 168, 0.5);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
transform: rotate(3deg);
}
@media (max-width: 960px) {
.web-grid { grid-template-columns: 1fr; gap: 40px; }
.web-visual { min-height: 0; margin-bottom: 20px; }
.web-img-over { bottom: -18px; }
}
/* 8e entrée du menu plein écran */
@media (max-width: 860px) {
#nav-check:checked ~ .main-nav li:nth-child(8) { transition-delay: 0.52s; }
}
/* =============================================================
V19 — ÉPURE + CINÉMA RENFORCÉ
============================================================= */
/* Diaporama ultra-HD : double mouvement (zoom avant / zoom arrière) */
.hero-slide.is-active img { animation: kbIn 11s ease-out forwards; }
.hero-slide:nth-child(even).is-active img { animation: kbOut 11s ease-out forwards; }
@keyframes kbIn { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.17) translateX(-1.4%); } }
@keyframes kbOut { from { transform: scale(1.17) translateX(1.2%); } to { transform: scale(1.05) translateX(0); } }
/* Sortie de scène : la scène s'éloigne en profondeur */
/* V58.1 : recul de scène SUPPRIMÉ (provoquait un décalage visuel en fin de section). */
@media (prefers-reduced-motion: no-preference) {
html.js [data-cine] { transform: none; }
}
/* Formule vedette : pulsation d'or */
@media (prefers-reduced-motion: no-preference) {
.price-featured { animation: goldPulse 4.6s ease-in-out infinite; }
}
@keyframes goldPulse {
0%, 100% { box-shadow: 0 26px 64px rgba(6, 20, 33, 0.18), 0 0 0 rgba(200, 146, 56, 0); }
50% { box-shadow: 0 26px 64px rgba(6, 20, 33, 0.18), 0 0 52px rgba(200, 146, 56, 0.38); }
}
.price-badge {
background: linear-gradient(110deg, var(--riviera-light) 0%, #FFF3D0 42%, var(--riviera) 60%, var(--riviera-light) 100%);
background-size: 220% 100%;
animation: badgeShine 3.6s linear infinite;
}
@keyframes badgeShine { to { background-position: -220% 0; } }
/* Solutions : 4 cartes en ligne */
.solutions-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .solutions-grid { grid-template-columns: 1fr; } }
/* Curseur : styles neutralisés */
.cursor-dot, .cursor-ring { display: none !important; }
/* =============================================================
V20 — HERO ANIMÉ « FONCTIONNEMENT » + BOUTIQUE
============================================================= */
/* ---------- Scène du hero (boucle 9,5 s, 100 % CSS) ---------- */
.hero-scene { position: absolute; inset: 0; }
.hs-card {
position: absolute; left: 8%; top: 50%;
width: 240px; height: 296px; margin-top: -148px;
border-radius: 20px; padding: 24px 20px; text-align: center;
background: linear-gradient(160deg, #0B2A44 0%, #061421 100%);
border: 1.5px solid rgba(240, 220, 168, 0.5);
box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6);
transform: rotate(-4deg);
}
.hs-card::after {
content: ''; position: absolute; inset: -2px; border-radius: 20px;
box-shadow: 0 0 60px rgba(200, 146, 56, 0.45);
opacity: 0; pointer-events: none;
}
.hs-card-top { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 14px; }
.hs-card-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--champagne), var(--riviera)); display: grid; place-items: center; color: var(--azure-night); }
.hs-card-brand { font-family: var(--font-display); font-style: italic; color: var(--champagne); font-size: 0.9rem; }
.hs-card-stars { color: var(--riviera-light); font-size: 1.3rem; letter-spacing: 4px; margin-bottom: 6px; }
.hs-card-txt { font-family: var(--font-display); color: var(--ivory); font-size: 1.15rem; line-height: 1.25; margin-bottom: 16px; }
.hs-card-waves { color: var(--riviera-light); margin: 0 auto; }
.hs-ring {
position: absolute; left: 50%; top: 58%; width: 60px; height: 60px; margin: -30px;
border: 1.5px solid var(--riviera); border-radius: 50%; opacity: 0; transform: scale(0.4);
}
/* Téléphone */
.hs-phone {
position: absolute; right: 4%; top: 50%;
width: 200px; height: 400px; margin-top: -200px;
background: linear-gradient(160deg, #23262B, #0a0a0a);
border-radius: 30px; padding: 9px;
box-shadow: 0 46px 90px -18px rgba(0, 0, 0, 0.7);
transform: translate(46%, 30%) rotate(15deg);
z-index: 2;
}
.hs-phone::before {
content: ''; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
width: 56px; height: 14px; background: #000; border-radius: 0 0 9px 9px; z-index: 3;
}
.hs-screen { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #04101B; }
.hs-off { position: absolute; inset: 0; }
.hs-off img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.hs-clock {
position: absolute; top: 44px; left: 0; right: 0; text-align: center;
font-family: var(--font-display); font-size: 2.4rem; color: rgba(255, 255, 255, 0.92);
}
.hs-on { position: absolute; inset: 0; background: #FDFBF6; display: flex; flex-direction: column; opacity: 0; }
.hs-biz { position: relative; height: 108px; }
.hs-biz-photo { width: 100%; height: 100%; object-fit: cover; }
.hs-biz-avatar {
position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
border: 3px solid #FDFBF6; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.hs-biz-name { margin-top: 30px; text-align: center; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.hs-biz-sub { text-align: center; font-size: 0.68rem; color: #47525E; margin-top: 2px; }
.hs-rate { display: flex; justify-content: center; gap: 7px; font-size: 1.5rem; padding: 14px 0 4px; }
.hs-rate span { color: #D8D2C4; transform: scale(0.9); }
.hs-publish {
margin: auto 18px 18px; padding: 11px; border-radius: 18px; text-align: center;
font-weight: 700; font-size: 0.82rem; color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
opacity: 0.35;
}
/* Étoiles envolées */
.hs-fly {
position: absolute; left: 14%; top: 26%;
color: var(--champagne); text-shadow: 0 0 16px rgba(240, 220, 168, 0.6);
opacity: 0;
}
.hs-fly.f1 { margin-left: -6px; font-size: 1.1rem; }
.hs-fly.f2 { margin-left: 38px; font-size: 1.6rem; }
.hs-fly.f3 { margin-left: 84px; font-size: 2.1rem; }
.hs-fly.f4 { margin-left: 132px; font-size: 1.6rem; }
.hs-fly.f5 { margin-left: 172px; font-size: 1.2rem; }
/* Étapes */
.hs-steps { position: absolute; left: 0; right: 0; bottom: -3%; height: 2em; text-align: center; }
.hs-step {
position: absolute; left: 50%; transform: translateX(-50%);
white-space: nowrap; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em;
color: #F8F4EC; opacity: 0;
background: rgba(3, 14, 24, 0.88); border: 1px solid rgba(240, 220, 168, 0.5);
padding: 10px 20px; border-radius: var(--radius-pill);
box-shadow: 0 8px 22px rgba(2, 10, 18, 0.45);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hs-step b { color: var(--champagne); font-family: var(--font-mono); }
@media (max-width: 352px) { .hs-step { font-size: 0.8rem; padding: 9px 14px; max-width: calc(100% - 6px); } }
/* ----- Timeline (9,5 s) ----- */
@media (prefers-reduced-motion: no-preference) {
.hs-phone { animation: hsPhone 9.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.hs-card::after { animation: hsGlow 9.5s linear infinite; }
.hs-ring.r1 { animation: hsRing1 9.5s linear infinite; }
.hs-ring.r2 { animation: hsRing2 9.5s linear infinite; }
.hs-off { animation: hsOff 9.5s linear infinite; }
.hs-on { animation: hsOn 9.5s linear infinite; }
.hs-rate .hr1 { animation: hsStar1 9.5s linear infinite; }
.hs-rate .hr2 { animation: hsStar2 9.5s linear infinite; }
.hs-rate .hr3 { animation: hsStar3 9.5s linear infinite; }
.hs-rate .hr4 { animation: hsStar4 9.5s linear infinite; }
.hs-rate .hr5 { animation: hsStar5 9.5s linear infinite; }
.hs-publish { animation: hsPub 9.5s linear infinite; }
.hs-fly.f1 { animation: hsFly1 9.5s ease-out infinite; }
.hs-fly.f2 { animation: hsFly2 9.5s ease-out infinite; }
.hs-fly.f3 { animation: hsFly3 9.5s ease-out infinite; }
.hs-fly.f4 { animation: hsFly4 9.5s ease-out infinite; }
.hs-fly.f5 { animation: hsFly5 9.5s ease-out infinite; }
.hs-step.c1 { animation: hsCap1 9.5s linear infinite; }
.hs-step.c2 { animation: hsCap2 9.5s linear infinite; }
.hs-step.c3 { animation: hsCap3 9.5s linear infinite; }
}
@keyframes hsPhone {
0%, 4% { transform: translate(46%, 30%) rotate(15deg); opacity: 0; }
8% { opacity: 1; }
26%, 88% { transform: translate(-26%, -2%) rotate(6deg); opacity: 1; }
97%, 100%{ transform: translate(46%, 30%) rotate(15deg); opacity: 0; }
}
@keyframes hsGlow { 0%, 26% { opacity: 0; } 31%, 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes hsRing1 { 0%, 26% { opacity: 0; transform: scale(0.4); } 30% { opacity: 0.75; } 40% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; } }
@keyframes hsRing2 { 0%, 32% { opacity: 0; transform: scale(0.4); } 36% { opacity: 0.75; } 46% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; } }
@keyframes hsOff { 0%, 30% { opacity: 1; } 36%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hsOn { 0%, 30% { opacity: 0; } 36%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hsStar1 { 0%, 42% { color: #D8D2C4; transform: scale(0.9); } 45%, 90% { color: #C89238; transform: scale(1.1); } 96%, 100% { color: #D8D2C4; } }
@keyframes hsStar2 { 0%, 47% { color: #D8D2C4; transform: scale(0.9); } 50%, 90% { color: #C89238; transform: scale(1.1); } 96%, 100% { color: #D8D2C4; } }
@keyframes hsStar3 { 0%, 52% { color: #D8D2C4; transform: scale(0.9); } 55%, 90% { color: #C89238; transform: scale(1.1); } 96%, 100% { color: #D8D2C4; } }
@keyframes hsStar4 { 0%, 57% { color: #D8D2C4; transform: scale(0.9); } 60%, 90% { color: #C89238; transform: scale(1.1); } 96%, 100% { color: #D8D2C4; } }
@keyframes hsStar5 { 0%, 62% { color: #D8D2C4; transform: scale(0.9); } 65%, 90% { color: #C89238; transform: scale(1.1); } 96%, 100% { color: #D8D2C4; } }
@keyframes hsPub { 0%, 64% { opacity: 0.35; transform: scale(1); } 68%, 90% { opacity: 1; transform: scale(1.04); } 96%, 100% { opacity: 0.35; } }
@keyframes hsFly1 { 0%, 46% { opacity: 0; transform: translateY(26px) scale(0.4); } 52%, 84% { opacity: 1; transform: translateY(-10px) scale(1) rotate(-10deg); } 92%, 100% { opacity: 0; } }
@keyframes hsFly2 { 0%, 50% { opacity: 0; transform: translateY(26px) scale(0.4); } 56%, 84% { opacity: 1; transform: translateY(-34px) scale(1) rotate(7deg); } 92%, 100% { opacity: 0; } }
@keyframes hsFly3 { 0%, 54% { opacity: 0; transform: translateY(26px) scale(0.4); } 60%, 84% { opacity: 1; transform: translateY(-54px) scale(1); } 92%, 100% { opacity: 0; } }
@keyframes hsFly4 { 0%, 58% { opacity: 0; transform: translateY(26px) scale(0.4); } 64%, 84% { opacity: 1; transform: translateY(-34px) scale(1) rotate(-7deg); } 92%, 100% { opacity: 0; } }
@keyframes hsFly5 { 0%, 62% { opacity: 0; transform: translateY(26px) scale(0.4); } 68%, 84% { opacity: 1; transform: translateY(-12px) scale(1) rotate(10deg); } 92%, 100% { opacity: 0; } }
@keyframes hsCap1 { 0%, 3% { opacity: 0; transform: translateX(-50%) translateY(8px); } 6%, 26% { opacity: 1; transform: translateX(-50%) translateY(0); } 31%, 100% { opacity: 0; } }
@keyframes hsCap2 { 0%, 33% { opacity: 0; transform: translateX(-50%) translateY(8px); } 38%, 56% { opacity: 1; transform: translateX(-50%) translateY(0); } 61%, 100% { opacity: 0; } }
@keyframes hsCap3 { 0%, 60% { opacity: 0; transform: translateX(-50%) translateY(8px); } 65%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); } 93%, 100% { opacity: 0; } }
/* État final statique si animations réduites */
@media (prefers-reduced-motion: reduce) {
.hs-phone { transform: translate(-26%, -2%) rotate(6deg); }
.hs-on { opacity: 1; }
.hs-off { opacity: 0; }
.hs-rate span { color: #C89238; }
.hs-publish { opacity: 1; }
.hs-step.c2 { opacity: 1; }
}
@media (max-width: 1024px) { .hs-card { left: 4%; } .hs-phone { right: 0; } }
@media (max-width: 860px) {
.hero-visual { height: 460px; }
.hs-card { width: 200px; height: 250px; margin-top: -125px; padding: 18px 14px; }
.hs-card-txt { font-size: 0.98rem; }
.hs-phone { width: 164px; height: 330px; margin-top: -165px; }
.hs-clock { font-size: 1.9rem; top: 36px; }
.hs-biz { height: 84px; }
.hs-fly { left: 10%; top: 22%; }
.hs-steps { bottom: -4%; }
.hs-step { font-size: 0.82rem; padding: 9px 16px; }
}
/* ---------- Boutique ---------- */
.cart-btn {
position: relative; width: 42px; height: 42px; border-radius: 50%;
border: 1px solid var(--line); background: rgba(255, 255, 255, 0.65);
color: var(--ink); display: grid; place-items: center; cursor: pointer;
transition: transform 0.25s var(--ease), background 0.25s;
}
.cart-btn:hover { transform: translateY(-2px); }
.site-header:not(.scrolled) .cart-btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(248, 244, 236, 0.4); color: #fff; }
.cart-count {
position: absolute; top: -5px; right: -5px;
min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
background: linear-gradient(135deg, var(--riviera-light), var(--riviera));
color: var(--azure-night); font-size: 0.7rem; font-weight: 700;
display: grid; place-items: center;
}
.cart-overlay {
position: fixed; inset: 0; z-index: 2550;
background: rgba(3, 15, 26, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 2560;
width: min(430px, 94vw);
background: linear-gradient(170deg, #081A2C 0%, #061421 100%);
border-left: 1px solid rgba(240, 220, 168, 0.25);
box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
display: flex; flex-direction: column;
transform: translateX(105%); transition: transform 0.45s var(--ease);
}
.cart-drawer.open { transform: none; }
.cart-head {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 24px; border-bottom: 1px solid rgba(240, 220, 168, 0.15);
}
.cart-head h3 { color: var(--ivory); font-size: 1.4rem; }
.cart-close { background: rgba(255, 255, 255, 0.07); border-color: rgba(248, 244, 236, 0.3); color: var(--ivory); }
.cart-items { flex: 1; overflow-y: auto; padding: 12px 24px; }
#cart-toast.is-err small, #cart-toast.is-err .cart-toast-btn, #cart-toast.is-err .cart-toast-ico { display: none; }
.cart-item-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 46px; background: rgba(255,255,255,0.06); }
.cart-item {
display: flex; align-items: center; gap: 12px;
padding: 15px 0; border-bottom: 1px solid rgba(248, 244, 236, 0.1);
}
.cart-item-name { flex: 1; color: var(--ivory); font-weight: 600; font-size: 0.94rem; }
.cart-item-name small { display: block; color: rgba(248, 244, 236, 0.6); font-weight: 400; margin-top: 2px; }
.cart-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty button {
width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(240, 220, 168, 0.35);
background: none; color: var(--champagne); cursor: pointer; font-size: 1rem; line-height: 1;
}
.cart-qty b { color: var(--ivory); min-width: 18px; text-align: center; }
.cart-del { background: none; border: 0; color: rgba(248, 244, 236, 0.45); cursor: pointer; font-size: 1.05rem; padding: 4px; }
.cart-del:hover { color: #FCA5A5; }
.cart-empty { padding: 60px 24px; text-align: center; color: rgba(248, 244, 236, 0.7); font-family: var(--font-display); font-size: 1.1rem; }
.cart-empty span { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 0.9rem; color: rgba(248, 244, 236, 0.45); }
.cart-foot { padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(240, 220, 168, 0.15); }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cart-total-row span { color: rgba(248, 244, 236, 0.7); }
.cart-total-row b { color: var(--champagne); font-family: var(--font-display); font-size: 1.7rem; }
.cart-note { font-size: 0.8rem; color: rgba(248, 244, 236, 0.55); margin-bottom: 14px; }
.cart-note strong { color: rgba(248, 244, 236, 0.85); }
.order-modal {
position: fixed; inset: 0; z-index: 2600;
background: rgba(3, 15, 26, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: grid; place-items: center; padding: 22px;
opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.order-modal.open { opacity: 1; visibility: visible; }
.order-sheet {
position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
background: linear-gradient(170deg, #0B2A44 0%, #061421 100%);
border: 1px solid rgba(240, 220, 168, 0.3); border-radius: 22px;
padding: 34px 30px; box-shadow: 0 50px 140px rgba(0, 0, 0, 0.6);
}
.order-sheet h3 { color: var(--ivory); font-size: 1.5rem; margin-bottom: 8px; }
.order-close { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.07); border-color: rgba(248, 244, 236, 0.3); color: var(--ivory); }
.order-sub { color: rgba(248, 244, 236, 0.7); font-size: 0.9rem; margin-bottom: 18px; }
.order-sub span { color: var(--champagne); }
.order-fields { display: flex; flex-direction: column; gap: 12px; }
.order-fields input, .order-fields textarea {
font-family: var(--font-body); font-size: 16px; color: var(--ivory);
padding: 13px 15px; border-radius: 12px;
background: rgba(6, 20, 33, 0.6); border: 1.5px solid rgba(240, 220, 168, 0.25);
}
.order-fields input::placeholder, .order-fields textarea::placeholder { color: rgba(248, 244, 236, 0.45); }
.order-fields input:focus, .order-fields textarea:focus { outline: none; border-color: var(--riviera); box-shadow: 0 0 0 4px rgba(200, 146, 56, 0.18); }
.order-error { color: #FCA5A5; font-size: 0.85rem; min-height: 1.2em; margin: 8px 0 4px; }
.order-sheet .form-note { color: rgba(248, 244, 236, 0.55); margin-top: 12px; }
.order-sheet .form-note svg { color: var(--champagne); }
#order-success { text-align: center; padding: 20px 0; }
.order-success-icon {
width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-size: 1.9rem; font-weight: 700;
display: grid; place-items: center;
}
#order-success p { color: rgba(248, 244, 236, 0.8); }
#order-success strong { color: var(--champagne); }
/* =============================================================
V21 — SCÈNE « LE SITE SE CONSTRUIT » (boucle 11 s, CSS pur)
============================================================= */
.web-visual { min-height: 460px; }
.wb-scene { position: relative; width: min(470px, 100%); margin: 0 auto; }
/* Navigateur */
.wb-browser {
position: relative;
background: linear-gradient(170deg, #0B2A44, #061421);
border: 1px solid rgba(240, 220, 168, 0.4);
border-radius: 16px; overflow: visible;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.wb-bar {
display: flex; align-items: center; gap: 6px;
padding: 11px 14px; border-bottom: 1px solid rgba(240, 220, 168, 0.18);
}
.wb-dot { width: 9px; height: 9px; border-radius: 50%; }
.wb-dot.d1 { background: #FF5F57; } .wb-dot.d2 { background: #FEBC2E; } .wb-dot.d3 { background: #28C840; }
.wb-url {
flex: 1; margin-left: 8px; display: flex; align-items: center;
background: rgba(6, 20, 33, 0.7); border: 1px solid rgba(240, 220, 168, 0.2);
border-radius: 8px; padding: 5px 10px; min-height: 24px;
}
.wb-url-txt {
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
color: rgba(248, 244, 236, 0.85); white-space: nowrap; overflow: hidden;
}
.wb-caret { width: 1.5px; height: 12px; background: var(--champagne); margin-left: 2px; }
/* Page du mini-site */
.wb-page { position: relative; height: 300px; margin: 10px; border-radius: 10px; overflow: hidden; background: #FBF7EF; }
.wb-load {
position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 5;
background: linear-gradient(90deg, var(--riviera), var(--champagne));
transform: scaleX(0); transform-origin: left;
}
.wb-nav {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; background: #FFFDF8; border-bottom: 1px solid #EFE6D2;
}
.wb-logo { width: 14px; height: 14px; border-radius: 5px; background: linear-gradient(135deg, var(--champagne), var(--riviera)); }
.wb-nav i { width: 26px; height: 4px; border-radius: 2px; background: #D8CFBB; }
.wb-nav i:first-of-type { margin-left: auto; }
.wb-hero { position: relative; height: 150px; overflow: hidden; }
.wb-hero img { width: 100%; height: 100%; object-fit: cover; }
.wb-hero-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 20, 33, 0.72) 8%, rgba(6, 20, 33, 0.12) 70%); }
.wb-t1, .wb-t2 {
position: absolute; left: 14px; height: 9px; border-radius: 4px;
transform-origin: left; transform: scaleX(0);
}
.wb-t1 { top: 42px; width: 130px; background: #FBF7EF; }
.wb-t2 { top: 60px; width: 92px; background: linear-gradient(90deg, var(--champagne), var(--riviera)); }
.wb-btn {
position: absolute; left: 14px; top: 86px;
padding: 6px 14px; border-radius: 999px;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
transform: scale(0); transform-origin: center;
}
.wb-cards { display: flex; gap: 8px; padding: 10px 12px; }
.wb-cards i {
flex: 1; height: 68px; border-radius: 8px;
background: #F4EBDA; border: 1px solid #EADFC6;
transform: translateY(90px);
}
/* Badge + étincelles + curseur */
.wb-badge {
position: absolute; top: -14px; right: -12px; z-index: 6;
padding: 8px 16px; border-radius: 999px;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-weight: 700; font-size: 0.8rem;
box-shadow: 0 14px 34px rgba(200, 146, 56, 0.5);
transform: scale(0) rotate(-10deg); transform-origin: center;
}
.wb-spark { position: absolute; z-index: 6; color: var(--champagne); text-shadow: 0 0 14px rgba(240, 220, 168, 0.7); opacity: 0; }
.wb-spark.s1 { top: -26px; right: 66px; font-size: 1rem; }
.wb-spark.s2 { top: 8px; right: -24px; font-size: 1.3rem; }
.wb-spark.s3 { top: -34px; right: 16px; font-size: 0.8rem; }
.wb-cursor { position: absolute; z-index: 7; left: 82%; top: 88%; opacity: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
/* Mini téléphone (version mobile du site) */
.wb-phone {
position: absolute; right: -14px; bottom: -34px; z-index: 8;
width: 116px; height: 232px; padding: 6px;
background: linear-gradient(160deg, #23262B, #0a0a0a);
border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
transform: translateY(36px) rotate(4deg); opacity: 0;
}
.wb-phone-screen { width: 100%; height: 100%; border-radius: 15px; overflow: hidden; background: #FBF7EF; display: flex; flex-direction: column; }
.wb-pnav { height: 14px; background: #FFFDF8; border-bottom: 1px solid #EFE6D2; }
.wb-pimg { width: 100%; height: 84px; object-fit: cover; }
.wb-pline { height: 6px; border-radius: 3px; background: #D8CFBB; margin: 8px 10px 0; }
.wb-pline.short { width: 55%; }
.wb-pbtn { height: 18px; border-radius: 9px; margin: auto 10px 10px; background: linear-gradient(135deg, var(--champagne), var(--riviera)); }
/* ---------- Timeline 11 s ---------- */
@media (prefers-reduced-motion: no-preference) {
.wb-scene { animation: wbScene 11s linear infinite; }
.wb-url-txt { animation: wbType 11s infinite; }
.wb-caret { animation: wbCaret 11s infinite; }
.wb-load { animation: wbLoad 11s linear infinite; }
.wb-nav { animation: wbNav 11s var(--ease) infinite; }
.wb-hero img { animation: wbImg 11s var(--ease) infinite; }
.wb-hero-veil { animation: wbVeil 11s var(--ease) infinite; }
.wb-t1 { animation: wbT1 11s var(--ease) infinite; }
.wb-t2 { animation: wbT2 11s var(--ease) infinite; }
.wb-btn { animation: wbBtn 11s var(--ease) infinite; }
.wb-cards i:nth-child(1) { animation: wbCard1 11s var(--ease) infinite; }
.wb-cards i:nth-child(2) { animation: wbCard2 11s var(--ease) infinite; }
.wb-cards i:nth-child(3) { animation: wbCard3 11s var(--ease) infinite; }
.wb-cursor { animation: wbCursor 11s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.wb-badge { animation: wbBadge 11s var(--ease) infinite; }
.wb-spark.s1 { animation: wbSpark1 11s ease-out infinite; }
.wb-spark.s2 { animation: wbSpark2 11s ease-out infinite; }
.wb-spark.s3 { animation: wbSpark3 11s ease-out infinite; }
.wb-phone { animation: wbPhone 11s var(--ease) infinite; }
}
@keyframes wbScene { 0% { opacity: 0; transform: translateY(14px); } 4%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes wbType { 0%, 7% { clip-path: inset(0 100% 0 0); } 8% { animation-timing-function: steps(15); } 20%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes wbCaret { 0%, 2%, 5%, 9%, 13%, 17%, 21% { opacity: 1; } 3.5%, 7%, 11%, 15%, 19%, 24%, 100% { opacity: 0; } }
@keyframes wbLoad { 0%, 21% { transform: scaleX(0); opacity: 1; } 27% { transform: scaleX(1); opacity: 1; } 30%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes wbNav { 0%, 27% { transform: translateY(-110%); } 32%, 100% { transform: translateY(0); } }
@keyframes wbImg { 0%, 31% { clip-path: inset(0 100% 0 0); transform: scale(1.08); } 42%, 100% { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes wbVeil { 0%, 31% { opacity: 0; } 42%, 100% { opacity: 1; } }
@keyframes wbT1 { 0%, 38% { transform: scaleX(0); } 43%, 100% { transform: scaleX(1); } }
@keyframes wbT2 { 0%, 42% { transform: scaleX(0); } 47%, 100% { transform: scaleX(1); } }
@keyframes wbBtn {
0%, 46% { transform: scale(0); }
50%, 67% { transform: scale(1); filter: brightness(1); }
69% { transform: scale(1.14); filter: brightness(1.25); }
72%, 100% { transform: scale(1); filter: brightness(1); }
}
@keyframes wbCard1 { 0%, 50% { transform: translateY(90px); } 55%, 100% { transform: translateY(0); } }
@keyframes wbCard2 { 0%, 54% { transform: translateY(90px); } 59%, 100% { transform: translateY(0); } }
@keyframes wbCard3 { 0%, 58% { transform: translateY(90px); } 63%, 100% { transform: translateY(0); } }
@keyframes wbCursor {
0%, 57% { opacity: 0; transform: translate(0, 0) scale(1); }
61% { opacity: 1; }
67% { opacity: 1; transform: translate(-315px, -145px) scale(1); }
69% { transform: translate(-315px, -145px) scale(0.8); }
71% { transform: translate(-315px, -145px) scale(1); }
80% { opacity: 1; }
86%, 100% { opacity: 0; }
}
@keyframes wbBadge { 0%, 71% { transform: scale(0) rotate(-10deg); } 76%, 92% { transform: scale(1) rotate(-4deg); } 96%, 100% { transform: scale(0) rotate(-10deg); } }
@keyframes wbSpark1 { 0%, 73% { opacity: 0; transform: scale(0.3); } 77%, 86% { opacity: 1; transform: scale(1) rotate(20deg); } 92%, 100% { opacity: 0; } }
@keyframes wbSpark2 { 0%, 75% { opacity: 0; transform: scale(0.3); } 79%, 86% { opacity: 1; transform: scale(1) rotate(-14deg); } 92%, 100% { opacity: 0; } }
@keyframes wbSpark3 { 0%, 77% { opacity: 0; transform: scale(0.3); } 81%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; } }
@keyframes wbPhone { 0%, 60% { opacity: 0; transform: translateY(36px) rotate(4deg); } 66%, 100% { opacity: 1; transform: translateY(0) rotate(4deg); } }
/* État final si animations réduites */
@media (prefers-reduced-motion: reduce) {
.wb-url-txt { clip-path: none; }
.wb-caret { opacity: 0; }
.wb-nav { transform: none; }
.wb-hero img { clip-path: none; transform: none; }
.wb-t1, .wb-t2 { transform: scaleX(1); }
.wb-btn { transform: scale(1); }
.wb-cards i { transform: none; }
.wb-badge { transform: scale(1) rotate(-4deg); }
.wb-phone { opacity: 1; transform: rotate(4deg); }
}
@media (max-width: 960px) {
.web-visual { min-height: 0; }
.wb-scene { width: min(430px, 96%); }
.wb-phone { right: -6px; }
}
@media (max-width: 560px) {
.wb-page { height: 250px; }
.wb-hero { height: 120px; }
.wb-phone { width: 96px; height: 194px; bottom: -22px; }
.wb-pimg { height: 66px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
.wb-cursor { animation-name: wbCursorS; }
}
@keyframes wbCursorS {
0%, 57% { opacity: 0; transform: translate(0, 0) scale(1); }
61% { opacity: 1; }
67% { opacity: 1; transform: translate(-208px, -118px) scale(1); }
69% { transform: translate(-208px, -118px) scale(0.8); }
71% { transform: translate(-208px, -118px) scale(1); }
80% { opacity: 1; }
86%, 100% { opacity: 0; }
}
/* =============================================================
V23 — GRANDE SCÈNE « LE SITE SE CONSTRUIT » (au scroll)
============================================================= */
.sb-browser {
position: relative; width: min(560px, 88vw); margin: 0 auto;
background: linear-gradient(170deg, #0B2A44, #061421);
border: 1px solid rgba(240, 220, 168, 0.4);
border-radius: 18px;
box-shadow: 0 46px 100px rgba(0, 0, 0, 0.6);
}
.sb-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(240, 220, 168, 0.18); }
.sb-dot { width: 10px; height: 10px; border-radius: 50%; }
.sb-dot.d1 { background: #FF5F57; } .sb-dot.d2 { background: #FEBC2E; } .sb-dot.d3 { background: #28C840; }
.sb-url {
flex: 1; margin-left: 8px; display: flex; align-items: center;
background: rgba(6, 20, 33, 0.7); border: 1px solid rgba(240, 220, 168, 0.2);
border-radius: 9px; padding: 6px 12px; min-height: 26px;
}
.sb-url-txt {
font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
color: rgba(248, 244, 236, 0.85); white-space: nowrap; overflow: hidden;
clip-path: inset(0 100% 0 0);
transition: clip-path 1s steps(15);
}
.sig-stage.b1 .sb-url-txt { clip-path: inset(0 0 0 0); }
.sb-caret { width: 1.5px; height: 13px; background: var(--champagne); margin-left: 2px; animation: sbCaret 1.1s steps(1) infinite; }
.sig-stage.b3 .sb-caret { opacity: 0; animation: none; }
@keyframes sbCaret { 50% { opacity: 0; } }
.sb-page { position: relative; height: min(340px, 38svh); min-height: 260px; margin: 11px; border-radius: 11px; overflow: hidden; background: #FBF7EF; }
.sb-nav {
position: relative; z-index: 2; display: flex; align-items: center; gap: 9px;
padding: 10px 14px; background: #FFFDF8; border-bottom: 1px solid #EFE6D2;
transform: translateY(-110%); transition: transform 0.7s var(--ease);
}
.sig-stage.b2 .sb-nav { transform: translateY(0); }
.sb-logo { width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(135deg, var(--champagne), var(--riviera)); }
.sb-nav i { width: 28px; height: 4px; border-radius: 2px; background: #D8CFBB; }
.sb-nav i:first-of-type { margin-left: auto; }
.sb-hero { position: relative; height: 58%; overflow: hidden; }
.sb-hero img {
width: 100%; height: 100%; object-fit: cover;
clip-path: inset(0 100% 0 0); transform: scale(1.08);
transition: clip-path 1s var(--ease), transform 1.2s var(--ease);
}
.sb-veil {
position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease);
background: linear-gradient(100deg, rgba(6, 20, 33, 0.72) 8%, rgba(6, 20, 33, 0.12) 70%);
}
.sig-stage.b3 .sb-hero img { clip-path: inset(0 0 0 0); transform: scale(1); }
.sig-stage.b3 .sb-veil { opacity: 1; }
.sb-t1, .sb-t2 {
position: absolute; left: 16px; height: 10px; border-radius: 5px;
transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--ease);
}
.sb-t1 { top: 46px; width: 150px; background: #FBF7EF; }
.sb-t2 { top: 66px; width: 104px; background: linear-gradient(90deg, var(--champagne), var(--riviera)); transition-delay: 0.12s; }
.sig-stage.b4 .sb-t1, .sig-stage.b4 .sb-t2 { transform: scaleX(1); }
.sb-btn {
position: absolute; left: 16px; top: 94px;
padding: 7px 16px; border-radius: 999px;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
transform: scale(0); transition: transform 0.5s var(--ease), filter 0.3s;
}
.sig-stage.b5 .sb-btn { transform: scale(1); }
.sig-stage.b6c .sb-btn { filter: brightness(1.3); }
.sb-cards { display: flex; gap: 9px; padding: 11px 14px; }
.sb-cards i {
flex: 1; height: 66px; border-radius: 9px;
background: #F4EBDA; border: 1px solid #EADFC6;
transform: translateY(90px); transition: transform 0.7s var(--ease);
}
.sb-cards i:nth-child(2) { transition-delay: 0.1s; }
.sb-cards i:nth-child(3) { transition-delay: 0.2s; }
.sig-stage.b5 .sb-cards i { transform: translateY(0); }
.sb-cursor {
position: absolute; z-index: 7; left: 84%; top: 92%; opacity: 0;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
}
.sig-stage.b6 .sb-cursor { opacity: 1; transform: translate(-388px, -186px); }
.sig-stage.b6c .sb-cursor { transform: translate(-388px, -186px) scale(0.82); }
.sig-stage.b7 .sb-cursor { opacity: 0; }
.sb-badge {
position: absolute; top: -16px; right: -14px; z-index: 6;
padding: 9px 18px; border-radius: 999px;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-weight: 700; font-size: 0.86rem;
box-shadow: 0 16px 38px rgba(200, 146, 56, 0.5);
transform: scale(0) rotate(-10deg);
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sig-stage.b7 .sb-badge { transform: scale(1) rotate(-4deg); }
.sb-spark { position: absolute; z-index: 6; color: var(--champagne); text-shadow: 0 0 14px rgba(240, 220, 168, 0.7); opacity: 0; transform: scale(0.3); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.sb-spark.s1 { top: -30px; right: 76px; font-size: 1.05rem; transition-delay: 0.05s; }
.sb-spark.s2 { top: 10px; right: -28px; font-size: 1.35rem; transition-delay: 0.15s; }
.sb-spark.s3 { top: -40px; right: 20px; font-size: 0.85rem; transition-delay: 0.25s; }
.sig-stage.b7 .sb-spark { opacity: 1; transform: scale(1); }
.sb-phone {
position: absolute; right: calc(50% - min(280px, 44vw) - 34px); bottom: -30px; z-index: 8;
width: 128px; height: 254px; padding: 7px;
background: linear-gradient(160deg, #23262B, #0a0a0a);
border-radius: 22px; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
transform: translateY(44px) rotate(4deg); opacity: 0;
transition: transform 0.8s var(--ease), opacity 0.6s var(--ease);
}
.sig-stage.b7 .sb-phone { transform: translateY(0) rotate(4deg); opacity: 1; }
.sb-phone-screen { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #FBF7EF; display: flex; flex-direction: column; }
.sb-pnav { height: 15px; background: #FFFDF8; border-bottom: 1px solid #EFE6D2; }
.sb-pimg { width: 100%; height: 92px; object-fit: cover; }
.sb-pline { height: 6px; border-radius: 3px; background: #D8CFBB; margin: 9px 11px 0; }
.sb-pline.short { width: 55%; }
.sb-pbtn { height: 20px; border-radius: 10px; margin: auto 11px 11px; background: linear-gradient(135deg, var(--champagne), var(--riviera)); }
/* Sans JS : scène aboutie, non épinglée */
html:not(.js) .sb-url-txt { clip-path: none; }
html:not(.js) .sb-caret { display: none; }
html:not(.js) .sb-nav { transform: none; }
html:not(.js) .sb-hero img { clip-path: none; transform: none; }
html:not(.js) .sb-veil { opacity: 1; }
html:not(.js) .sb-t1, html:not(.js) .sb-t2 { transform: scaleX(1); }
html:not(.js) .sb-btn { transform: scale(1); }
html:not(.js) .sb-cards i { transform: none; }
html:not(.js) .sb-badge { transform: scale(1) rotate(-4deg); }
html:not(.js) .sb-spark { opacity: 1; transform: scale(1); }
html:not(.js) .sb-phone { opacity: 1; transform: rotate(4deg); }
html:not(.js) .sb-cursor { display: none; }
@media (max-width: 700px) {
.sb-browser { width: min(430px, 92vw); }
.sb-url-txt { font-size: 0.66rem; letter-spacing: 0.02em; }
.sig-kicker { padding: 0 18px; }
.sb-page { height: 250px; min-height: 0; }
.sb-t1 { width: 120px; } .sb-t2 { width: 84px; }
.sb-btn { top: 84px; }
.sig-stage.b6 .sb-cursor, .sig-stage.b6c .sb-cursor { transform: translate(-262px, -132px); }
.sig-stage.b6c .sb-cursor { transform: translate(-262px, -132px) scale(0.82); }
.sb-phone { right: 2%; width: 104px; height: 208px; bottom: -22px; }
.sb-pimg { height: 72px; }
}
/* =============================================================
V24 — VRAIS LOGOS & IMAGES PARTOUT
============================================================= */
.intro-mark { display: flex; justify-content: center; margin-bottom: 14px; opacity: 0; animation: introIn 0.9s var(--ease) 0.05s forwards; }
.intro-mark svg { filter: drop-shadow(0 6px 18px rgba(200, 146, 56, 0.35)); }
.hs-biz-sub { display: flex; align-items: center; justify-content: center; gap: 5px; }
.brand-chip {
position: absolute; left: 14px; bottom: 12px; z-index: 2;
width: 34px; height: 34px; border-radius: 50%;
background: #FFFFFF; display: grid; place-items: center;
box-shadow: 0 6px 16px rgba(6, 20, 33, 0.35);
}
.contact-photo {
margin: -44px -40px 24px; height: 150px; overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
position: relative;
}
.contact-photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(6, 20, 33, 0.05) 40%, rgba(6, 20, 33, 0.75) 100%);
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
.contact-photo { margin: -30px -24px 20px; height: 120px; }
}
/* =============================================================
V25 — MÊME AXE : méthode 2 leviers + formulaire guidé
============================================================= */
/* Pack Visibilité */
.pack-banner {
margin-top: 30px; display: flex; align-items: center; justify-content: space-between;
gap: 26px; flex-wrap: wrap;
background: linear-gradient(120deg, var(--azure-night) 0%, var(--azure-deep) 100%);
border: 1px solid rgba(240, 220, 168, 0.4); border-radius: var(--radius);
padding: 32px 36px;
box-shadow: 0 24px 60px rgba(5, 37, 56, 0.28);
}
.pack-text { max-width: 640px; }
.pack-badge {
display: inline-block; font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera-light));
padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 12px;
}
.pack-banner h3 { color: #FFFFFF; font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: 8px; }
.pack-plus { color: var(--champagne); }
.pack-banner p { color: rgba(248, 244, 236, 0.78); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.pack-cta { flex-shrink: 0; }
@media (max-width: 700px) { .pack-banner { padding: 26px 22px; } }
/* Menus déroulants du formulaire : listes lisibles */
.quote-form optgroup { font-style: normal; font-weight: 700; color: var(--azure-deep); background: #FFFFFF; }
.quote-form select option { color: var(--ink); font-weight: 400; background: #FFFFFF; }
/* =============================================================
V26 — FICHES PRODUITS
============================================================= */
.fiche-open {
background: none; border: none; cursor: pointer;
font-family: inherit; font-weight: 600; font-size: 0.9rem;
color: var(--azure-deep); padding: 0 0 2px; align-self: flex-start;
border-bottom: 1px solid rgba(10, 61, 98, 0.3);
transition: color 0.25s, border-color 0.25s;
margin-top: auto;
}
.fiche-open:hover { color: var(--riviera-deep); border-color: var(--riviera-deep); }
html:not(.js) .fiche-open { display: none; }
.solution-body .add-cart { margin-top: 0; }
/* Correction : bouton panier qui débordait en largeur intermédiaire */
.solution-card .add-cart { padding-left: 12px; padding-right: 12px; font-size: 0.93rem; }
@media (max-width: 1200px) {
.solutions-grid { grid-template-columns: repeat(2, 1fr); }
}
.fiche-modal {
position: fixed; inset: 0; z-index: 2450;
background: rgba(3, 15, 26, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: grid; place-items: center; padding: 22px;
opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.fiche-modal.open { opacity: 1; visibility: visible; }
.fiche-close {
position: absolute; top: 18px; right: 18px; z-index: 3;
background: rgba(255, 255, 255, 0.1); border-color: rgba(248, 244, 236, 0.35); color: var(--ivory);
}
.fiche-sheet {
width: 100%; max-width: 940px; max-height: 88vh; overflow-y: auto;
background: #FFFDF8; border: 1px solid rgba(240, 220, 168, 0.5);
border-radius: 22px; box-shadow: 0 50px 140px rgba(0, 0, 0, 0.55);
transform: translateY(16px) scale(0.985);
transition: transform 0.35s var(--ease);
}
.fiche-modal.open .fiche-sheet { transform: none; }
.fiche-grid { display: grid; grid-template-columns: 1fr 1.1fr; }
.fiche-gallery {
padding: 22px; display: flex; flex-direction: column; gap: 12px;
background: linear-gradient(170deg, #F4EDDD 0%, #FBF7EF 100%);
border-right: 1px solid var(--line-soft);
}
.fiche-main { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ivory-warm); }
.fiche-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.fiche-img.is-active { opacity: 1; }
.fiche-thumbs { display: flex; gap: 10px; }
.fiche-thumb {
width: 66px; height: 50px; border-radius: 8px; overflow: hidden;
padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
opacity: 0.7; transition: opacity 0.25s, border-color 0.25s;
}
.fiche-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-thumb.is-active, .fiche-thumb:hover { opacity: 1; }
.fiche-thumb.is-active { border-color: var(--riviera); }
.fiche-body { padding: 30px 32px 28px; }
.fiche-tag {
display: inline-block; font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
background: var(--azure-night); color: var(--ivory);
padding: 6px 12px; border-radius: var(--radius-pill);
}
.fiche-body h3 { color: var(--ink); font-size: 1.6rem; margin: 12px 0 8px; }
.fiche-desc { color: var(--graphite); line-height: 1.6; margin-bottom: 18px; }
.fiche-steps { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; }
.fiche-steps li { display: flex; gap: 10px; color: var(--graphite); font-size: 0.93rem; line-height: 1.45; }
.fiche-steps b {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-size: 0.72rem; font-weight: 700;
display: grid; place-items: center; transform: translateY(1px);
}
.fiche-specs { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-specs li {
font-size: 0.76rem; font-weight: 600; color: var(--azure-deep);
background: rgba(10, 61, 98, 0.07); padding: 6px 12px; border-radius: var(--radius-pill);
}
.fiche-includes h3 {
font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--riviera-deep); margin-bottom: 8px;
}
.fiche-includes ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.fiche-includes li { position: relative; padding-left: 22px; color: var(--graphite); font-size: 0.92rem; line-height: 1.45; }
.fiche-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--riviera); font-weight: 700; }
.fiche-buy {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 16px 18px; border-radius: 14px;
background: rgba(200, 146, 56, 0.08); border: 1px solid rgba(200, 146, 56, 0.25);
}
.fiche-price-from {
display: block; font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--graphite-soft);
margin-bottom: 2px;
}
.fiche-price strong { font-size: 1.5rem; color: var(--ink); }
.fiche-buy .btn { padding: 13px 24px; }
.fiche-note { margin-top: 14px; font-size: 0.85rem; color: var(--graphite-soft); line-height: 1.5; }
.fiche-note a { color: var(--riviera-deep); font-weight: 600; }
@media (max-width: 880px) {
.fiche-modal { padding: 12px; }
.fiche-grid { grid-template-columns: 1fr; }
.fiche-gallery { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 16px; }
.fiche-main { aspect-ratio: 16 / 10; }
.fiche-body { padding: 24px 20px 22px; }
.fiche-sheet { max-height: 92vh; border-radius: 18px; }
.fiche-close { top: 10px; right: 10px; }
}
/* V26.1 : la galerie remplit la hauteur de la fiche en desktop */
@media (min-width: 881px) {
.fiche-main { aspect-ratio: auto; flex: 1; min-height: 340px; }
}
/* =============================================================
V28 — CONFORT TACTILE MOBILE
============================================================= */
html { -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; }
a, button, label, select, input, textarea { touch-action: manipulation; }
@media (pointer: coarse) {
/* Zones de tap >= 44px (recommandation Apple/Google) */
.hero-slidenav-item { padding: 14px 4px; }
.menu-toggle { padding: 14px 12px; margin: -14px -12px; }
.fiche-open {
display: inline-flex; align-items: center; min-height: 44px;
padding-top: 8px; padding-bottom: 8px;
}
.footer-social a { min-height: 42px; }
.footer-links a { display: inline-block; padding: 5px 0; }
.cart-qty button { width: 38px; height: 38px; font-size: 1.1rem; }
.cart-del { padding: 12px; }
.fiche-thumb { width: 74px; height: 56px; }
/* Le doigt n'a pas de survol : états actifs nets au tap */
.btn:active { transform: scale(0.97); }
.fiche-thumb:active, .hero-slidenav-item:active { opacity: 1; }
}
/* =============================================================
V29 — RENDUS PRODUITS LOGOTÉS + CARTE CLIQUABLE
============================================================= */
.solution-card.has-fiche { cursor: pointer; }
.solution-mini {
position: absolute; right: 12px; bottom: 12px; z-index: 2;
width: 118px; transform: rotate(-2.5deg);
filter: drop-shadow(0 10px 18px rgba(6, 20, 33, 0.38));
}
.solution-mini svg { width: 100%; height: auto; display: block; }
.fiche-render { background: #F1E7CF; }
.fiche-render > svg { width: 100%; height: 100%; display: block; }
.fiche-thumb svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) { .solution-mini { width: 104px; } }
/* =============================================================
V29 — CINÉMA DE CONSTRUCTION (70 % du site)
============================================================= */
/* ---- La méthode : scène épinglée m1..m7 ---- */
/* ---- Solutions : chaque carte se construit à l'apparition ---- */
@media (prefers-reduced-motion: no-preference) {
html.js .solution-card.reveal.visible .solution-visual img { animation: cnsImg 0.9s var(--ease) both; }
html.js .solution-card.reveal.visible .solution-tag { animation: cnsTag 0.5s var(--ease) 0.35s both; }
html.js .solution-card.reveal.visible .brand-chip { animation: cnsPop 0.5s var(--ease) 0.55s both; }
html.js .solution-card.reveal.visible .solution-mini { animation: cnsMini 0.55s var(--ease) 0.65s both; }
html.js .solution-card.reveal.visible .solution-body h3 { animation: introIn 0.5s var(--ease) 0.4s both; }
html.js .solution-card.reveal.visible .solution-body > p { animation: introIn 0.5s var(--ease) 0.5s both; }
html.js .solution-card.reveal.visible .solution-for { animation: introIn 0.5s var(--ease) 0.6s both; }
html.js .solution-card.reveal.visible .fiche-open { animation: introIn 0.5s var(--ease) 0.7s both; }
html.js .solution-card.reveal.visible .add-cart { animation: introIn 0.5s var(--ease) 0.8s both; }
/* Tarifs : les formules s'assemblent ligne par ligne */
html.js .price-card.reveal.visible .price-badge { animation: cnsPop 0.5s var(--ease) 0.25s both; }
html.js .price-card.reveal.visible .price-amount { animation: introIn 0.55s var(--ease) 0.3s both; }
html.js .price-card.reveal.visible .price-features li { animation: cnsLine 0.45s var(--ease) both; }
html.js .price-card.reveal.visible .price-features li:nth-child(1) { animation-delay: 0.42s; }
html.js .price-card.reveal.visible .price-features li:nth-child(2) { animation-delay: 0.5s; }
html.js .price-card.reveal.visible .price-features li:nth-child(3) { animation-delay: 0.58s; }
html.js .price-card.reveal.visible .price-features li:nth-child(4) { animation-delay: 0.66s; }
html.js .price-card.reveal.visible .price-features li:nth-child(5) { animation-delay: 0.74s; }
html.js .price-card.reveal.visible .price-features li:nth-child(6) { animation-delay: 0.82s; }
html.js .price-card.reveal.visible .btn { animation: introIn 0.5s var(--ease) 0.92s both; }
html.js .pack-banner.reveal.visible .pack-badge { animation: cnsPop 0.5s var(--ease) 0.25s both; }
html.js .pack-banner.reveal.visible .pack-cta { animation: introIn 0.55s var(--ease) 0.5s both; }
}
@keyframes cnsImg { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cnsTag { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes cnsPop { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: none; } }
@keyframes cnsMini { from { opacity: 0; transform: rotate(-2.5deg) scale(0.35); } to { opacity: 1; transform: rotate(-2.5deg) scale(1); } }
@keyframes cnsLine { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* =============================================================
V30 — PASSE PREMIUM : motion, CRO, perf, a11y
============================================================= */
/* Focus clavier : anneau or élégant */
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--riviera); outline-offset: 3px; border-radius: 3px; }
.btn:focus-visible { outline-offset: 2px; }
/* Perf : les sections basses ne se calculent qu'à l'approche */
#temoignages, #faq { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* ---- Hero : profondeur à la sortie ---- */
@media (prefers-reduced-motion: no-preference) {
html.js .hero .container { transform: translateY(calc(var(--hx, 0) * -64px)); }
html.js .hero-scroll { opacity: calc(1 - var(--hx, 0) * 2.4); }
}
/* ---- Titres mot à mot ---- */
html.js .section-head h2 .w2 {
display: inline-block; overflow: hidden; vertical-align: bottom;
padding: 0 0.06em 0.13em; margin: 0 -0.06em -0.13em;
}
html.js .section-head h2 .w2i {
display: inline-block; transform: translateY(112%);
transition: transform 0.85s var(--ease);
}
html.js .section-head.reveal.visible h2 .w2i { transform: none; }
/* ---- Fiches : réassurance ---- */
.fiche-trust { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fiche-trust li { display: flex; gap: 10px; align-items: baseline; font-size: 0.86rem; color: var(--graphite); line-height: 1.45; }
.fiche-trust svg { flex-shrink: 0; color: var(--riviera-deep); transform: translateY(2px); }
.fiche-trust strong { color: var(--ink); }
/* ---- Fiches : mini-FAQ produit ---- */
.fiche-faq { margin-top: 16px; border-top: 1px solid var(--line-soft); }
.ff-item { border-bottom: 1px solid var(--line-soft); }
.ff-item summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 2px; font-weight: 600; font-size: 0.92rem; color: var(--ink);
transition: color 0.25s;
}
.ff-item summary::-webkit-details-marker { display: none; }
.ff-item summary:hover { color: var(--riviera-deep); }
.ff-chev { flex-shrink: 0; color: var(--riviera); transition: transform 0.35s var(--ease); }
.ff-item[open] .ff-chev { transform: rotate(180deg); }
.ff-item p { padding: 0 2px 14px; font-size: 0.9rem; color: var(--graphite); line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
.ff-item[open] p { animation: introIn 0.4s var(--ease) both; }
}
/* ---- Fiches (mobile) + zoom lent de la photo ----
V58.3 : .fiche-buy n'est PLUS sticky sur mobile — elle entrait en collision
avec le texte de description au-dessus (le point d'ancrage sticky tombait
en plein milieu du paragraphe sur les fiches courtes). La barre #fiche-sticky
(résumé compact + bouton, injectée en JS) assure déjà ce rôle en dessous de 760px. */
@media (max-width: 880px) {
.fiche-buy {
background: #FAF1DE;
box-shadow: 0 4px 18px rgba(6, 20, 33, 0.08);
}
}
@media (prefers-reduced-motion: no-preference) {
.fiche-main .fiche-img.is-active { animation: fkb 7s ease-out forwards; }
}
@keyframes fkb { from { transform: scale(1); } to { transform: scale(1.05); } }
/* ---- Méthode : flèches qui se dessinent ---- */
@media (prefers-reduced-motion: no-preference) {
}
/* ---- Panier : vol de l'article + pulsation ---- */
.cart-fly {
position: fixed; z-index: 3200; width: 16px; height: 16px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--champagne), var(--riviera));
box-shadow: 0 4px 14px rgba(200, 146, 56, 0.55);
pointer-events: none; transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
.cart-btn.cart-pulse { animation: cartPulse 0.55s var(--ease); }
.cart-btn.cart-pulse .cart-count { animation: countPop 0.55s var(--ease); }
}
@keyframes cartPulse { 30% { transform: scale(1.18); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes countPop { 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* ---- Panier vide : CTA ---- */
.cart-browse {
margin-top: 20px; border: 1.5px solid rgba(240, 220, 168, 0.5);
color: var(--champagne); background: none; font-size: 0.95rem; padding: 12px 22px;
}
.cart-browse:hover { background: rgba(240, 220, 168, 0.12); color: var(--champagne); }
/* =============================================================
V31 — BOUTIQUE TRANQUILLE + ANIMATIONS GARANTIES TÉLÉPHONE
============================================================= */
/* ---- Toast « ajouté au panier » ---- */
.cart-toast {
pointer-events: none; visibility: hidden;
transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
position: fixed; left: 50%; bottom: 26px; z-index: 2700;
display: flex; align-items: center; gap: 12px;
max-width: min(480px, calc(100vw - 32px));
padding: 12px 14px 12px 12px; border-radius: 16px;
background: linear-gradient(170deg, #0B2A44 0%, #061421 100%);
border: 1px solid rgba(240, 220, 168, 0.45);
box-shadow: 0 22px 60px rgba(3, 15, 26, 0.55);
transform: translate(-50%, calc(100% + 40px));
will-change: transform;
}
.cart-toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform 0.45s var(--ease), visibility 0s; }
.cart-toast .cart-toast-btn { pointer-events: auto; }
.cart-toast-ico {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); display: grid; place-items: center;
}
.cart-toast-body { display: flex; flex-direction: column; min-width: 0; }
.cart-toast-body b { color: var(--ivory); font-size: 0.9rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-toast-body small { color: rgba(248, 244, 236, 0.55); font-size: 0.74rem; }
.cart-toast-btn {
flex-shrink: 0; cursor: pointer; border: 1px solid rgba(240, 220, 168, 0.5);
background: rgba(240, 220, 168, 0.1); color: var(--champagne);
font-family: inherit; font-weight: 600; font-size: 0.82rem;
padding: 9px 14px; border-radius: 999px;
transition: background 0.25s;
}
.cart-toast-btn:hover { background: rgba(240, 220, 168, 0.22); }
@media (max-width: 700px) { .cart-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* ---- Continuer mes achats ---- */
.cart-continue {
width: 100%; margin-top: 10px; padding: 10px;
background: none; border: none; cursor: pointer;
color: rgba(248, 244, 236, 0.6); font-family: inherit; font-size: 0.9rem; font-weight: 500;
transition: color 0.25s;
}
.cart-continue:hover { color: var(--champagne); }
/* ---- Quantité dans la fiche ---- */
.fiche-qty {
display: inline-flex; align-items: center; gap: 2px;
background: #FFFFFF; border: 1.5px solid var(--line);
border-radius: 999px; padding: 3px;
}
.fiche-qty button {
width: 34px; height: 34px; border: none; border-radius: 50%;
background: none; cursor: pointer; color: var(--azure-deep);
font-size: 1.15rem; line-height: 1; font-family: inherit;
transition: background 0.2s;
}
.fiche-qty button:hover { background: rgba(10, 61, 98, 0.08); }
.fiche-qty b { min-width: 26px; text-align: center; font-size: 0.98rem; color: var(--ink); }
@media (pointer: coarse) { .fiche-qty button { width: 40px; height: 40px; } }
/* ---- Fluidité mobile : flous allégés ---- */
@media (pointer: coarse) {
.site-header { backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); }
.mobile-sticky-cta { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fiche-modal, .order-modal { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}
/* ---- Bandeau no-JS : masqué dès qu'un repli anime la page ---- */
.env-note { display: none; }
html:not(.js) .env-note {
display: block; position: fixed; left: 50%; bottom: 14px; z-index: 3000;
transform: translateX(-50%);
max-width: min(420px, calc(100vw - 90px));
padding: 9px 16px; border-radius: 999px; text-align: center;
background: rgba(6, 20, 33, 0.92); color: rgba(248, 244, 236, 0.85);
font-size: 0.78rem; line-height: 1.4;
border: 1px solid rgba(240, 220, 168, 0.4);
}
.env-note b { color: var(--champagne); }
/* =============================================================
V31 — REPLI SANS JAVASCRIPT : cinéma piloté par le scroll (pur CSS)
============================================================= */
@supports (animation-timeline: view()) {
html:not(.js) .env-note { display: none; }
/* Révélations d'entrée */
html:not(.js) .reveal {
animation: nvReveal 1ms linear both;
animation-timeline: view();
animation-range: entry 8% entry 42%;
}
/* ---- LE SITE SE CONSTRUIT sans JS : la scène s'épingle et se joue ---- */
html:not(.js) .sig-wrap { height: 200vh; view-timeline: --sig block; }
html:not(.js) .sig-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; padding: 0; }
html:not(.js) .sb-url-txt { animation: nvClip 1ms linear both; animation-timeline: --sig; animation-range: cover 31% cover 35%; }
html:not(.js) .sb-nav { animation: nvNav 1ms linear both; animation-timeline: --sig; animation-range: cover 35% cover 38%; }
html:not(.js) .sb-hero img { animation: nvImg 1ms linear both; animation-timeline: --sig; animation-range: cover 39% cover 45%; }
html:not(.js) .sb-veil { animation: nvFade 1ms linear both; animation-timeline: --sig; animation-range: cover 41% cover 45%; }
html:not(.js) .sb-t1 { animation: nvBar 1ms linear both; animation-timeline: --sig; animation-range: cover 43% cover 47%; }
html:not(.js) .sb-t2 { animation: nvBar 1ms linear both; animation-timeline: --sig; animation-range: cover 44% cover 48%; }
html:not(.js) .sb-btn { animation: nvPop 1ms linear both; animation-timeline: --sig; animation-range: cover 47% cover 50%; }
html:not(.js) .sb-cards i:nth-child(1) { animation: nvCard 1ms linear both; animation-timeline: --sig; animation-range: cover 47% cover 51%; }
html:not(.js) .sb-cards i:nth-child(2) { animation: nvCard 1ms linear both; animation-timeline: --sig; animation-range: cover 48% cover 52%; }
html:not(.js) .sb-cards i:nth-child(3) { animation: nvCard 1ms linear both; animation-timeline: --sig; animation-range: cover 49% cover 53%; }
html:not(.js) .sb-badge { animation: nvBadge 1ms linear both; animation-timeline: --sig; animation-range: cover 60% cover 64%; }
html:not(.js) .sb-spark { animation: nvSpark 1ms linear both; animation-timeline: --sig; animation-range: cover 61% cover 65%; }
html:not(.js) .sig-line2 { animation: nvLine 1ms linear both; animation-timeline: --sig; animation-range: cover 58% cover 62%; }
html:not(.js) .sig-cta { animation: nvCta 1ms linear both; animation-timeline: --sig; animation-range: cover 63% cover 67%; }
}
@keyframes nvReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes nvStep { from { opacity: 0; visibility: hidden; transform: translateY(46px) scale(0.96); } to { opacity: 1; visibility: visible; transform: none; } }
@keyframes nvNote { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nvClip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nvNav { from { transform: translateY(-110%); } to { transform: translateY(0); } }
@keyframes nvImg { from { clip-path: inset(0 100% 0 0); transform: scale(1.08); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes nvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nvBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nvPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes nvCard { from { transform: translateY(90px); } to { transform: translateY(0); } }
@keyframes nvBadge { from { transform: scale(0) rotate(-4deg); } to { transform: scale(1) rotate(-4deg); } }
@keyframes nvSpark { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes nvLine { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes nvCta { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* =============================================================
V32 — LA COLLECTION : showroom des cartes NFC
============================================================= */
.collection {
--col-a: #E1BC72;
position: relative; overflow: hidden;
background:
radial-gradient(ellipse 70% 55% at 50% 0%, rgba(36, 118, 184, 0.16) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 105%, rgba(200, 146, 56, 0.12) 0%, transparent 55%),
linear-gradient(175deg, #07243C 0%, #061421 100%);
color: var(--ivory);
}
.collection .section-head h2 { color: var(--ivory); }
.collection .section-intro { color: rgba(248, 244, 236, 0.7); }
.col-ghost {
position: absolute; left: 0; right: 0; top: 44%;
transform: translateY(-50%);
text-align: center; white-space: nowrap; overflow: hidden;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(4.5rem, 17vw, 15rem); letter-spacing: 0.02em;
color: rgba(248, 244, 236, 0.045);
pointer-events: none; user-select: none;
transition: opacity 0.4s;
}
.col-stage { position: relative; margin-top: 8px; }
.col-glow {
position: absolute; left: 50%; top: 50%; z-index: 0;
width: 380px; height: 380px; border-radius: 50%;
transform: translate(-50%, -50%);
background: #E1BC72; opacity: 0.16; filter: blur(90px);
transition: background 0.7s var(--ease);
pointer-events: none;
}
.col-track {
position: relative; z-index: 1;
display: flex; align-items: center; gap: clamp(18px, 3.5vw, 44px);
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
touch-action: pan-x pinch-zoom; /* V58.1 : le glissé horizontal ne fait plus défiler la page */
padding: 56px calc(50% - min(165px, 31vw)) 40px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.col-track::-webkit-scrollbar { display: none; }
.col-track:focus-visible { outline: 2.5px solid var(--riviera); outline-offset: -3px; border-radius: 18px; }
.col-slide { flex: 0 0 auto; scroll-snap-align: center; perspective: 1100px; }
/* ---- La carte : une seule famille, huit plateformes ---- */
.nfc3d {
position: relative; overflow: hidden;
width: min(400px, 72vw); aspect-ratio: 8 / 5;
border-radius: 22px; padding: 7% 8%;
display: flex; flex-direction: column;
background:
radial-gradient(ellipse 120% 90% at 20% 0%, rgba(36, 118, 184, 0.35) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 105% 110%, color-mix(in srgb, var(--brand) 24%, transparent) 0%, transparent 60%),
linear-gradient(155deg, #0E3355 0%, #071B2D 55%, #05121E 100%);
border: 1px solid rgba(235, 215, 161, 0.5);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset,
0 24px 50px rgba(2, 10, 18, 0.55),
0 60px 110px rgba(2, 10, 18, 0.4);
transform: rotateX(7deg) rotateY(-13deg) scale(0.86);
opacity: 0.55; filter: saturate(0.75);
transition: transform 0.65s var(--ease), opacity 0.5s, filter 0.5s, box-shadow 0.65s var(--ease);
}
.col-slide.is-on .nfc3d {
transform: rotateX(5deg) rotateY(-9deg) scale(1);
opacity: 1; filter: none;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset,
0 30px 60px rgba(2, 10, 18, 0.6),
0 80px 150px rgba(2, 10, 18, 0.45),
0 30px 90px -20px color-mix(in srgb, var(--brand) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.col-slide.is-on .nfc3d { animation: n3float 6.5s ease-in-out infinite; }
}
@keyframes n3float {
0%, 100% { transform: rotateX(5deg) rotateY(-9deg) scale(1) translateY(0); }
50% { transform: rotateX(6.5deg) rotateY(-11deg) scale(1) translateY(-9px); }
}
@media (pointer: fine) {
.col-slide:not(.is-on) .nfc3d:hover { opacity: 0.85; transform: rotateX(6deg) rotateY(-11deg) scale(0.9) translateY(-6px); cursor: pointer; }
}
.n3-shine {
position: absolute; inset: 0; z-index: 3; pointer-events: none;
background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.05) 54%, transparent 66%);
transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
.col-slide.is-on .n3-shine { animation: n3shine 5.2s var(--ease) infinite; }
}
@keyframes n3shine { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
.n3-name {
margin-top: 10px;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.3rem, 4vw, 1.8rem); color: var(--ivory); line-height: 1.05;
}
.n3-sub { margin-top: 3px; font-size: clamp(0.7rem, 1.8vw, 0.82rem); color: rgba(248, 244, 236, 0.55); }
.n3-stars { color: #E1BC72; letter-spacing: 3px; font-size: 0.9em; }
.n3-line {
position: absolute; left: 8%; right: 8%; bottom: 7%;
height: 2.5px; border-radius: 2px;
background: linear-gradient(90deg, var(--brand), transparent 70%);
opacity: 0.85;
}
/* ---- Flèches ---- */
.col-arrow {
position: absolute; top: 50%; z-index: 4;
transform: translateY(-50%);
background: rgba(248, 244, 236, 0.08);
border-color: rgba(240, 220, 168, 0.4); color: var(--ivory);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.col-prev { left: max(14px, 4vw); }
.col-next { right: max(14px, 4vw); }
.col-arrow:hover:not(:disabled) { background: var(--riviera); border-color: var(--riviera); color: var(--azure-night); }
html:not(.js) .col-arrow { display: none; }
@media (pointer: coarse) { .col-arrow { display: none; } }
/* ---- Panneau d'information ---- */
.col-info { text-align: center; max-width: 660px; margin: 0 auto; }
.col-name { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--ivory); }
.col-tag { margin-top: 6px; color: rgba(248, 244, 236, 0.72); font-size: 1.02rem; }
.col-ben {
list-style: none; padding: 0; margin: 16px 0 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.col-ben li {
font-size: 0.8rem; font-weight: 600; color: var(--champagne);
background: rgba(240, 220, 168, 0.1); border: 1px solid rgba(240, 220, 168, 0.28);
padding: 7px 14px; border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
.col-info.swap .col-name { animation: colSwap 0.5s var(--ease) both; }
.col-info.swap .col-tag { animation: colSwap 0.5s var(--ease) 0.06s both; }
.col-info.swap .col-ben li { animation: colSwap 0.45s var(--ease) both; }
.col-info.swap .col-ben li:nth-child(2) { animation-delay: 0.07s; }
.col-info.swap .col-ben li:nth-child(3) { animation-delay: 0.14s; }
}
@keyframes colSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.col-buy {
margin-top: 22px;
display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
padding: 16px 18px; border-radius: 16px;
background: rgba(248, 244, 236, 0.05);
border: 1px solid rgba(240, 220, 168, 0.28);
}
.col-buy .fiche-price { text-align: left; }
.col-buy .fiche-price strong { color: var(--ivory); }
.col-buy .fiche-price-from { color: rgba(248, 244, 236, 0.55); }
.col-buy .fiche-qty { background: rgba(6, 20, 33, 0.55); border-color: rgba(240, 220, 168, 0.35); }
.col-buy .fiche-qty button { color: var(--champagne); }
.col-buy .fiche-qty button:hover { background: rgba(240, 220, 168, 0.14); }
.col-buy .fiche-qty b { color: var(--ivory); }
.col-thumbs {
margin-top: 24px;
display: flex; justify-content: safe center; gap: 10px; flex-wrap: nowrap;
overflow-x: auto; padding: 6px 4px; scrollbar-width: none;
scroll-snap-type: x proximity;
}
.col-thumb { scroll-snap-align: center; }
.col-thumbs::-webkit-scrollbar { display: none; }
.col-thumb {
flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: rgba(248, 244, 236, 0.07);
border: 1.5px solid rgba(248, 244, 236, 0.18);
transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.col-thumb svg { width: 21px; height: 21px; }
.col-thumb:hover { border-color: rgba(248, 244, 236, 0.5); background: rgba(248, 244, 236, 0.14); }
.col-thumb.is-on {
border-color: var(--col-a, var(--riviera));
background: rgba(248, 244, 236, 0.12);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-a, #E1BC72) 22%, transparent);
}
.col-perso { margin-top: 18px; font-size: 0.86rem; color: rgba(248, 244, 236, 0.55); }
.col-perso a { color: var(--champagne); font-weight: 600; border-bottom: 1px solid rgba(240, 220, 168, 0.4); }
/* Entrée en scène : l'éventail se déploie */
@media (prefers-reduced-motion: no-preference) {
html.js .col-stage.reveal.visible .col-slide { animation: colIn 0.9s var(--ease) both; }
html.js .col-stage.reveal.visible .col-slide:nth-child(2) { animation-delay: 0.08s; }
html.js .col-stage.reveal.visible .col-slide:nth-child(3) { animation-delay: 0.16s; }
html.js .col-stage.reveal.visible .col-slide:nth-child(4) { animation-delay: 0.24s; }
html.js .col-stage.reveal.visible .col-slide:nth-child(n+5) { animation-delay: 0.3s; }
}
@keyframes colIn { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
.col-track { padding-top: 40px; padding-bottom: 30px; }
.col-glow { width: 260px; height: 260px; filter: blur(70px); }
.col-ghost { top: 40%; }
.col-buy { gap: 12px; padding: 14px; }
.col-thumbs { justify-content: flex-start; }
}
/* =============================================================
V33 — CATALOGUE UNIQUE + FICHE RÉSEAU DYNAMIQUE
============================================================= */
#solutions[hidden] { display: none !important; }
.col-slide.is-on .nfc3d { cursor: pointer; }
/* Au survol, la carte se fige et se présente (et redevient cliquable de façon stable) */
@media (pointer: fine) {
/* dès que le pointeur entre dans la scène, la carte se stabilise */
.col-stage:hover .col-slide.is-on .nfc3d { animation-play-state: paused; }
.col-slide.is-on .nfc3d:hover {
animation: none;
transform: rotateX(4deg) rotateY(-6deg) scale(1.035) translateY(-8px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset,
0 36px 70px rgba(2, 10, 18, 0.62),
0 90px 160px rgba(2, 10, 18, 0.48),
0 34px 100px -18px color-mix(in srgb, var(--brand) 62%, transparent);
}
}
.n3-badge {
position: absolute; top: 10px; right: 12px; z-index: 4;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
padding: 5px 10px; border-radius: 999px;
box-shadow: 0 6px 16px rgba(200, 146, 56, 0.45);
}
.col-fiche-link {
margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
background: none; border: none; cursor: pointer; font-family: inherit;
font-weight: 600; font-size: 0.95rem; color: var(--champagne);
border-bottom: 1px solid rgba(240, 220, 168, 0.45); padding: 0 2px;
transition: color 0.25s, border-color 0.25s;
}
.col-fiche-link:hover { color: var(--ivory); border-color: var(--ivory); }
/* ---- Fiche réseau : la carte vivante en grand ---- */
.fiche-live {
display: grid; place-items: center;
background:
radial-gradient(ellipse 80% 60% at 50% 20%, rgba(36, 118, 184, 0.22) 0%, transparent 60%),
linear-gradient(175deg, #0A2C49 0%, #061421 100%);
}
.fiche-live .nfc3d {
width: 88%; opacity: 1; filter: none;
transform: rotateX(6deg) rotateY(-10deg) scale(1);
animation: none; cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
.fiche-live.is-active .nfc3d { animation: n3float 6.5s ease-in-out infinite; }
}
/* ---- Fiche réseau : la plaque carrée (référence retravaillée Avis Azur) ---- */
.fiche-plaque {
display: grid; place-items: center;
background: linear-gradient(175deg, #F4EDDD 0%, #E9DDBE 100%);
}
.pq {
--pqa: #25D366;
position: relative; overflow: hidden;
width: min(86%, 410px); aspect-ratio: 1 / 1;
border-radius: 30px; padding: 5.5% 7% 5%;
display: flex; flex-direction: column; align-items: center; text-align: center;
color: #FFFFFF;
background:
radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.28) 0%, transparent 55%),
linear-gradient(165deg, color-mix(in srgb, var(--pqa) 88%, #FFFFFF 12%) 0%, var(--pqa) 45%, color-mix(in srgb, var(--pqa) 72%, #000000 28%) 100%);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 26px 60px rgba(6, 20, 33, 0.35),
0 4px 14px rgba(6, 20, 33, 0.22);
transform: rotate(-2.5deg);
}
.pq.pq-insta {
background:
radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
linear-gradient(140deg, #FEDA75 0%, #FA7E1E 26%, #D62976 55%, #962FBF 80%, #4F5BD5 100%);
}
.pq.pq-dark { color: #16130A; }
.pq.pq-dark .pq-foot i { color: rgba(22, 19, 10, 0.75); }
.pq-pattern { position: absolute; inset: 0; pointer-events: none; }
.pq-pattern span { position: absolute; opacity: 0.14; }
.pq-pattern span svg { width: 100%; height: 100%; }
.pq-pattern span:nth-child(1) { width: 34px; top: 7%; left: 9%; transform: rotate(-14deg); }
.pq-pattern span:nth-child(2) { width: 22px; top: 5%; right: 14%; transform: rotate(12deg); }
.pq-pattern span:nth-child(3) { width: 26px; top: 26%; left: 4%; transform: rotate(9deg); }
.pq-pattern span:nth-child(4) { width: 20px; top: 30%; right: 6%; transform: rotate(-10deg); }
.pq-pattern span:nth-child(5) { width: 30px; bottom: 24%; left: 8%; transform: rotate(16deg); }
.pq-pattern span:nth-child(6) { width: 18px; bottom: 28%; right: 10%; transform: rotate(-18deg); }
.pq-pattern span:nth-child(7) { width: 24px; bottom: 7%; right: 22%; transform: rotate(8deg); }
.pq-chip {
position: relative; z-index: 1;
width: 18%; aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255, 255, 255, 0.2);
border: 1.5px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 24px rgba(6, 20, 33, 0.25);
margin-top: 2%;
}
.pq-chip svg { width: 58%; height: auto; }
.pq-name {
position: relative; z-index: 1; margin-top: 3%;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.25rem, 4.6vw, 1.75rem); line-height: 1;
text-shadow: 0 2px 10px rgba(6, 20, 33, 0.2);
}
.pq-cta { position: relative; z-index: 1; margin-top: 1.5%; font-size: clamp(0.74rem, 2.2vw, 0.9rem); font-weight: 600; opacity: 0.94; }
.pq-row {
position: relative; z-index: 1; margin-top: auto;
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-width: 0;
}
.pq-opt { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0; }
.pq-opt svg { flex-shrink: 0; width: clamp(15px, 4.5vw, 22px); height: auto; opacity: 0.95; }
.pq-opt i { font-style: normal; font-size: clamp(0.42rem, 1.5vw, 0.58rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: left; line-height: 1.3; opacity: 0.92; }
.pq-or { flex-shrink: 0; font-size: clamp(0.55rem, 1.6vw, 0.68rem); font-weight: 700; opacity: 0.7; }
.pq-foot {
position: relative; z-index: 1; margin-top: 3.5%;
display: flex; align-items: center; gap: 7px;
padding-top: 3%; border-top: 1px solid rgba(255, 255, 255, 0.3);
width: 100%; justify-content: center;
}
.pq-foot i { font-style: normal; font-size: clamp(0.6rem, 1.9vw, 0.74rem); font-weight: 600; letter-spacing: 0.08em; opacity: 0.95; }
/* vignettes de la fiche réseau : icônes de format */
.ft-ico { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; color: var(--azure-deep); background: #F1E7CF; }
.ft-ico i { font-style: normal; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
/* =============================================================
V34 — ONGLETS STICKY + FORMES RÉELLES (cartes vs plaques)
============================================================= */
.col-tabs-sentinel { height: 1px; }
.col-tabs {
position: sticky; top: calc(var(--header-h) - 1px); z-index: 30;
padding: 10px 0;
background: rgba(6, 22, 37, 0.86);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: box-shadow 0.3s var(--ease), background 0.3s;
}
.col-tabs.is-stuck { box-shadow: 0 14px 34px rgba(2, 10, 18, 0.45); background: rgba(5, 18, 30, 0.94); }
.col-tabs-inner {
max-width: var(--container, 1200px); margin: 0 auto;
display: flex; gap: 8px; padding: 0 20px;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
justify-content: safe center;
}
.col-tabs-inner::-webkit-scrollbar { display: none; }
.col-tab {
flex-shrink: 0; cursor: pointer;
font-family: inherit; font-weight: 600; font-size: 0.88rem;
color: rgba(248, 244, 236, 0.62);
background: rgba(248, 244, 236, 0.06);
border: 1.5px solid rgba(248, 244, 236, 0.14);
padding: 10px 18px; border-radius: 999px;
transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
min-height: 42px;
}
.col-tab:hover { color: var(--ivory); background: rgba(248, 244, 236, 0.12); }
.col-tab.is-on {
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
border-color: transparent;
box-shadow: 0 8px 22px rgba(200, 146, 56, 0.35);
}
@media (max-width: 700px) {
.col-tabs-inner { justify-content: flex-start; padding: 0 14px; }
.col-tab { font-size: 0.83rem; padding: 9px 15px; }
}
/* ---- Les PLAQUES du rail : un vrai objet différent ---- */
.col-slide.f-plq .pq3d {
position: relative; overflow: hidden;
width: min(330px, 62vw); aspect-ratio: 1 / 1;
border-radius: 26px; padding: 6% 7%;
display: flex; flex-direction: column; align-items: center; text-align: center;
color: var(--ivory);
background:
radial-gradient(ellipse 120% 90% at 25% -5%, rgba(36, 118, 184, 0.35) 0%, transparent 55%),
radial-gradient(ellipse 80% 70% at 105% 110%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 60%),
linear-gradient(160deg, #0E3355 0%, #071B2D 55%, #05121E 100%);
border: 1px solid rgba(235, 215, 161, 0.5);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset,
0 24px 50px rgba(2, 10, 18, 0.55),
0 60px 110px rgba(2, 10, 18, 0.4);
transform: rotateX(6deg) rotateY(-11deg) scale(0.86);
opacity: 0.55; filter: saturate(0.75);
transition: transform 0.65s var(--ease), opacity 0.5s, filter 0.5s, box-shadow 0.65s var(--ease);
}
/* plaques « couleur plateforme » (références client) */
.col-slide.f-plq.is-on .pq3d {
transform: rotateX(4.5deg) rotateY(-8deg) scale(1);
opacity: 1; filter: none;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset,
0 30px 60px rgba(2, 10, 18, 0.6),
0 80px 150px rgba(2, 10, 18, 0.45),
0 30px 90px -20px color-mix(in srgb, var(--brand) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.col-slide.f-plq.is-on .pq3d { animation: pq3float 7s ease-in-out infinite; }
}
@keyframes pq3float {
0%, 100% { transform: rotateX(4.5deg) rotateY(-8deg) scale(1) translateY(0); }
50% { transform: rotateX(6deg) rotateY(-10deg) scale(1) translateY(-8px); }
}
@media (pointer: fine) {
.col-stage:hover .col-slide.f-plq.is-on .pq3d { animation-play-state: paused; }
.col-slide.f-plq.is-on .pq3d:hover {
animation: none; cursor: pointer;
transform: rotateX(3deg) rotateY(-5deg) scale(1.03) translateY(-8px);
}
.col-slide.f-plq:not(.is-on) .pq3d:hover { opacity: 0.85; transform: rotateX(5deg) rotateY(-9deg) scale(0.9) translateY(-6px); cursor: pointer; }
}
.col-slide.is-on .pq3d.pq3d-plat .n3-shine,
@media (prefers-reduced-motion: no-preference) {
.col-slide.is-on .pq3d .n3-shine { animation: n3shine 5.2s var(--ease) infinite; }
}
.pq3-name {
margin-top: 4%;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.25rem, 3.2vw, 1.65rem); line-height: 1;
}
.pq3-cta { margin-top: 2%; font-size: clamp(0.72rem, 1.9vw, 0.88rem); font-weight: 600; opacity: 0.9; }
.pq3-row {
margin-top: auto; width: 100%;
display: flex; align-items: center; justify-content: center; gap: 14px;
}
.pq3-row span { display: inline-flex; align-items: center; gap: 6px; }
.pq3-row i { font-style: normal; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.9; }
.pq3d .n3-line { left: 7%; right: 7%; bottom: 6%; }
.pq3d .n3-badge { top: 12px; right: 14px; }
/* le rail confine ses couches 3D : la zone interactive en dessous reste fiable */
.col-track { contain: layout paint; }
.col-info { position: relative; z-index: 40; }
/* les ancres et défilements tiennent compte de la barre d'onglets sticky */
.col-stage, .col-info, .col-thumbs { scroll-margin-top: calc(var(--header-h) + 74px); }
/* le fantôme et le rail acceptent les deux hauteurs */
.col-track { align-items: center; }
/* CTA configurateur dans le panneau */
#col-config { padding: 13px 24px; }
/* =============================================================
V35 — LE CONFIGURATEUR + PROFILS DEVIS + NOTES PANIER
============================================================= */
html:not(.js) #config { display: none; }
.config {
background:
radial-gradient(ellipse 70% 55% at 85% 0%, rgba(36, 118, 184, 0.14) 0%, transparent 60%),
linear-gradient(180deg, #061421 0%, #07243C 100%);
color: var(--ivory);
}
.config .section-head h2 { color: var(--ivory); }
.config .section-intro { color: rgba(248, 244, 236, 0.7); }
.cf-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 980px) { .cf-grid { grid-template-columns: 1fr; gap: 26px; } }
/* ---- Aperçu ---- */
.cf-left { position: sticky; top: calc(var(--header-h) + 14px); }
@media (max-width: 980px) { .cf-left { position: static; } }
.cf-stage {
position: relative; display: flex; flex-direction: column; align-items: center;
padding: 40px 10px 16px;
}
.cf-glow {
position: absolute; left: 50%; top: 42%; width: 340px; height: 340px; max-width: 100%;
transform: translate(-50%, -50%); border-radius: 50%;
background: #E1BC72; opacity: 0.15; filter: blur(84px);
transition: background 0.6s var(--ease); pointer-events: none;
}
.cf-flip { perspective: 1200px; }
.cf-obj {
position: relative; transform-style: preserve-3d;
transition: width 0.65s var(--ease), height 0.65s var(--ease), transform 0.8s var(--ease);
transform: rotateX(5deg) rotateY(-9deg);
}
.cf-obj.cfo-carte { width: min(430px, 84vw); height: calc(min(430px, 84vw) * 0.625); }
.cf-obj.cfo-plaque { width: min(360px, 76vw); height: min(360px, 76vw); }
.cf-flip.is-back .cf-obj { transform: rotateX(5deg) rotateY(171deg); }
@media (prefers-reduced-motion: no-preference) {
.cf-obj { animation: cfFloat 7s ease-in-out infinite; }
.cf-flip.is-back .cf-obj { animation: none; }
.cf-stage:hover .cf-obj { animation-play-state: paused; }
}
@keyframes cfFloat {
0%, 100% { transform: rotateX(5deg) rotateY(-9deg) translateY(0); }
50% { transform: rotateX(6.5deg) rotateY(-11deg) translateY(-8px); }
}
.cf-face {
position: absolute; inset: 0; overflow: hidden;
border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
border: 1px solid rgba(235, 215, 161, 0.5);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.15) inset,
0 -1px 0 rgba(0, 0, 0, 0.5) inset,
0 26px 55px rgba(2, 10, 18, 0.55),
0 65px 120px rgba(2, 10, 18, 0.4);
background: linear-gradient(155deg, #0E3355 0%, #071B2D 55%, #05121E 100%);
}
.cf-obj.cfo-plaque .cf-face { border-radius: 28px; }
.cf-front { z-index: 2; }
.cf-back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(248, 244, 236, 0.9); }
.cf-back-qr { color: rgba(248, 244, 236, 0.92); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(248, 244, 236, 0.25); border-radius: 14px; padding: 12px; }
.cf-back-txt { font-size: 0.8rem; text-align: center; line-height: 1.5; opacity: 0.85; }
.cf-back-foot { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.cf-back-foot i { font-style: normal; font-size: 0.74rem; letter-spacing: 0.08em; font-weight: 600; color: #EBD7A1; }
.cf-waves { position: absolute; top: 14px; right: 16px; z-index: 3; }
.cf-mid {
position: absolute; left: 8%; bottom: 12%; right: 8%; z-index: 2;
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.cf-obj.cfo-plaque .cf-mid { align-items: center; text-align: center; bottom: 10%; }
.cf-chip {
width: clamp(52px, 11vw, 66px); height: clamp(52px, 11vw, 66px); border-radius: 50%;
display: grid; place-items: center; margin-bottom: 8px;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 8px 20px rgba(2, 10, 18, 0.45), 0 0 0 5px color-mix(in srgb, var(--brand, #E1BC72) 18%, transparent);
}
.cf-name {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.2rem, 5vw, 1.7rem); color: var(--ivory); line-height: 1.05;
}
.cf-name.cf-placeholder { opacity: 0.55; }
.cf-sub { font-size: clamp(0.72rem, 2.4vw, 0.86rem); color: rgba(248, 244, 236, 0.6); }
.cf-obj.cf-light .cf-name { color: #14212B; }
.cf-obj.cf-light .cf-sub { color: rgba(20, 33, 43, 0.65); }
.cf-obj.cf-light .cf-waves svg { stroke: rgba(20, 33, 43, 0.8); }
.cf-obj.cf-light .cf-face { border-color: rgba(20, 33, 43, 0.25); }
.cf-logo {
position: absolute; z-index: 2; left: 50%; top: 34%;
transform: translate(-50%, -50%);
width: 36%; max-height: 70%; object-fit: contain;
cursor: grab; touch-action: none;
filter: drop-shadow(0 6px 16px rgba(2, 10, 18, 0.4));
}
.cf-logo:active { cursor: grabbing; }
.cf-logo:not([src]), .cf-logo[src=""] { display: none; }
.cf-obj .n3-line { z-index: 2; }
.cf-viewbtns { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.cf-view {
cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.84rem;
color: rgba(248, 244, 236, 0.75);
background: rgba(248, 244, 236, 0.07);
border: 1.5px solid rgba(248, 244, 236, 0.18);
padding: 10px 16px; border-radius: 999px; min-height: 42px;
transition: color 0.25s, background 0.25s;
}
.cf-view:hover { color: var(--ivory); background: rgba(248, 244, 236, 0.14); }
/* ---- Outils ---- */
.cf-step {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 0.95rem; color: var(--ivory);
margin: 22px 0 10px;
}
.cf-step:first-child { margin-top: 0; }
.cf-step b {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--champagne), var(--riviera));
color: var(--azure-night); font-size: 0.76rem;
display: grid; place-items: center;
}
.cf-opt { font-weight: 500; font-size: 0.8rem; color: rgba(248, 244, 236, 0.5); }
.cf-seg { display: flex; gap: 10px; }
.cf-seg button {
flex: 1; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.92rem;
color: rgba(248, 244, 236, 0.7);
background: rgba(248, 244, 236, 0.06);
border: 1.5px solid rgba(248, 244, 236, 0.16);
border-radius: 14px; padding: 12px 10px; min-height: 48px;
display: flex; flex-direction: column; gap: 2px; align-items: center;
transition: 0.25s;
}
.cf-seg button small { font-weight: 500; font-size: 0.7rem; opacity: 0.65; }
.cf-seg button.is-on {
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
border-color: transparent;
box-shadow: 0 8px 22px rgba(200, 146, 56, 0.3);
}
.cf-seg-sm { gap: 6px; }
.cf-seg-sm button { flex: 0 0 auto; padding: 8px 14px; min-height: 40px; border-radius: 999px; font-size: 0.8rem; }
.cf-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-swatches button, .cf-custom {
cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.8rem;
color: rgba(248, 244, 236, 0.85);
background: rgba(248, 244, 236, 0.06);
border: 1.5px solid rgba(248, 244, 236, 0.16);
border-radius: 999px; padding: 8px 16px 8px 8px; min-height: 44px;
display: inline-flex; align-items: center; gap: 9px;
transition: 0.25s; position: relative;
}
.cf-swatches button::before, .cf-custom::before {
content: ''; width: 26px; height: 26px; border-radius: 50%;
background: var(--sw); border: 1px solid rgba(255, 255, 255, 0.35);
}
.cf-swatches button.is-on, .cf-custom.is-on { border-color: var(--riviera); box-shadow: 0 0 0 4px rgba(200, 146, 56, 0.25); color: var(--ivory); }
.cf-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cf-plats { display: flex; gap: 9px; flex-wrap: wrap; }
.cf-plats button {
width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
color: rgba(248, 244, 236, 0.75); font-weight: 700; font-family: inherit;
background: rgba(248, 244, 236, 0.07);
border: 1.5px solid rgba(248, 244, 236, 0.18);
transition: 0.25s;
}
.cf-plats button:hover { border-color: rgba(248, 244, 236, 0.5); background: rgba(248, 244, 236, 0.14); }
.cf-plats button.is-on { border-color: var(--riviera); box-shadow: 0 0 0 4px rgba(200, 146, 56, 0.25); background: rgba(248, 244, 236, 0.12); }
.cf-fields { display: flex; flex-direction: column; gap: 10px; }
.cf-fields input {
font-family: var(--font-body); font-size: 16px; color: var(--ivory);
padding: 13px 15px; border-radius: 12px; width: 100%;
background: rgba(6, 20, 33, 0.6); border: 1.5px solid rgba(240, 220, 168, 0.25);
}
.cf-fields input::placeholder { color: rgba(248, 244, 236, 0.4); }
.cf-fields input:focus { outline: none; border-color: var(--riviera); box-shadow: 0 0 0 4px rgba(200, 146, 56, 0.18); }
.cf-upload {
display: flex; align-items: center; gap: 14px; cursor: pointer;
padding: 16px; border-radius: 14px;
border: 2px dashed rgba(240, 220, 168, 0.45);
background: rgba(248, 244, 236, 0.04);
color: rgba(248, 244, 236, 0.8); font-size: 0.92rem; line-height: 1.45;
transition: border-color 0.25s, background 0.25s;
}
.cf-upload:hover, .cf-upload.is-drag { border-color: var(--riviera); background: rgba(200, 146, 56, 0.08); }
.cf-upload svg { flex-shrink: 0; color: var(--champagne); }
.cf-upload small { color: rgba(248, 244, 236, 0.5); }
.cf-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cf-upmeta { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cf-uprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cf-upname { font-size: 0.85rem; font-weight: 600; color: var(--champagne); }
.cf-size { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: rgba(248, 244, 236, 0.75); }
.cf-size input { flex: 1; accent-color: var(--riviera); min-height: 34px; }
.cf-hint { font-size: 0.8rem; color: rgba(248, 244, 236, 0.55); }
.cf-mini {
cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.8rem;
color: rgba(248, 244, 236, 0.7);
background: none; border: 1.5px solid rgba(248, 244, 236, 0.22);
padding: 8px 14px; border-radius: 999px; min-height: 38px;
transition: 0.25s;
}
.cf-mini:hover { color: var(--ivory); border-color: rgba(248, 244, 236, 0.5); }
.cf-buy {
margin-top: 22px;
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 16px 18px; border-radius: 16px;
background: rgba(248, 244, 236, 0.05);
border: 1px solid rgba(240, 220, 168, 0.28);
}
.cf-buy .fiche-price strong { color: var(--ivory); }
.cf-buy .fiche-price-from { color: rgba(248, 244, 236, 0.55); }
.cf-buy .fiche-qty { background: rgba(6, 20, 33, 0.55); border-color: rgba(240, 220, 168, 0.35); }
.cf-buy .fiche-qty button { color: var(--champagne); }
.cf-buy .fiche-qty b { color: var(--ivory); }
.cf-note { margin-top: 12px; font-size: 0.82rem; color: rgba(248, 244, 236, 0.55); line-height: 1.5; }
@media (max-width: 700px) {
.cf-buy { position: sticky; bottom: 8px; z-index: 5; background: #0B2438; box-shadow: 0 -8px 30px rgba(2, 10, 18, 0.5), 0 14px 30px rgba(2, 10, 18, 0.5); }
}
/* ---- Notes d'article dans le panier ---- */
.cart-item-note { display: block; margin-top: 3px; color: rgba(248, 244, 236, 0.5); font-size: 0.72rem; line-height: 1.35; }
/* ---- Profils du devis ---- */
.devis-profils { grid-column: 1 / -1; margin-bottom: 6px; }
.dp-label {
display: block; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--champagne); margin-bottom: 10px;
}
.dp-row {
display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 8px;
scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dp-row::-webkit-scrollbar { display: none; }
.dp-row button {
flex-shrink: 0; scroll-snap-align: start; cursor: pointer;
font-family: inherit; font-weight: 600; font-size: 0.88rem;
color: rgba(248, 244, 236, 0.8);
background: rgba(248, 244, 236, 0.07);
border: 1.5px solid rgba(240, 220, 168, 0.3);
padding: 11px 18px; border-radius: 999px; min-height: 44px;
transition: 0.25s;
}
.dp-row button:hover { color: var(--ivory); border-color: rgba(240, 220, 168, 0.6); }
.dp-row button.is-on {
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
border-color: transparent;
box-shadow: 0 8px 22px rgba(200, 146, 56, 0.35);
}
/* =============================================================
V36 — FICHE PROJET « CRÉONS VOTRE SITE »
============================================================= */
.sf-progress { margin-bottom: 24px; }
.sf-label {
display: block; font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--champagne); margin-bottom: 10px;
}
.sf-bar { height: 3px; border-radius: 3px; background: rgba(248, 244, 236, 0.14); overflow: hidden; }
.sf-bar i { display: block; height: 100%; width: 16.6%; border-radius: 3px;
background: linear-gradient(90deg, var(--riviera), var(--champagne));
transition: width 0.5s var(--ease); }
.sf-step { display: none; border: 0; padding: 0; margin: 0; }
.sf-step.is-on { display: block; }
@media (prefers-reduced-motion: no-preference) {
.sf-step.is-on { animation: introIn 0.45s var(--ease) both; }
}
.sf-step legend {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.2rem, 2.6vw, 1.5rem); color: var(--ivory);
margin-bottom: 18px;
}
.sf-step legend em { font-style: italic; color: var(--champagne); }
.sf-step legend small { display: block; font-family: var(--font-body); font-size: 0.8rem; color: rgba(248, 244, 236, 0.55); margin-top: 4px; }
.sf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sf-cards-5 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .sf-cards, .sf-cards-5 { grid-template-columns: repeat(2, 1fr); } }
.sf-cards button {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 16px 8px; min-height: 84px; cursor: pointer;
font-family: inherit; font-weight: 600; font-size: 0.84rem;
color: rgba(248, 244, 236, 0.8);
background: rgba(6, 20, 33, 0.55);
border: 1.5px solid rgba(240, 220, 168, 0.22); border-radius: 14px;
transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.sf-cards button svg { color: var(--champagne); }
.sf-cards button:hover { border-color: rgba(240, 220, 168, 0.55); }
.sf-cards button.is-on {
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
border-color: transparent;
box-shadow: 0 10px 26px rgba(200, 146, 56, 0.32);
}
.sf-cards button.is-on svg { color: var(--azure-night); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.sf-chips button {
cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.86rem;
color: rgba(248, 244, 236, 0.8);
background: rgba(6, 20, 33, 0.55);
border: 1.5px solid rgba(240, 220, 168, 0.25);
padding: 11px 16px; border-radius: 999px; min-height: 44px;
transition: 0.25s;
}
.sf-chips button.is-on {
color: var(--azure-night);
background: linear-gradient(135deg, var(--champagne), var(--riviera));
border-color: transparent;
}
.sf-idrows { display: flex; flex-direction: column; gap: 12px; }
.sf-idrow {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 13px 16px; border-radius: 14px;
background: rgba(6, 20, 33, 0.55); border: 1px solid rgba(240, 220, 168, 0.2);
}
.sf-idrow > span { font-weight: 600; color: var(--ivory); font-size: 0.95rem; }
.sf-yn { display: flex; gap: 6px; }
.sf-yn button {
cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.8rem;
color: rgba(248, 244, 236, 0.7);
background: none; border: 1.5px solid rgba(240, 220, 168, 0.3);
padding: 8px 14px; border-radius: 999px; min-height: 40px;
transition: 0.25s;
}
.sf-yn button.is-on { color: var(--azure-night); background: linear-gradient(135deg, var(--champagne), var(--riviera)); border-color: transparent; }
.sf-recap { display: flex; flex-direction: column; gap: 0; margin: 0 0 20px; }
.sf-recap div {
display: flex; justify-content: space-between; gap: 18px;
padding: 12px 2px; border-bottom: 1px solid rgba(240, 220, 168, 0.16);
}
.sf-recap dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(248, 244, 236, 0.55); flex-shrink: 0; }
.sf-recap dd { color: var(--ivory); font-size: 0.93rem; text-align: right; margin: 0; }
.sf-recap-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sf-recap-actions .btn-outline { border-color: rgba(240, 220, 168, 0.45); color: var(--champagne); }
.sf-recap-actions .btn-gold { flex: 1 1 auto; min-width: 220px; white-space: normal; }
.sf-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.sf-nav-btn {
cursor: pointer; background: none; border: none; font-family: inherit;
font-weight: 600; font-size: 0.92rem; color: rgba(248, 244, 236, 0.65);
padding: 12px 6px; min-height: 44px; transition: color 0.25s;
}
.sf-nav-btn:hover { color: var(--ivory); }
.sf-next { margin-left: auto; padding: 14px 30px; }
/* =============================================================
V37 — FICHES LÉGÈRES + ÉDITEUR PRODUIT
============================================================= */
.fiche-more { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.fiche-more .ff-item .fxb { padding: 2px 2px 14px; }
.fiche-more .fiche-steps, .fiche-more .fiche-specs, .fiche-more .fiche-trust { margin-bottom: 0; }
.fiche-more .fiche-includes { margin-top: 14px; }
.fiche-more .fiche-includes ul { margin-bottom: 0; }
.fiche-more .fiche-faq { margin-top: 0; border-top: 0; }
.fiche-buy { margin-top: 16px; }
.fiche-perso {
border: 1.5px solid rgba(10, 61, 98, 0.35); color: var(--azure-deep);
background: none; padding: 12px 20px;
}
.fiche-perso:hover { border-color: var(--azure-deep); background: rgba(10, 61, 98, 0.06); }
.btn-line {
border: 1.5px solid rgba(240, 220, 168, 0.5); color: var(--champagne);
background: none;
}
.btn-line:hover { background: rgba(240, 220, 168, 0.12); color: var(--champagne); }
.cf-context {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--ivory);
margin-bottom: 18px;
}
.cf-context em { font-style: italic; color: var(--champagne); }
/* =============================================================
V38 — HIÉRARCHIE PLATEFORME + AMBIANCES + DEUX UNIVERS
============================================================= */
/* ---- Cartes : logo plateforme en héros ---- */
.n3-hero { flex: 1; min-height: 0; display: flex; align-items: center; gap: 6%; padding-top: 2%; }
.n3-mark {
flex: 0 0 auto; width: clamp(58px, 15vw, 78px); height: clamp(58px, 15vw, 78px);
display: grid; place-items: center;
filter: drop-shadow(0 8px 18px rgba(2, 10, 18, 0.35));
}
.n3-mark > svg { width: 100%; height: 100%; }
.n3-mono {
border: 1.5px solid rgba(235, 215, 161, 0.65); border-radius: 50%;
background: radial-gradient(circle at 32% 28%, rgba(240, 220, 168, 0.16), transparent 62%);
}
.n3-mono i {
font-family: var(--font-display); font-style: italic; font-weight: 600;
font-size: clamp(1.25rem, 3.3vw, 1.6rem); color: var(--champagne); letter-spacing: 0.02em;
}
.n3-id { min-width: 0; }
.n3-hero .n3-name { margin-top: 0; font-size: clamp(1.45rem, 4.6vw, 2rem); letter-spacing: -0.01em; }
.n3-hero .n3-sub { font-size: clamp(0.74rem, 1.9vw, 0.9rem); }
.n3-stars {
margin-top: 6px; font-size: clamp(0.95rem, 2.6vw, 1.12rem);
letter-spacing: 0.18em; color: #F4B63F; line-height: 1;
text-shadow: 0 1px 6px rgba(120, 80, 10, 0.25);
}
.n3-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.n3-sig {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.58rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
color: rgba(248, 244, 236, 0.55); white-space: nowrap;
}
.n3-sig i, .n3-tech i { font-style: normal; }
.n3-tech {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em;
color: rgba(248, 244, 236, 0.78); white-space: nowrap;
}
/* ---- Ambiances par plateforme (cartes) ---- */
.nfp-contact,
/* Encre sombre sur fonds clairs */
/* ---- Plaques : présence comptoir / murale ---- */
.pqp .n3-shine { opacity: 0.55; }
.pq3d.pqp.pqp { box-shadow:
0 2px 0 rgba(255, 255, 255, 0.16) inset, 0 -3px 0 rgba(0, 0, 0, 0.5) inset,
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 24px 50px rgba(2, 10, 18, 0.55), 0 60px 110px rgba(2, 10, 18, 0.4); }
.pq3-screws { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pq3-screws::before, .pq3-screws::after {
content: ''; position: absolute; top: 11px; width: 7px; height: 7px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 42%, rgba(0, 0, 0, 0.42) 100%);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(255, 255, 255, 0.18);
}
.pq3-screws::before { left: 11px; }
.pq3-screws::after { right: 11px; }
.n3-badge ~ .pq3-screws::after { display: none; }
.pq3-mark {
width: 30%; aspect-ratio: 1; display: grid; place-items: center; margin-top: 1%;
filter: drop-shadow(0 10px 20px rgba(2, 10, 18, 0.3));
}
.pq3-mark > svg { width: 100%; height: 100%; }
.pq3-stars {
margin-top: 3%; font-size: clamp(1.02rem, 2.6vw, 1.26rem);
letter-spacing: 0.2em; color: #F2C94C; line-height: 1;
}
.pqp .pq3-name { margin-top: 3%; font-size: clamp(1.5rem, 3.6vw, 1.9rem); }
.pq3-sig {
margin-top: 2.5%; display: inline-flex; align-items: center; gap: 6px;
font-size: 0.56rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
color: rgba(248, 244, 236, 0.5);
}
.pq3-sig i { font-style: normal; }
/* Ambiances plaques */
/* ---- Configurateur : logo plateforme posé sur l'ambiance ---- */
.cf-chip > svg { width: 68%; height: 68%; }
.cf-chip.cf-onbrand > svg { width: 100%; height: 100%; }
.cf-chip.cf-onbrand { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.cf-hint-err { color: #FFA3A3 !important; }
.cf-upmsg { margin: 10px 2px 0; font-size: 0.84rem; font-weight: 600; color: #FFA3A3; }
/* =============================================================
V39 — SCÈNE SIGNATURE : caméra, tilt, colorisation
============================================================= */
.sig-scene {
transform: perspective(1300px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) scale(var(--sz, 1));
transform-style: preserve-3d;
transition: filter 1.1s var(--ease), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sig-stage:not(.b1) .sig-scene { --sz: 0.9; }
.sig-stage:not(.b4) .sig-scene { filter: saturate(0.3) brightness(0.9); }
html:not(.js) .sig-scene { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .sig-scene { transition: none; filter: none; } }
/* =============================================================
V39 — MICRO-INTERACTIONS : boutons magnétiques + halo curseur
============================================================= */
.btn { position: relative; overflow: hidden; }
.btn::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(110px circle at var(--hx, 50%) var(--hy, 50%), rgba(255, 255, 255, 0.28), transparent 65%);
opacity: 0; transition: opacity 0.35s var(--ease);
}
@media (pointer: fine) { .btn:hover::after { opacity: 1; } }
.btn > * { position: relative; z-index: 1; }
/* Adaptation de puissance : appareils modestes */
html.lite .hero-moon, html.lite .sig-field { display: none; }
html.lite .sig-scene { transition: none; }
html.lite .n3-shine { display: none; }
/* =============================================================
V39 — FINALE : épilogue cinématique
============================================================= */
.finale {
position: relative; overflow: hidden; text-align: center;
padding: clamp(96px, 15vh, 150px) 24px clamp(88px, 13vh, 130px);
background:
radial-gradient(ellipse 70% 55% at 50% 118%, rgba(200, 146, 56, 0.16) 0%, transparent 60%),
radial-gradient(ellipse 90% 70% at 50% -20%, rgba(36, 118, 184, 0.2) 0%, transparent 55%),
linear-gradient(180deg, #050505 0%, #061421 55%, #05101B 100%);
}
.fin-sky { position: absolute; inset: -20% 0; pointer-events: none; }
.fin-sky span { position: absolute; inset: 0; border-radius: 50%; }
.fin-sky .fs1 {
background-image:
radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,0.75), transparent 100%),
radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,0.5), transparent 100%),
radial-gradient(1.5px 1.5px at 54% 22%, rgba(240,220,168,0.8), transparent 100%),
radial-gradient(1px 1px at 71% 55%, rgba(255,255,255,0.55), transparent 100%),
radial-gradient(1.5px 1.5px at 88% 34%, rgba(255,255,255,0.7), transparent 100%);
animation: finDrift 26s linear infinite alternate;
}
.fin-sky .fs2 {
background-image:
radial-gradient(1px 1px at 22% 44%, rgba(255,255,255,0.5), transparent 100%),
radial-gradient(1.5px 1.5px at 44% 80%, rgba(184,221,243,0.7), transparent 100%),
radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,0.45), transparent 100%),
radial-gradient(1.5px 1.5px at 82% 72%, rgba(240,220,168,0.6), transparent 100%);
animation: finDrift 38s linear infinite alternate-reverse;
}
.fin-sky .fs3 {
background-image:
radial-gradient(2px 2px at 18% 60%, rgba(255,255,255,0.35), transparent 100%),
radial-gradient(2px 2px at 48% 30%, rgba(255,255,255,0.3), transparent 100%),
radial-gradient(2px 2px at 78% 52%, rgba(184,221,243,0.4), transparent 100%);
filter: blur(1px);
animation: finDrift 50s linear infinite alternate;
}
@keyframes finDrift { from { transform: translate3d(-1.5%, -1%, 0); } to { transform: translate3d(1.5%, 1.5%, 0); } }
.fin-star { width: clamp(64px, 9vw, 92px); margin: 0 auto 26px; filter: drop-shadow(0 0 26px rgba(240, 220, 168, 0.35)); }
.fin-star svg { width: 100%; height: auto; display: block; }
.fin-star .fst { stroke-dasharray: 74; stroke-dashoffset: 0; }
.fin-star .fsw { opacity: 1; }
.fin-title {
font-family: var(--font-display); font-weight: 600; color: var(--ivory);
font-size: clamp(2.1rem, 6vw, 4.3rem); line-height: 1.06; letter-spacing: -0.01em;
margin: 0 0 18px;
}
.fin-title .fin-l1, .fin-title .fin-l2 { display: block; }
.fin-title .fin-l2 em { font-style: italic; color: var(--champagne); }
.fin-dot { color: var(--riviera); }
.fin-sub { color: rgba(248, 244, 236, 0.66); font-size: clamp(0.98rem, 2vw, 1.15rem); max-width: 560px; margin: 0 auto 34px; }
.fin-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fin-ctas .btn-outline { border-color: rgba(240, 220, 168, 0.5); color: var(--champagne); }
.fin-top {
margin-top: 44px; cursor: pointer; background: none; border: none;
font-family: inherit; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.12em;
text-transform: uppercase; color: rgba(248, 244, 236, 0.55);
padding: 12px 18px; min-height: 44px; transition: color 0.3s;
}
.fin-top:hover { color: var(--champagne); }
/* Entrée en scène */
html.js .finale .fin-star, html.js .finale .fin-l1, html.js .finale .fin-l2,
html.js .finale .fin-sub, html.js .finale .fin-ctas, html.js .finale .fin-top {
opacity: 0; transform: translateY(26px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.js .finale .fin-star { transform: translateY(0) scale(0.6); }
html.js .finale.is-live .fin-star, html.js .finale.is-live .fin-l1, html.js .finale.is-live .fin-l2,
html.js .finale.is-live .fin-sub, html.js .finale.is-live .fin-ctas, html.js .finale.is-live .fin-top {
opacity: 1; transform: translateY(0) scale(1);
}
html.js .finale.is-live .fin-l1 { transition-delay: 0.15s; }
html.js .finale.is-live .fin-l2 { transition-delay: 0.3s; }
html.js .finale.is-live .fin-sub { transition-delay: 0.48s; }
html.js .finale.is-live .fin-ctas { transition-delay: 0.62s; }
html.js .finale.is-live .fin-top { transition-delay: 0.85s; }
html.js .finale.is-live .fin-star .fst {
stroke-dashoffset: 74;
animation: finDraw 1.6s var(--ease) 0.1s forwards;
}
@keyframes finDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
html.js .finale .fin-star, html.js .finale .fin-l1, html.js .finale .fin-l2,
html.js .finale .fin-sub, html.js .finale .fin-ctas, html.js .finale .fin-top {
opacity: 1; transform: none; transition: none;
}
.fin-sky span { animation: none; }
html.js .finale.is-live .fin-star .fst { animation: none; stroke-dashoffset: 0; }
}
/* =============================================================
V39 — UPLOADER FICHE PROJET (Vos éléments)
============================================================= */
.sf-upwrap { margin-top: 22px; }
.sf-uplabel { font-weight: 700; color: var(--ivory); font-size: 0.95rem; margin: 0 0 10px; }
.sf-uplabel span { font-weight: 500; color: rgba(248, 244, 236, 0.55); font-size: 0.82rem; }
.sf-drop {
display: flex; align-items: center; gap: 14px; cursor: pointer;
border: 1.5px dashed rgba(201, 210, 226, 0.4); border-radius: 14px;
padding: 16px 18px; transition: border-color 0.25s, background 0.25s;
color: rgba(248, 244, 236, 0.8); font-size: 0.9rem;
}
.sf-drop:hover, .sf-drop.is-drag { border-color: #C9D2E2; background: rgba(201, 210, 226, 0.06); }
.sf-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sf-drop svg { flex: 0 0 auto; color: #C9D2E2; }
.sf-drop u { text-underline-offset: 3px; }
.sf-drop small { color: rgba(248, 244, 236, 0.5); }
.sf-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sf-files li {
display: flex; align-items: center; gap: 12px;
background: rgba(6, 20, 33, 0.55); border: 1px solid rgba(201, 210, 226, 0.18);
border-radius: 12px; padding: 8px 10px;
}
.sff-thumb {
width: 44px; height: 44px; border-radius: 9px; flex: 0 0 auto;
object-fit: cover; background: rgba(201, 210, 226, 0.1);
}
.sff-ico {
width: 44px; height: 44px; border-radius: 9px; flex: 0 0 auto;
display: grid; place-items: center;
background: rgba(201, 210, 226, 0.12); color: #C9D2E2;
font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em;
}
.sff-meta { min-width: 0; flex: 1; }
.sff-name { display: block; color: var(--ivory); font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sff-size { color: rgba(248, 244, 236, 0.5); font-size: 0.74rem; }
.sff-del {
cursor: pointer; background: none; border: none; color: rgba(248, 244, 236, 0.6);
font-size: 1.1rem; line-height: 1; padding: 10px; min-width: 40px; min-height: 40px;
border-radius: 10px; transition: 0.25s;
}
.sff-del:hover { color: #FFA3A3; background: rgba(255, 163, 163, 0.08); }
.sf-upnote { margin: 10px 2px 0; font-size: 0.78rem; color: rgba(248, 244, 236, 0.5); }
.sf-upmsg2 { margin: 10px 2px 0; font-size: 0.84rem; font-weight: 600; color: #FFA3A3; }
/* =============================================================
V39 — BOUTON FR / EN
============================================================= */
.lang-toggle {
cursor: pointer; background: none; font-family: inherit;
border: 1.5px solid rgba(240, 220, 168, 0.4); border-radius: 999px;
color: inherit; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em;
padding: 7px 12px; min-height: 36px; display: inline-flex; align-items: center; gap: 5px;
transition: border-color 0.25s;
}
.lang-toggle:hover { border-color: var(--champagne); }
.lang-toggle span { opacity: 0.45; transition: opacity 0.2s; }
.lang-toggle span.is-on { opacity: 1; }
.lang-toggle i { font-style: normal; opacity: 0.35; }
@media (max-width: 480px) { .lang-toggle { padding: 7px 9px; } }
.fiche-live .pq3d { width: 72%; opacity: 1; filter: none; transform: rotateX(5deg) rotateY(-8deg) scale(1); animation: none; cursor: default; }
/* ---- UNIVERS SITE : indigo / violet / cyan ---- */
section.uni-site { background:
radial-gradient(ellipse 80% 60% at 18% 0%, rgba(122, 140, 170, 0.13) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 85% 100%, rgba(205, 214, 228, 0.06) 0%, transparent 60%),
linear-gradient(165deg, #0A0C10 0%, #050505 100%); }
.uni-site .eyebrow { color: #A9B4C6; }
.uni-site .h-accent { color: #DEE4F0; }
.uni-site .btn-gold {
background: linear-gradient(135deg, #F4F6FA 0%, #C9CFDA 55%, #99A2B3 130%);
color: #0B0E14;
box-shadow: 0 12px 32px rgba(5, 8, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.uni-site .btn-outline { border-color: rgba(201, 210, 226, 0.5); color: #D9DEE8; }
.uni-site .btn-outline:hover { border-color: #E6EAF2; background: rgba(201, 210, 226, 0.09); }
.uni-site .web-feature-icon { color: #C9D2E2; }
.uni-site .sf-bar i { background: linear-gradient(90deg, #8E99AC, #F2F4F8); }
.uni-site .sf-cards button svg { color: #AEB8CA; }
.uni-site .sf-cards button:hover { border-color: rgba(201, 210, 226, 0.55); }
.uni-site .sf-cards button.is-on, .uni-site .sf-chips button.is-on, .uni-site .sf-yn button.is-on {
color: #0B0E14; background: linear-gradient(135deg, #F4F6FA, #C2C9D6);
border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); }
.uni-site .sf-recap div { border-bottom-color: rgba(201, 210, 226, 0.2); }
.uni-site .sf-recap-actions .btn-outline { border-color: rgba(201, 210, 226, 0.5); color: #D9DEE8; }
.uni-site input:focus, .uni-site select:focus, .uni-site textarea:focus { border-color: rgba(201, 210, 226, 0.7); }
/* =============================================================
V40 — PRÉCHARGEUR PREMIUM
============================================================= */
html.js .intro-veil { animation: none; opacity: 1; }
.intro-veil {
background:
radial-gradient(ellipse 80% 60% at 50% 20%, rgba(36, 118, 184, 0.16) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(200, 146, 56, 0.08) 0%, transparent 55%),
linear-gradient(170deg, rgba(7, 19, 34, 0.992) 0%, rgba(5, 10, 18, 0.992) 100%);
transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.intro-veil.pl-out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-veil.pl-skip { transition-duration: 0.3s; }
.intro-veil.pl-skip .intro-center { transition-duration: 0.3s; }
.intro-veil.pl-out .intro-center { transform: scale(1.16); opacity: 0; }
.intro-center { transition: transform 1s var(--ease), opacity 0.8s var(--ease); }
.pl-p {
position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: rgba(240, 220, 168, 0.55); filter: blur(0.5px);
animation: plDrift 7s ease-in-out infinite alternate;
}
.pl-p.p2, .pl-p.p5, .pl-p.p8 { background: rgba(201, 210, 226, 0.5); width: 3px; height: 3px; }
.pl-p.p3, .pl-p.p7 { width: 5px; height: 5px; filter: blur(1px); }
.p1 { left: 14%; top: 28%; animation-delay: 0s; }
.p2 { left: 26%; top: 66%; animation-delay: -1.4s; }
.p3 { left: 38%; top: 18%; animation-delay: -2.8s; }
.p4 { left: 56%; top: 74%; animation-delay: -0.8s; }
.p5 { left: 66%; top: 30%; animation-delay: -3.4s; }
.p6 { left: 78%; top: 58%; animation-delay: -2s; }
.p7 { left: 86%; top: 24%; animation-delay: -4.4s; }
.p8 { left: 8%; top: 78%; animation-delay: -3s; }
.p9 { left: 47%; top: 86%; animation-delay: -1s; }
.p10 { left: 92%; top: 80%; animation-delay: -5s; }
@keyframes plDrift {
from { transform: translate3d(0, 0, 0); opacity: 0.35; }
50% { opacity: 0.9; }
to { transform: translate3d(14px, -22px, 0); opacity: 0.4; }
}
.pl-star-line { stroke-dasharray: 42; stroke-dashoffset: 42; animation: finDraw 1.5s var(--ease) 0.15s forwards; filter: drop-shadow(0 0 6px rgba(240, 220, 168, 0.8)); }
.pl-star-fill, .pl-waves, .pl-dot { opacity: 0; transition: opacity 0.8s var(--ease); }
.intro-veil.pl-s2 .pl-star-fill { opacity: 1; }
.intro-veil.pl-s2 .pl-waves { opacity: 0.95; transition-delay: 0.2s; }
.intro-veil.pl-s2 .pl-dot { opacity: 1; transition-delay: 0.3s; }
.pl-line {
width: min(220px, 56vw); height: 2px; margin: 22px auto 0;
background: rgba(248, 244, 236, 0.14); border-radius: 2px; overflow: hidden;
}
.pl-line i {
display: block; height: 100%; transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, var(--riviera), var(--champagne), #F2F4F8);
transition: transform 0.25s linear;
}
.pl-pct {
margin-top: 12px; font-family: var(--font-display); font-weight: 600;
font-size: 1.05rem; color: rgba(248, 244, 236, 0.85); letter-spacing: 0.06em;
}
.pl-pct i { font-style: normal; font-size: 0.7em; color: rgba(248, 244, 236, 0.45); margin-left: 2px; }
.intro-veil.pl-fast .pl-star-line { animation-duration: 0.4s; animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
.pl-p { animation: none; }
.pl-star-line { animation: none; stroke-dashoffset: 0; }
.pl-star-fill, .pl-waves, .pl-dot { opacity: 1; transition: none; }
}
/* Caméra qui entre dans le héros à la fin du chargement */
html.js .hero .reveal { opacity: 1 !important; transform: none !important; }
html.js.av-go .hero .container { animation: heroIn 1.15s var(--ease) both; }
@keyframes heroIn {
from { transform: scale(1.05) translateY(16px); }
to { transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
html.js.av-go .hero .container { animation: none; }
}
/* =============================================================
V40 — TRANSITION CINÉMATIQUE (acte 1 → acte 2)
============================================================= */
.acte2 { background: #050505; }
.a2-wrap { height: 240vh; }
.a2-stage {
position: sticky; top: 0; height: 100vh; overflow: hidden;
display: grid; place-items: center; text-align: center;
background: linear-gradient(180deg, #050B14 0%, #050505 100%);
}
.a2-navy {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 90% 70% at 50% 0%, rgba(36, 118, 184, 0.3) 0%, transparent 60%),
linear-gradient(170deg, #0A2A47 0%, #061421 70%, #050B14 100%);
opacity: 1; transition: opacity 1s var(--ease);
}
.a2-stage.a2 .a2-navy { opacity: 0.45; }
.a2-stage.a3 .a2-navy { opacity: 0; }
.a2-light {
position: absolute; left: 50%; top: 50%; width: 130vmax; height: 130vmax;
margin: -65vmax 0 0 -65vmax; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(248, 250, 253, 1) 0%, rgba(228, 233, 243, 0.7) 24%, rgba(170, 185, 210, 0.22) 46%, transparent 66%);
transform: scale(calc(max(0, var(--pp, 0) - 0.22) * 3.6));
opacity: calc(1.3 - var(--pp, 0) * 1.45);
will-change: transform, opacity;
}
.a2-stars {
position: absolute; inset: -10%;
background-image:
radial-gradient(1.5px 1.5px at 16% 32%, rgba(255,255,255,0.7), transparent 100%),
radial-gradient(1px 1px at 34% 70%, rgba(201,210,226,0.6), transparent 100%),
radial-gradient(1.5px 1.5px at 58% 22%, rgba(255,255,255,0.5), transparent 100%),
radial-gradient(1px 1px at 74% 60%, rgba(201,210,226,0.55), transparent 100%),
radial-gradient(1.5px 1.5px at 88% 36%, rgba(255,255,255,0.6), transparent 100%),
radial-gradient(1px 1px at 10% 82%, rgba(201,210,226,0.45), transparent 100%);
opacity: 0; transform: translateY(2%);
transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.a2-stage.a4 .a2-stars { opacity: 1; transform: translateY(0); }
.a2-core { position: relative; padding: 0 24px; max-width: 900px; }
.a2-kicker {
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
color: #A9B4C6; margin-bottom: 22px;
opacity: 0; transform: translateY(18px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.a2-stage.a1 .a2-kicker { opacity: 1; transform: translateY(0); }
.a2-title {
font-family: var(--font-display); font-weight: 600; line-height: 1.06;
font-size: clamp(2.3rem, 6.6vw, 4.8rem); color: var(--ivory); letter-spacing: -0.01em;
margin: 0 0 20px;
}
.a2-title .a2-l1, .a2-title .a2-l2 { display: block; opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.a2-title .a2-l2 { transition-delay: 0.12s; }
.a2-title em { font-style: italic; color: #DEE4F0; }
.a2-dot { color: #C9D2E2; }
.a2-stage.a2 .a2-l1 { opacity: 1; transform: translateY(0); }
.a2-stage.a3 .a2-l2 { opacity: 1; transform: translateY(0); }
.a2-sub {
color: rgba(248, 244, 236, 0.62); font-size: clamp(0.95rem, 2vw, 1.12rem);
max-width: 560px; margin: 0 auto;
opacity: 0; transform: translateY(20px);
transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s;
}
.a2-stage.a4 .a2-sub { opacity: 1; transform: translateY(0); }
html:not(.js) .a2-navy { opacity: 0; }
html:not(.js) .a2-kicker, html:not(.js) .a2-l1, html:not(.js) .a2-l2, html:not(.js) .a2-sub,
html:not(.js) .a2-stars { opacity: 1; transform: none; }
html:not(.js) .a2-light { display: none; }
html:not(.js) .a2-wrap { height: auto; }
html:not(.js) .a2-stage { position: relative; height: auto; padding: 120px 0; }
@media (prefers-reduced-motion: reduce) {
.a2-light { display: none; }
.a2-navy { opacity: 0 !important; }
}
/* =============================================================
V40 — ACTE 2 : ordinateur assemblé, verre, balayage
============================================================= */
.sb-base {
position: relative; margin: -2px auto 0; width: 118%; max-width: calc(100vw - 16px); left: -9%;
height: clamp(10px, 1.6vw, 16px); border-radius: 0 0 18px 18px;
background: linear-gradient(180deg, #3A4150 0%, #232833 45%, #14171E 100%);
box-shadow: 0 18px 40px rgba(2, 6, 12, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
opacity: 0; transform: translateY(26px) scaleX(0.6);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.sb-notch {
position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 14%; height: 45%; border-radius: 0 0 10px 10px;
background: rgba(6, 8, 12, 0.55);
}
.sig-stage.b2 .sb-base { opacity: 1; transform: translateY(0) scaleX(1); }
.sb-sweep {
position: absolute; top: 0; bottom: 0; width: 34%; left: -40%;
background: linear-gradient(105deg, transparent 0%, rgba(244, 246, 250, 0.14) 45%, rgba(244, 246, 250, 0.3) 50%, rgba(244, 246, 250, 0.14) 55%, transparent 100%);
pointer-events: none; opacity: 0;
}
.sig-stage.b4 .sb-sweep { animation: sbSweep 1.4s var(--ease) 0.2s forwards; }
@keyframes sbSweep { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(440%); } }
.sig-chip {
position: absolute; display: inline-flex; align-items: center; gap: 8px;
padding: 11px 16px; border-radius: 999px;
font-size: 0.8rem; font-weight: 600; color: #E6E9F0; white-space: nowrap;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(201, 210, 226, 0.28);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: 0 14px 34px rgba(2, 6, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
opacity: 0; transform: translateY(26px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
will-change: transform;
}
.sig-chip svg { color: #C9D2E2; }
.sc1 { left: max(-14px, 1%); top: 16%; }
.sc2 { right: max(-10px, 1%); top: 36%; transition-delay: 0.15s; }
.sc3 { left: 4%; bottom: 12%; transition-delay: 0.3s; }
.sig-stage.b5 .sig-chip { opacity: 1; }
.sig-stage.b5 .sc1 { transform: translateY(calc(var(--p, 0.6) * -26px)); }
.sig-stage.b5 .sc2 { transform: translateY(calc(var(--p, 0.6) * -44px)); }
.sig-stage.b5 .sc3 { transform: translateY(calc(var(--p, 0.6) * -16px)); }
@media (max-width: 720px) { .sig-chip { display: none; } }
html:not(.js) .sb-base { opacity: 1; transform: none; width: 100%; left: 0; }
html:not(.js) .sig-chip { opacity: 1; transform: none; position: static; margin: 6px 4px 0; }
/* Features siteweb : verre argenté + reflet */
.uni-site .web-feature {
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(201, 210, 226, 0.16);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 44px rgba(2, 6, 12, 0.35);
transition: transform 0.45s var(--ease), border-color 0.45s, box-shadow 0.45s;
}
@media (pointer: fine) {
.uni-site .web-feature:hover {
transform: translateY(-4px);
border-color: rgba(222, 228, 240, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 26px 60px rgba(2, 6, 12, 0.5);
}
}
/* Bouton argent : reflet qui respire */
.uni-site .btn-gold { background-size: 190% 100%; animation: silverBreathe 7s ease-in-out infinite alternate; }
@keyframes silverBreathe { from { background-position: 0% 0; } to { background-position: 90% 0; } }
@media (prefers-reduced-motion: reduce) { .uni-site .btn-gold { animation: none; } }
/* Lien discret du héros vers l'acte 2 */
.hero-more { margin: 14px 2px 0; font-size: 0.92rem; }
.hero-more a { color: rgba(248, 244, 236, 0.72); text-decoration: none; border-bottom: 1px solid rgba(240, 220, 168, 0.4); padding-bottom: 2px; transition: color 0.3s, border-color 0.3s; }
.hero-more a:hover { color: var(--champagne); border-color: var(--champagne); }
.hero-more span { display: inline-block; transition: transform 0.3s var(--ease); }
.hero-more a:hover span { transform: translateX(4px); }
/* =============================================================
V41 — AUDIT : responsive fin + cibles tactiles + a11y
============================================================= */
.btn-block { white-space: normal; min-height: 44px; }
@media (max-width: 385px) {
.btn-lg { font-size: 0.94rem; padding-left: 18px; padding-right: 18px; }
}
/* Cibles tactiles ≥ 44px sans changer le visuel */
.hero-more a { display: inline-block; padding: 12px 2px; margin: -8px 0; }
.col-cfglink a, a[href="#config"].inline { padding: 10px 2px; }
.contact-info a[data-config="phoneLink"] { display: inline-block; padding: 9px 0; margin: -6px 0; }
.carousel-dot {
width: 30px; height: 30px; background: none; position: relative;
}
.carousel-dot::before {
content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 9px; height: 9px; border-radius: 50%;
background: var(--line); transition: all 0.35s var(--ease);
}
.carousel-dot.is-active::before { width: 26px; border-radius: 5px; background: var(--riviera); }
.carousel-dots { gap: 0; }
/* V41 — grain cinématographique (univers sites) */
.uni-site::after, .a2-stage::after, .finale::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 30;
opacity: 0.05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { /* statique : aucun coût GPU */ }
/* V41 — le bouton WhatsApp flotte au-dessus de la barre sticky partout où elle existe */
@media (max-width: 860px) {
.whatsapp-float { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
.whatsapp-float { width: 54px; height: 54px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); }
}
/* V41 — pile flottante cohérente sur tablette : barre 0-78 · WhatsApp 96-156 · retour haut 168+ */
@media (max-width: 860px) {
.back-to-top { bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
}
/* V41 — zéro CLS : CTA header à largeur stable, compteur tabulaire, ligne en scaleX */
.header-cta { min-width: 200px; justify-content: center; }
@media (max-width: 1080px) { .header-cta { min-width: 0; } }
.pl-pct { font-variant-numeric: tabular-nums; min-height: 1.4em; }
.pl-pct span { display: inline-block; min-width: 2.1ch; text-align: right; }
/* =============================================================
V42 — GAMME UNIFIÉE : une seule plaque, 18 identités
============================================================= */
.pq3d.pqx.pqx {
background:
radial-gradient(ellipse 120% 85% at 50% -12%, color-mix(in srgb, var(--brand) 17%, transparent) 0%, transparent 56%),
radial-gradient(ellipse 90% 70% at 50% 115%, rgba(36, 118, 184, 0.13) 0%, transparent 60%),
linear-gradient(165deg, rgba(16, 42, 64, 0.97) 0%, rgba(7, 20, 32, 0.985) 55%, #040B13 100%);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -2px 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 24px 50px rgba(2, 10, 18, 0.55),
0 60px 110px rgba(2, 10, 18, 0.4),
0 0 44px -16px color-mix(in srgb, var(--brand) 60%, transparent);
}
.pqx .pq3-mark { color: #F2F5FA; }
.pqx .pq3-mark > svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--brand) 40%, rgba(2, 10, 18, 0.35))); }
.pq3-mark.pqm-disc {
background: #FFFFFF; border-radius: 50%; padding: 5.5%;
box-shadow: 0 12px 28px rgba(2, 10, 18, 0.5), 0 0 0 6px color-mix(in srgb, var(--brand) 20%, transparent);
}
.pq3-mark.pqm-disc > svg { filter: none; }
.pqx .pq3-cta { color: color-mix(in srgb, var(--brand) 55%, #F8F4EC); }
/* WhatsApp : la plaque ronde */
.col-slide .pq3d.pqx-round, .pq3d.pqx.pqx-round { border-radius: 50%; padding: 9% 10%; }
.pqx-round .pq3-mark { width: 27%; margin-top: 4%; }
.pqx-round .pq3-name { margin-top: 2.5%; }
.pqx-round .pq3-row { margin-top: auto; gap: 10px; }
.pqx-round .pq3-row i { display: none; }
.pqx-round .pq3-sig { margin-bottom: 5%; }
.pqx-round .n3-line { left: 24%; right: 24%; bottom: 11%; }
/* Sur mesure : liseré pointillé conservé */
.col-slide .pq3d.pqx-dash, .pq3d.pqx.pqx-dash { border-style: dashed; border-color: rgba(235, 215, 161, 0.6); }
/* =============================================================
V43 — CARTES VERRE UNIFIÉES + HÉROS + CINÉMATIQUES
============================================================= */
/* Cartes format bancaire : même verre bleu nuit que les plaques */
.nfc3d.nfx.nfx {
background:
radial-gradient(ellipse 130% 95% at 20% -14%, color-mix(in srgb, var(--brand) 15%, transparent) 0%, transparent 54%),
radial-gradient(ellipse 90% 70% at 105% 115%, rgba(36, 118, 184, 0.13) 0%, transparent 60%),
linear-gradient(155deg, rgba(16, 42, 64, 0.97) 0%, rgba(7, 20, 32, 0.985) 55%, #040B13 100%);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -2px 0 rgba(0, 0, 0, 0.5),
0 24px 50px rgba(2, 10, 18, 0.55),
0 60px 110px rgba(2, 10, 18, 0.4),
0 0 44px -16px color-mix(in srgb, var(--brand) 60%, transparent);
}
.nfx .n3-mark { color: #F2F5FA; }
.nfx .n3-mark > svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--brand) 38%, rgba(2, 10, 18, 0.35))); }
.nfx .n3-sig, .nfx .n3-tech { color: rgba(248, 244, 236, 0.6); }
/* Rond : nom et rangée resserrés pour le petit format menu */
.pqx-round .pq3-cta { font-size: clamp(0.68rem, 1.7vw, 0.8rem); }
/* ---- Héros rééquilibré (identité inchangée) ---- */
.hero-title { letter-spacing: -0.018em; line-height: 1.04; }
.hero-lead { max-width: 33em; margin-top: 20px; }
.hero-cta { margin-top: 30px; gap: 14px; }
.hero-more { margin-top: 16px; }
.hero-trust { margin-top: 28px; column-gap: 26px; row-gap: 12px; }
.hero-badge, .hero-eyebrow { letter-spacing: 0.02em; }
/* ---- Section sites : cinématique de profondeur ---- */
.uni-site .web-features .web-feature {
opacity: 0; transform: translateY(36px) scale(0.955);
transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), border-color 0.45s, box-shadow 0.45s;
}
.uni-site .web-features .web-feature:nth-child(2) { transition-delay: 0.14s; }
.uni-site .web-features .web-feature:nth-child(3) { transition-delay: 0.28s; }
.uni-site .web-features.visible .web-feature { opacity: 1; transform: none; }
.uni-site .section-head.reveal { transform: translateY(30px) scale(0.965); }
.uni-site .section-head.reveal.visible { transform: none; }
section#siteweb { overflow: hidden; }
section#siteweb::before {
content: ''; position: absolute; width: 58vw; height: 58vw; border-radius: 50%;
top: 4%; left: -22%; pointer-events: none;
background: radial-gradient(circle, rgba(201, 210, 226, 0.09) 0%, transparent 62%);
animation: finDrift 34s linear infinite alternate;
}
html:not(.js) .uni-site .web-feature { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.uni-site .web-features .web-feature { opacity: 1; transform: none; transition: none; }
section#siteweb::before { animation: none; }
}
/* ---- Transition : travelling caméra + poussière ---- */
.a2-core { transform: scale(calc(0.93 + var(--pp, 0) * 0.13)); will-change: transform; }
.a2-stage.a4 .a2-stars { animation: finDrift 42s linear infinite alternate; }
@media (prefers-reduced-motion: reduce) { .a2-core { transform: none; } }
/* ---- L'objet actif suit le curseur (pointer fine) ---- */
@media (pointer: fine) {
.col-slide.is-on { transform: perspective(1000px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)); transition: transform 0.25s ease-out; will-change: transform; }
}
/* =============================================================
V44 — PASTILLES OFFICIELLES DES MARQUES (règle absolue n°2)
============================================================= */
.pq3-mark.pqt {
padding: 0;
display: grid;
place-items: center;
border-radius: 26%;
box-shadow: 0 14px 30px rgba(2, 10, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pq3-mark.pqt > svg { filter: none; width: 54%; height: 54%; }
.pqt-insta { background: radial-gradient(circle at 28% 110%, #FDDC80 0%, #FA7E1E 26%, #D62976 52%, #962FBF 74%, #4F5BD5 96%); }
.pqt-fb { background: #1877F2; border-radius: 50%; }
.pqt-snap { background: #FFFC00; }
.pqt-li { background: #0A66C2; border-radius: 20%; }
.pqt-wa { background: #25D366; border-radius: 50%; }
.pqt-abnb { background: #FF5A5F; }
.tht {
width: 26px; height: 26px; border-radius: 26%;
display: grid; place-items: center; padding: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.tht > svg { width: 100%; height: 100%; }
.tht.pqt-fb, .tht.pqt-wa { border-radius: 50%; }
.tht.tht-disc { background: #FFFFFF; border-radius: 50%; }
.tht.pqt-insta { background: radial-gradient(circle at 28% 110%, #FDDC80 0%, #FA7E1E 26%, #D62976 52%, #962FBF 74%, #4F5BD5 96%); }
.tht.pqt-snap { background: #FFFC00; }
.tht.pqt-li { background: #0A66C2; }
.tht.pqt-abnb { background: #FF5A5F; }
.tht.pqt-wa { background: #25D366; }
.tht.pqt-fb { background: #1877F2; }
/* =============================================================
V44 — SCÈNE « NOUS CRÉONS AUSSI DES SITES INTERNET »
============================================================= */
.a2-title .aw { display: inline-block; white-space: nowrap; }
.a2-title .lt {
display: inline-block; opacity: 0;
transform: translateY(0.38em);
filter: blur(5px);
transition: opacity 0.5s var(--ease), transform 0.72s var(--ease), filter 0.72s var(--ease);
transition-delay: calc(var(--i, 0) * 0.038s);
will-change: transform, opacity;
}
.a2-l2 .lt { transform: translateY(0.42em) scale(1.55); filter: blur(11px); }
.a2-l2 .aw.emph .lt { font-style: italic; color: #DEE4F0; }
.a2-stage.a2 .a2-l1 .lt { opacity: 1; transform: none; filter: none; }
.a2-stage.a3 .a2-l2 .lt { opacity: 1; transform: none; filter: none; }
/* faisceau lumineux qui traverse pendant la scène */
.a2-beam {
position: absolute; top: -25%; bottom: -25%; width: 24%; left: -35%;
background: linear-gradient(100deg, transparent 0%, rgba(244, 246, 250, 0.1) 42%, rgba(244, 246, 250, 0.3) 50%, rgba(244, 246, 250, 0.1) 58%, transparent 100%);
transform: translateX(calc(var(--pp, 0) * 640%)) rotate(6deg);
pointer-events: none; will-change: transform;
}
/* le décor NFC se floute et s'efface */
.a2-nfc { position: absolute; inset: 0; pointer-events: none; }
.a2-plq {
position: absolute; display: grid; place-items: center;
color: rgba(240, 220, 168, 0.85); font-size: 1.4rem;
background: linear-gradient(160deg, rgba(16, 42, 64, 0.9), rgba(5, 13, 22, 0.95));
border: 1px solid rgba(235, 215, 161, 0.5); border-radius: 14px;
opacity: calc(0.85 - var(--pp, 0) * 2.4);
filter: blur(calc(var(--pp, 0) * 16px));
will-change: transform, opacity, filter;
}
.a2-plq.g1 { width: 120px; height: 120px; left: 12%; top: 24%; transform: translateY(calc(var(--pp, 0) * -120px)) rotate(-7deg); }
.a2-plq.g2 { width: 88px; height: 88px; right: 15%; top: 18%; transform: translateY(calc(var(--pp, 0) * -170px)) rotate(9deg); }
.a2-plq.g3 { width: 74px; height: 74px; left: 24%; bottom: 16%; transform: translateY(calc(var(--pp, 0) * -90px)) rotate(5deg); }
/* les maquettes web surgissent au loin */
.a2-web { position: absolute; inset: 0; pointer-events: none; perspective: 1100px; }
.a2-shot {
position: absolute; border-radius: 10px; overflow: hidden;
background: linear-gradient(170deg, rgba(22, 30, 44, 0.92), rgba(8, 12, 20, 0.96));
border: 1px solid rgba(201, 210, 226, 0.28);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
opacity: calc((var(--pp, 0) - 0.5) * 2.4);
filter: blur(calc(max(0, 0.82 - var(--pp, 0)) * 8px));
will-change: transform, opacity, filter;
}
.a2-shot i { display: block; height: 14%; background: rgba(201, 210, 226, 0.14); border-bottom: 1px solid rgba(201, 210, 226, 0.12); }
.a2-shot b { display: block; height: 46%; margin: 8% 9% 0; border-radius: 5px;
background: linear-gradient(140deg, rgba(56, 182, 255, 0.34), rgba(139, 108, 255, 0) 70%), rgba(201, 210, 226, 0.1); }
.a2-shot u { display: block; height: 7%; margin: 7% 9% 0; border-radius: 3px; background: rgba(201, 210, 226, 0.2); text-decoration: none; width: 55%; }
.a2-shot.s1 { width: 200px; height: 140px; left: 9%; top: 20%; transform: translateY(calc(var(--pp, 0) * -46px)) rotateY(14deg) scale(calc(0.72 + var(--pp, 0) * 0.3)); }
.a2-shot.s2 { width: 168px; height: 118px; right: 10%; top: 26%; transform: translateY(calc(var(--pp, 0) * -70px)) rotateY(-13deg) scale(calc(0.66 + var(--pp, 0) * 0.3)); }
.a2-shot.s3 { width: 148px; height: 104px; right: 22%; bottom: 13%; transform: translateY(calc(var(--pp, 0) * -30px)) rotateY(-7deg) scale(calc(0.6 + var(--pp, 0) * 0.28)); }
@media (max-width: 860px) {
.a2-plq.g2, .a2-shot.s3 { display: none; }
.a2-shot.s1 { width: 130px; height: 92px; left: 4%; }
.a2-shot.s2 { width: 116px; height: 82px; right: 4%; }
.a2-plq.g1 { width: 84px; height: 84px; left: 6%; }
.a2-plq.g3 { width: 58px; height: 58px; left: 12%; }
}
html:not(.js) .a2-title .lt { opacity: 1; transform: none; filter: none; }
html:not(.js) .a2-beam, html:not(.js) .a2-nfc { display: none; }
html:not(.js) .a2-shot { opacity: 0.5; filter: none; }
@media (prefers-reduced-motion: reduce) {
.a2-title .lt { opacity: 1; transform: none; filter: none; transition: none; }
.a2-beam, .a2-nfc { display: none; }
.a2-shot { opacity: 0.55; filter: none; transform: none; transition: none; }
}
/* =============================================================
V44 — HÉROS : équilibre haut de gamme (identité inchangée)
============================================================= */
.main-nav a { white-space: nowrap; }
.hero-trust {
display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
column-gap: 34px; row-gap: 12px; margin-top: 26px;
}
.hero-more { margin-top: 22px; font-size: 0.9rem; opacity: 0.9; }
@media (max-width: 560px) { .hero-trust { column-gap: 22px; } }
/* Scène construction : la lumière évolue avec la progression */
.sig-halo { opacity: calc(0.25 + var(--p, 0) * 0.75); }
/* =============================================================
V48 — GALERIE FICHES (nouvelles images) + ACCORDÉONS ANIMÉS
============================================================= */
.fiche-img.av-real { background: #EDEAE2; }
.fiche-img.av-real img { width: 100%; height: 100%; object-fit: contain; display: block; background: #EFECE5; }
.fiche-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-main .fiche-img.av-real.is-active { animation: none; } /* V55 : pas de zoom auto sur les photos produit */
.fiche-img.av-real { background: #EFECE5; }
#fiche-modal details > summary { cursor: pointer; position: relative; touch-action: manipulation; list-style: none; }
#fiche-modal details > summary::-webkit-details-marker { display: none; }
#fiche-modal details > summary::after {
content: ''; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
border-right: 2px solid #C89238; border-bottom: 2px solid #C89238;
transform: translateY(-70%) rotate(45deg); transition: transform .3s ease;
}
#fiche-modal details[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
#fiche-modal details[open] > *:not(summary) { animation: avAccIn .34s cubic-bezier(.22,.8,.3,1) both; }
@keyframes avAccIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
#fiche-modal details[open] > *:not(summary) { animation: none; }
#fiche-modal details > summary::after { transition: none; }
}
/* =============================================================
V52 — ACCORDÉONS DESIGN (cartes, chevron cerclé or, fluidité)
============================================================= */
#fiche-modal .ff-item {
background: #FFFFFF;
border: 1px solid rgba(10, 61, 98, 0.10);
border-bottom: 1px solid rgba(10, 61, 98, 0.10);
border-radius: 16px;
margin: 0 0 10px;
padding: 2px 16px;
transition: border-color 0.3s, box-shadow 0.35s, transform 0.25s;
}
#fiche-modal .ff-item:hover { border-color: rgba(200, 146, 56, 0.4); }
#fiche-modal .ff-item[open] {
border-color: rgba(200, 146, 56, 0.55);
box-shadow: 0 12px 32px rgba(10, 61, 98, 0.09);
}
#fiche-modal .ff-item summary { padding: 14px 2px; }
#fiche-modal .ff-chev {
width: 28px; height: 28px; padding: 6px; box-sizing: border-box;
border: 1.5px solid rgba(200, 146, 56, 0.45); border-radius: 50%;
background: rgba(240, 220, 168, 0.12);
color: #8F6420;
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background 0.25s, border-color 0.25s;
}
#fiche-modal .ff-item[open] .ff-chev,
#fiche-modal .ff-item summary:hover .ff-chev { background: rgba(240, 220, 168, 0.35); border-color: #C89238; }
#fiche-modal .ff-item[open] p { animation: none; }
#fiche-modal details[open] > *:not(summary) { animation: none; }
/* FAQ principale : même langage */
.faq-chevron {
width: 28px; height: 28px;
border: 1.5px solid rgba(200, 146, 56, 0.45); border-radius: 50%;
background: rgba(240, 220, 168, 0.12);
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background 0.25s, border-color 0.25s;
}
.faq-chevron::before { top: 12.5px; left: 6.5px; width: 13px; height: 1.8px; background: #8F6420; }
.faq-chevron::after { top: 6.5px; left: 12.5px; width: 1.8px; height: 13px; background: #8F6420; }
.faq-item.open .faq-chevron { background: rgba(240, 220, 168, 0.35); border-color: #C89238; transform: rotate(180deg); }
.faq-answer { transition: max-height 0.55s cubic-bezier(0.32, 0.72, 0, 1); }
.faq-answer-inner { opacity: 0; transform: translateY(-8px); transition: opacity 0.4s ease 0.1s, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1) 0.1s; }
.faq-item.open .faq-answer-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.faq-answer, .faq-answer-inner, .faq-chevron, #fiche-modal .ff-chev { transition: none; }
}
/* --- V51 : dérouleur global FAQ --- */
.faq-item.faq-folded { display: none; }
.faq-item.faq-unfolded { animation: avAccIn 0.4s var(--ease, ease) both; animation-delay: var(--fd, 0s); }
.faq-more-btn {
align-self: center; margin-top: 14px; cursor: pointer; background: none;
border: 1.5px solid rgba(200, 146, 56, 0.5); border-radius: 999px; padding: 12px 28px;
font: 600 0.9rem var(--font-body, Inter, sans-serif); color: #8F6420;
transition: border-color 0.2s, background 0.2s, transform 0.15s; touch-action: manipulation;
}
.faq-more-btn:hover { border-color: #C89238; background: rgba(240, 220, 168, 0.18); }
.faq-more-btn:active { transform: scale(0.97); }
.fmb-n { opacity: 0.6; font-weight: 500; }
html:not(.js) .faq-item.faq-folded { display: block; }
/* --- V57 : upload tous formats --- */
#cf-upmsg.up-ok { color: #1F7A43; background: rgba(31, 122, 67, 0.08); border: 1px solid rgba(31, 122, 67, 0.3); border-radius: 10px; padding: 8px 12px; }
/* --- V56 : cinématique d'ajout + lien QR panier + standard défaut --- */
.av-burst { position: fixed; z-index: 99998; pointer-events: none; width: 0; height: 0; }
.av-burst i { position: absolute; left: 0; top: 0; width: var(--sz, 5px); height: var(--sz, 5px);
border-radius: 50%; background: linear-gradient(135deg, #F0DCA8, #C89238);
box-shadow: 0 0 10px rgba(240, 220, 168, 0.8);
animation: avPop 0.85s cubic-bezier(0.18, 0.68, 0.26, 1) var(--dl, 0ms) both; }
@keyframes avPop {
0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
12% { opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
.av-burst-halo { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%;
border: 2px solid rgba(240, 220, 168, 0.75);
animation: avHalo 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
@keyframes avHalo { from { transform: scale(0.25); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
.add-cart.av-added { background: linear-gradient(135deg, #2E9155, #1F7A43) !important; color: #fff !important;
transition: background 0.25s; }
.cart-qr-link { display: block; margin-top: 8px; }
.cart-qr-link span { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
color: #8F6420; margin-bottom: 4px; }
.cart-qr-link input { width: 100%; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 16px;
border: 1.5px solid rgba(10, 61, 98, 0.2); background: #fff; color: var(--ink, #14202E); }
.cart-qr-link input:focus { outline: none; border-color: #C89238; }
.cart-qr-link input.is-missing { border-color: #C0392B; background: rgba(192, 57, 43, 0.05); animation: avShake 0.4s; }
.cart-link-hint { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--graphite-soft, #6C7683); font-weight: 400; text-transform: none; letter-spacing: 0; }
@keyframes avShake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .av-burst, .av-burst-halo { display: none; } .cart-qr-link input.is-missing { animation: none; } }
/* =============================================================
V54 — STANDARD/PERSONNALISÉ, options près du prix, recap,
animations de sélection et d'entrée de fiche
============================================================= */
.fb-version { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.fbv { text-align: left; cursor: pointer; border-radius: 16px; padding: 13px 15px;
border: 1.5px solid rgba(10, 61, 98, 0.16); background: #fff;
transition: border-color 0.25s, box-shadow 0.3s, transform 0.2s; touch-action: manipulation; }
.fbv b { display: block; font-size: 0.66rem; letter-spacing: 0.14em; color: var(--graphite-soft, #6C7683); }
.fbv strong { display: block; font-family: var(--font-display, Fraunces, serif); font-size: 1.25rem; color: var(--ink, #14202E); margin: 3px 0; }
.fbv span { display: block; font-size: 0.72rem; color: var(--graphite, #3D4753); line-height: 1.35; }
.fbv:hover { border-color: rgba(200, 146, 56, 0.45); }
.fbv.is-on { border-color: #C89238; box-shadow: 0 10px 26px rgba(200, 146, 56, 0.16); transform: translateY(-1px); }
.fbv.is-on b { color: #8F6420; }
@media (max-width: 420px) { .fbv strong { font-size: 1.05rem; } }
.fiche-buy .fiche-qr-opt { flex-basis: 100%; margin: 8px 0 2px; }
.fb-pulse { animation: fbPulse 0.45s cubic-bezier(0.32, 0.72, 0, 1); display: inline-block; }
@keyframes fbPulse { 0% { transform: scale(1); } 35% { transform: scale(1.09); color: #8F6420; } 100% { transform: scale(1); } }
.fb-newtier { display: inline-block; font-size: 0.78rem; font-weight: 700; color: #1F7A43;
background: rgba(31, 122, 67, 0.1); border: 1px solid rgba(31, 122, 67, 0.35);
border-radius: 999px; padding: 4px 12px; margin-bottom: 6px;
animation: avAccIn 0.4s cubic-bezier(0.32, 0.72, 0, 1) both; }
.fb-recap { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin-top: 10px;
padding: 12px 16px; background: #fff; border: 1px solid rgba(10, 61, 98, 0.1); border-radius: 14px; font-size: 0.82rem; }
.fb-recap-t { grid-column: 1 / -1; font-size: 0.66rem; letter-spacing: 0.14em; color: var(--graphite-soft, #6C7683); margin: 0 0 2px; }
.fb-recap span { color: var(--graphite-soft, #6C7683); }
.fb-recap b { color: var(--ink, #14202E); font-weight: 600; text-align: right; }
/* sélection produit premium (transform/opacity uniquement) */
.col-slide { transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.55s cubic-bezier(0.32, 0.72, 0, 1); }
.col-track.av-dim .col-slide:not(.av-selecting) { opacity: 1; transform: scale(0.985); }
.col-slide.av-selecting { transform: scale(1.02); z-index: 2; }
.col-slide.av-selecting .pq3d, .col-slide.av-selecting .nfc3d { filter: drop-shadow(0 18px 44px rgba(200, 146, 56, 0.35)); }
/* entrée de fiche en cascade */
#fiche-modal.open .fiche-sheet { animation: fSheet 0.6s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes fSheet { from { opacity: 0; transform: translateY(26px) scale(0.985); } to { opacity: 1; transform: none; } }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > * { animation: avAccIn 0.5s cubic-bezier(0.32, 0.72, 0, 1) both; }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *:nth-child(1) { animation-delay: 0.08s; }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *:nth-child(2) { animation-delay: 0.16s; }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *:nth-child(3) { animation-delay: 0.24s; }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *:nth-child(4) { animation-delay: 0.32s; }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *:nth-child(5) { animation-delay: 0.42s; }
#fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *:nth-child(n+6) { animation-delay: 0.52s; }
/* bascule d'image (QR / vues) en douceur */
.fiche-img.av-real img { transition: opacity 0.35s ease; }
@media (prefers-reduced-motion: reduce) {
.col-slide, .fiche-img.av-real img { transition: none; }
#fiche-modal.open .fiche-sheet, #fiche-modal.open .fiche-panel:not([hidden]) .fiche-body > *,
.fb-pulse, .fb-newtier { animation: none; }
.col-track.av-dim .col-slide:not(.av-selecting), .col-slide.av-selecting { opacity: 1; transform: none; }
}
/* =============================================================
V53 — PRIX DÉGRESSIFS (CRO) : ligne dynamique, grille, nudge,
économies panier, cross-sell, résumé sticky mobile
============================================================= */
.fb-tier { margin: 10px 0 4px; }
.fb-line { font-size: 0.95rem; color: var(--graphite, #3D4753); margin: 0 0 4px; }
.fb-line b { color: var(--ink, #14202E); }
.fb-save { color: #1F7A43; font-weight: 600; font-size: 0.85em; }
.fb-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
padding: 3px 10px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
background: rgba(240, 220, 168, 0.35); color: #8F6420; border: 1px solid rgba(200, 146, 56, 0.35); }
.fb-nudge { font-size: 0.8rem; color: #8F6420; margin: 0 0 8px; min-height: 1em; }
.fb-note { display: block; font-size: 0.72rem; color: var(--graphite-soft, #6C7683); margin-top: 3px; }
.fb-grid-btn { background: none; border: none; cursor: pointer; padding: 2px 0; font: 600 0.82rem var(--font-body, Inter, sans-serif);
color: #8F6420; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 146, 56, 0.5); touch-action: manipulation; }
.fb-grid-btn:hover { text-decoration-color: #C89238; }
.fb-grid { margin-top: 8px; animation: avAccIn 0.35s cubic-bezier(0.32, 0.72, 0, 1) both; }
.fb-grid table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #fff;
border: 1px solid rgba(10, 61, 98, 0.12); border-radius: 14px; overflow: hidden; }
.fb-grid th { text-align: left; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--graphite-soft, #6C7683); padding: 10px 14px; border-bottom: 1px solid rgba(10, 61, 98, 0.1); }
.fb-grid td { padding: 9px 14px; border-top: 1px solid rgba(10, 61, 98, 0.06); color: var(--graphite, #3D4753); }
.fb-grid tr.is-on td { background: rgba(240, 220, 168, 0.22); color: var(--ink, #14202E); font-weight: 600; }
.fb-grid td:nth-child(3) { color: #1F7A43; font-weight: 600; }
.cart-item-save { color: #1F7A43; font-weight: 600; }
.cart-savings { font-size: 0.82rem; color: #1F7A43; font-weight: 600; margin: 4px 0 0; text-align: right; }
#cart-xsell { padding: 12px 0 4px; border-top: 1px dashed rgba(10, 61, 98, 0.15); margin-top: 10px; }
#cart-xsell .xs-t { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-soft, #6C7683); margin: 0 0 8px; }
#cart-xsell .xs-link { display: inline-block; background: none; cursor: pointer; margin: 0 8px 6px 0; padding: 8px 14px;
border: 1px solid rgba(200, 146, 56, 0.4); border-radius: 999px; font: 600 0.8rem var(--font-body, Inter, sans-serif); color: #8F6420; touch-action: manipulation; }
#cart-xsell .xs-link:hover { border-color: #C89238; background: rgba(240, 220, 168, 0.18); }
.fiche-qty b[contenteditable] { min-width: 34px; outline: none; }
.fiche-qty b[contenteditable]:focus { box-shadow: inset 0 -2px 0 #C89238; }
#fiche-sticky { display: none; }
@media (max-width: 760px) {
#fiche-sticky { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); margin: 12px 0 0; border-radius: 14px; max-width: 100%; box-sizing: border-box;
background: rgba(252, 250, 245, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(10, 61, 98, 0.12); }
#fiche-sticky .fs-txt { font: 600 0.85rem var(--font-body, Inter, sans-serif); color: var(--ink, #14202E); white-space: nowrap; }
#fiche-sticky .fs-add { flex: 1; border: 0; border-radius: 999px; padding: 13px 16px; cursor: pointer;
font: 700 0.9rem var(--font-body, Inter, sans-serif); color: #1E1503; touch-action: manipulation;
background: linear-gradient(135deg, #F0DCA8, #E1BC72 55%, #C89238); box-shadow: 0 8px 22px rgba(200, 146, 56, 0.3); }
}
/* --- V50 : option QR code imprimé (fiches) --- */
.fiche-qr-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.fq-lab { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-soft, #6C7683); margin-right: 2px; }
.fq-pill { position: relative; }
.fq-pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.fq-pill span { display: inline-block; padding: 7px 15px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
border: 1.5px solid rgba(10, 61, 98, 0.22); color: var(--graphite, #3D4753); background: #fff;
transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s; }
.fq-pill input:checked + span { border-color: #C89238; color: #8F6420; background: rgba(240, 220, 168, 0.22); }
.fq-pill input:focus-visible + span { outline: 2px solid #C89238; outline-offset: 2px; }
.fq-pill:active span { transform: scale(0.97); }
.fiche-qr-opt { max-width: 100%; min-width: 0; }
.fq-pill { max-width: 100%; min-width: 0; }
.fq-pill span { white-space: normal; text-align: center; line-height: 1.3; }
.fq-lab2 { margin-left: 6px; }
/* Mobile : chaque option sur ses lignes — label pleine largeur, pastilles en dessous */
@media (max-width: 760px) {
.fiche-qr-opt { gap: 8px; }
.fiche-qr-opt .fq-lab { flex: 0 0 100%; margin: 4px 0 0; }
.fiche-qr-opt .fq-lab2 { margin-left: 0; margin-top: 10px; }
.fiche-qr-opt .fq-pill { flex: 1 1 calc(50% - 8px); }
.fiche-qr-opt .fq-pill span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 8px 10px; }
}
/* =============================================================
V46 — ANTI-ZOOM MOBILE (accordéons, formulaires, double-tap iOS)
============================================================= */
a, button, summary, label, [role="button"], .faq-q, .tab, .qty-btn { touch-action: manipulation; }
@media (max-width: 760px) {
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}
/* ============================================================
AV-CINE — SOCLE CSS DES FUTURES CINÉMATIQUES
Classes inertes : aucun effet tant qu'aucune scène ne les utilise.
.cine-scene : section hôte d'une scène pilotée par le scroll
.cine-viewport : cadre collant plein écran à l'intérieur de la scène
.cine-layers : conteneur 3D (perspective)
.cine-layer : un plan de profondeur (composé sur le GPU)
============================================================ */
:root {
--cine-persp: 1200px;
--cine-depth-1: 40px;
--cine-depth-2: 120px;
--cine-depth-3: 280px;
}
.cine-scene { position: relative; }
.cine-viewport { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-layers { position: absolute; inset: 0; perspective: var(--cine-persp); transform-style: preserve-3d; }
.cine-layer { position: absolute; inset: 0; will-change: transform, opacity; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.cine-layer { will-change: auto; }
}
/* ============================================================
CINE-INTRO — Introduction cinématique (Scènes 01 → 08)
Une caméra avance dans un corridor 3D : lumière lointaine,
logo en profondeur, portes de lumière NFC, produits flottants,
accélération WOW, arrivée du Chapitre 01.
Piloté par window.AVCine (voir script CINE-INTRO DRIVER).
============================================================ */
#cine-intro {
height: 640vh;
background: #030B14;
z-index: 5;
}
#cine-intro .cine-viewport {
background:
radial-gradient(120% 90% at 50% 42%, rgba(10, 61, 98, 0.34), rgba(3, 11, 20, 0) 62%),
linear-gradient(180deg, #020810 0%, #04101C 52%, #030B14 100%);
}
/* --- Couches écran (ordre de profondeur) --- */
.ci-core, .ci-gl, .ci-space, .ci-rays, .ci-grain, .ci-vignette { position: absolute; inset: 0; }
.ci-core { z-index: 1; pointer-events: none; }
.ci-gl { z-index: 2; width: 100%; height: 100%; opacity: var(--ci-gla, 1); }
.ci-space { z-index: 3; }
.ci-rays { z-index: 4; pointer-events: none; }
.ci-grain { z-index: 5; pointer-events: none; }
.ci-vignette { z-index: 6; pointer-events: none; }
.ci-bars { z-index: 7; }
.ci-chapter { z-index: 8; }
.ci-hint, .ci-skip { z-index: 9; }
/* --- Scène 01 : la lumière dans la profondeur --- */
.ci-core::before {
content: ""; position: absolute; left: 50%; top: 44%;
width: 58vmin; height: 58vmin; border-radius: 50%;
transform: translate(-50%, -50%)
translate(calc(var(--ci-px, 0) * -2.2vmin), calc(var(--ci-py, 0) * -1.6vmin))
scale(var(--ci-core, 0.4));
background:
radial-gradient(circle, rgba(255, 251, 240, 0.85) 0%,
rgba(235, 215, 161, 0.55) 18%,
rgba(200, 146, 56, 0.28) 38%,
rgba(36, 118, 184, 0.10) 58%,
rgba(3, 11, 20, 0) 72%);
opacity: var(--ci-corea, 0.12);
will-change: transform, opacity;
}
.ci-core::after { /* halo large, respiration lente */
content: ""; position: absolute; left: 50%; top: 44%;
width: 130vmin; height: 110vmin; border-radius: 50%;
transform: translate(-50%, -50%) scale(var(--ci-core, 0.4));
background: radial-gradient(ellipse, rgba(198, 222, 238, 0.10) 0%, rgba(3, 11, 20, 0) 60%);
opacity: var(--ci-corea, 0.12);
will-change: transform, opacity;
}
/* --- Scène 07 : rais de lumière convergents (moment WOW) --- */
.ci-rays {
opacity: var(--ci-rays, 0);
-webkit-mask-image: radial-gradient(85% 85% at 50% 44%, #000 8%, transparent 62%);
mask-image: radial-gradient(85% 85% at 50% 44%, #000 8%, transparent 62%);
mix-blend-mode: screen;
will-change: opacity;
}
.ci-rays::before { /* le gradient est fixe : seule sa rotation (compositée) anime */
content: ""; position: absolute; inset: -25%;
background: repeating-conic-gradient(from 0deg at 50% 46%,
rgba(235, 215, 161, 0.16) 0deg 2.2deg,
rgba(235, 215, 161, 0) 5deg 14deg);
transform: rotate(var(--ci-rayr, 0deg));
transform-origin: 50% 46%;
will-change: transform;
}
/* --- Monde 3D : le corridor --- */
.ci-space { perspective: var(--ci-persp, 950px); perspective-origin: 50% 46%; }
.ci-world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ci-el { position: absolute; left: 50%; top: 46%; opacity: 0; will-change: transform, opacity, filter; backface-visibility: hidden; }
/* Portes de lumière NFC (échos des ondes du logo) */
.ci-gate { width: 96vmin; height: 96vmin; margin: -48vmin 0 0 -48vmin; }
.ci-gate svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ci-gate circle {
fill: none; stroke: url(#ci-gold-grad); stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: var(--ci-gate-len, 2513);
stroke-dashoffset: calc(var(--ci-gate-len, 2513) * (1 - var(--ci-draw, 0)));
filter: drop-shadow(0 0 14px rgba(235, 215, 161, 0.55));
}
.ci-gate .ci-gate-in { stroke-width: 0.8; opacity: 0.5; }
/* --- Scène 02 : le logo dans la profondeur --- */
.ci-logo { display: grid; justify-items: center; gap: 18px; width: max-content; transform: translate(-50%, -50%); text-align: center; }
.ci-logo::before { /* halo de matière derrière le logo */
content: ""; position: absolute; inset: -34% -44%;
background: radial-gradient(50% 50% at 50% 42%, rgba(235, 215, 161, 0.16) 0%, rgba(36, 118, 184, 0.10) 42%, rgba(3, 11, 20, 0) 70%);
opacity: var(--ci-halo, 0); z-index: -1;
}
.ci-mark {
width: 92px; height: 92px; border-radius: 25px;
background: linear-gradient(135deg, var(--azure-signal), var(--azure-deep));
display: grid; place-items: center;
box-shadow: 0 22px 60px rgba(2, 10, 18, 0.7), 0 0 0 1px rgba(235, 215, 161, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ci-mark svg { width: 52px; height: 52px; color: var(--champagne); }
.ci-name {
position: relative;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.7rem, 7.5vw, 4.8rem);
line-height: 1.04;
color: var(--ivory);
letter-spacing: 0.01em;
text-shadow: 0 4px 40px rgba(2, 10, 18, 0.8);
}
.ci-name .accent { font-style: italic; color: var(--champagne); font-variation-settings: "SOFT" 100; }
.ci-name { overflow: hidden; padding: 0.1em 0.16em; margin: -0.1em -0.16em; }
.ci-name::after { /* balayage de lumière spéculaire sur le nom */
content: ""; position: absolute; inset: 0;
background: linear-gradient(112deg, transparent 30%, rgba(255, 252, 242, 0.85) 46%, rgba(235, 215, 161, 0.9) 50%, transparent 66%);
transform: translateX(calc((var(--ci-sheen, 0) * 240%) - 120%));
opacity: calc(var(--ci-sheen, 0) * (1 - var(--ci-sheen, 0)) * 4);
mix-blend-mode: overlay; pointer-events: none;
}
.ci-tag {
font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase;
color: var(--azure-mist); opacity: 0.85; font-weight: 500;
}
/* --- Scènes 03/04 : les produits, physiquement présents --- */
.ci-prod { width: var(--w, 30vmin); margin-left: calc(var(--w, 30vmin) / -2); pointer-events: none; }
.ci-prod img { width: 100%; height: auto; display: block; }
.ci-prod .ci-refl {
position: absolute; left: 0; top: calc(100% - 2px); width: 100%;
transform: scaleY(-1); opacity: 0.16;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7), transparent 55%);
mask-image: linear-gradient(to top, rgba(0,0,0,0.7), transparent 55%);
}
.ci-prod { margin-top: calc(var(--w, 30vmin) / -1.8); }
/* Plan très lointain : nébulosités abstraites */
.ci-blob { width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; opacity: var(--ci-far, 0); }
.ci-blob-a { background: radial-gradient(circle, rgba(36, 118, 184, 0.20), transparent 65%); }
.ci-blob-b { background: radial-gradient(circle, rgba(200, 146, 56, 0.14), transparent 62%); }
.ci-blob-c { background: radial-gradient(circle, rgba(198, 222, 238, 0.12), transparent 60%); }
/* --- Habillage film --- */
.ci-grain { opacity: 0.05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ci-vignette {
background:
radial-gradient(120% 100% at 50% 46%, transparent 52%, rgba(1, 6, 11, 0.62) 100%),
linear-gradient(180deg, rgba(1, 6, 11, 0.5), transparent 14% 86%, rgba(1, 6, 11, 0.55));
}
.ci-bars { position: absolute; inset: 0; pointer-events: none; }
.ci-bars i { position: absolute; left: 0; right: 0; height: 9vh; background: #010509; }
.ci-bars i:first-child { top: 0; transform-origin: top; transform: scaleY(var(--ci-bars, 1)); }
.ci-bars i:last-child { bottom: 0; transform-origin: bottom; transform: scaleY(var(--ci-bars, 1)); }
/* --- Scène 08 : le titre Chapitre 01 --- */
.ci-chapter {
position: absolute; left: 50%; top: 46%;
transform: translate(-50%, -50%) translateY(calc((1 - var(--ci-ch, 0)) * 30px)) scale(calc(0.965 + var(--ci-ch, 0) * 0.035));
opacity: var(--ci-ch, 0);
display: grid; justify-items: center; gap: 20px; text-align: center;
pointer-events: none;
}
.ci-ch-rule { width: 68px; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne), transparent); }
.ci-ch-title {
font-family: var(--font-display); font-style: italic; font-weight: 600;
font-size: clamp(2.2rem, 6vw, 3.9rem); color: var(--ivory);
letter-spacing: 0.03em;
}
.ci-ch-title .accent { color: var(--champagne); }
/* --- Indication de défilement + bouton passer --- */
.ci-hint {
position: absolute; left: 50%; bottom: max(4.5vh, 26px); transform: translateX(-50%);
display: grid; justify-items: center; gap: 12px;
color: var(--azure-mist); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
opacity: 0; animation: ciHintIn 1.4s var(--ease) 1.8s forwards;
}
.ci-hint[data-off] { transition: opacity 0.5s var(--ease); opacity: var(--ci-hint, 1) !important; animation: none; }
.ci-hint i { width: 1px; height: 44px; background: linear-gradient(180deg, var(--champagne), transparent); position: relative; overflow: hidden; display: block; }
.ci-hint i::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: #fff; animation: ciHintDrop 1.9s var(--ease-quick) infinite; }
@keyframes ciHintIn { to { opacity: 1; } }
@keyframes ciHintDrop { 0% { top: -50%; } 70%, 100% { top: 110%; } }
.ci-skip {
position: absolute; top: max(3.4vh, 20px); right: max(3.4vw, 20px);
padding: 9px 18px; border-radius: var(--radius-pill);
background: rgba(3, 11, 20, 0.34); color: var(--azure-mist);
border: 1px solid rgba(198, 222, 238, 0.28);
font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; animation: ciHintIn 0.9s var(--ease) 1.4s forwards;
transition: color var(--duration-quick), border-color var(--duration-quick), background var(--duration-quick);
}
.ci-skip:hover, .ci-skip:focus-visible { color: var(--ivory); border-color: var(--champagne); background: rgba(3, 11, 20, 0.55); }
/* --- Le film masque l'interface du site --- */
html.av-in-cine .site-header { transform: translateY(-110%); }
.site-header { transition: transform 0.55s var(--ease), background var(--duration), border-color var(--duration), box-shadow var(--duration); }
html.av-in-cine .whatsapp-float,
html.av-in-cine .mobile-sticky-cta,
html.av-in-cine .scroll-progress,
html.av-in-cine .back-to-top { opacity: 0 !important; pointer-events: none !important; }
.whatsapp-float, .mobile-sticky-cta, .scroll-progress { transition: opacity 0.45s var(--ease); }
/* --- Mobile : composition adaptée (distances, cadrage, tailles) --- */
@media (max-width: 760px) {
#cine-intro { height: 470vh; }
.ci-space { perspective: 640px; perspective-origin: 50% 48%; }
.ci-el { top: 50%; }
.ci-chapter { top: 50%; }
.ci-mark { width: 68px; height: 68px; border-radius: 19px; }
.ci-mark svg { width: 38px; height: 38px; }
.ci-tag { font-size: 0.62rem; letter-spacing: 0.26em; }
.ci-gate { width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; }
.ci-bars i { height: 6.5vh; }
.ci-skip { top: max(2.6vh, 14px); right: max(4vw, 14px); padding: 8px 14px; }
}
/* --- Sans JavaScript : cadre posé, aucune scène kilométrique --- */
html:not(.js) #cine-intro { height: auto; }
html:not(.js) #cine-intro .cine-viewport { position: relative; height: 100svh; }
html:not(.js) .ci-gl, html:not(.js) .ci-hint, html:not(.js) .ci-bars, html:not(.js) .ci-skip { display: none; }
html:not(.js) .ci-el { opacity: 0; }
html:not(.js) .ci-logo { opacity: 1 !important; --ci-halo: 1; }
html:not(.js) .ci-chapter { --ci-ch: 1; top: 78%; }
/* --- Accessibilité : version posée, sans mouvement --- */
@media (prefers-reduced-motion: reduce) {
#cine-intro { height: auto; }
#cine-intro .cine-viewport { position: relative; height: 100svh; }
.ci-gl, .ci-rays, .ci-hint, .ci-bars { display: none; }
.ci-world { transform: none !important; }
.ci-el { opacity: 0 !important; }
.ci-logo { opacity: 1 !important; transform: translate(-50%, -50%) !important; filter: none !important; --ci-halo: 1; }
.ci-chapter { --ci-ch: 1; top: 78%; }
.ci-core::before { --ci-core: 1; --ci-corea: 0.5; }
}
/* ============================================================
CH1-FADE — simple fondu nuit -> Chapitre 01
============================================================ */
.ch1-fade {
height: 10vh;
background: linear-gradient(180deg, #0A2238 0%, #07243C 100%);
}
@media (max-width: 760px) { .ch1-fade { height: 8vh; } }