@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ COMBES CASANOVA PATRIMOINE — Design system unifié Base sombre + or. Variation d'accent par univers via la classe portée par : .u-tech / .u-sante / .u-gen ============================================================ */ :root { --noir: #0b0c0f; --noir-2: #101218; --surface: rgba(255,255,255,0.035); --bord: rgba(201,169,97,0.18); --bord-fin: rgba(255,255,255,0.08); --or: #c9a961; --or-clair: #e8cd8f; --creme: #f5f1e8; --texte: rgba(245,241,232,0.92); --texte-2: rgba(245,241,232,0.62); --texte-3: rgba(245,241,232,0.55); --vert: #5cb85c; --vert-fond: rgba(45,106,79,0.14); --vert-bord: rgba(45,106,79,0.3); --rouge: #e87878; --accent: var(--or); --accent-fond: rgba(201,169,97,0.09); --serif: 'Fraunces', 'Playfair Display', Georgia, serif; --sans: 'Geist', 'DM Sans', 'Segoe UI', Arial, sans-serif; --mono: 'JetBrains Mono', 'DM Mono', Consolas, monospace; } .u-tech { --accent: #8fb4d9; --accent-fond: rgba(143,180,217,0.09); } .u-sante { --accent: #8fbfa5; --accent-fond: rgba(143,191,165,0.09); } .u-gen { --accent: var(--or); --accent-fond: rgba(201,169,97,0.09); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--sans); background: var(--noir); color: var(--texte); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--or-clair); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; } img { max-width: 100%; } /* ---------- Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(11,12,15,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bord); height: 64px; display: flex; align-items: center; padding: 0 clamp(16px, 4vw, 48px); gap: 24px; } .nav-logo { font-family: var(--serif); font-size: 17px; color: var(--creme); text-decoration: none; letter-spacing: 0.5px; white-space: nowrap; } .nav-logo em { color: var(--or); font-style: normal; } .nav-links { display: flex; gap: 4px; list-style: none; margin-left: auto; flex-wrap: wrap; } .nav-links a { color: var(--texte-2); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.4px; padding: 7px 12px; border-radius: 6px; transition: color .2s, background .2s; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--or); background: rgba(201,169,97,0.1); } .nav-cta { background: var(--or); color: #14120b !important; font-weight: 600; border-radius: 6px; } .nav-cta:hover { background: var(--or-clair) !important; color: #14120b !important; } .nav-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--bord); color: var(--creme); border-radius: 6px; padding: 8px 12px; font-size: 15px; cursor: pointer; } @media (max-width: 900px) { .nav-burger { display: block; } .nav-links { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--noir-2); flex-direction: column; padding: 16px; gap: 6px; border-bottom: 1px solid var(--bord); } .nav-links.open { display: flex; } .nav-links a { padding: 12px 14px; font-size: 15px; } } /* ---------- Structure ---------- */ main { padding-top: 64px; } .section { padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 60px); } .section-alt { background: var(--noir-2); } .wrap { max-width: 1160px; margin: 0 auto; } .wrap-etroit { max-width: 780px; margin: 0 auto; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } h1, .h1 { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; line-height: 1.12; color: var(--creme); margin-bottom: 24px; } h1 em, .h1 em { color: var(--or); font-style: italic; } h2 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.2; color: var(--creme); margin-bottom: 18px; } h2 em { color: var(--accent); font-style: italic; } h3 { font-family: var(--serif); font-size: 21px; color: var(--creme); margin: 28px 0 10px; } .lede { font-size: 17px; color: var(--texte-2); max-width: 640px; margin-bottom: 32px; } p + p { margin-top: 14px; } .prose p { color: var(--texte-2); } .prose strong { color: var(--creme); } /* ---------- Boutons ---------- */ .btn { display: inline-block; padding: 14px 28px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; font-family: var(--sans); transition: transform .15s, background .2s; } .btn-or { background: var(--or); color: #14120b; } .btn-or:hover { background: var(--or-clair); transform: translateY(-1px); } .btn-ligne { background: transparent; color: var(--creme); border: 1px solid var(--bord); } .btn-ligne:hover { border-color: var(--or); color: var(--or); } /* ---------- Portes d'entrée (accueil) ---------- */ .portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 900px) { .portes { grid-template-columns: 1fr; } } .porte { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 14px; padding: 32px 26px 28px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; } .porte::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pa, var(--or)), transparent 75%); } .porte:hover { transform: translateY(-4px); border-color: var(--pa, var(--or)); } .porte-tech { --pa: #8fb4d9; } .porte-sante { --pa: #8fbfa5; } .porte-gen { --pa: var(--or); } .porte-tag { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pa, var(--or)); margin-bottom: 14px; } .porte h3 { margin: 0 0 10px; font-size: 22px; } .porte p { font-size: 14px; color: var(--texte-2); margin-bottom: 18px; } .porte-lien { font-size: 13px; font-weight: 600; color: var(--pa, var(--or)); } /* ---------- Cartes stats ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 32px 0; } .stat { background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 12px; padding: 22px; position: relative; overflow: hidden; } .stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .stat-n { font-family: var(--mono); font-size: 30px; color: var(--accent); line-height: 1.1; margin-bottom: 8px; } .stat-l { font-size: 13px; color: var(--texte-2); line-height: 1.45; } /* ---------- Simulateurs ---------- */ .sim { background: var(--noir-2); border: 1px solid var(--bord); border-radius: 16px; padding: clamp(22px, 3.5vw, 38px); margin-top: 36px; } .sim-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 48px); } .sim-grille > div { min-width: 0; } @media (max-width: 900px) { .sim-grille { grid-template-columns: 1fr; } } .sim-titre { font-family: var(--serif); font-size: 24px; color: var(--creme); margin-bottom: 6px; } .sim-sous { font-size: 14px; color: var(--texte-3); margin-bottom: 24px; } .sim-tabs { display: flex; gap: 8px; margin-bottom: 22px; } .sim-tab { padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--surface); border: 1px solid var(--bord-fin); color: var(--texte-2); font-family: var(--sans); } .sim-tab.active { background: var(--accent-fond); border-color: var(--accent); color: var(--accent); } .champ { margin-bottom: 20px; } .champ-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .champ label { font-size: 13px; font-weight: 600; color: var(--texte-2); letter-spacing: .3px; } .champ-val { font-family: var(--mono); font-size: 15px; color: var(--accent); } .champ input[type="range"] { width: 100%; accent-color: var(--accent); height: 4px; cursor: pointer; } .champ-ligne { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .champ input[type="number"], .champ select { background: rgba(255,255,255,0.06); border: 1px solid var(--bord-fin); border-radius: 8px; color: var(--creme); font-family: var(--mono); font-size: 14px; padding: 9px 12px; width: 100%; } .champ select { font-family: var(--sans); cursor: pointer; } .champ input[type="number"]::-webkit-outer-spin-button, .champ input[type="number"]::-webkit-inner-spin-button { opacity: 1; } .sim-resultats { min-height: 200px; min-width: 0; } .rr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bord-fin); font-size: 14px; } .rl { color: var(--texte-2); } .rv { font-family: var(--mono); font-size: 15px; color: var(--creme); white-space: nowrap; } .rv-vert { color: var(--vert); } .rv-rouge { color: var(--rouge); } .r-bloc { margin: 16px 0 12px; padding: 16px 18px; border-radius: 12px; background: var(--accent-fond); border: 1px solid var(--bord); } .r-bloc-titre { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .r-cle { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; background: var(--vert-fond); border: 1px solid var(--vert-bord); border-radius: 10px; padding: 12px 16px; } .r-cle .rl { font-size: 13px; } .r-cle .rv { font-size: 20px; font-weight: 600; color: var(--vert); } .r-cle-rouge { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); } .r-cle-rouge .rv { color: var(--rouge); } .r-cle-vert { background: rgba(45,106,79,0.14); border-color: rgba(45,106,79,0.35); } .r-cle-vert .rl, .r-cle-vert .rv { color: var(--vert); } .proj-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } @media (max-width: 520px) { .proj-grille { grid-template-columns: 1fr; } } .proj { background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 12px; padding: 16px; text-align: left; } .proj-mise { border-color: var(--bord); background: var(--accent-fond); } .proj-annees { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-3); margin-bottom: 6px; } .proj-montant { font-family: var(--mono); font-size: 22px; color: var(--creme); } .proj-gain { font-size: 12px; color: var(--texte-3); margin-top: 4px; } .proj-gain-or { color: var(--or-clair); } .badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; color: #14120b; } .note-sim { margin-top: 14px; padding: 10px 14px; background: var(--surface); border-radius: 8px; font-size: 11.5px; color: var(--texte-3); font-style: italic; } /* ---------- Tableaux ---------- */ .tableau-cadre { overflow-x: auto; border: 1px solid var(--bord); border-radius: 12px; margin: 24px 0; } table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } th { background: var(--accent-fond); color: var(--accent); text-align: left; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 16px; } td { padding: 13px 16px; border-top: 1px solid var(--bord-fin); color: var(--texte-2); vertical-align: top; } td strong { color: var(--creme); } .tableau-note { padding: 10px 16px; background: var(--surface); font-size: 11.5px; color: var(--texte-3); } /* ---------- FAQ ---------- */ .faq details { border: 1px solid var(--bord-fin); border-radius: 10px; margin-bottom: 10px; background: var(--surface); overflow: hidden; } .faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15px; color: var(--creme); list-style: none; position: relative; } .faq summary::after { content: '+'; position: absolute; right: 20px; color: var(--accent); font-size: 18px; } .faq details[open] summary::after { content: '−'; } .faq .faq-r { padding: 0 20px 18px; font-size: 14.5px; color: var(--texte-2); } .faq .faq-r p + p { margin-top: 10px; } /* ---------- Bloc de conversion ---------- */ .capture { margin-top: 32px; border-radius: 16px; padding: clamp(24px, 4vw, 40px); background: linear-gradient(135deg, rgba(201,169,97,0.12), rgba(201,169,97,0.03)); border: 1px solid var(--bord); } .capture h3 { margin-top: 0; font-size: 24px; } .capture .lede { font-size: 15px; margin-bottom: 24px; } .f-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .f-grille { grid-template-columns: 1fr; } } .f-champ label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--texte-2); margin-bottom: 6px; text-transform: uppercase; } .f-champ input, .f-champ select, .f-champ textarea { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--bord-fin); border-radius: 8px; color: var(--creme); font-family: var(--sans); font-size: 15px; padding: 12px 14px; } .f-large { grid-column: 1 / -1; } .f-rgpd { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--texte-3); } .f-rgpd input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--or); flex: none; } .f-envoi { grid-column: 1 / -1; } .f-message { grid-column: 1 / -1; font-size: 14px; padding: 12px 16px; border-radius: 8px; display: none; } .f-message.ok { display: block; background: var(--vert-fond); border: 1px solid var(--vert-bord); color: var(--vert); } .f-message.err { display: block; background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3); color: var(--rouge); } /* ---------- Méthode / étapes ---------- */ .etapes { counter-reset: etape; display: grid; gap: 16px; margin-top: 32px; } .etape { background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 12px; padding: 24px 24px 24px 76px; position: relative; counter-increment: etape; } .etape::before { content: counter(etape, decimal-leading-zero); position: absolute; left: 22px; top: 22px; font-family: var(--mono); font-size: 20px; color: var(--accent); } .etape h3 { margin: 0 0 6px; font-size: 18px; } .etape p { font-size: 14px; color: var(--texte-2); } /* ---------- Blog ---------- */ .article-carte { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 12px; padding: 26px; margin-bottom: 14px; transition: border-color .2s; } .article-carte:hover { border-color: var(--or); } .article-carte h3 { margin: 0 0 8px; } .article-carte p { font-size: 14px; color: var(--texte-2); } .article-meta { font-size: 12px; color: var(--texte-3); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .article h2 { margin-top: 44px; } .article ul { margin: 12px 0 12px 22px; color: var(--texte-2); } .article li { margin-bottom: 6px; } /* ---------- Pied de page ---------- */ footer { border-top: 1px solid var(--bord); background: var(--noir-2); padding: 48px clamp(20px, 5vw, 60px) 32px; } .footer-grille { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; } @media (max-width: 760px) { .footer-grille { grid-template-columns: 1fr; } } .footer-marque { font-family: var(--serif); font-size: 18px; color: var(--creme); margin-bottom: 10px; } .footer-marque em { color: var(--or); font-style: normal; } footer p, footer li { font-size: 13px; color: var(--texte-3); } footer ul { list-style: none; } footer li { margin-bottom: 8px; } footer a { color: var(--texte-2); text-decoration: none; } footer a:hover { color: var(--or); } .footer-titre { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-3); margin-bottom: 14px; } .footer-legal { max-width: 1160px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--bord-fin); font-size: 12px; color: var(--texte-3); } /* ---------- Divers ---------- */ .hero { min-height: calc(88vh - 64px); display: flex; align-items: center; position: relative; } .hero-fond { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 72% 45%, var(--accent-fond) 0%, transparent 70%); } .hero .wrap { position: relative; z-index: 1; } .deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } @media (max-width: 860px) { .deux-col { grid-template-columns: 1fr; } } .encart { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 26px; } .encart-titre { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } /* ============================================================ COUCHE PREMIUM — animations, profondeur, graphiques Toutes les animations utilisent transform/opacity (GPU) et respectent prefers-reduced-motion (voir bloc en tête). ============================================================ */ /* Révélation au scroll (classe ajoutée en JS : progressive enhancement, le contenu reste visible sans JS et pour les crawlers) */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .reveal.vu { opacity: 1; transform: none; } .reveal .stat { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .reveal.vu .stat { opacity: 1; transform: none; } .reveal.vu .stat:nth-child(2) { transition-delay: .08s; } .reveal.vu .stat:nth-child(3) { transition-delay: .16s; } .reveal.vu .stat:nth-child(4) { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal .stat { opacity: 1 !important; transform: none !important; } } /* Profondeur douce */ .sim, .capture, .encart { box-shadow: 0 18px 50px -28px rgba(0,0,0,0.65); } .porte, .stat, .article-carte { box-shadow: 0 10px 34px -22px rgba(0,0,0,0.55); } .porte:hover { box-shadow: 0 22px 54px -24px rgba(0,0,0,0.75); } .btn-or { box-shadow: 0 8px 24px -10px rgba(201,169,97,0.45); } .btn-or:hover { box-shadow: 0 12px 30px -10px rgba(201,169,97,0.55); } .btn:active { transform: translateY(0) scale(.98); } /* Curseurs raffinés */ .champ input[type="range"] { -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 0%, rgba(255,255,255,0.12) 0%); border-radius: 4px; height: 5px; } .champ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--noir-2); box-shadow: 0 0 0 1px var(--accent), 0 4px 10px rgba(0,0,0,.5); cursor: grab; transition: transform .15s; } .champ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } .champ input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); } .champ input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--noir-2); cursor: grab; } .champ input[type="range"]::-moz-range-track { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.12); } /* Barres comparatives dans les résultats */ .graf { margin: 12px 0 4px; } .graf-ligne { margin-bottom: 10px; } .graf-tete { display: flex; justify-content: space-between; font-size: 12px; color: var(--texte-2); margin-bottom: 5px; } .graf-tete b { font-family: var(--mono); font-weight: 500; color: var(--creme); } .graf-barre { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; } .graf-barre i { display: block; height: 100%; border-radius: 6px; transition: width .45s cubic-bezier(.22,.61,.36,1); } .gb-or { background: linear-gradient(90deg, var(--or), var(--or-clair)); } .gb-vert { background: linear-gradient(90deg, #2d6a4f, var(--vert)); } .gb-rouge { background: linear-gradient(90deg, #8e2f24, var(--rouge)); } .gb-accent{ background: linear-gradient(90deg, var(--accent), var(--or-clair)); } /* Hero signature : courbe de croissance patrimoniale animée (CSS pur) */ .hero-courbe { position: absolute; right: -4%; bottom: 0; width: 58%; max-width: 760px; height: auto; opacity: .9; pointer-events: none; } @media (max-width: 860px) { .hero-courbe { width: 100%; right: 0; opacity: .45; } } .hc-trace { fill: none; stroke: url(#hc-grad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: hc-dessin 2.2s .3s ease-out forwards; } .hc-aire { fill: url(#hc-aire); opacity: 0; animation: hc-fondu 1.2s 1.6s ease forwards; } .hc-point { fill: var(--or-clair); opacity: 0; animation: hc-fondu .5s ease forwards; } .hc-point:nth-of-type(3) { animation-delay: 1.1s; } .hc-point:nth-of-type(4) { animation-delay: 1.6s; } .hc-point:nth-of-type(5) { animation-delay: 2.1s; } .hc-grille { stroke: rgba(255,255,255,0.05); stroke-width: 1; } @keyframes hc-dessin { to { stroke-dashoffset: 0; } } @keyframes hc-fondu { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hc-trace { stroke-dashoffset: 0; animation: none; } .hc-aire, .hc-point { opacity: 1; animation: none; } } /* Verre discret sur la nav au scroll (déjà translucide) + liseré or */ .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,169,97,0.45), transparent); } /* Valeurs animées : légère mise en évidence pendant le comptage */ .rv[data-anim] { transition: color .3s; } /* ---------- Courbe de gains dans les simulateurs ---------- */ .courbe { margin: 16px 0 6px; background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 12px; padding: 14px 14px 10px; } .courbe svg { width: 100%; height: 150px; display: block; } .c-grille { stroke: rgba(255,255,255,0.12); stroke-width: 1; } .c-aire { fill: var(--accent); opacity: .10; } .c-capital { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; } .c-verse { fill: none; stroke: rgba(245,241,232,0.35); stroke-width: 1.6; stroke-dasharray: 5 5; } .c-pt { fill: var(--or-clair); } .c-anim .c-capital { stroke-dasharray: 900; stroke-dashoffset: 900; animation: c-dessin 1.4s .1s ease-out forwards; } .c-anim .c-aire { opacity: 0; animation: c-aire .8s 1s ease forwards; } @keyframes c-dessin { to { stroke-dashoffset: 0; } } @keyframes c-aire { to { opacity: .10; } } @media (prefers-reduced-motion: reduce) { .c-anim .c-capital { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } .c-anim .c-aire { opacity: .10; animation: none; } } .c-axe { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--texte-3); font-family: var(--mono); margin-top: 2px; } .c-legende { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--texte-2); } .c-legende b { font-family: var(--mono); font-weight: 500; color: var(--creme); } .c-legende i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; } .c-l-cap { background: var(--accent); } .c-l-ver { background: rgba(245,241,232,0.35); } /* ============================================================ V4 — IDENTITÉ NAVY · OR · CRÈME (charte personnelle RCC) Remplace la base noire par un navy profond, ajoute la trame « papier millimétré » et des finitions de studio. ============================================================ */ :root { --noir: #0c1322; --noir-2: #121b30; --surface: rgba(244,241,234,0.045); --bord: rgba(201,169,97,0.24); --bord-fin: rgba(244,241,234,0.10); --creme: #f4f1ea; --texte: rgba(244,241,234,0.92); --texte-2: rgba(244,241,234,0.64); --texte-3: rgba(244,241,234,0.55); } .u-tech { --accent: #86abd8; --accent-fond: rgba(134,171,216,0.10); } .u-sante { --accent: #83bfa2; --accent-fond: rgba(131,191,162,0.10); } body { background: radial-gradient(1100px 700px at 88% -12%, rgba(201,169,97,0.09), transparent 62%), radial-gradient(950px 650px at -12% 112%, rgba(70,102,160,0.14), transparent 60%), linear-gradient(180deg, #0e1628 0%, #0a1120 55%, #0b1224 100%); background-attachment: fixed; } /* Trame papier millimétré, fondue vers le bas — signature fintech premium */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(244,241,234,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,234,0.028) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% -5%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 95% 75% at 50% -5%, #000 0%, transparent 78%); } main, footer { position: relative; z-index: 1; } .nav { position: fixed; z-index: 100; } .nav { background: rgba(11,17,31,0.86); border-bottom-color: rgba(201,169,97,0.22); } .section-alt { background: rgba(244,241,234,0.024); border-top: 1px solid var(--bord-fin); border-bottom: 1px solid var(--bord-fin); } footer { background: rgba(9,14,26,0.7); } /* Typo studio : eyebrow avec filet or, titres resserrés */ .eyebrow { display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--accent); flex: none; } h1, .h1 { letter-spacing: -0.6px; } h2 { letter-spacing: -0.3px; } /* Cartes : dégradé de matière + filet lumineux en tête */ .porte, .sim, .encart, .capture, .stat, .article-carte, .etape, .faq details { background: linear-gradient(165deg, rgba(244,241,234,0.062), rgba(244,241,234,0.018)); } .sim, .capture { border-color: rgba(201,169,97,0.28); } .sim::before, .capture::before, .encart::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,169,97,0.55), transparent); } .sim, .capture, .encart { position: relative; overflow: hidden; } /* Bouton or biseauté */ .btn-or { background: linear-gradient(180deg, #e6cd8e 0%, #c9a961 55%, #b6924b 100%); color: #121a2c; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 28px -10px rgba(201,169,97,0.55); } .btn-or:hover { background: linear-gradient(180deg, #f0d9a0 0%, #d4b56d 55%, #c09c53 100%); } .btn-ligne:hover { background: rgba(201,169,97,0.07); } /* Liens de navigation : soulignement or au survol */ .nav-links a { position: relative; } .nav-links a:not(.nav-cta)::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .nav-links a:not(.nav-cta):hover::after, .nav-links a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); } .nav-links a:hover, .nav-links a[aria-current="page"] { background: transparent; } /* Tableau compact pour la stratégie de sortie AV */ .t-mini { border: 1px solid var(--bord); border-radius: 12px; overflow-x: auto; overflow-y: hidden; margin: 12px 0 4px; -webkit-overflow-scrolling: touch; } .t-mini table { min-width: 0; font-size: 13px; } .t-mini th { padding: 9px 12px; font-size: 10.5px; } .t-mini td { padding: 9px 12px; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; } .t-mini td:first-child { font-family: var(--sans); color: var(--texte-2); } .t-mini .t-or { color: var(--or-clair); } .t-mini .t-vert { color: var(--vert); font-weight: 600; } /* ---------- Fond 3D animé ---------- */ #fond3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; /* fondu : la nappe vit dans la moitié basse, le texte reste net en haut */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 42%, #000 78%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 42%, #000 78%); } /* La trame millimétrée passe en soutien discret sous la nappe */ body::before { opacity: .55; } /* ---------- Suggestion capacité d'épargne dans l'AV ---------- */ .av-suggestion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--vert-fond); border: 1px solid var(--vert-bord); font-size: 13px; color: var(--texte-2); } .av-suggestion b { font-family: var(--mono); font-weight: 500; color: var(--vert); } .btn-mini { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--vert-bord); background: transparent; color: var(--vert); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: background .2s; } .btn-mini:hover { background: rgba(45,106,79,0.18); } /* ---------- Répartition des parts entre dirigeants ---------- */ .dir-part-ligne { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .dir-part-ligne span { font-size: 13px; color: var(--texte-2); min-width: 92px; } .dir-part-ligne b { color: var(--texte-3); font-weight: 500; } .dir-part-ligne input { width: 84px; background: rgba(255,255,255,0.06); border: 1px solid var(--bord-fin); border-radius: 8px; color: var(--creme); font-family: var(--mono); font-size: 14px; padding: 8px 10px; } .dir-note-parts { font-size: 11.5px; color: var(--texte-3); font-style: italic; margin: 2px 0 16px; } /* ---------- Fiches dirigeants (part + situation + enfants) ---------- */ .dir-fiche { background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .dir-fiche-titre { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .dir-fiche-grille { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .dir-fiche-grille label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texte-2); } .dir-fiche-grille input { width: 64px; background: rgba(255,255,255,0.06); border: 1px solid var(--bord-fin); border-radius: 8px; color: var(--creme); font-family: var(--mono); font-size: 13px; padding: 7px 9px; } .dir-fiche-grille select { flex: 1; min-width: 150px; background: rgba(255,255,255,0.06); border: 1px solid var(--bord-fin); border-radius: 8px; color: var(--creme); font-family: var(--sans); font-size: 13px; padding: 7px 9px; cursor: pointer; } /* Ligne versement PER personnel dans la fiche dirigeant */ .dir-fiche-pp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bord-fin); font-size: 12.5px; color: var(--texte-2); } .dir-fiche-pp strong { color: var(--vert); } .dir-fiche-pp b { color: var(--texte-3); font-weight: 500; } .dir-fiche-pp input { width: 96px; background: rgba(255,255,255,0.06); border: 1px solid var(--vert-bord); border-radius: 8px; color: var(--creme); font-family: var(--mono); font-size: 13px; padding: 7px 9px; } /* ---------- Baseline sous le logo (nav) ---------- */ .nav-bloc { display: flex; flex-direction: column; line-height: 1.15; } .nav-baseline { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--texte-3); margin-top: 1px; } /* ---------- Baseline sous la marque (footer) ---------- */ .footer-baseline { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--or); margin: -6px 0 10px; } /* ---------- Bloc "pourquoi ce nom" (accueil) ---------- */ .nom-bloc { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; } .nom-mots { display: flex; gap: 18px; flex-shrink: 0; } .nom-mot { text-align: center; min-width: 110px; } .nom-mot-lat { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--or-clair); display: block; } .nom-mot-sep { align-self: center; color: var(--texte-3); font-size: 20px; } .nom-mot-fr { font-size: 12px; color: var(--texte-3); display: block; margin-top: 4px; } .nom-texte { flex: 1; min-width: 260px; } @media (max-width: 640px) { .nom-bloc { flex-direction: column; } } /* ---------- Bloc protection & transmission (duo de cartes) ---------- */ .duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 28px; } .duo-carte { background: var(--surface); border: 1px solid var(--bord-fin); border-radius: 14px; padding: 26px 26px 22px; position: relative; overflow: hidden; } .duo-carte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--or), transparent 70%); } .duo-carte h3 { font-family: var(--serif); font-size: 20px; color: var(--creme); margin: 0 0 12px; } .duo-carte p { font-size: 14px; line-height: 1.65; color: var(--texte-2); margin: 0 0 10px; } .duo-carte p:last-child { margin-bottom: 0; } .duo-chiffre { font-family: var(--mono); color: var(--or-clair); font-weight: 500; white-space: nowrap; } .duo-note { font-size: 11.5px; color: var(--texte-3); font-style: italic; margin-top: 14px; } /* ---------- Logo signature (pièce + courbe) ---------- */ .nav-logo { display: flex; align-items: center; gap: 11px; } .logo-marque { width: 36px; height: 36px; flex-shrink: 0; } .nav-bloc { display: flex; flex-direction: column; line-height: 1.15; } .logo-footer { width: 30px; height: 30px; margin-bottom: 8px; display: block; } /* ============================================================ V9 — REFRESH 2026 : verre dépoli, lueur animée, typo dramatique Surcouche : réutilise les classes existantes, ne casse rien. ============================================================ */ :root { --ease9: cubic-bezier(.2,.7,.2,1); } /* Lueur d'ambiance animée, derrière tout le contenu */ body::after { content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none; opacity: .45; background: radial-gradient(38% 40% at 18% 26%, rgba(201,169,97,.22), transparent 70%), radial-gradient(36% 46% at 82% 15%, rgba(74,120,190,.18), transparent 72%), radial-gradient(44% 42% at 66% 90%, rgba(47,211,160,.12), transparent 72%); filter: blur(50px); animation: aurora9 24s ease-in-out infinite alternate; } @keyframes aurora9 { 0% { transform: translate3d(-3%,-2%,0) scale(1); } 100% { transform: translate3d(4%,3%,0) scale(1.14); } } /* Typographie dramatique + mots-clés en dégradé or */ h1, .h1 { font-weight: 600; letter-spacing: -1.4px; line-height: 1.03; } .hero h1 { font-size: clamp(46px, 7vw, 82px); } .hero h1, .hero .lede { max-width: 640px; } h1 em, h2 em { font-style: italic; background: linear-gradient(100deg, #f2dda6, #c9a961 52%, #e8cd8f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--or-clair); } .stat-n, .proj-montant { background: linear-gradient(100deg, #f2dda6, #c9a961); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Verre dépoli + relief sur toutes les cartes */ .porte, .sim, .capture, .stat, .article-carte, .encart, .etape, .duo-carte, .faq details { background: linear-gradient(158deg, rgba(244,241,234,.075), rgba(244,241,234,.02)) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(244,241,234,.11); border-radius: 16px; transition: transform .35s var(--ease9), border-color .35s, box-shadow .35s; } .porte:hover, .article-carte:hover, .duo-carte:hover { transform: translateY(-6px); border-color: rgba(201,169,97,.5); box-shadow: 0 30px 64px -28px rgba(0,0,0,.9), 0 0 44px -14px rgba(201,169,97,.3); } /* Boutons or : halo lumineux vivant */ .btn-or { border-radius: 11px; box-shadow: 0 10px 30px -10px rgba(201,169,97,.5); transition: transform .2s, box-shadow .35s; } .btn-or:hover { transform: translateY(-2px); box-shadow: 0 18px 48px -12px rgba(201,169,97,.75), 0 0 34px -6px rgba(232,205,143,.55); } /* Navigation ultra-verre */ .nav { background: rgba(11,17,31,.55) !important; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); } /* Halo doré derrière la pièce 3D */ #coin3d { filter: drop-shadow(0 0 70px rgba(201,169,97,.4)); } /* Plus d'air entre les sections */ .section { padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(72px, 10vw, 128px); } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } /* ============================================================ V10 — MODE FUTURISTE : néon, panneaux lumineux, dégradés vivants ============================================================ */ /* Aurora renforcée */ body::after { opacity: .62; } /* Filet dégradé animé sous la navigation */ .nav { position: fixed; } .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,169,97,.85), rgba(47,211,160,.5), rgba(201,169,97,.85), transparent); background-size: 200% 100%; animation: navline 7s linear infinite; } @keyframes navline { to { background-position: 200% 0; } } /* Titres en dégradé or lumineux (avec repli si non supporté) */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { h1, .h1, h2, .sim-titre { background: linear-gradient(100deg, #fff4d8 0%, #e8cd8f 38%, #c9a961 68%, #f0dca2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } h1 em, h2 em { -webkit-text-fill-color: transparent; } } /* Panneaux clés : anneau + halo lumineux */ .sim, .capture, .encart, .r-cle { box-shadow: 0 0 0 1px rgba(201,169,97,.20), 0 24px 60px -30px rgba(0,0,0,.9), 0 0 64px -22px rgba(201,169,97,.28) !important; } .r-cle-rouge { box-shadow: 0 0 0 1px rgba(232,120,120,.30), 0 22px 54px -28px rgba(0,0,0,.9), 0 0 54px -18px rgba(232,120,120,.30) !important; } /* Grands nombres qui rayonnent */ .stat-n, .rv, .champ-val, .proj-montant, .duo-chiffre { text-shadow: 0 0 22px rgba(201,169,97,.28); } /* Champs & sliders néon */ .champ input, .champ select, input[type="number"], input[type="text"], select { background: rgba(244,241,234,.05) !important; border: 1px solid rgba(201,169,97,.26) !important; transition: border-color .2s, box-shadow .2s; } .champ input:focus, .champ select:focus, input:focus, select:focus { border-color: var(--or) !important; box-shadow: 0 0 0 3px rgba(201,169,97,.16), 0 0 20px -4px rgba(201,169,97,.55) !important; outline: none !important; } input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 14px rgba(201,169,97,.75) !important; } input[type="range"]::-moz-range-thumb { box-shadow: 0 0 14px rgba(201,169,97,.75) !important; } /* Boutons : dégradé + halo renforcé */ .btn-or { background: linear-gradient(100deg, #f0dca2, #c9a961 55%, #d8ba6a) !important; } @media (prefers-reduced-motion: reduce) { .nav::after { animation: none; } } /* ============================================================ V11 — WAOUH : révélation scroll, spot souris, tilt 3D, entrée héro ============================================================ */ .fx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .fx-reveal.fx-in { opacity: 1; transform: none; } .fx-spot { position: fixed; top: 0; left: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, rgba(201,169,97,.13), rgba(201,169,97,0) 60%); mix-blend-mode: screen; transition: opacity .4s; will-change: transform; } .porte, .article-carte, .capture, .stat, .duo-carte { will-change: transform; transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; } .btn-or, .nav-cta { will-change: transform; } /* Entrée du héro en cascade (pur CSS, sans dépendance JS) */ .hero .wrap > * { animation: fxRise .85s cubic-bezier(.2,.7,.2,1) backwards; } .hero .eyebrow { animation-delay: .05s; } .hero h1 { animation-delay: .16s; } .hero .lede { animation-delay: .32s; } .hero .btn { animation-delay: .46s; } @keyframes fxRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* Bordure dorée rotative sur les cartes de capture de leads */ @property --fxang { syntax: ''; inherits: false; initial-value: 0deg; } @supports (background: conic-gradient(from 0deg, red, blue)) { .capture { position: relative; } .capture::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--fxang, 0deg), transparent 0%, rgba(232,205,143,.85) 12%, transparent 30%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fxspin 5.5s linear infinite; } } @keyframes fxspin { to { --fxang: 360deg; } } @media (prefers-reduced-motion: reduce) { .hero .wrap > * { animation: none; } .capture::after { animation: none; } .fx-reveal { opacity: 1 !important; transform: none !important; transition: none; } } /* ============================================================ V12 — BONUS : ecran d'intro + particules constellation ============================================================ */ #fx-intro{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 42%,#13223d,#080b12 70%);animation:fxIntro 1.9s ease forwards;} #fx-intro .fx-i-logo{font-family:var(--serif);font-size:clamp(34px,6vw,58px);color:var(--creme);letter-spacing:.5px;opacity:0;animation:fxIntroLogo 1.75s ease forwards;} #fx-intro .fx-i-logo em{font-style:italic;background:linear-gradient(100deg,#f2dda6,#c9a961);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} #fx-intro .fx-i-sub{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--or);opacity:0;animation:fxIntroLogo 1.75s .15s ease forwards;} @keyframes fxIntro{0%,60%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}} @keyframes fxIntroLogo{0%{opacity:0;transform:translateY(10px)}28%,68%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}} #fx-particles{position:absolute;inset:0;z-index:0;pointer-events:none;} @media (prefers-reduced-motion: reduce){#fx-intro{display:none!important}}