/* ============================================================ Solivalis — Page d'accueil premium (montée en gamme) Chargée uniquement sur la front page (voir functions.php). Palette et polices partagées via main.css (:root). Préfixe .sv-fp pour isoler du reste du site. ============================================================ */ .sv-fp{ --fp-maxw: 1200px; --fp-sh-card: 0 34px 90px -40px rgba(23, 35, 63, 0.34); position: relative; overflow: hidden; /* Fond de base = crème chaud du mockup (--bg de la maquette), pas le blanc du thème ni son fond bleuté. */ background: #FCFAF5; color: var(--ink-navy); font-size: 17px; line-height: 1.62; } /* Le thème applique par défaut sur un fond bleuté avec des dégradés fixes ; sur la home on rétablit le fond crème plein du mockup, et on supprime l'espace que le thème insère avant le footer (margin-top:60px). */ body.home{ background: #FCFAF5; } body.home .site-footer{ margin-top: 0; } .sv-fp em{ font-style: italic; } /* — Utilitaires — */ .sv-serif{ font-family: var(--font-display); font-weight: 600; line-height: 1.02; } .sv-eyebrow{ font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .sv-gold-text{ background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sv-divider{ display: flex; align-items: center; gap: 14px; margin: 0 0 24px; } .sv-divider span:first-child{ width: 44px; height: 1px; background: var(--gold); } .sv-divider span:last-child{ width: 7px; height: 7px; background: var(--gold); border-radius: 50%; transform: rotate(45deg); } .sv-pad{ padding: 78px 46px; } /* — Boutons — */ .sv-btn-gold{ display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; border-radius: 12px; font-family: var(--font-body); font-weight: 600; font-size: 16px; border: none; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); box-shadow: var(--sh-gold-lg); transition: transform .2s ease, box-shadow .2s ease; } .sv-btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 26px 60px -16px rgba(201, 162, 39, 0.6); color: #fff; } .sv-link-under{ font-size: 14.5px; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; transition: color .2s ease; } .sv-link-under:hover{ color: var(--blue); } /* — Mention prix — */ .sv-pricenote{ display: flex; flex-direction: column; gap: 4px; } .sv-pricenote-main{ display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; } .sv-pricenote-main svg{ width: 16px; height: 16px; stroke: var(--ink-mute); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .sv-pricenote-sub{ font-size: 12px; font-style: italic; color: var(--ink-mute); padding-left: 25px; } /* ============== HERO ============== */ .sv-hero-sec{ position: relative; background: linear-gradient(180deg, var(--cream) 0%, #FCFAF4 100%); } .sv-hero-glow{ position: absolute; top: -140px; right: -120px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 40%, rgba(201, 162, 39, 0.14), transparent 62%); } .sv-hero{ position: relative; max-width: var(--fp-maxw); margin: 0 auto; padding: 78px 46px 84px; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items: center; } .sv-hero h1{ font-size: clamp(48px, 6vw, 88px); font-weight: 600; line-height: 0.98; margin-bottom: 26px; text-wrap: balance; color: var(--ink-navy); } .sv-hero h1 span{ display: block; } .sv-hero-eyebrow{ display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; } .sv-hero-sub{ font-size: 18.5px; color: var(--ink-soft); max-width: 470px; margin-bottom: 36px; line-height: 1.66; } .sv-trio{ display: flex; gap: 34px; margin-bottom: 38px; } .sv-trio-item{ display: flex; align-items: flex-start; gap: 12px; } .sv-trio-ico{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--gold-tint); border: 1px solid var(--gold-soft); display: flex; align-items: center; justify-content: center; } .sv-trio-ico svg{ width: 22px; height: 22px; stroke: var(--gold-deep); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .sv-trio-title{ font-size: 14.5px; font-weight: 600; color: var(--ink-navy); line-height: 1.3; } .sv-trio-sub{ font-size: 13px; color: var(--ink-mute); margin-top: 2px; } .sv-cta-btns{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .sv-hero-note{ margin-top: 24px; } .sv-hero-visual{ position: relative; } .sv-hero-ring{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } .sv-hero-ring--halo{ width: 118%; height: 118%; background: radial-gradient(circle, var(--blue-light) 0%, rgba(220, 228, 251, 0.35) 42%, transparent 66%); } .sv-hero-ring--solid{ width: 104%; height: 104%; border: 1px solid var(--gold-soft); } .sv-hero-ring--dash{ width: 128%; height: 128%; border: 1px dashed rgba(201, 162, 39, 0.4); } .sv-hero-imgwrap{ position: relative; width: 100%; aspect-ratio: 4 / 5; } .sv-hero-imgwrap img{ width: 100%; height: 100%; object-fit: contain; } /* ============== FORCES (intro) ============== */ .sv-forces{ position: relative; z-index: 1; padding: 104px 46px 52px; } .sv-forces-inner{ max-width: var(--fp-maxw); margin: 0 auto; } .sv-forces-head{ text-align: center; max-width: 760px; margin: 0 auto; } .sv-forces h2{ font-size: clamp(36px, 4.6vw, 64px); font-weight: 600; line-height: 1.04; margin-top: 16px; text-wrap: balance; color: var(--ink-navy); } .sv-forces-rule{ width: 90px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--gold)); margin: 22px auto 26px; } .sv-forces p{ font-size: 17px; color: var(--ink-soft); line-height: 1.7; max-width: 600px; margin: 26px auto 22px; } .sv-forces-list{ list-style: none; display: inline-flex; flex-direction: column; gap: 6px; text-align: left; } .sv-forces-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-soft); } .sv-forces-list li span{ color: var(--gold); font-weight: 800; flex-shrink: 0; } /* ============== SIGNATURE (bandeau) ============== */ .sv-sig-sec{ position: relative; overflow: hidden; color: #fff; background: linear-gradient(115deg, var(--blue) 0%, #4B6FE0 38%, var(--gold) 100%); } .sv-sig-blob{ position: absolute; border-radius: 50%; pointer-events: none; } .sv-sig-blob--a{ top: -80px; left: -40px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%); } .sv-sig-blob--b{ bottom: -90px; right: -30px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%); } .sv-sig{ position: relative; max-width: var(--fp-maxw); margin: 0 auto; padding: 60px 46px; text-align: center; } .sv-sig-eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } .sv-sig-title{ font-size: clamp(34px, 5vw, 60px); font-weight: 600; line-height: 1.05; margin: 14px 0 16px; color: #fff; } .sv-sig-title em{ color: #FCE9BD; } .sv-sig p{ font-size: 18px; color: rgba(255, 255, 255, 0.92); line-height: 1.6; max-width: 640px; margin: 0 auto; } .sv-sig p strong{ color: #fff; font-weight: 700; } /* ============== SPLIT OCEAN / RIASEC ============== */ .sv-split{ position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; } .sv-splitcol{ position: relative; overflow: hidden; display: flex; } .sv-splitcol--ocean{ background: linear-gradient(160deg, #EEF3FE 0%, #FBFCFF 100%); justify-content: flex-end; } .sv-splitcol--riasec{ background: linear-gradient(160deg, #FBF4E4 0%, #FFFDF8 100%); justify-content: flex-start; } .sv-splitpad{ position: relative; width: 100%; max-width: calc(var(--fp-maxw) / 2); padding: 64px 48px; } .sv-splitpad--ocean > div{ padding-left: 80px; } .sv-splitpad--riasec > div{ padding-right: 80px; } .sv-split-kicker{ font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; } .sv-splitcol--ocean .sv-split-kicker{ color: var(--blue); } .sv-splitcol--riasec .sv-split-kicker{ color: var(--gold); } .sv-splitpad h3{ font-family: var(--font-display); font-size: 32px; font-weight: 600; margin-bottom: 12px; color: var(--ink-navy); } .sv-splitpad > div > p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 26px; max-width: 320px; } .sv-trait{ display: flex; align-items: baseline; gap: 18px; padding: 14px 12px; border-radius: 12px; } .sv-splitcol--ocean .sv-trait{ border-bottom: 1px solid rgba(37, 99, 235, 0.12); } .sv-splitcol--riasec .sv-trait{ padding: 12px; border-bottom: 1px solid rgba(201, 162, 39, 0.16); } .sv-trait-k{ font-family: var(--font-display); flex-shrink: 0; width: 38px; font-size: 40px; font-weight: 600; line-height: 0.8; } .sv-splitcol--ocean .sv-trait-k{ background: linear-gradient(135deg, var(--blue), var(--blue-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sv-splitcol--riasec .sv-trait-k{ background: linear-gradient(135deg, var(--gold), var(--gold-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sv-trait-v{ font-family: var(--font-display); display: block; font-size: 20px; font-weight: 600; color: var(--ink-navy); line-height: 1.1; } .sv-trait-d{ display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; } /* décors des colonnes */ .sv-split-deco{ position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; } .sv-ocean-deco1{ left: -120px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, 0.14), transparent 68%); } .sv-ocean-deco2{ left: -90px; width: 210px; height: 210px; border-radius: 50%; border: 22px solid var(--blue-tint, #DCE4FB); opacity: 0.6; } .sv-ocean-deco3{ left: -64px; width: 150px; height: 150px; border-radius: 50%; border: 14px solid rgba(37, 99, 235, 0.24); } .sv-ocean-deco4{ left: -108px; width: 264px; height: 264px; border-radius: 50%; border: 1px dashed rgba(37, 99, 235, 0.3); animation: sv-spin 44s linear infinite; } .sv-riasec-deco1{ right: -110px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, 0.16), transparent 68%); } .sv-riasec-deco2{ right: -70px; width: 170px; height: 170px; border-radius: 26px; transform: translateY(-50%) rotate(45deg); background: linear-gradient(135deg, var(--gold-bright), rgba(201, 162, 39, 0.35)); box-shadow: 0 20px 50px -16px rgba(201, 162, 39, 0.6); } .sv-riasec-deco3{ right: -44px; width: 120px; height: 120px; border-radius: 18px; transform: translateY(-50%) rotate(45deg); border: 2px solid var(--gold); opacity: 0.55; } .sv-riasec-deco4{ right: -96px; width: 230px; height: 230px; border-radius: 34px; transform: translateY(-50%) rotate(45deg); border: 1px dashed rgba(201, 162, 39, 0.4); animation: sv-spin 40s linear infinite reverse; } @keyframes sv-spin{ from{ transform: translateY(-50%) rotate(0); } to{ transform: translateY(-50%) rotate(360deg); } } /* ============== CTA (horizon) ============== */ .sv-cta-sec{ position: relative; z-index: 1; padding: 0; } .sv-cta-frame{ position: relative; overflow: hidden; box-shadow: var(--fp-sh-card); border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); } .sv-cta-bg{ position: absolute; inset: 0; } .sv-cta-bg img{ width: 100%; height: 100%; object-fit: cover; } .sv-cta-overlay{ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(251, 247, 238, 0.96) 0%, rgba(251, 247, 238, 0.86) 40%, rgba(251, 247, 238, 0.15) 72%, transparent 100%); } .sv-cta-wrap{ position: relative; max-width: var(--fp-maxw); margin: 0 auto; padding: 0 46px; } .sv-cta-inner{ position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; padding: 72px 14px; } .sv-cta-inner h2{ font-size: clamp(32px, 4vw, 54px); font-weight: 600; line-height: 1.05; margin: 18px 0 30px; max-width: 520px; text-wrap: balance; color: var(--ink-navy); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1000px){ .sv-hero{ grid-template-columns: 1fr; gap: 40px; padding: 56px 32px 64px; } .sv-hero-visual{ max-width: 400px; margin: 0 auto; } .sv-split{ grid-template-columns: 1fr; } .sv-splitcol{ justify-content: center; } .sv-splitpad{ max-width: 640px; padding: 64px 40px; } .sv-splitpad > div{ padding-left: 0; padding-right: 0; } .sv-cta-inner{ grid-template-columns: 1fr; padding: 60px 8px; } .sv-pad{ padding: 72px 32px; } .sv-trio{ gap: 20px 30px; } .sv-split-deco{ display: none; } } @media (max-width: 600px){ .sv-fp{ font-size: 16px; } .sv-hero{ padding: 36px 20px 48px; gap: 34px; } .sv-hero-visual{ max-width: 300px; } .sv-hero h1{ font-size: clamp(38px, 10vw, 52px); } .sv-pad{ padding: 56px 20px; } .sv-trio{ flex-direction: column; gap: 16px; } .sv-cta-btns{ flex-direction: column; align-items: stretch; gap: 14px; } .sv-cta-btns .sv-btn-gold{ justify-content: center; width: 100%; padding: 18px 20px; font-size: 15px; } .sv-splitpad{ padding: 52px 24px; } .sv-sig{ padding: 48px 24px; } .sv-cta-inner{ padding: 48px 4px; } }