/* ===================================================================== OMEGAME — Design System Cabinet de conseil holistique d'excellence Vanilla CSS · Mobile-first · FR/EN ===================================================================== */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* Palette (brief §1) */ --obsidian: #0A0A0F; --void: #111118; --gold: #C9A84C; --gold-light: #E8C96A; --ivory: #F0EDE6; --silver: #9A9A9A; --mist: #1E1E2A; --ice: #D6E4ED; /* Beige nacré bleuté — boutons pleins (base plus foncée & bleutée) */ --pearl-warm: #AEB8BF; --pearl-cool: #91A1AD; --pearl-warm-hi: #EAF2F5; --pearl-cool-hi: #F6FCFF; --pearl-edge: #7C8C98; --pearl-glow: rgba(214, 236, 245, 0.55); /* Derived */ --gold-soft: rgba(201, 168, 76, 0.16); --gold-border: rgba(201, 168, 76, 0.28); --line: rgba(240, 237, 230, 0.10); --line-strong: rgba(240, 237, 230, 0.18); /* Typography */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-accent: "Cinzel", Georgia, serif; /* Rhythm */ --maxw: 1180px; --gutter: clamp(1.25rem, 5vw, 4rem); --section-y: clamp(4.5rem, 10vw, 9rem); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 200ms; --t: 320ms; } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { font-family: var(--font-body); font-weight: 400; line-height: 1.65; color: var(--ivory); background: var(--obsidian); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; } /* ---------- 3. I18N ---------- */ /* Show only the active language. Default . */ [data-lang] { display: none; } html[lang="fr"] [data-lang="fr"], html[lang="en"] [data-lang="en"] { display: revert; } /* ---------- 4. TYPOGRAPHY ---------- */ .label { font-family: var(--font-accent); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--silver); } .label--gold { color: var(--gold); } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; } .display-1 { font-size: clamp(2.6rem, 7vw, 6rem); } .display-2 { font-size: clamp(2.1rem, 5vw, 4rem); } .display-3 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } .lead { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--silver); max-width: 56ch; } .prose p { color: var(--silver); margin-bottom: 1.25em; max-width: 70ch; } .prose p:last-child { margin-bottom: 0; } .gold-text { color: var(--gold); } em { font-style: italic; } /* The OMEGAME maxim — Cinzel, gold, spaced */ .maxim { font-family: var(--font-accent); color: var(--gold); letter-spacing: 0.16em; line-height: 1.5; font-size: clamp(1rem, 1.6vw, 1.3rem); text-align: center; margin: 1.6em auto; max-width: 30ch; } /* ---------- 5. LAYOUT ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 760px; } .section { padding-block: var(--section-y); position: relative; } .bg-obsidian { background: var(--obsidian); } .bg-void { background: var(--void); } .bg-mist { background: var(--mist); } .text-center { text-align: center; } .stack > * + * { margin-top: 1.4rem; } .section-head { max-width: 760px; } .section-head.text-center { margin-inline: auto; } .section-head .label { display: inline-block; margin-bottom: 1.25rem; } .section-head h2 { margin-bottom: 1.25rem; } /* Hairline divider */ .rule { width: 56px; height: 1px; background: var(--gold); opacity: 0.7; border: 0; margin: 0; } .rule--center { margin-inline: auto; } /* ---------- 6. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-accent); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 1.05em 2.1em; border: 1px solid transparent; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn .arr { transition: transform var(--t) var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn--gold { background: linear-gradient(135deg, var(--pearl-warm) 0%, var(--pearl-cool) 100%); color: var(--obsidian); border-color: var(--pearl-edge); box-shadow: 0 0 0 rgba(214, 236, 245, 0); } .btn--gold:hover { background: linear-gradient(120deg, var(--pearl-warm-hi) 0%, var(--pearl-cool-hi) 60%, var(--pearl-warm-hi) 100%); border-color: var(--pearl-cool-hi); box-shadow: 0 6px 30px var(--pearl-glow), 0 0 14px var(--pearl-glow); } .btn--outline { color: var(--gold); border-color: var(--gold-border); background: transparent; } .btn--outline:hover { border-color: var(--gold); background: var(--gold-soft); } .btn--lg { padding: 1.25em 2.6em; font-size: 0.85rem; } .btn--block { display: flex; width: 100%; justify-content: center; } /* ---------- 7. NAVIGATION ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem var(--gutter); background: transparent; border-bottom: 1px solid transparent; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), padding var(--t) var(--ease); } .nav.is-scrolled { background: rgba(10, 10, 15, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); padding-block: 0.7rem; } .nav__brand { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } /* Logo ~3x larger; negative margins absorb the soft faded edge so the bar stays tidy */ .nav__brand img { width: 112px; height: 112px; object-fit: contain; margin: -28px 0; transition: width var(--t) var(--ease), height var(--t) var(--ease), margin var(--t) var(--ease); } .nav.is-scrolled .nav__brand img { width: 84px; height: 84px; margin: -20px 0; } .nav__brand .wordmark { font-family: var(--font-accent); font-size: 1.2rem; letter-spacing: 0.34em; color: var(--ivory); padding-left: 0.2em; } .nav__links { display: none; align-items: center; gap: 2.2rem; } .nav__links a { font-family: var(--font-accent); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); position: relative; transition: color var(--t) var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--gold); transition: width var(--t) var(--ease); } .nav__links a:hover, .nav__links a.is-active { color: var(--ivory); } .nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; } .nav__actions { display: none; align-items: center; gap: 1.5rem; } .lang-toggle { display: inline-flex; gap: 0.4rem; font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 0.1em; } .lang-toggle button { color: var(--silver); padding: 0.2rem 0.1rem; transition: color var(--t) var(--ease); } .lang-toggle button.is-active { color: var(--gold); } .lang-toggle .sep { color: var(--line-strong); } /* Hamburger */ .nav__burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 0.4rem; z-index: 110; } .nav__burger span { width: 24px; height: 1.5px; background: var(--ivory); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); } body.menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.menu-open .nav__burger span:nth-child(2) { opacity: 0; } body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 105; background: var(--obsidian); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease); } body.menu-open .mobile-menu { opacity: 1; visibility: visible; } .mobile-menu a { font-family: var(--font-display); font-size: 2rem; color: var(--ivory); } .mobile-menu .label { font-family: var(--font-accent); font-size: 0.74rem; } .mobile-menu .lang-toggle { font-size: 0.9rem; margin-top: 1rem; } @media (min-width: 1024px) { .nav__links, .nav__actions { display: flex; } .nav__burger { display: none; } } /* ---------- 8. HERO ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 6rem; padding-bottom: 6rem; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 120%; object-fit: cover; will-change: transform; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 18%, rgba(201,168,76,0.20), transparent 55%), linear-gradient(180deg, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0.62) 45%, rgba(10,10,15,0.95) 100%); } .hero canvas.particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__inner { position: relative; z-index: 2; max-width: 760px; } .hero .label { display: inline-block; margin-bottom: 1.6rem; } .hero h1 { font-size: clamp(2.6rem, 6.6vw, 6rem); font-weight: 400; margin-bottom: 1.6rem; } .hero .lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); margin-bottom: 2.4rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; } .scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2; width: 18px; height: 18px; color: var(--silver); opacity: 0.5; animation: bob 2.4s var(--ease) infinite; } @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* Compact hero (interior pages) */ .hero--compact { min-height: 76svh; } /* ---------- 9. SPLIT — DEUX UNIVERS ---------- */ .split { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } .split__col { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 6rem) var(--gutter); min-height: 560px; display: flex; align-items: flex-end; transition: transform var(--t) var(--ease); } .split__col .bgimg { position: absolute; inset: 0; z-index: 0; } .split__col .bgimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .split__col::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,15,0.55), rgba(10,10,15,0.92)); } .split__col .inner { position: relative; z-index: 2; max-width: 460px; } .split__col:hover .bgimg img { transform: scale(1.05); } .split__col { border: 1px solid transparent; } .split__col:hover { border-color: var(--gold-border); } /* Grille tarifaire 2×2 (Lumière Complète à droite de Révélation, etc.) */ .price-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.9rem 2.2rem; margin: 1.6rem 0; } .price-grid .pg-item { display: flex; flex-direction: column; } .price-grid .pg-name { font-family: var(--font-accent); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); } .price-grid .pg-price { font-family: var(--font-display); font-size: 1.35rem; color: var(--ivory); } /* ---------- 10. FORMULE CARDS ---------- */ .formula { position: relative; background: var(--mist); border: 1px solid var(--line); padding: clamp(1.8rem, 3vw, 2.8rem); display: flex; flex-direction: column; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); } .formula:hover { border-color: var(--gold-border); transform: translateY(-4px); } .formula--featured { border-color: var(--gold-border); } /* Express — distinction subtile uniquement (jamais l'air "sélectionné") : bordure or discrète + halo à peine perceptible. Survol = comportement d'origine. */ .formula--express { border-color: var(--gold-border); box-shadow: 0 8px 30px rgba(201,168,76,0.06); } .formula__badge--express { letter-spacing: 0.14em; } .formula__badge { position: absolute; top: 0; right: clamp(1.8rem, 3vw, 2.8rem); transform: translateY(-50%); font-family: var(--font-accent); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--obsidian); background: var(--gold); padding: 0.5em 1em; } .formula .label { margin-bottom: 0.9rem; } .formula h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1.1rem; color: var(--ivory); } .formula .prose { margin-bottom: 1.6rem; } /* Prose repliable (Révélation, Oracle Profil) — capée à la hauteur de la voisine, le texte plus long se lit via la flèche déroulante. */ .formula .prose.is-collapsible { position: relative; max-height: 6.5em; overflow: hidden; margin-bottom: 0.6rem; transition: max-height 0.45s var(--ease); } .formula .prose.is-collapsible::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em; background: linear-gradient(rgba(30,30,42,0), var(--mist)); pointer-events: none; transition: opacity 0.3s var(--ease); } .formula .prose.is-collapsible.is-open { max-height: 1600px; } .formula .prose.is-collapsible.is-open::after { opacity: 0; } .formula__more { display: inline-flex; align-items: center; gap: 0.45em; margin: 0 0 1.6rem; padding: 0.3rem 0; font-family: var(--font-accent); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); background: none; border: 0; cursor: pointer; transition: color var(--t) var(--ease); } .formula__more:hover { color: var(--gold-light); } .formula__more svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); } .formula__more.is-open svg { transform: rotate(180deg); } .formula .includes { margin-bottom: 1.8rem; } .formula .includes li { position: relative; padding-left: 1.5rem; margin-bottom: 0.7rem; color: var(--silver); font-size: 0.96rem; } .formula .includes li::before { content: "·"; position: absolute; left: 0.3rem; top: -0.1em; color: var(--gold); font-size: 1.4em; } .formula .meta { font-size: 0.84rem; color: var(--silver); margin-bottom: 1.4rem; margin-top: auto; } .formula .meta .price { font-family: var(--font-display); font-size: 2.2rem; color: var(--ivory); line-height: 1; display: block; margin-bottom: 0.4rem; } .formula .themes { font-size: 0.82rem; color: var(--silver); letter-spacing: 0.02em; margin-bottom: 1.4rem; margin-top: auto; } /* Le bloc bas (thèmes + prix + délai + CTA) est poussé en bas : l'espace se met AU-DESSUS du prix, jamais entre le prix et le CTA. Hauteurs alignées entre voisines. Si la carte a une ligne thèmes, c'est elle qui pousse ; sinon c'est la meta. */ .formula .themes ~ .meta { margin-top: 0; } .formula__cta { margin-top: 0; } /* Mobile : empilées · ≥680px : grille 2×2 équilibrée. Hauteur égale par rangée (stretch) — le bloc bas est aligné via margin-top:auto. */ .formula-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; } @media (min-width: 680px) { .formula-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- 11. PROCESS ---------- */ .process { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; } @media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding-top: 2.6rem; } .step__num { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 2.2rem; color: var(--gold); opacity: 0.85; } .step__icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 1rem; } .step h3 { font-size: 1.25rem; color: var(--ivory); margin-bottom: 0.5rem; } .step p { font-size: 0.92rem; color: var(--silver); } /* ---------- 12. REFERENCES GRID ---------- */ .refs { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); margin-top: 3rem; border: 1px solid var(--line); } @media (min-width: 620px) { .refs { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 920px) { .refs { grid-template-columns: repeat(3, 1fr); } } .ref { background: var(--void); padding: clamp(1.8rem, 3vw, 2.6rem); } .ref__icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 1.1rem; } .ref h3 { font-family: var(--font-accent); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); margin-bottom: 0.8rem; font-weight: 400; } .ref p { font-size: 0.9rem; color: var(--silver); } /* ---------- 13. COMMITMENT (3 cols) ---------- */ .commit { display: grid; grid-template-columns: 1fr; gap: 2.4rem; margin-top: 3rem; } @media (min-width: 760px) { .commit { grid-template-columns: repeat(3, 1fr); } } .commit__item { text-align: center; } .commit__item .ic { width: 30px; height: 30px; color: var(--gold); margin: 0 auto 1rem; } .commit__item h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); margin-bottom: 0.6rem; } .commit__item p { font-size: 0.92rem; color: var(--silver); } /* ---------- 14. DEALS / DUAL CTA ---------- */ .dual-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.4rem; } /* ---------- 15. FEATURE BAND (image + overlay CTA) ---------- */ .band { position: relative; overflow: hidden; } .band__bg { position: absolute; inset: 0; z-index: 0; } .band__bg img { width: 100%; height: 100%; object-fit: cover; } .band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,15,0.78), rgba(10,10,15,0.88)); } .band .container { position: relative; z-index: 1; } /* Dashed list (decideurs original text) */ .dash-list p { position: relative; padding-left: 1.6rem; color: var(--silver); margin-bottom: 1.1rem; max-width: 64ch; } .dash-list p::before { content: "—"; position: absolute; left: 0; color: var(--gold); } /* ---------- 16. FOOTER ---------- */ .footer { background: var(--void); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; } .footer__top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 820px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } } .footer__brand img { width: 132px; margin: -22px 0 0.4rem -16px; } .footer__brand .wordmark { font-family: var(--font-accent); letter-spacing: 0.3em; color: var(--ivory); font-size: 1rem; } .footer__brand p { color: var(--silver); font-size: 0.9rem; margin-top: 1rem; max-width: 38ch; } .footer__col h4 { font-family: var(--font-accent); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 400; } .footer__col a, .footer__col p { display: block; color: var(--silver); font-size: 0.9rem; margin-bottom: 0.6rem; transition: color var(--t) var(--ease); } .footer__col a:hover { color: var(--ivory); } .footer__disclaimer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); } .footer__disclaimer p { font-size: 0.76rem; color: var(--silver); opacity: 0.75; line-height: 1.7; max-width: 90ch; } .footer__bottom { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center; } .footer__bottom small { color: var(--silver); font-size: 0.76rem; } .footer__bottom a { color: var(--silver); font-size: 0.76rem; } /* ---------- 17. REVEAL ANIMATIONS ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 90ms; } .reveal[data-delay="2"] { transition-delay: 180ms; } .reveal[data-delay="3"] { transition-delay: 270ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- 18. MISC ---------- */ .section--bordered { border-top: 1px solid var(--line); } .note { font-size: 0.82rem; color: var(--silver); } .legal h2 { font-size: 1.6rem; color: var(--ivory); margin: 2.4rem 0 1rem; } .legal p, .legal li { color: var(--silver); margin-bottom: 1rem; max-width: 78ch; } .legal ul { padding-left: 1.2rem; } .legal li { list-style: disc; margin-bottom: 0.5rem; } .legal a { color: var(--gold); } /* ===================================================================== PHASE 2 — Tunnel de conversion ===================================================================== */ /* ---------- QUESTIONNAIRE ---------- */ .q-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); z-index: 200; transition: width 450ms var(--ease); } .q-wrap { min-height: 100svh; display: flex; flex-direction: column; } .q-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); } .q-top .brand { display: flex; align-items: center; } .q-top .brand img { width: 84px; height: 84px; object-fit: contain; margin: -22px 0; } .q-top .q-count { font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--silver); } .q-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem var(--gutter) 4rem; } .q-step { display: none; width: 100%; max-width: 740px; text-align: center; } .q-step.is-active { display: block; animation: qfade 480ms var(--ease) both; } @keyframes qfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .q-step .q-label { display: inline-block; margin-bottom: 1.4rem; } .q-step h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 400; margin-bottom: 1.2rem; } .q-step .q-note { font-size: 0.86rem; color: var(--silver); margin-top: 1.4rem; max-width: 52ch; margin-inline: auto; } .q-step .q-note.cinzel { font-family: var(--font-display); font-style: italic; font-size: 1rem; } .q-guide-link { margin-top: 1rem; } .q-guide-link a { font-family: var(--font-accent); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); } .q-guide-link a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); } .q-fields { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin-top: 2.4rem; } .q-field { flex: 1 1 220px; max-width: 320px; text-align: left; } .q-field.small { flex: 0 1 130px; } .q-field label { display: block; font-family: var(--font-accent); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); margin-bottom: 0.5rem; } .q-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--gold-border); color: var(--ivory); font-family: var(--font-display); font-size: 1.5rem; padding: 0.5rem 0.2rem; transition: border-color var(--t) var(--ease); } .q-input::placeholder { color: rgba(154,154,154,0.4); } .q-input:focus { outline: none; border-bottom-color: var(--gold-light); } textarea.q-input { resize: none; font-size: 1.25rem; line-height: 1.5; border: 1px solid var(--gold-border); padding: 1rem; min-height: 120px; } .q-counter { font-size: 0.78rem; color: var(--silver); margin-top: 0.6rem; text-align: right; } .q-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.4rem; text-align: left; } @media (min-width: 600px) { .q-cards.cols-2 { grid-template-columns: 1fr 1fr; } .q-cards.cols-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .q-cards.cols-3 { grid-template-columns: 1fr 1fr 1fr; } } .q-card { border: 1px solid var(--line); background: var(--mist); padding: 1.3rem 1.4rem; cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease); display: flex; flex-direction: column; gap: 0.3rem; } .q-card:hover { border-color: var(--gold-border); transform: translateY(-2px); } .q-card.is-selected { border-color: var(--gold); background: var(--gold-soft); } .q-card--express { box-shadow: 0 6px 22px rgba(201,168,76,0.06); } .q-card--express .qc-price { color: var(--gold-light); } .q-card .qc-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--ivory); } .q-card .qc-sub { font-size: 0.84rem; color: var(--silver); } .q-card .qc-price { font-family: var(--font-display); color: var(--gold); font-size: 1.15rem; margin-top: 0.2rem; } /* Les prix (ex. 1 500€) ne se coupent jamais entre le 1 et les centaines */ .q-card .qc-price, .formula .meta .price, .q-recap .rr.total dd, .pay-card .rr.total dd { white-space: nowrap; } .q-group-label { font-family: var(--font-accent); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 1.6rem 0 0.4rem; text-align: left; } .q-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.8rem; } .q-back { font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); transition: color var(--t) var(--ease); } .q-back:hover { color: var(--ivory); } .q-back[hidden] { visibility: hidden; } .btn:disabled, .btn.is-disabled { opacity: 0.35; pointer-events: none; } /* Recap */ .q-recap { text-align: left; margin-top: 2.4rem; border: 1px solid var(--gold-border); background: var(--mist); padding: clamp(1.4rem, 3vw, 2.2rem); } .q-recap .rr { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .q-recap .rr:last-child { border-bottom: 0; } .q-recap .rr dt { font-family: var(--font-accent); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); } .q-recap .rr dd { color: var(--ivory); text-align: right; } .q-recap .rr.total dd { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); } /* ---------- PAIEMENT ---------- */ .pay-wrap { padding-top: 8rem; padding-bottom: 5rem; } .pay-card { background: var(--mist); border: 1px solid var(--gold-border); padding: clamp(1.6rem, 3vw, 2.4rem); } .pay-card .rr { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .pay-card .rr:last-child { border-bottom: 0; } .pay-card .rr dt { font-family: var(--font-accent); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); } .pay-card .rr dd { color: var(--ivory); text-align: right; } .pay-card .rr.total dd { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); } .pay-instructions { border: 1px solid var(--gold-border); background: var(--gold-soft); padding: clamp(1.4rem, 3vw, 2rem); margin-top: 1.8rem; } .pay-instructions p { color: var(--silver); margin-bottom: 0.8rem; } .pay-instructions strong { color: var(--ivory); } .pay-secure { font-size: 0.8rem; color: var(--silver); text-align: center; margin-top: 1.2rem; } .pay-methods { text-align: center; font-size: 0.82rem; color: var(--silver); margin-top: 1rem; } .pay-paypal { text-align: center; margin-top: 1.4rem; } .pay-paypal a { font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .pay-paypal a:hover { color: var(--gold); border-bottom-color: var(--gold-border); } /* ---------- Trust badges (moyens de paiement) ---------- */ .pay-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; } .pb { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; height: 30px; padding: 0 0.7em; border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.03em; white-space: nowrap; color: var(--silver); background: rgba(240,237,230,0.015); transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .pb svg { height: 15px; width: auto; fill: currentColor; display: block; } .pb--mc svg { height: 17px; } .pb:hover { color: var(--ivory); border-color: var(--gold-border); } /* Version couleur (page paiement) — teintes lisibles sur obsidienne */ .pay-badges--color .pb { color: var(--ivory); border-color: var(--line-strong); } .pay-badges--color .pb--visa:hover, .pay-badges--color .pb--visa { color: #4E7BFF; } .pay-badges--color .pb--mc:hover, .pay-badges--color .pb--mc { color: #F59E1B; } .pay-badges--color .pb--amex:hover, .pay-badges--color .pb--amex { color: #2E8FE0; } .pay-badges--color .pb--apay:hover, .pay-badges--color .pb--apay { color: #FFFFFF; } .pay-badges--color .pb--gpay:hover, .pay-badges--color .pb--gpay { color: #E8EAED; } .pay-badges--color .pb--pp:hover, .pay-badges--color .pb--pp { color: #59B7E8; } /* Rangée trust dans le footer */ .footer__pay { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.6rem; text-align: center; } .footer__pay .fp-label { font-family: var(--font-accent); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); opacity: 0.7; margin-bottom: 0.9rem; } /* ---------- CONFIRMATION ---------- */ .confirm { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 7rem var(--gutter) 4rem; } .confirm__check { width: 96px; height: 96px; margin: 0 auto 2.2rem; } .confirm__check circle { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 301; stroke-dashoffset: 301; animation: draw 900ms var(--ease) forwards; } .confirm__check path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 500ms var(--ease) 750ms forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .confirm__check circle, .confirm__check path { animation: none; stroke-dashoffset: 0; } } /* ---------- LEAD MAGNET POPUP ---------- */ .lead-popup { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease); } .lead-popup.is-open { opacity: 1; visibility: visible; } .lead-popup__backdrop { position: absolute; inset: 0; background: rgba(6,6,10,0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lead-popup__box { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--void); border: 1px solid var(--gold-border); padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; transform: translateY(16px); transition: transform var(--t) var(--ease); } .lead-popup.is-open .lead-popup__box { transform: none; } .lead-popup__close { position: absolute; top: 0.8rem; right: 1rem; font-size: 1.4rem; line-height: 1; color: var(--silver); } .lead-popup__close:hover { color: var(--ivory); } .lead-popup h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ivory); margin-bottom: 0.8rem; } .lead-popup p { color: var(--silver); font-size: 0.95rem; margin-bottom: 1.6rem; } .lead-popup .q-input { font-size: 1.05rem; margin-bottom: 1.2rem; text-align: left; } .lead-popup .lp-done { color: var(--gold); font-family: var(--font-display); font-size: 1.25rem; }