/* ============================================================ CartoPerf — Design system v2 « Premium Dark » Fonts : Outfit — AUTO-HÉBERGÉE (/css/fonts.css + /fonts/*.woff2), chargée via dans le des pages (preload + parallèle, jamais via @import qui sérialise le rendu) ============================================================ */ :root { --bg: #07070a; --bg-1: #0c0d13; --bg-2: #12141d; --bg-3: #191c28; --border: #232736; --border-2: #303650; --text: #f2f4f8; --text-2: #9aa3b5; --text-3: #79839a; --accent: #ff6b1a; --accent-2: #ff9d2e; --accent-3: #ff3d2e; --grad: linear-gradient(120deg, #ff9d2e 0%, #ff6b1a 45%, #ff3d2e 100%); --green: #2fd67b; --blue: #3aa0ff; --red: #ff4d5e; --gold: #ffc555; --glow: 0 10px 40px -8px rgba(255, 107, 26, .45); --shadow: 0 18px 50px -18px rgba(0, 0, 0, .7); --r: 16px; --r-sm: 10px; --header-h: 72px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Fond global : halos de couleur fixes */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 500px at 85% -10%, rgba(255, 107, 26, .10), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(58, 160, 255, .07), transparent 60%), radial-gradient(800px 600px at 50% 120%, rgba(255, 61, 46, .06), transparent 60%); } ::selection { background: rgba(255, 107, 26, .35); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 2px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover { background: var(--border-2); } a { color: var(--accent-2); text-decoration: none; transition: color .2s; } a:hover { color: var(--accent); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Accessibilité : lien d'évitement clavier (skip to content) */ .skip-link { position: fixed; left: 12px; top: -80px; z-index: 10000; background: var(--accent); color: #fff; padding: 11px 18px; border-radius: 10px; font-weight: 800; text-decoration: none; box-shadow: var(--shadow); transition: top .2s ease; } .skip-link:focus { top: 12px; outline: 3px solid #fff; } /* Bandeau de réassurance (#7) : confiance en un coup d'œil, sous l'en-tête */ .reassure-strip { background: var(--bg-1); border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 14px; } .reassure-strip::-webkit-scrollbar { display: none; } .reassure-strip .rs-in { display: flex; gap: 26px; justify-content: center; align-items: center; margin: 0 auto; max-width: 1180px; padding: 9px 18px; white-space: nowrap; } .reassure-strip span { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-2); font-weight: 500; } .reassure-strip b { color: var(--text); font-weight: 700; } @media (max-width: 720px) { .reassure-strip .rs-in { gap: 18px; padding: 8px 14px; justify-content: flex-start; } } html[data-theme="light"] .reassure-strip { background: #f1f4f9; } /* Vitrine de preuve (#7) : chiffres clés réels, sous le hero */ .preuve-band { background: linear-gradient(180deg, var(--bg-1), var(--bg)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .preuve-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 46px; max-width: 1100px; margin: 0 auto; padding: 22px 18px; } .preuve-item { text-align: center; min-width: 118px; } .pv-n { font-size: 1.55rem; font-weight: 900; color: var(--text); line-height: 1.1; } .pv-n b { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pv-l { font-size: .8rem; color: var(--text-2); margin-top: 3px; } @media (max-width: 640px) { .preuve-in { gap: 14px 26px; padding: 16px 12px; } .pv-n { font-size: 1.28rem; } } /* Pop-up de sortie (#9) — dernière chance, coordonnée avec la roue (1 seul prompt) */ .cp-exit-ov { position: fixed; inset: 0; z-index: 10001; background: rgba(6, 7, 10, .72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s; } .cp-exit-ov.show { opacity: 1; } .cp-exit-modal { background: linear-gradient(135deg, #1a1d27, #12151c); border: 1px solid rgba(255, 107, 26, .4); border-radius: 18px; padding: 28px 26px; max-width: 380px; text-align: center; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); transform: scale(.92); transition: transform .3s; } .cp-exit-ov.show .cp-exit-modal { transform: none; } .cp-exit-modal .cx-emoji { font-size: 2.6rem; line-height: 1; } .cp-exit-modal h3 { color: #fff; margin: 8px 0 6px; font-size: 1.3rem; } .cp-exit-modal p { color: #b4bac8; font-size: .9rem; margin: 0 0 16px; line-height: 1.5; } .cp-exit-modal .cx-go { display: inline-block; background: linear-gradient(135deg, #ff6b1a, #ff9d2e); color: #fff; font-weight: 800; padding: 11px 22px; border-radius: 10px; text-decoration: none; } .cp-exit-modal .cx-no { display: block; margin: 12px auto 0; background: none; border: 0; color: #7a8194; cursor: pointer; font-size: .82rem; } /* Modale de saisie e-mail (window.askEmail) — remplace le prompt() natif */ .cp-ask-ov { position: fixed; inset: 0; z-index: 10002; background: rgba(6, 7, 10, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s; } .cp-ask-ov.show { opacity: 1; } .cp-ask-card { position: relative; background: linear-gradient(135deg, #1a1d27, #12151c); border: 1px solid rgba(255, 107, 26, .4); border-radius: 18px; padding: 26px 24px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); transform: scale(.92) translateY(8px); transition: transform .28s cubic-bezier(.2, .9, .3, 1.2); } .cp-ask-ov.show .cp-ask-card { transform: none; } .cp-ask-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: #7a8194; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color .15s; } .cp-ask-x:hover { color: #fff; } .cp-ask-emoji { font-size: 2.4rem; line-height: 1; } .cp-ask-card h3 { color: #fff; margin: 8px 0 6px; font-size: 1.25rem; } .cp-ask-card p { color: #b4bac8; font-size: .88rem; margin: 0 0 16px; line-height: 1.5; } .cp-ask-form { display: flex; flex-direction: column; gap: 10px; } .cp-ask-input { width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: #fff; font-size: 1rem; text-align: center; transition: border-color .2s, box-shadow .2s; } .cp-ask-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 26, .18); outline: none; } .cp-ask-input.bad { border-color: var(--accent-3); box-shadow: 0 0 0 3px rgba(255, 61, 46, .18); } .cp-ask-err { color: var(--accent-3); font-size: .8rem; min-height: 1em; font-weight: 600; } .cp-ask-go { background: linear-gradient(135deg, #ff6b1a, #ff9d2e); color: #fff; font-weight: 800; padding: 12px 22px; border: 0; border-radius: 10px; cursor: pointer; font-size: .95rem; transition: filter .15s, transform .1s; } .cp-ask-go:hover { filter: brightness(1.07); } .cp-ask-go:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .cp-ask-ov, .cp-ask-card { transition: opacity .25s; } .cp-ask-card { transform: none; } } /* Mode clair : carte claire sur voile plus doux */ html[data-theme="light"] .cp-ask-ov { background: rgba(20, 26, 38, .45); } html[data-theme="light"] .cp-ask-card { background: linear-gradient(135deg, #ffffff, #f4f7fc); border-color: rgba(255, 107, 26, .5); box-shadow: 0 30px 90px rgba(20, 30, 50, .28); } html[data-theme="light"] .cp-ask-card h3 { color: #12151c; } html[data-theme="light"] .cp-ask-card p { color: #5a6376; } html[data-theme="light"] .cp-ask-x { color: #9aa2b2; } html[data-theme="light"] .cp-ask-x:hover { color: #12151c; } html[data-theme="light"] .cp-ask-input { background: #ffffff; color: #12151c; border-color: var(--border); } html[data-theme="light"] .cp-ask-input::placeholder { color: #9aa2b2; } /* Micro-interactions (#10) : apparition douce au scroll + retour tactile des boutons. La classe .reveal n'est posée QUE par le JS (sur des éléments sous la ligne de flottaison) et un filet de sécurité les révèle après 2,5 s → jamais de contenu invisible. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .reveal.in { opacity: 1; transform: none; } .btn:active, .btn-ghost:active { transform: translateY(1px) scale(.995); } .cta-card, .card, .glass { transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } * { scroll-behavior: auto !important; } } /* Recherche : élément survolé/sélectionné au clavier (#11) */ .sr-item.sel, .sr-item:hover { background: var(--bg-3); } /* Onboarding première visite (#12) : astuce discrète ancrée sous la recherche */ .cp-coach { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: linear-gradient(135deg, #1a1d27, #12151c); border: 1px solid rgba(255, 107, 26, .4); border-radius: 12px; padding: 12px 40px 12px 14px; font-size: .86rem; color: #d7dbe5; box-shadow: 0 16px 44px rgba(0, 0, 0, .5); animation: cpCoachIn .4s ease; } .cp-coach b { color: #fff; } .cp-coach button { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #7a8194; font-size: 1.1rem; cursor: pointer; line-height: 1; } @keyframes cpCoachIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cp-coach { animation: none; } } /* ---------- Structure ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section { padding: 84px 0; position: relative; } .section.tight { padding: 48px 0; } main { padding-top: var(--header-h); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); background: rgba(255, 107, 26, .1); border: 1px solid rgba(255, 107, 26, .25); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } /* Logos de marque : width:auto neutralise l'indice de largeur porté par les attributs width/height (ajoutés pour l'anti-CLS). Sans ça, une hauteur CSS (ex. 22px/44px) + width="1440" étirait le logo en 1440×22 (Alpine surtout). Avec width:auto, la hauteur + le ratio calculent la bonne largeur. Les contextes qui fixent explicitement une largeur (marquee, comparateur, mini-tuiles) ont une spécificité ≥ et gardent leur taille. object-fit:contain en filet de sécurité. */ img[src^="/img/brands/"] { width: auto; object-fit: contain; } .eyebrow img { flex: none; } .section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .section-sub { color: var(--text-2); max-width: 640px; margin-top: 12px; font-size: 1.05rem; } .section-head { margin-bottom: 40px; } .section-head.center { text-align: center; } .section-head.center .section-sub { margin-left: auto; margin-right: auto; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Effet verre ---------- */ .glass { background: rgba(18, 20, 29, .62); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--grad); color: #fff; font-weight: 700; font-size: .98rem; border: none; border-radius: 12px; padding: 13px 26px; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), box-shadow .25s; box-shadow: 0 6px 24px -8px rgba(255, 107, 26, .55); } .btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .5s; } .btn:hover { transform: translateY(-2px); box-shadow: var(--glow); color: #fff; } .btn:hover::after { left: 130%; } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn-lg { padding: 16px 34px; font-size: 1.08rem; border-radius: 14px; } .btn-sm { padding: 9px 16px; font-size: .88rem; border-radius: 10px; } .btn-ghost { background: transparent; border: 1px solid var(--border-2); box-shadow: none; color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); box-shadow: none; background: rgba(255, 107, 26, .07); } .btn-ghost::after { display: none; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(7, 7, 10, .78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--border); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: var(--header-h); display: flex; align-items: center; gap: 16px; } .logo { font-size: 1.45rem; font-weight: 900; letter-spacing: -.03em; color: var(--text); display: flex; align-items: center; gap: 8px; } .logo:hover { color: var(--text); } .logo .flag { font-size: 1.2rem; } .main-nav { display: flex; gap: 3px; margin-left: auto; align-items: center; flex-wrap: nowrap; } .main-nav a { color: var(--text-2); font-weight: 600; font-size: .9rem; padding: 7px 11px; border-radius: 10px; position: relative; white-space: nowrap; } /* Desktop : Compte & Panier en icône seule (le libellé reste lisible via le title et réapparaît dans le menu burger) — libère la largeur pour que la nav tienne. */ .nav-account [data-i18n], .nav-cart [data-i18n] { display: none; } .main-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s; } .main-nav a:hover { color: var(--text); } .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); } .main-nav a.active { color: var(--text); } .nav-cart { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--border); padding: 8px 11px !important; border-radius: 11px !important; color: var(--text) !important; } .nav-cart::after { display: none !important; } .nav-cart:hover { border-color: var(--accent); } .nav-account { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; padding: 8px 10px !important; border-radius: 11px !important; white-space: nowrap; } .nav-account::after { display: none !important; } .nav-account:hover, .nav-account.active { border-color: var(--border-2); color: var(--text) !important; background: var(--bg-2); } .cart-badge { min-width: 20px; height: 20px; padding: 0 5px; background: var(--grad); color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 1220px) { .header-inner { padding: 0 18px; gap: 14px; } .main-nav { gap: 2px; } .main-nav a { font-size: .87rem; padding: 7px 10px; } .nav-account { padding: 8px 10px !important; } .nav-cart { padding: 8px 12px !important; } .nav-sep { margin: 0 2px; } .lang-switch { margin-left: 2px; } .lang-current { padding: 5px 6px; } } .cart-badge.bump { animation: bump .5s cubic-bezier(.2, 2.2, .4, 1); } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } } .burger { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 1.2rem; color: var(--text); } /* ---------- Hero ---------- */ .hero { position: relative; padding: 72px 0 56px; overflow: hidden; } .hero-bg { position: absolute; inset: -1px; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 75%); animation: gridSlide 22s linear infinite; } @keyframes gridSlide { to { background-position: 56px 56px, 56px 56px; } } .hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .hero-title { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.06; margin: 18px 0; } .hero-sub { color: var(--text-2); font-size: 1.14rem; max-width: 540px; } .hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .trust-row { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; } .trust-item { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; color: var(--text-2); } .trust-item b { color: var(--text); font-size: 1rem; display: flex; align-items: center; gap: 6px; } .stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; } .hero-visual { position: relative; } .dyno-card { padding: 22px; box-shadow: var(--shadow); } .dyno-card h4 { font-size: .92rem; font-weight: 700; color: var(--text-2); display: flex; justify-content: space-between; align-items: center; } .dyno-card h4 .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.6s infinite; display: inline-block; margin-right: 6px; } @keyframes pulse { 50% { opacity: .35; } } .float-chip { position: absolute; z-index: 2; background: rgba(18, 20, 29, .85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 10px 16px; font-weight: 800; font-size: .95rem; box-shadow: var(--shadow); animation: floaty 5s ease-in-out infinite; /* Les bulles décorent SANS masquer : posées hors de la carte (elles ne recouvrent ni le titre, ni les pastilles de pic, ni les axes) et transparentes à la souris. */ pointer-events: none; } .float-chip small { display: block; font-weight: 500; color: var(--text-2); font-size: .72rem; } .float-chip.c1 { top: -34px; right: -14px; color: var(--green); } .float-chip.c2 { bottom: -38px; left: -14px; color: var(--accent-2); animation-delay: -2.5s; } @keyframes floaty { 50% { transform: translateY(-10px); } } /* ---------- Ticker commandes ---------- */ .ticker-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(12, 13, 19, .6); overflow: hidden; padding: 12px 0; } .ticker-track { display: flex; gap: 14px; width: max-content; animation: marq 55s linear infinite; } .ticker-strip:hover .ticker-track { animation-play-state: paused; } @keyframes marq { to { transform: translateX(-50%); } } .tick-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .85rem; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; } .tick-item b { color: var(--text); font-weight: 700; } .tick-item .gain { color: var(--green); font-weight: 800; } /* ---------- Stats bar ---------- */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .stat { text-align: center; padding: 26px 12px; } .stat b { display: block; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat span { color: var(--text-2); font-size: .92rem; font-weight: 500; } /* ---------- Sélecteur véhicule ---------- */ .selector-card { padding: 30px; box-shadow: var(--shadow); } .selector-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; } .selector-card > p { color: var(--text-2); font-size: .92rem; margin-bottom: 20px; } .sel-grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end; } .sel { display: flex; flex-direction: column; gap: 6px; } .sel label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); } select, .input { appearance: none; -webkit-appearance: none; background: var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3b5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--border); border-radius: 12px; padding: 13px 38px 13px 14px; color: var(--text); font-size: .96rem; width: 100%; cursor: pointer; transition: border-color .2s, box-shadow .2s; } select:hover:not(:disabled) { border-color: var(--border-2); } select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 26, .18); outline: none; } select:disabled { opacity: .4; cursor: not-allowed; } input[type="text"], input[type="email"], input[type="tel"], textarea { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; color: var(--text); font-size: .96rem; width: 100%; transition: border-color .2s, box-shadow .2s; } input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 26, .18); outline: none; } textarea { resize: vertical; } /* ---------- Recherche ---------- */ .search-wrap { position: relative; margin-top: 16px; } .search-input { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 14px 46px; color: var(--text); font-size: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23667085' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5L17 17' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 16px center; transition: border-color .2s, box-shadow .2s; } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 26, .18); outline: none; } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r); max-height: 360px; overflow-y: auto; box-shadow: var(--shadow); display: none; } .search-results.open { display: block; } .sr-item { padding: 12px 18px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); transition: background .15s; } .sr-item:last-child { border-bottom: none; } .sr-item:hover, .sr-item.hl { background: rgba(255, 107, 26, .09); } .sr-item .sr-gain { color: var(--green); font-weight: 800; font-size: .88rem; white-space: nowrap; } .sr-item small { color: var(--text-3); display: block; } /* ---------- Cartes génériques ---------- */ .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; transition: transform .3s, border-color .3s, box-shadow .3s; } .card:hover { transform: translateY(-5px); border-color: rgba(255, 107, 26, .45); box-shadow: var(--shadow); } .card .ic { font-size: 1.7rem; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(255, 107, 26, .12); border: 1px solid rgba(255, 107, 26, .25); border-radius: 14px; margin-bottom: 16px; } .card h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; } .card p { color: var(--text-2); font-size: .93rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* ---------- Timeline « comment ça marche » ---------- */ .steps-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; counter-reset: step; } .stepx { position: relative; padding: 26px 22px; } .stepx::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: 2.6rem; font-weight: 900; letter-spacing: -.04em; background: linear-gradient(180deg, rgba(255, 107, 26, .8), rgba(255, 107, 26, .05)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; line-height: 1; margin-bottom: 12px; } .stepx h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; } .stepx p { color: var(--text-2); font-size: .9rem; } /* ---------- Produits ---------- */ .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .prod-card { position: relative; display: flex; flex-direction: column; padding: 30px 26px; overflow: hidden; } .prod-card.popular { border-color: rgba(255, 107, 26, .55); box-shadow: 0 0 0 1px rgba(255, 107, 26, .3), var(--glow); } .ribbon { position: absolute; top: 16px; right: -34px; transform: rotate(38deg); background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 40px; } .prod-card .pname { font-size: 1.25rem; font-weight: 800; } .prod-card .pshort { color: var(--text-2); font-size: .92rem; margin: 8px 0 16px; min-height: 44px; } .price { font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; } .price small { font-size: .85rem; color: var(--text-3); font-weight: 500; } .feat { list-style: none; margin: 18px 0 22px; flex: 1; } .feat li { padding: 7px 0 7px 28px; position: relative; color: var(--text-2); font-size: .9rem; border-bottom: 1px dashed var(--border); } .feat li:last-child { border-bottom: none; } .feat li::before { content: "✓"; position: absolute; left: 2px; color: var(--green); font-weight: 900; } /* ---------- Chips / badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; color: var(--text-2); } .chip.on { background: rgba(255, 107, 26, .14); border-color: rgba(255, 107, 26, .4); color: var(--accent-2); } .fuel-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .fuel-dot.Diesel { background: var(--blue); box-shadow: 0 0 8px rgba(58, 160, 255, .6); } .fuel-dot.Essence { background: var(--accent); box-shadow: 0 0 8px rgba(255, 107, 26, .6); } .fuel-dot.Hybride { background: var(--green); box-shadow: 0 0 8px rgba(47, 214, 123, .6); } .tag-track { background: rgba(255, 77, 94, .13); border: 1px solid rgba(255, 77, 94, .4); color: var(--red); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 3px 10px; border-radius: 999px; } .badge-gain { display: inline-flex; align-items: center; gap: 5px; background: rgba(47, 214, 123, .12); border: 1px solid rgba(47, 214, 123, .35); color: var(--green); font-weight: 800; font-size: .85rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } /* ---------- Avis clients ---------- */ .review-card { display: flex; flex-direction: column; gap: 12px; } .review-card .quote { color: var(--text-2); font-size: .95rem; font-style: italic; flex: 1; } .review-head { display: flex; align-items: center; gap: 12px; } .avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; color: #fff; flex: none; } .review-head b { display: block; font-size: .95rem; } .review-head small { color: var(--text-3); font-size: .8rem; } .verified { color: var(--green); font-size: .75rem; font-weight: 700; margin-left: auto; white-space: nowrap; } /* ---------- Marquee marques ---------- */ .marquee { overflow: hidden; padding: 8px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 46px; width: max-content; animation: marq 45s linear infinite; align-items: center; } .marquee-track span { display: inline-flex; align-items: center; gap: 11px; font-size: 1.2rem; font-weight: 800; color: var(--text-3); letter-spacing: -.01em; white-space: nowrap; transition: color .3s; } .marquee-track span img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 9px; padding: 3px; filter: grayscale(1) opacity(.75); transition: filter .3s; } .marquee-track span:hover { color: var(--text); } .marquee-track span:hover img { filter: none; } .marquee-track i { color: var(--accent); font-style: normal; font-size: .7rem; } /* ---------- CTA final ---------- */ .cta-panel { position: relative; overflow: hidden; text-align: center; padding: 70px 40px; border-radius: 24px; background: linear-gradient(140deg, rgba(255, 107, 26, .16), rgba(255, 61, 46, .08) 55%, rgba(12, 13, 19, .4)); border: 1px solid rgba(255, 107, 26, .3); } .cta-panel h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; } .cta-panel p { color: var(--text-2); margin: 12px auto 28px; max-width: 520px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-1); margin-top: 96px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.1fr; column-gap: 52px; row-gap: 44px; padding: 76px 0 52px; } .foot-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); margin-bottom: 20px; font-weight: 700; } .foot-col a, .foot-col p { display: block; color: var(--text-2); font-size: .92rem; padding: 7px 0; line-height: 1.5; } .foot-col > .logo { padding: 0; margin-bottom: 16px; } .foot-col p:first-of-type { max-width: 360px; } .foot-col a:hover { color: var(--accent-2); padding-left: 3px; transition: color .15s, padding-left .15s; } .footer-bottom { border-top: 1px solid var(--border); padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--text-3); } .pay-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pay-badges span { border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: .75rem; font-weight: 700; color: var(--text-2); } .pay-logos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pay-logos .pl { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255, 255, 255, .04); } .pay-logos .pl svg { height: 16px; width: auto; display: block; } .pay-logos .pl-ssl { font-size: .72rem; font-weight: 800; color: var(--text-2); gap: 4px; letter-spacing: .04em; } html[data-theme="light"] .pay-logos .pl { background: #fff; } /* ---------- Catalogue : explorateur marques ---------- */ .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .brand-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: transform .25s, border-color .25s, background .25s; } .brand-tile:hover { transform: translateY(-3px); border-color: rgba(255, 107, 26, .5); background: var(--bg-3); } .monogram { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; color: #fff; flex: none; } .brand-logo { width: 42px; height: 42px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; padding: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .brand-tile:hover .brand-logo { box-shadow: 0 4px 14px -4px rgba(255, 107, 26, .5); } .crumb-logo { width: 26px; height: 26px; border-radius: 7px; background: #fff; padding: 3px; vertical-align: middle; margin-right: 8px; object-fit: contain; } .brand-tile b { font-size: .95rem; display: block; line-height: 1.2; } .brand-tile small { color: var(--text-3); font-size: .76rem; } /* ---------- Catalogue : liste moteurs ---------- */ .engine-list { display: flex; flex-direction: column; gap: 10px; } .engine-row { display: grid; grid-template-columns: auto 1.4fr 1fr auto auto; gap: 16px; align-items: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; } .engine-row:hover { border-color: rgba(255, 107, 26, .5); transform: translateX(6px); background: var(--bg-3); } .engine-row .ename { font-weight: 800; font-size: 1.02rem; } .engine-row .ename small { display: block; color: var(--text-3); font-weight: 500; font-size: .78rem; } .engine-row .epower { color: var(--text-2); font-size: .92rem; white-space: nowrap; } .engine-row .epower b { color: var(--text); } .engine-row .arr { color: var(--accent); font-weight: 900; font-size: 1.1rem; transition: transform .2s; } .engine-row:hover .arr { transform: translateX(4px); } /* ---------- Fiche moteur ---------- */ .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--text-3); flex-wrap: wrap; margin-bottom: 10px; } .breadcrumb a { color: var(--text-2); } .breadcrumb .sep { color: var(--text-3); } .detail-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: 26px; align-items: start; } .perf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .perf-chip { text-align: center; padding: 16px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; } .perf-chip b { display: block; font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; } .perf-chip b.up { color: var(--green); } .perf-chip b.dn { color: var(--accent-2); } .perf-chip span { color: var(--text-3); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .spec-table { width: 100%; border-collapse: collapse; font-size: .93rem; margin-top: 16px; } .spec-table th, .spec-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); } .spec-table th { color: var(--text-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .spec-table td.v { font-weight: 800; } .spec-table td.gain { color: var(--green); font-weight: 800; } /* ---------- Configurateur ---------- */ .config-box { position: sticky; top: calc(var(--header-h) + 16px); padding: 24px; box-shadow: var(--shadow); } .config-box h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; } .pchoice { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .pchoice-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; cursor: pointer; transition: border-color .2s, background .2s; background: var(--bg-1); } .pchoice-item:hover { border-color: var(--border-2); } .pchoice-item.selected { border-color: var(--accent); background: rgba(255, 107, 26, .08); box-shadow: 0 0 0 1px var(--accent) inset; } .pchoice-item b { font-size: .96rem; display: block; } .pchoice-item small { color: var(--text-3); font-size: .78rem; display: block; } .pchoice-item .pp { font-weight: 900; white-space: nowrap; } .opt-cat-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; } .opt-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: border-color .2s, background .2s; background: var(--bg-1); font-size: .87rem; margin-bottom: 8px; } .opt-card:hover { border-color: var(--border-2); } .opt-card.selected { border-color: var(--accent); background: rgba(255, 107, 26, .08); } .opt-card .ock { width: 18px; height: 18px; border: 2px solid var(--border-2); border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: transparent; transition: all .2s; } .opt-card.selected .ock { background: var(--grad); border-color: transparent; color: #fff; } .opt-card .on { flex: 1; } .opt-card .op { font-weight: 800; white-space: nowrap; } .total-box { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; } .disc-line { display: flex; justify-content: space-between; font-size: .88rem; color: var(--green); font-weight: 700; padding: 3px 0; } .total-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; font-weight: 700; padding: 6px 0; } .total-line .amount { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pack-hint { font-size: .78rem; color: var(--text-3); text-align: center; margin-top: 8px; } /* ---------- Dyno ---------- */ .dyno-wrap { position: relative; } .dyno-wrap svg { width: 100%; height: auto; } /* Dyno v2 : grille/graduations/courbe d'origine pilotées par les tokens du thème (le SVG suit automatiquement le mode clair/sombre au lieu de rester figé sombre). */ .dyno-wrap .dy-gh { stroke: var(--border-2); opacity: .45; } .dyno-wrap .dy-gv { stroke: var(--border); opacity: .55; } .dyno-wrap .dy-tick { fill: var(--text-3); } .dyno-wrap .dy-stockline { stroke: var(--text-3); } .dyno-wrap .dy-stocktq { stroke: var(--border-2); } .dyno-note { font-size: .68rem; color: var(--text-3); margin-top: 6px; line-height: 1.5; } .dyno-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .lg-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--text-2); font-weight: 600; } .lg-chip i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; } .dyno-tip { position: absolute; pointer-events: none; z-index: 5; background: rgba(12, 13, 19, .95); border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 12px; font-size: .8rem; line-height: 1.5; box-shadow: var(--shadow); white-space: nowrap; display: none; } .dyno-tip b { font-size: .85rem; } /* ---------- Panier / checkout ---------- */ .stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto 42px; max-width: 640px; } .step-dot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; } .step-dot .dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 2px solid var(--border-2); font-weight: 800; font-size: .95rem; transition: all .3s; z-index: 1; } .step-dot span { font-size: .8rem; font-weight: 700; color: var(--text-3); } .step-dot.active .dot { background: var(--grad); border-color: transparent; box-shadow: var(--glow); } .step-dot.active span { color: var(--text); } .step-dot.done .dot { background: rgba(47, 214, 123, .15); border-color: var(--green); color: var(--green); } .step-dot:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 2px; background: var(--border-2); } .step-dot.done:not(:last-child)::after { background: var(--green); } .cart-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start; } .cart-item { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; animation: slideIn .35s ease both; } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } } .cart-item .ci-title { font-weight: 800; font-size: 1rem; } .cart-item .ci-sub { font-size: .85rem; color: var(--text-2); margin-top: 4px; } .cart-item .ci-price { font-weight: 900; font-size: 1.15rem; white-space: nowrap; } .cart-item .remove { background: none; border: none; color: var(--red); font-size: .8rem; cursor: pointer; padding: 6px 0 0; font-weight: 700; } .cart-item .remove:hover { text-decoration: underline; } .summary-box { padding: 24px; position: sticky; top: calc(var(--header-h) + 16px); } .summary-box h3 { margin-bottom: 12px; font-weight: 800; } .summary-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .92rem; color: var(--text-2); } .summary-line.total { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 14px; font-size: 1.2rem; font-weight: 900; color: var(--text); } .summary-line.total .amount { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 10px; } .field { display: flex; flex-direction: column; gap: 6px; } .field.full { grid-column: 1 / -1; } .field label { font-size: .8rem; font-weight: 700; color: var(--text-2); } .checkbox-line { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; color: var(--text-2); margin-top: 12px; cursor: pointer; } .checkbox-line input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; } .dropzone { border: 2px dashed var(--border-2); border-radius: 16px; padding: 34px 20px; text-align: center; cursor: pointer; transition: border-color .25s, background .25s; background: var(--bg-1); } .dropzone:hover, .dropzone.drag { border-color: var(--accent); background: rgba(255, 107, 26, .06); } .dropzone .dz-ic { font-size: 2rem; margin-bottom: 6px; } .dropzone p { color: var(--text-2); font-size: .9rem; } .dropzone small { color: var(--text-3); font-size: .76rem; display: block; margin-top: 6px; } .file-chip { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: rgba(47, 214, 123, .1); border: 1px solid rgba(47, 214, 123, .35); border-radius: 12px; padding: 10px 14px; font-size: .88rem; } .file-chip b { color: var(--green); } .file-chip .fx { margin-left: auto; cursor: pointer; color: var(--red); font-weight: 800; background: none; border: none; } /* ---------- Confirmation ---------- */ .success-hero { text-align: center; padding: 30px 0 10px; } .check-svg { width: 90px; height: 90px; margin: 0 auto 18px; } .check-svg circle { stroke: var(--green); stroke-width: 3; fill: rgba(47, 214, 123, .08); stroke-dasharray: 290; stroke-dashoffset: 290; animation: draw 1s .2s ease forwards; } .check-svg path { stroke: var(--green); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .5s .9s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .order-id-pill { display: inline-flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 12px 20px; font-size: 1.2rem; font-weight: 900; letter-spacing: .04em; margin-top: 8px; } .copy-btn { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 8px; padding: 5px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--text-2); transition: all .2s; } .copy-btn:hover { border-color: var(--accent); color: var(--accent-2); } .timeline-v { display: flex; flex-direction: column; gap: 0; margin: 26px 0; } .tl-item { display: flex; gap: 16px; position: relative; padding-bottom: 26px; } .tl-item::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--border-2); } .tl-item:last-child { padding-bottom: 0; } .tl-item:last-child::before { display: none; } .tl-item .tld { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex: none; z-index: 1; } .tl-item.done .tld { border-color: var(--green); background: rgba(47, 214, 123, .12); } .tl-item.cur .tld { border-color: var(--accent); background: rgba(255, 107, 26, .12); box-shadow: 0 0 0 5px rgba(255, 107, 26, .12); animation: pulse 1.8s infinite; } .tl-item b { display: block; font-size: .98rem; } .tl-item.cur b { color: var(--accent-2); } .tl-item p { color: var(--text-3); font-size: .85rem; } .confetti { position: fixed; top: -12px; z-index: 999; width: 9px; height: 15px; border-radius: 2px; animation: confFall linear forwards; pointer-events: none; } @keyframes confFall { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } } /* ---------- Tableau comparatif ---------- */ .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); } .cmp-table thead th { background: var(--bg-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); } .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-table td:first-child { color: var(--text-3); font-weight: 600; } .cmp-table .hl-col { background: rgba(255, 107, 26, .06); } /* ---------- Alerts ---------- */ .alert { border-radius: 14px; padding: 16px 20px; font-size: .92rem; margin: 14px 0; border: 1px solid; } .alert-warn { background: rgba(255, 77, 94, .09); border-color: rgba(255, 77, 94, .35); color: #ffb3bb; } .alert-info { background: rgba(58, 160, 255, .09); border-color: rgba(58, 160, 255, .3); color: #b8dcff; } .alert-success { background: rgba(47, 214, 123, .09); border-color: rgba(47, 214, 123, .35); color: #b8f5d3; } /* Mode clair : fond PLEIN + bordure nette pour que la bulle RESSORTE (le tint à 8 % se fondait dans la page) + texte foncé lisible. Ex. bulle « atelier hors ligne ». */ html[data-theme="light"] .alert { border-width: 1px; } html[data-theme="light"] .alert-warn { background: #fdeaec; border-color: #e79aa3; color: #9c1420; } html[data-theme="light"] .alert-warn b { color: #7d0f19; } html[data-theme="light"] .alert-info { background: #e6f1fc; border-color: #93bff0; color: #0b4a86; } html[data-theme="light"] .alert-info b { color: #073763; } html[data-theme="light"] .alert-success { background: #e6f6ed; border-color: #94d6ae; color: #0a6435; } html[data-theme="light"] .alert-success b { color: #084d28; } /* ---------- FAQ ---------- */ .faq-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: border-color .25s; } .faq-item:hover { border-color: var(--border-2); } .faq-item[open] { border-color: rgba(255, 107, 26, .4); } .faq-item summary { padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--accent); transition: transform .3s; flex: none; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding: 0 22px 20px; color: var(--text-2); font-size: .93rem; } /* ---------- Toasts ---------- */ .toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; } .toast { background: rgba(18, 20, 29, .92); backdrop-filter: blur(14px); border: 1px solid rgba(255, 107, 26, .4); border-radius: 14px; padding: 14px 20px; font-size: .92rem; font-weight: 600; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; animation: toastIn .4s cubic-bezier(.2, 1.2, .3, 1) both; max-width: 340px; } .toast.out { animation: toastOut .3s ease both; } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } } @keyframes toastOut { to { opacity: 0; transform: translateX(40px); } } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 40px; } .hero-visual { max-width: 560px; } .sel-grid { grid-template-columns: 1fr 1fr; } .sel-grid .btn { grid-column: 1 / -1; } .detail-grid { grid-template-columns: 1fr; } .config-box { position: static; } .grid-4, .steps-line { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } /* La barre horizontale ne tient pas sous ~1200px (10 liens + utilitaires) : en dessous, on bascule sur le menu burger — plus de débordement à droite. */ @media (max-width: 1200px) { .main-nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; background: rgba(7, 7, 10, .97); backdrop-filter: blur(20px); flex-direction: column; padding: 18px 24px 26px; gap: 4px; border-bottom: 1px solid var(--border); } .main-nav.open { display: flex; } .main-nav a { padding: 13px 14px; font-size: 1.05rem; width: 100%; } .nav-account, .nav-cart { width: 100%; justify-content: flex-start; } .nav-account [data-i18n], .nav-cart [data-i18n] { display: inline; } /* libellés de retour dans le menu déroulé */ .nav-sep { display: none; } .lang-switch { margin: 10px auto 0; } .lang-switch.open .lang-menu { left: 50%; right: auto; transform: translateX(-50%); } .burger { display: block; } } @media (max-width: 860px) { .grid-3, .prod-grid { grid-template-columns: 1fr; } .cart-layout { grid-template-columns: 1fr; } .summary-box { position: static; } .stats-bar { grid-template-columns: 1fr 1fr; } .engine-row { grid-template-columns: auto 1fr auto; } .engine-row .epower, .engine-row .ecu-cell { display: none; } } @media (max-width: 560px) { .section { padding: 56px 0; } .grid-4, .grid-2, .steps-line, .stats-bar, .form-grid, .sel-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } .hero-ctas .btn { width: 100%; } .perf-row { grid-template-columns: 1fr; } .float-chip { display: none; } } /* ============================================================ v3 « Conversion » — preuve sociale, jauges, sticky CTA ============================================================ */ /* ---------- Mot rotatif du hero ---------- */ .rotator { display: inline-block; position: relative; white-space: nowrap; } .rotator > span { display: inline-block; transition: opacity .28s ease, transform .28s ease; } .rotator > span.swap { opacity: 0; transform: translateY(14px); } /* ---------- Bandeau garanties ---------- */ .guarantee-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: .85rem; color: var(--text-2); } .guarantee-strip span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; } .guarantee-strip b { color: var(--green); font-size: 1rem; } .mini-guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: .78rem; color: var(--text-2); } .mini-guarantees span { display: inline-flex; align-items: center; gap: 6px; } /* ---------- Preuve sociale : popup commandes live ---------- */ .sp-pop { position: fixed; left: 20px; bottom: 20px; z-index: 290; display: flex; align-items: center; gap: 12px; background: rgba(14, 16, 24, .94); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid var(--accent); border-radius: 14px; padding: 12px 18px 12px 14px; box-shadow: var(--shadow); max-width: 340px; font-size: .85rem; animation: spIn .45s cubic-bezier(.2, 1.1, .3, 1) both; cursor: pointer; } .sp-pop.out { animation: spOut .35s ease both; } @keyframes spIn { from { opacity: 0; transform: translateY(24px) scale(.96); } } @keyframes spOut { to { opacity: 0; transform: translateY(24px) scale(.96); } } .sp-pop .ava { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; color: #fff; background: var(--grad); } .sp-pop b { color: var(--text); } .sp-pop .gain { color: var(--green); font-weight: 800; } .sp-pop small { display: block; color: var(--text-3); font-size: .74rem; margin-top: 2px; } .sp-pop .bar-life { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--bg-3); border-radius: 2px; overflow: hidden; } .sp-pop .bar-life i { display: block; height: 100%; background: var(--grad); animation: spLife linear both; } @keyframes spLife { from { width: 100%; } to { width: 0; } } @media (max-width: 700px) { .sp-pop { display: none; } } /* ---------- Jauges type compteur ---------- */ .gauge-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 18px; } .gauge-cell { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 10px 12px; text-align: center; transition: border-color .3s, transform .3s; } .gauge-cell:hover { border-color: rgba(255, 107, 26, .4); transform: translateY(-3px); } .gauge-cell svg { width: 100%; max-width: 150px; margin: 0 auto; } .gauge-cell .gv { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; margin-top: -6px; } .gauge-cell .gv small { font-size: .68rem; font-weight: 600; color: var(--text-3); } .gauge-cell .gl { font-size: .74rem; color: var(--text-2); font-weight: 600; margin-top: 2px; } .gauge-cell .gd { display: inline-block; margin-top: 7px; font-size: .76rem; font-weight: 800; color: var(--green); background: rgba(47, 214, 123, .1); border: 1px solid rgba(47, 214, 123, .3); border-radius: 999px; padding: 2px 10px; } .gneedle { transition: transform 1.2s cubic-bezier(.3, 1.4, .4, 1); transform-origin: 60px 60px; } .garc { transition: stroke-dashoffset 1.2s cubic-bezier(.3, .9, .3, 1); } @media (max-width: 560px) { .gauge-row { grid-template-columns: 1fr; } .gauge-cell svg { max-width: 190px; } } /* ---------- Ligne « spectateurs » + ETA livraison ---------- */ .watch-line { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-2); margin-top: 10px; } .watch-line .wdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); animation: pulse 1.8s infinite; } .delivery-eta { display: flex; align-items: center; gap: 10px; background: rgba(47, 214, 123, .07); border: 1px solid rgba(47, 214, 123, .25); border-radius: 12px; padding: 10px 14px; margin-top: 14px; font-size: .83rem; color: #b8f5d3; } .delivery-eta b { color: var(--green); } .delivery-eta .eta-ic { font-size: 1.15rem; flex: none; } /* ---------- Barre configurateur collante ---------- */ .sticky-config { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; background: rgba(10, 11, 16, .92); /* Fond toujours sombre → texte clair fixe, quel que soit le thème (clair/sombre) */ color: #eef1f6; backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid rgba(255, 107, 26, .35); box-shadow: 0 -14px 40px -12px rgba(0, 0, 0, .8); transform: translateY(110%); transition: transform .4s cubic-bezier(.2, .9, .3, 1); } .sticky-config.show { transform: none; } .sticky-config .sc-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 18px; } .sticky-config .sc-veh { min-width: 0; } .sticky-config .sc-veh b { display: block; color: #f4f6fa; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-config .sc-veh small { color: #9aa3b5; font-size: .76rem; white-space: nowrap; } .sticky-config .sc-total { margin-left: auto; text-align: right; flex: none; } .sticky-config .sc-total small { display: block; color: #9aa3b5; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; } .sticky-config .sc-total b { font-size: 1.25rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sticky-config .btn { flex: none; } @media (max-width: 700px) { .sticky-config .sc-veh small { display: none; } .sticky-config .sc-inner { padding: 10px 14px; gap: 10px; } .sticky-config .btn { padding: 11px 18px; font-size: .9rem; } } body.has-sticky-config { padding-bottom: 78px; } /* ---------- Effet tilt 3D ---------- */ [data-tilt] { will-change: transform; transition: transform .25s ease; transform-style: preserve-3d; } /* ---------- CTA pulsé (attire l'œil sans agresser) ---------- */ .btn-pulse { animation: btnPulse 2.6s ease-in-out infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 6px 24px -8px rgba(255, 107, 26, .55); } 50% { box-shadow: 0 6px 34px -4px rgba(255, 107, 26, .85), 0 0 0 7px rgba(255, 107, 26, .07); } } /* ---------- Étapes numérotées du configurateur ---------- */ .cfg-step { display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 18px 0 10px; } .cfg-step .n { width: 22px; height: 22px; border-radius: 50%; flex: none; background: rgba(255, 107, 26, .15); border: 1px solid rgba(255, 107, 26, .4); color: var(--accent-2); font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; } .cfg-step.done .n { background: rgba(47, 214, 123, .15); border-color: rgba(47, 214, 123, .5); color: var(--green); } /* ---------- Mon garage + consultés récemment ---------- */ .myzone-head { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 12px; } .myzone-head small { color: var(--text-3); font-size: .8rem; } .link-btn { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: .8rem; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { color: var(--text); } .mini-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .mini-tile { position: relative; cursor: pointer; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; transition: border-color .25s, transform .25s, box-shadow .25s; } .mini-tile:hover { border-color: rgba(255, 107, 26, .45); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); } .mini-tile .mt-head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; } .mini-tile .mt-head img { width: 26px; height: 26px; object-fit: contain; background: #fff; border-radius: 7px; padding: 2px; flex: none; } .mini-tile .mt-head b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-tile small { display: block; color: var(--text-3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-tile .mt-gain { display: inline-block; margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--text-2); } .mini-tile .mt-gain i { font-style: normal; font-weight: 800; color: var(--green); margin-left: 4px; } .mini-tile .mt-del { position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-3); color: var(--text-3); font-size: .68rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, color .2s, border-color .2s; } .mini-tile:hover .mt-del { opacity: 1; } .mini-tile .mt-del:hover { color: #ff5f57; border-color: rgba(255, 95, 87, .5); } /* ---------- Barre d'actions fiche moteur ---------- */ .engine-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; } .act-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); padding: 8px 16px; font-size: .84rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: border-color .25s, color .25s, transform .2s; } .act-btn:hover { border-color: rgba(255, 107, 26, .5); color: var(--text); transform: translateY(-1px); } .act-btn.on { border-color: rgba(255, 107, 26, .55); color: var(--accent-2); background: rgba(255, 107, 26, .08); } /* ---------- Simulateur carburant ---------- */ .fs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; } .fs-grid label { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--text-2); } .fs-grid label output { position: absolute; right: 0; top: 0; color: var(--accent-2); font-weight: 800; } .fs-grid input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 4px; background: var(--bg-3); outline: none; cursor: pointer; } .fs-grid input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--grad); border: 2px solid #fff2; box-shadow: 0 2px 8px rgba(255, 107, 26, .5); } .fs-grid input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; border: none; background: var(--accent); box-shadow: 0 2px 8px rgba(255, 107, 26, .5); } .fs-result { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; margin-top: 18px; } .fs-cell { text-align: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 8px; } .fs-cell b { display: block; font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; } .fs-cell.big { border-color: rgba(47, 214, 123, .4); background: rgba(47, 214, 123, .06); } .fs-cell.big b { color: var(--green); font-size: 1.5rem; } .fs-cell span { font-size: .74rem; color: var(--text-3); font-weight: 600; } .fs-note { grid-column: 1 / -1; text-align: center; font-size: .84rem; color: var(--text-2); background: rgba(255, 107, 26, .06); border: 1px solid rgba(255, 107, 26, .25); border-radius: 12px; padding: 10px 14px; } .fs-note b { color: var(--accent-2); } @media (max-width: 640px) { .fs-grid { grid-template-columns: 1fr; } .fs-result { grid-template-columns: 1fr; } } /* ---------- Comparateur : barre flottante ---------- */ .compare-bar { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 90; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: min(94vw, 860px); background: rgba(14, 14, 20, .92); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 16px; padding: 10px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transition: transform .35s cubic-bezier(.3, 1.1, .4, 1); } .compare-bar.show { transform: translate(-50%, 0); } body.has-sticky-config .compare-bar.show { bottom: 84px; } .compare-bar .cb-title { font-size: 1.2rem; } .cb-slot { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 700; } .cb-slot small { color: var(--text-3); font-weight: 600; } .cb-x { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: .72rem; padding: 0 2px; } .cb-x:hover { color: #ff5f57; } .cb-hint { font-size: .8rem; color: var(--text-3); } .cb-clear { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: .76rem; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; } .cb-clear:hover { color: var(--text); } /* ---------- Comparateur : modale ---------- */ .compare-overlay { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(4, 4, 8, .78); backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; overflow-y: auto; padding: 5vh 16px 40px; } .compare-overlay.open { display: flex; } .compare-modal { position: relative; width: 100%; max-width: 760px; padding: 28px; animation: cmpIn .3s cubic-bezier(.3, 1.2, .4, 1) both; } @keyframes cmpIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } .cmp-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); cursor: pointer; font-size: .85rem; } .cmp-close:hover { color: var(--text); border-color: rgba(255, 107, 26, .5); } .cmp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } .cmp-head { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; text-align: center; } .cmp-head img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; margin-bottom: 8px; } .cmp-head b { display: block; font-size: 1rem; } .cmp-head small { display: block; color: var(--text-3); font-size: .78rem; margin-top: 2px; } .cmp-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; } .cmp-bar { position: relative; height: 20px; background: var(--bg-3); border-radius: 6px; overflow: hidden; } .cmp-bar i { display: block; height: 100%; background: rgba(255, 255, 255, .16); border-radius: 6px; transition: width .8s cubic-bezier(.3, .9, .3, 1); } .cmp-bar.s1 i { background: var(--grad); } .cmp-bar span { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: .68rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .cmp-table td.win { color: var(--green); font-weight: 800; } .cmp-table td.win::after { content: " ✓"; font-size: .8em; } .cmp-links { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } @media (max-width: 560px) { .cmp-heads { grid-template-columns: 1fr; } } /* ============================================================ v4 « Home Premium » — hero aurora, sections rythmées, CTA vivant ============================================================ */ /* ---------- Hero : plus haut, plus profond ---------- */ .hero { padding: 96px 0 72px; } /* Aurora : nappes de couleur animées derrière le hero */ .aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; } .aurora i:nth-child(1) { width: 560px; height: 560px; top: -220px; right: -80px; background: radial-gradient(circle, rgba(255, 107, 26, .32), transparent 65%); animation: aur1 16s ease-in-out infinite alternate; } .aurora i:nth-child(2) { width: 480px; height: 480px; bottom: -240px; left: -140px; background: radial-gradient(circle, rgba(58, 160, 255, .17), transparent 65%); animation: aur2 20s ease-in-out infinite alternate; } .aurora i:nth-child(3) { width: 380px; height: 380px; top: 30%; left: 42%; background: radial-gradient(circle, rgba(255, 61, 46, .13), transparent 65%); animation: aur1 24s ease-in-out infinite alternate-reverse; } @keyframes aur1 { to { transform: translate(-60px, 50px) scale(1.15); } } @keyframes aur2 { to { transform: translate(70px, -40px) scale(1.1); } } /* Soulignement dynamique du mot « moteur » */ .swoosh { position: relative; display: inline-block; } .swoosh::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .18em; background: var(--grad); border-radius: 999px; opacity: .35; transform: skewX(-12deg) scaleX(0); transform-origin: left; animation: swooshIn 1s cubic-bezier(.2, .8, .2, 1) .6s both; z-index: -1; } @keyframes swooshIn { to { transform: skewX(-12deg) scaleX(1); } } /* Mini-logos marques sous le trust row */ .hero-brands { display: flex; align-items: center; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); flex-wrap: wrap; } .hero-brands img { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; filter: grayscale(1) opacity(.6); transition: filter .3s, transform .3s; } .hero-brands img:hover { filter: none; transform: translateY(-3px); } .hero-brands .hb-more { font-size: .8rem; color: var(--text-3); font-weight: 600; margin-left: 4px; } /* Carte dyno : cadre lumineux + lignes de vitesse */ .hero-visual .dyno-card { position: relative; border: 1px solid transparent; background: linear-gradient(rgba(18, 20, 29, .88), rgba(18, 20, 29, .88)) padding-box, linear-gradient(150deg, rgba(255, 157, 46, .55), rgba(255, 255, 255, .07) 38%, rgba(255, 61, 46, .35)) border-box; } .speed-lines { position: absolute; inset: -30px -10px; z-index: -1; pointer-events: none; overflow: hidden; } .speed-lines::before, .speed-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 107, 26, .55), transparent); animation: speedln 3.2s ease-in-out infinite; } .speed-lines::before { top: 18%; } .speed-lines::after { bottom: 14%; animation-delay: -1.6s; animation-duration: 4s; } @keyframes speedln { 0% { transform: translateX(-70%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } } /* ---------- Ticker : pastille EN DIRECT ---------- */ .ticker-strip { display: flex; align-items: center; gap: 0; position: relative; } .tick-live-zone { flex: none; display: flex; align-items: center; padding: 0 26px 0 20px; align-self: stretch; background: linear-gradient(90deg, var(--bg, #0c0d13) 0%, var(--bg, #0c0d13) 78%, transparent 100%); position: relative; z-index: 2; } .tick-live { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 61, 46, .12); border: 1px solid rgba(255, 61, 46, .4); color: #ff8d85; font-size: .7rem; font-weight: 900; letter-spacing: .14em; white-space: nowrap; } .tick-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); animation: pulse 1.4s infinite; } .ticker-strip .ticker-wrap { flex: 1; min-width: 0; overflow: hidden; } .ticker-strip .ticker-track { padding-left: 6px; } /* ---------- Alternance de fond entre sections ---------- */ /* Section « recessée » : panneau propre basé sur les tokens de thème (net en clair ET en sombre, plus de gris terne), rehaussé d'un halo d'accent doux en haut qui SUIT le thème choisi (var --accent). Sobre mais vivant. */ .section.darker { position: relative; background: linear-gradient(180deg, transparent, var(--bg-2) 14%, var(--bg-2) 86%, transparent); } .section.darker::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(88% 125% at 50% 0%, var(--accent), transparent 56%); opacity: .11; } /* Note / mention centrée : encart sobre et soigné (remplace le texte gris brut) */ .legal-note { max-width: 600px; margin: 30px auto 0; text-align: center; font-size: .8rem; line-height: 1.65; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 15px 22px; } .legal-note::before { content: "ℹ️"; display: block; font-size: 1.05rem; margin-bottom: 5px; line-height: 1; } .legal-note b { color: var(--text); font-weight: 700; } .legal-note em { font-style: normal; color: var(--accent); font-weight: 600; } /* ---------- Stats : bandeau unifié ---------- */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 10px 0; overflow: hidden; } .stats-bar .stat { position: relative; text-align: center; padding: 22px 12px; background: none; border: none; } .stats-bar .stat + .stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, var(--border-2), transparent); } .stat-ic { display: block; font-size: 1.4rem; margin-bottom: 6px; } @media (max-width: 860px) { .stats-bar { grid-template-columns: 1fr 1fr; } .stats-bar .stat:nth-child(3)::before { display: none; } } @media (max-width: 560px) { .stats-bar { grid-template-columns: 1fr 1fr; padding: 4px 0; } .stats-bar .stat { padding: 16px 8px; } } /* ---------- Étapes : icônes + flèches de liaison ---------- */ .stepx { transition: transform .3s, border-color .3s; } .stepx:hover { transform: translateY(-5px); border-color: rgba(255, 107, 26, .4); } .step-ic { position: absolute; top: 22px; right: 20px; font-size: 1.5rem; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(255, 107, 26, .1); border: 1px solid rgba(255, 107, 26, .28); border-radius: 13px; } /* ===== Illustrations vectorielles thématiques (originales, adaptatives clair/sombre) ===== */ /* Les traits suivent les variables du thème → recolorées automatiquement en clair et sombre. */ .illus { display: block; } .il-line { stroke: var(--text-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .il-accent { stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .il-soft { stroke: var(--border-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .il-fa { fill: var(--accent); stroke: none; } .il-fl { fill: var(--text-3); stroke: none; } .illus-lg { width: 96px; height: 96px; margin: 0 auto 6px; opacity: .95; } .illus-lg .il-line, .illus-lg .il-accent, .illus-lg .il-soft { stroke-width: 2.4; } /* Motif « circuit » décoratif de fond de section — très subtil, sous le contenu */ .circuit-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .55; } .circuit-deco svg { position: absolute; inset: 0; width: 100%; height: 100%; } .circuit-deco .cd-line { stroke: var(--border-2); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .circuit-deco .cd-node { fill: var(--accent); opacity: .5; } .circuit-deco + .container { position: relative; z-index: 1; } /* Silhouette de voiture en filigrane dans le hero (décoratif, sous le contenu) */ .hero-car { position: absolute; right: -30px; bottom: 6px; width: min(64%, 680px); z-index: 0; opacity: .09; pointer-events: none; } .hero-car svg { width: 100%; height: auto; display: block; } .hero-car .il-line { stroke: var(--text); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .hero-car .il-fa { fill: var(--accent); } .hero .hero-inner { position: relative; z-index: 2; } @media (max-width: 720px) { .hero-car { opacity: .05; width: 90%; } } .steps-line .stepx:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -17px; transform: translateY(-50%); z-index: 2; color: var(--accent); font-weight: 900; font-size: 1.15rem; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid rgba(255, 107, 26, .4); border-radius: 50%; } @media (max-width: 1024px) { .steps-line .stepx::after { display: none !important; } } /* ---------- Avis : guillemet décoratif ---------- */ .review-card { position: relative; overflow: hidden; } .review-card::before { content: "“"; position: absolute; top: -26px; right: 6px; font-size: 7rem; font-weight: 900; line-height: 1; color: rgba(255, 107, 26, .1); pointer-events: none; font-family: Georgia, serif; } /* ---------- CTA final vivant ---------- */ .cta-panel { isolation: isolate; } .cta-glow { position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: conic-gradient(from 0deg, transparent 60%, rgba(255, 107, 26, .2), transparent 80%); animation: ctaSpin 9s linear infinite; } @keyframes ctaSpin { to { transform: rotate(1turn); } } .cta-flag { display: block; font-size: 2.2rem; margin-bottom: 10px; animation: floaty 4.5s ease-in-out infinite; } .cta-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .cta-eta { font-size: .88rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; } .cta-eta b { color: var(--green); } /* ============================================================ Page Outils — filtres, cartes premium, matrice, méthodes ============================================================ */ /* Stats d'en-tête */ .tool-stats { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; font-size: .9rem; color: var(--text-2); } .tool-stats b { color: var(--accent-2); font-weight: 800; } .tool-stats i { color: var(--text-3); font-style: normal; } /* Filtres */ .tool-filter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; } .tf-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); padding: 9px 18px; font-size: .88rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: border-color .25s, color .25s, background .25s, transform .2s; } .tf-chip:hover { border-color: var(--border-2); color: var(--text); transform: translateY(-1px); } .tf-chip.on { background: rgba(255, 107, 26, .12); border-color: rgba(255, 107, 26, .55); color: var(--accent-2); } .tf-chip b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg-3); font-size: .74rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .tf-chip.on b { background: rgba(255, 107, 26, .25); color: #fff; } /* Grille + cartes outils */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; } .tool-card { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; transition: transform .3s, border-color .3s, box-shadow .3s, opacity .3s; } .tool-card:hover { transform: translateY(-5px); border-color: rgba(255, 107, 26, .45); box-shadow: var(--shadow); } .tool-card.hidden { display: none; } .tool-card.full { border-color: rgba(255, 157, 46, .35); background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(150deg, rgba(255, 157, 46, .5), rgba(255, 255, 255, .05) 45%, rgba(255, 61, 46, .3)) border-box; border: 1px solid transparent; } .tc-ribbon { position: absolute; top: 14px; right: -32px; transform: rotate(38deg); background: var(--grad); color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 36px; } .tc-top { display: flex; align-items: center; gap: 13px; } .tc-logo { width: 46px; height: 46px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1rem; color: #fff; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .tc-id { min-width: 0; } .tc-id h3 { font-size: 1.08rem; font-weight: 800; line-height: 1.2; } .tc-id small { color: var(--text-3); font-size: .78rem; } .tc-slave { margin-left: auto; flex: none; white-space: nowrap; font-size: .72rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-3); } .tc-slave.ok { background: rgba(47, 214, 123, .1); border-color: rgba(47, 214, 123, .4); color: var(--green); } .tc-modes { display: flex; gap: 8px; margin: 16px 0 12px; } .tc-mode { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; font-size: .78rem; font-weight: 700; } .tc-mode.on { background: rgba(255, 107, 26, .1); border: 1px solid rgba(255, 107, 26, .35); color: var(--accent-2); } .tc-mode.off { background: var(--bg-1); border: 1px dashed var(--border); color: var(--text-3); opacity: .55; text-decoration: line-through; } .tc-note { font-size: .86rem; color: var(--text-2); } /* Matrice de compatibilité */ .matrix-wrap { padding: 10px 18px 18px; overflow-x: auto; } .matrix-table { width: 100%; border-collapse: collapse; min-width: 560px; } .matrix-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); padding: 14px 12px 10px; border-bottom: 1px solid var(--border-2); white-space: nowrap; } .matrix-table th:not(:first-child):not(:nth-child(2)) { text-align: center; } .matrix-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: .9rem; } .matrix-table tr:last-child td { border-bottom: none; } .matrix-table tr:hover td { background: rgba(255, 107, 26, .05); } .mx-name { font-weight: 800; white-space: nowrap; } .mx-vendor { color: var(--text-3); font-size: .84rem; white-space: nowrap; } .mx-cell { text-align: center; font-weight: 900; } .mx-cell.yes { color: var(--green); } .mx-cell.no { color: var(--text-3); opacity: .5; } /* Cartes méthodes (OBD/Bench/Boot) */ .method-card { display: flex; flex-direction: column; } .mc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .mc-head h3 { margin-bottom: 0 !important; } .diff { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .diff i { width: 5px; height: 10px; border-radius: 2px; background: currentColor; opacity: .25; } .diff.easy { color: var(--green); background: rgba(47, 214, 123, .1); border: 1px solid rgba(47, 214, 123, .3); } .diff.easy i:nth-child(1) { opacity: 1; } .diff.mid { color: var(--gold); background: rgba(255, 197, 85, .1); border: 1px solid rgba(255, 197, 85, .3); } .diff.mid i:nth-child(-n+2) { opacity: 1; } .diff.hard { color: var(--red); background: rgba(255, 77, 94, .1); border: 1px solid rgba(255, 77, 94, .3); } .diff.hard i { opacity: 1; } .diff i { margin-right: 1px; } .diff i:last-of-type { margin-right: 5px; } .mc-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; } .mc-tools small { width: 100%; color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; } /* ============================================================ Page Services — programmes, comparatif, options interactives ============================================================ */ /* Grille programmes : 3 + 2 centrés automatiquement */ .svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; align-items: stretch; } .svc-grid .prod-card { grid-column: span 2; height: 100%; } .svc-grid .prod-card:nth-child(4) { grid-column: 2 / span 2; } @media (max-width: 1024px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-grid .prod-card, .svc-grid .prod-card:nth-child(4) { grid-column: span 1; } } @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } } /* Badge catégorie + ligne de gain sur les cartes programme */ .svc-cat { position: absolute; top: 18px; left: 26px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); } .svc-grid .prod-card .ic { font-size: 1.7rem; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(255, 107, 26, .12); border: 1px solid rgba(255, 107, 26, .25); border-radius: 14px; margin-top: 14px; } .svc-gain { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--green); background: rgba(47, 214, 123, .09); border: 1px solid rgba(47, 214, 123, .3); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; align-self: flex-start; } .svc-fuels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; min-height: 34px; align-items: stretch; } .svc-fuels .chip { justify-content: center; text-align: center; } .svc-grid .prod-card .btn { margin-top: auto; align-self: flex-start; } /* Comparatif : en-têtes avec badge */ .svc-cmp { min-width: 640px; } .th-prog { display: inline-flex; align-items: center; gap: 9px; font-size: .88rem; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 800; } .th-reco { font-style: normal; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; background: var(--grad); color: #fff; padding: 3px 9px; border-radius: 999px; } .svc-cmp .hl-col { position: relative; } .svc-cmp tbody .hl-col { box-shadow: inset 2px 0 0 rgba(255, 107, 26, .35), inset -2px 0 0 rgba(255, 107, 26, .35); } .svc-price { font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; } /* Titres de groupe d'options */ .opt-group-title { font-size: 1.02rem; font-weight: 800; margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; } .opt-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-2), transparent); } /* Cartes options cliquables */ .svc-opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .svc-opt { position: relative; display: flex; gap: 13px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; cursor: pointer; user-select: none; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; height: 100%; } .svc-opt:hover { transform: translateY(-3px); border-color: rgba(255, 107, 26, .45); } .svc-opt.on { border-color: rgba(255, 107, 26, .65); background: rgba(255, 107, 26, .07); box-shadow: 0 8px 26px -10px rgba(255, 107, 26, .4); } .svc-opt .so-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg-3); color: transparent; font-size: .7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s, transform .2s; } .svc-opt.on .so-check { background: var(--grad); border-color: transparent; color: #fff; transform: scale(1.08); } .svc-opt .so-ic { flex: none; width: 42px; height: 42px; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 107, 26, .1); border: 1px solid rgba(255, 107, 26, .25); border-radius: 12px; } .so-body { min-width: 0; flex: 1; } .so-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 20px; } .so-head b { font-size: .95rem; } .so-price { font-weight: 900; font-size: .95rem; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .so-body p { color: var(--text-2); font-size: .82rem; margin-top: 3px; } .so-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } @media (max-width: 640px) { .svc-fuels { display: flex; flex-wrap: wrap; min-height: auto; } } /* Barre simulateur de pack (réutilise .compare-bar) */ .pk-rate { font-style: normal; font-size: .7rem; font-weight: 900; background: rgba(47, 214, 123, .14); border: 1px solid rgba(47, 214, 123, .4); color: var(--green); border-radius: 999px; padding: 2px 8px; margin-left: 6px; } .pk-price { display: inline-flex; align-items: baseline; gap: 8px; font-size: .95rem; } .pk-price s { color: var(--text-3); font-size: .8rem; } .pk-price b { font-size: 1.15rem; font-weight: 900; } .pk-price small { color: var(--green); font-weight: 700; font-size: .76rem; } /* ============================================================ Page FAQ — recherche, catégories, items enrichis ============================================================ */ .faq-tools { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; font-size: .82rem; color: var(--text-3); } .faq-tools span { margin-right: auto; font-weight: 700; color: var(--text-2); } /* Item : icône + résumé + corps riche */ .faq-item summary { align-items: center; } .fq-ic { flex: none; width: 38px; height: 38px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 107, 26, .09); border: 1px solid rgba(255, 107, 26, .22); border-radius: 11px; margin-right: 2px; transition: background .25s, border-color .25s, transform .25s; } .faq-item[open] .fq-ic { background: var(--grad); border-color: transparent; transform: scale(1.05); } .faq-item summary { justify-content: flex-start; } .faq-item summary::after { margin-left: auto; } .fq-body { padding: 2px 22px 20px 62px; } .fq-body p { padding: 0; color: var(--text-2); font-size: .93rem; } .fq-body p + p { margin-top: 8px; } .faq-item[open] { background: rgba(255, 107, 26, .03); } .faq-item[open] summary { color: var(--accent-2); } /* Mini-étapes dans une réponse */ .fq-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .fq-steps span { display: flex; align-items: center; gap: 11px; font-size: .88rem; color: var(--text-2); background: var(--bg-1); border: 1px solid var(--border); border-radius: 11px; padding: 9px 13px; } .fq-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 107, 26, .14); border: 1px solid rgba(255, 107, 26, .4); color: var(--accent-2); font-size: .76rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* État vide de recherche */ .faq-empty { text-align: center; padding: 44px 20px; background: var(--bg-2); border: 1px dashed var(--border-2); border-radius: var(--r); } .faq-empty span { display: block; font-size: 2.4rem; margin-bottom: 10px; } .faq-empty b { display: block; font-size: 1.05rem; margin-bottom: 4px; } .faq-empty p { color: var(--text-3); font-size: .9rem; } @media (max-width: 560px) { .fq-body { padding-left: 22px; } } /* ====================================================== Espace client ====================================================== */ /* Carte de connexion — tout en tokens (bascule clair/sombre automatique) */ .login-card { position: relative; max-width: 468px; margin: 24px auto 0; padding: 40px 34px 30px; border-radius: 20px; overflow: hidden; text-align: left; } .login-card::before { /* liseré dégradé en haut de la carte */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); } .login-badge { width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 18px; display: grid; place-items: center; font-size: 1.65rem; background: linear-gradient(155deg, rgba(255, 107, 26, .18), rgba(255, 107, 26, .04)); border: 1px solid rgba(255, 107, 26, .32); box-shadow: 0 12px 28px -14px rgba(255, 107, 26, .55); } .login-pane { animation: loginFade .35s ease; } @keyframes loginFade { from { opacity: 0; transform: translateY(8px); } } .login-step { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: .96rem; color: var(--text); margin-bottom: 16px; line-height: 1.4; } .login-step .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 800; color: #fff; background: var(--grad); box-shadow: 0 5px 14px -6px rgba(255, 107, 26, .65); } .login-step b { font-weight: 800; } .login-row { display: flex; gap: 10px; } .login-row input, .code-inputs input { background: var(--bg-2); border: 1.5px solid var(--border-2); color: var(--text); font: inherit; transition: border-color .18s, box-shadow .18s, background .18s; } .login-row input { flex: 1; border-radius: 12px; padding: 14px 16px; font-size: .98rem; min-width: 0; } .login-row input::placeholder { color: var(--text-3); } .login-row input:focus, .code-inputs input:focus { outline: none; border-color: var(--accent); background: var(--bg-1); box-shadow: 0 0 0 3px rgba(255, 107, 26, .16); } .login-row .btn { flex: none; white-space: nowrap; } .login-hint { margin-top: 14px; color: var(--text-3); font-size: .82rem; display: block; text-align: center; } .code-inputs { display: flex; gap: 9px; justify-content: center; margin: 4px 0 16px; } .code-inputs input { width: 50px; height: 60px; text-align: center; font-size: 1.55rem; font-weight: 800; border-radius: 13px; } .login-actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; } .login-actions .link-btn { background: none; border: none; color: var(--text-3); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .login-actions .link-btn:hover { color: var(--accent); } /* Avantages sous la carte — chips propres, thème-aware */ .login-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 12px; margin: 26px auto 0; max-width: 760px; } .login-perks > span { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 13px; padding: 13px 16px; font-size: .87rem; color: var(--text-2); font-weight: 600; transition: border-color .18s, transform .18s; } .login-perks > span:hover { border-color: var(--border-2); transform: translateY(-2px); } /* En-tête compte */ .acc-header { display: flex; align-items: center; gap: 16px; padding: 22px 26px; flex-wrap: wrap; } .acc-avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -6px rgba(255, 107, 26, .5); } .acc-id { flex: 1; min-width: 200px; } .acc-id b, .acc-id h2 { display: block; font-size: 1.2rem; } .acc-id h2 { margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } .acc-id small { color: var(--text-3); font-size: .85rem; } /* Stats compte */ .acc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; } .acc-stat { padding: 18px 20px; text-align: center; } .acc-stat b { display: block; font-size: 1.45rem; font-weight: 800; } .acc-stat span { color: var(--text-3); font-size: .8rem; } .acc-stat.hp b { color: var(--green); } /* Cartes commandes */ .acc-orders { display: flex; flex-direction: column; gap: 12px; } .acc-order { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 14px; align-items: center; padding: 15px 18px; transition: border-color .25s, transform .25s; } .acc-order:hover { border-color: rgba(255, 107, 26, .4); transform: translateY(-2px); } .ao-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .ao-logo { width: 40px; height: 40px; border-radius: 11px; flex: none; font-size: 1.15rem; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .ao-logo img { width: 30px; height: 30px; object-fit: contain; } .ao-id { min-width: 0; } .ao-id b { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ao-id small { color: var(--text-3); font-size: .78rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ao-status, .ao-pay { font-size: .76rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-2); white-space: nowrap; } .ao-status.st-recue { background: rgba(58, 160, 255, .1); border-color: rgba(58, 160, 255, .35); color: #9ccdff; } .ao-status.st-encours { background: rgba(255, 178, 36, .1); border-color: rgba(255, 178, 36, .35); color: #ffd48a; } .ao-status.st-livree { background: rgba(47, 214, 123, .1); border-color: rgba(47, 214, 123, .35); color: #8ceab8; } .ao-status.st-annulee { background: rgba(255, 77, 94, .1); border-color: rgba(255, 77, 94, .35); color: #ffb3bb; } .ao-pay.ok { background: rgba(47, 214, 123, .08); border-color: rgba(47, 214, 123, .3); color: #8ceab8; } .ao-pay.ko { background: rgba(255, 178, 36, .1); border-color: rgba(255, 178, 36, .4); color: #ffd48a; } .ao-total { font-size: 1.02rem; white-space: nowrap; } .ao-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .ao-badges { display: flex; gap: 9px; flex-wrap: wrap; } @media (max-width: 860px) { .acc-order { grid-template-columns: 1fr auto; } .ao-main { grid-column: 1 / -1; } .ao-actions { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 560px) { .login-card { padding: 26px 20px; } .login-row { flex-direction: column; } .code-inputs input { width: 44px; height: 54px; font-size: 1.25rem; } .acc-header { padding: 18px; } } /* ============================================================ Mode clair � activ� via Bascule : bouton ??/?? dans le header (persist� en localStorage) ============================================================ */ html[data-theme="light"] { --bg: #f5f6fa; --bg-1: #ffffff; --bg-2: #eef0f6; --bg-3: #e3e6ef; --border: #d7dbe7; --border-2: #c2c8da; --text: #171a23; --text-2: #414a5e; --text-3: #5c6579; /* Couleurs sémantiques assombries pour rester lisibles sur fond clair (contraste) */ --green: #0e9e4f; --blue: #2372c8; --red: #d61f30; --gold: #b07d0a; --glow: 0 10px 40px -8px rgba(255, 107, 26, .35); --shadow: 0 18px 50px -18px rgba(30, 40, 70, .25); } html[data-theme="light"] body::before { background: radial-gradient(900px 500px at 85% -10%, rgba(255, 107, 26, .08), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(58, 160, 255, .06), transparent 60%), radial-gradient(800px 600px at 50% 120%, rgba(255, 61, 46, .05), transparent 60%); } html[data-theme="light"] .glass { background: rgba(255, 255, 255, .72); border-color: rgba(20, 30, 60, .10); } html[data-theme="light"] .site-header.scrolled { background: rgba(245, 246, 250, .82); border-bottom-color: var(--border); } html[data-theme="light"] ::selection { background: rgba(255, 107, 26, .25); } html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-2); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-2); border-color: var(--bg-2); } html[data-theme="light"] .cmp-bar i { background: rgba(20, 30, 60, .18); } html[data-theme="light"] .hero-grid-bg, html[data-theme="light"] .grid-bg { background-image: linear-gradient(rgba(20, 30, 60, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 30, 60, .05) 1px, transparent 1px); } html[data-theme="light"] .tc-avatar { border-color: #fff; } html[data-theme="light"] .aurora { opacity: .55; } html[data-theme="light"] .float-chip { background: rgba(255, 255, 255, .92); border-color: rgba(20, 30, 60, .16); box-shadow: 0 14px 32px -20px rgba(25, 40, 75, .45); } /* Textes forc�s en blanc sur fonds sombres/d�grad�s : on garde le contraste */ html[data-theme="light"] .btn { color: #fff; } /* Sauf bouton ghost : en clair il doit rester tr�s lisible */ html[data-theme="light"] .btn-ghost { color: #1f293b; border-color: #8f9bb3; background: rgba(255, 255, 255, .78); } html[data-theme="light"] .btn-ghost:hover { color: #c75400; border-color: #ff6b1a; background: rgba(255, 107, 26, .12); } /* Bouton de bascule de th�me */ .theme-toggle { background: transparent; border: 1px solid var(--border-2); color: var(--text); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: border-color .2s, transform .2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } /* Séparateur vertical entre les liens de nav et le bloc utilitaire (compte/panier/thème/langue) */ .nav-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex-shrink: 0; } /* Sélecteur de langue : menu déroulant compact (drapeau courant + ▾). Drapeaux en SVG inline — rendu identique sur tous les OS, Windows compris (qui n'affiche pas les emojis drapeaux). Version déroulante pour ne prendre que la place d'un seul drapeau (menu de droite non tassé). */ .lang-switch { position: relative; flex-shrink: 0; margin-left: 4px; } .lang-current { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text); padding: 6px 8px; border-radius: 10px; transition: border-color .2s; } .lang-current:hover { border-color: var(--accent); } .lang-caret { font-size: .62rem; color: var(--text-3); line-height: 1; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; display: none; flex-direction: column; gap: 2px; min-width: 156px; z-index: 120; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); } .lang-switch.open .lang-menu { display: flex; } .lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; color: var(--text-2); font-size: .9rem; font-weight: 600; padding: 8px 10px; border-radius: 8px; transition: background .15s, color .15s; } .lang-menu button:hover { background: var(--bg-2); color: var(--text); } .lang-menu button.on { background: var(--surface-2); color: var(--text); } .flag-svg { width: 22px; height: 15px; border-radius: 3px; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); } /* Mode clair : toasts, popups preuve sociale, nav mobile */ html[data-theme="light"] .toast { background: rgba(255, 255, 255, .96); border-color: rgba(255, 107, 26, .45); color: var(--text); } html[data-theme="light"] .sp-pop { background: rgba(255, 255, 255, .96); border-color: rgba(20, 30, 60, .12); border-left-color: var(--accent); } html[data-theme="light"] .sp-pop .bar-life { background: var(--bg-3); } html[data-theme="light"] .ticker-strip { background: rgba(240, 242, 248, .75); } html[data-theme="light"] .tick-live-zone { background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 78%, transparent 100%); } html[data-theme="light"] .main-nav { background: rgba(245, 246, 250, .98); }