/* ============================================================================= HOME — REFONTE 2026 Fichier NOUVEAU. Aucun style existant n'est modifié : toutes les classes utilisent le préfixe .hv3- et sont portées par . Chargé après style.css / global-style.css (voir home_v2.php). SOMMAIRE 0. Variables & réglages de page 1. Éléments génériques (wrap, titres, boutons, pills, listes) 2. Hero 3. Parcours en 3 étapes (les 3 services) 4. Sections "méthode" (blocs alternés) 5. Section diagnostic (ce que vous obtenez) 6. Réassurance 7. FAQ 8. Bandeau CTA final 9. Animations d'apparition 10. Responsive ============================================================================= */ /* ============================================================================= 0. VARIABLES & RÉGLAGES DE PAGE ============================================================================= */ .hv3-page { /* Palette du site */ --hv3-navy: #181457; --hv3-muted: #797CA4; --hv3-border: #E6E5F1; --hv3-white: #FFFFFF; --hv3-soft: #F7F7FC; /* Étape 1 — Évaluer mon projet immo (violet, cf. bouton header + tunnel) */ --hv3-c1: #6C4BC2; --hv3-c1-dark: #57399F; --hv3-c1-soft: #F3EFFD; --hv3-c1-grad: linear-gradient(to right, #6C4BC2 0%, #9B85E0 50%, #6C4BC2 200%); /* Étape 2 — Trouver mon lieu idéal (rose brand) */ --hv3-c2: #FF1C60; --hv3-c2-soft: #FFF0F4; --hv3-c2-grad: linear-gradient(to right, #FF1C60 0%, #FE6A56 51%, #FF1C60 100%); /* Étape 3 — Analyser un quartier (turquoise brand ; version foncée pour le texte) */ --hv3-c3: #0FA99B; --hv3-c3-bright: #22DAD2; --hv3-c3-soft: #E7FAF7; --hv3-c3-grad: linear-gradient(to right, #22DAD2 0%, #3BE8B0 50%, #22DAD2 200%); --hv3-radius: 22px; --hv3-radius-sm: 14px; --hv3-shadow: 0 22px 46px -26px rgba(24, 20, 87, .45); --hv3-shadow-sm: 0 12px 26px -16px rgba(24, 20, 87, .40); --hv3-ease: .28s cubic-bezier(.4, 0, .2, 1); } /* Le dégradé du hero part du haut de la page : il passe donc aussi derrière le header fixe, dont on aligne le fond. */ .hv3-page .fixed-header-wrapper { background: #F3F0FE; } .hv3-page main.hv3-main { background-color: #FFFFFF; background-image: linear-gradient(180deg, #F3F0FE 0%, #F7F5FE 42%, #FFFFFF 100%); background-repeat: no-repeat; background-size: 100% 1120px; margin-bottom: 0 !important; overflow-x: hidden; } .hv3-page ::selection { background: rgba(108, 75, 194, .18); } /* ============================================================================= 1. ÉLÉMENTS GÉNÉRIQUES ============================================================================= */ .hv3-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .hv3-wrap-narrow { max-width: 860px; } .hv3-section { padding: 92px 0; position: relative; } .hv3-section-soft { background: var(--hv3-soft); } .hv3-section-p1 { background: linear-gradient(180deg, #F6F3FE 0%, #F2EEFD 100%); } .hv3-section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; } /* ---- Typographie ---- */ .hv3-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hv3-muted); margin-bottom: 14px; } .hv3-eyebrow-p1 { color: var(--hv3-c1); } .hv3-h1 { font-weight: 800; font-size: 54px; line-height: 1.08; letter-spacing: -1.2px; color: var(--hv3-navy); margin: 0 0 20px; } .hv3-h1-accent { background-image: linear-gradient(100deg, #6C4BC2 0%, #FF1C60 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #6C4BC2; } .hv3-h2 { font-weight: 700; font-size: 38px; line-height: 1.18; letter-spacing: -.6px; color: var(--hv3-navy); margin: 0 0 16px; } .hv3-h2-light { color: #FFFFFF; } .hv3-h3 { font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -.4px; color: var(--hv3-navy); margin: 0 0 16px; } .hv3-h4 { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--hv3-navy); margin: 0 0 8px; } .hv3-lead { font-size: 17px; line-height: 1.65; color: var(--hv3-muted); margin: 0; } .hv3-lead-light { color: rgba(255, 255, 255, .78); } .hv3-p { font-size: 16px; line-height: 1.75; color: var(--hv3-muted); margin: 0 0 22px; } .hv3-p strong { color: var(--hv3-navy); font-weight: 600; } .hv3-note { font-size: 13px; line-height: 1.5; color: var(--hv3-muted); margin: 14px 0 0; } .hv3-note-light { color: rgba(255, 255, 255, .6); } /* ---- Boutons ---- */ .hv3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 100px; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; background-size: 200% auto; transition: background-position .5s ease, transform var(--hv3-ease), box-shadow var(--hv3-ease); } .hv3-btn:hover { background-position: right center; transform: translateY(-2px); text-decoration: none; } .hv3-btn-lg { padding: 18px 34px; font-size: 16px; } .hv3-btn-arrow { display: inline-block; transition: transform var(--hv3-ease); } .hv3-btn:hover .hv3-btn-arrow { transform: translateX(4px); } .hv3-btn-p1 { color: #FFFFFF; background-image: var(--hv3-c1-grad); box-shadow: 0 8px 20px -6px rgba(108, 75, 194, .6); } .hv3-btn-p1:hover { color: #FFFFFF; box-shadow: 0 14px 26px -8px rgba(108, 75, 194, .68); } .hv3-btn-p2 { color: #FFFFFF; background-image: var(--hv3-c2-grad); box-shadow: 0 8px 20px -6px rgba(255, 28, 96, .55); } .hv3-btn-p2:hover { color: #FFFFFF; box-shadow: 0 14px 26px -8px rgba(255, 28, 96, .62); } .hv3-btn-p3 { color: #FFFFFF; background-image: var(--hv3-c3-grad); box-shadow: 0 8px 20px -6px rgba(34, 218, 210, .6); } .hv3-btn-p3:hover { color: #FFFFFF; box-shadow: 0 14px 26px -8px rgba(34, 218, 210, .68); } .hv3-btn-ghost { color: var(--hv3-navy); background: #FFFFFF; border: 1.5px solid var(--hv3-border); box-shadow: 0 8px 20px -14px rgba(24, 20, 87, .5); } .hv3-btn-ghost:hover { color: var(--hv3-c1); border-color: rgba(108, 75, 194, .45); } .hv3-btn-light { color: var(--hv3-c1-dark); background: #FFFFFF; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); } .hv3-btn-light:hover { color: var(--hv3-c1-dark); } /* ---- Pills d'étape ---- */ .hv3-pill { display: inline-block; padding: 7px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 16px; } .hv3-pill-1 { color: var(--hv3-c1); background: var(--hv3-c1-soft); } .hv3-pill-2 { color: var(--hv3-c2); background: var(--hv3-c2-soft); } .hv3-pill-3 { color: var(--hv3-c3); background: var(--hv3-c3-soft); } /* ---- Listes à puces "check" ---- */ .hv3-list { list-style: none; padding: 0; margin: 0 0 28px; } .hv3-list li { position: relative; padding-left: 32px; margin-bottom: 12px; font-size: 15px; line-height: 1.55; color: var(--hv3-navy); } .hv3-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 11px 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 3.9 7.5 10 1.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .hv3-list-1 li::before { background-color: var(--hv3-c1); } .hv3-list-2 li::before { background-color: var(--hv3-c2); } .hv3-list-3 li::before { background-color: var(--hv3-c3); } /* ============================================================================= 2. HERO ============================================================================= */ .hv3-hero { padding: 46px 0 84px; position: relative; } .hv3-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hv3-hero-text { max-width: 620px; } .hv3-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 100px; background: #FFFFFF; border: 1px solid rgba(108, 75, 194, .22); box-shadow: 0 10px 24px -18px rgba(24, 20, 87, .8); font-size: 13px; font-weight: 600; color: var(--hv3-c1-dark); margin-bottom: 26px; } .hv3-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hv3-c1); box-shadow: 0 0 0 0 rgba(108, 75, 194, .55); animation: hv3-pulse 2.4s infinite; } @keyframes hv3-pulse { 0% { box-shadow: 0 0 0 0 rgba(108, 75, 194, .55); } 70% { box-shadow: 0 0 0 9px rgba(108, 75, 194, 0); } 100% { box-shadow: 0 0 0 0 rgba(108, 75, 194, 0); } } .hv3-hero-sub { font-size: 18px; line-height: 1.7; color: var(--hv3-muted); margin: 0 0 32px; max-width: 560px; } .hv3-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } .hv3-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 0; } .hv3-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--hv3-navy); } .hv3-chip-ico { font-size: 14px; line-height: 1; } /* ---- Visuel du hero ---- */ .hv3-hero-visual { position: relative; margin: 0 auto; max-width: 560px; width: 100%; } .hv3-hero-img { display: block; width: 100%; height: auto; } .hv3-float { position: absolute; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; background: rgba(255, 255, 255, .96); border: 1.6px solid #FFFFFF; box-shadow: 0 18px 34px -18px rgba(24, 20, 87, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: hv3-floating 5s ease-in-out infinite; } @keyframes hv3-floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .hv3-float-1 { top: 8%; left: -22px; animation-delay: 0s; } .hv3-float-2 { top: 44%; right: -26px; animation-delay: .9s; } .hv3-float-3 { bottom: 6%; left: -10px; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 206px; animation-delay: 1.8s; } .hv3-float-txt { display: flex; flex-direction: column; gap: 2px; } .hv3-float-title { font-size: 13.5px; font-weight: 700; color: var(--hv3-navy); line-height: 1.2; } .hv3-float-sub { font-size: 11.5px; font-weight: 500; color: var(--hv3-muted); line-height: 1.2; } /* Donut CSS (score de maturité) */ .hv3-donut { --hv3-v: 0; position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--hv3-c1) calc(var(--hv3-v) * 1%), #EAE5F8 0); } .hv3-donut::before { content: ""; grid-area: 1 / 1; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; } .hv3-donut-val { grid-area: 1 / 1; font-size: 14px; font-weight: 800; color: var(--hv3-c1-dark); z-index: 1; } .hv3-bignum { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.5px; } .hv3-c2 { color: var(--hv3-c2); } .hv3-bar { display: block; width: 100%; height: 9px; border-radius: 100px; background: #EDEDF5; overflow: hidden; } .hv3-bar > span { display: block; height: 100%; border-radius: 100px; transform-origin: left center; animation: hv3-grow 1.3s cubic-bezier(.2, .7, .3, 1) .4s backwards; } @keyframes hv3-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hv3-bar-3 > span { background-image: linear-gradient(270deg, #22DAD2 0%, #3BE8B0 100%); } /* ============================================================================= 3. PARCOURS EN 3 ÉTAPES ============================================================================= */ .hv3-path { margin-top: 78px; } .hv3-path-intro { text-align: center; font-size: 15px; font-weight: 700; color: var(--hv3-navy); margin: 0 0 26px; } .hv3-path-intro span { font-weight: 500; color: var(--hv3-muted); } .hv3-path-grid { position: relative; display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: 22px; align-items: stretch; } /* Trait pointillé reliant les 3 étapes (visible dans les gouttières) */ .hv3-path-grid::before { content: ""; position: absolute; top: 54px; left: 12%; right: 12%; border-top: 2px dashed #D5D0EC; z-index: 0; } .hv3-step { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--hv3-radius); background: #FFFFFF; border: 1px solid var(--hv3-border); box-shadow: var(--hv3-shadow-sm); text-decoration: none; transition: transform var(--hv3-ease), box-shadow var(--hv3-ease), border-color var(--hv3-ease); } .hv3-step:hover { transform: translateY(-6px); box-shadow: var(--hv3-shadow); text-decoration: none; } .hv3-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .hv3-step-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; font-weight: 800; color: #FFFFFF; flex: 0 0 auto; } .hv3-step-tag { display: inline-block; padding: 5px 11px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: rgba(255, 255, 255, .22); color: #FFFFFF; } .hv3-step-title { display: block; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--hv3-navy); margin-bottom: 10px; } .hv3-step-text { display: block; font-size: 14.5px; line-height: 1.6; color: var(--hv3-muted); margin-bottom: 22px; flex: 1 1 auto; } .hv3-step-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; } .hv3-step:hover .hv3-btn-arrow { transform: translateX(4px); } /* Étape 1 — carte mise en avant */ .hv3-step-featured { background-image: linear-gradient(150deg, #6C4BC2 0%, #5B3DB0 55%, #4A2F97 100%); border-color: transparent; box-shadow: 0 26px 48px -24px rgba(108, 75, 194, .85); } .hv3-step-featured .hv3-step-num { background: rgba(255, 255, 255, .2); color: #FFFFFF; } .hv3-step-featured .hv3-step-title { color: #FFFFFF; font-size: 23px; } .hv3-step-featured .hv3-step-text { color: rgba(255, 255, 255, .82); } .hv3-step-featured .hv3-step-link { color: #FFFFFF; } .hv3-step-featured::after { content: ""; position: absolute; inset: 0; border-radius: var(--hv3-radius); background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 60%); pointer-events: none; } /* Étapes 2 et 3 */ .hv3-step-2 .hv3-step-num { background-image: var(--hv3-c2-grad); } .hv3-step-2 .hv3-step-link { color: var(--hv3-c2); } .hv3-step-2:hover { border-color: rgba(255, 28, 96, .35); } .hv3-step-3 .hv3-step-num { background-image: var(--hv3-c3-grad); } .hv3-step-3 .hv3-step-link { color: var(--hv3-c3); } .hv3-step-3:hover { border-color: rgba(34, 218, 210, .45); } /* ============================================================================= 4. SECTIONS "MÉTHODE" — blocs alternés ============================================================================= */ .hv3-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 46px 0; } .hv3-feature-reverse .hv3-feature-body { order: 2; } .hv3-feature-reverse .hv3-feature-media { order: 1; } .hv3-feature-body { max-width: 540px; } .hv3-feature-actions { display: flex; flex-wrap: wrap; gap: 12px; } .hv3-feature-media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 200px; } /* Halo décoratif derrière l'illustration de l'étape 1 (les visuels des étapes 2 et 3 portent déjà le leur). */ .hv3-feature-1 .hv3-feature-media { border-radius: var(--hv3-radius); background: radial-gradient(58% 58% at 50% 46%, #F1ECFD 0%, rgba(251, 250, 255, 0) 72%); } .hv3-feature-img { display: block; max-width: 100%; height: auto; } /* ============================================================================= 5. SECTION DIAGNOSTIC ============================================================================= */ .hv3-deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hv3-deliverable { padding: 28px 26px; border-radius: var(--hv3-radius); background: #FFFFFF; border: 1px solid rgba(108, 75, 194, .16); box-shadow: 0 16px 32px -26px rgba(108, 75, 194, .8); transition: transform var(--hv3-ease), box-shadow var(--hv3-ease); } .hv3-deliverable:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(108, 75, 194, .9); } .hv3-deliverable-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--hv3-c1-soft); font-size: 21px; line-height: 1; margin-bottom: 16px; } .hv3-deliverable p { font-size: 14.5px; line-height: 1.6; color: var(--hv3-muted); margin: 0; } .hv3-diagnostic-cta { margin-top: 44px; text-align: center; } .hv3-diagnostic-cta .hv3-note { max-width: 620px; margin-left: auto; margin-right: auto; } /* ============================================================================= 6. RÉASSURANCE ============================================================================= */ .hv3-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .hv3-trust-item { text-align: center; } .hv3-trust-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--hv3-soft); border: 1px solid var(--hv3-border); font-size: 25px; line-height: 1; margin-bottom: 16px; } .hv3-trust-item p { font-size: 14.5px; line-height: 1.6; color: var(--hv3-muted); margin: 0; } /* ============================================================================= 7. FAQ ============================================================================= */ .hv3-faq { display: flex; flex-direction: column; gap: 12px; } .hv3-faq-item { background: #FFFFFF; border: 1px solid var(--hv3-border); border-radius: var(--hv3-radius-sm); overflow: hidden; transition: border-color var(--hv3-ease), box-shadow var(--hv3-ease); } .hv3-faq-item[open] { border-color: rgba(108, 75, 194, .32); box-shadow: 0 16px 32px -28px rgba(24, 20, 87, .9); } .hv3-faq-item > summary { position: relative; list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-size: 16px; font-weight: 600; color: var(--hv3-navy); line-height: 1.4; } .hv3-faq-item > summary::-webkit-details-marker { display: none; } .hv3-faq-item > summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--hv3-c1-soft); color: var(--hv3-c1); font-size: 18px; font-weight: 700; line-height: 1; } .hv3-faq-item[open] > summary::after { content: "–"; } .hv3-faq-body { padding: 0 22px 22px; } .hv3-faq-body p { font-size: 15px; line-height: 1.7; color: var(--hv3-muted); margin: 0; } /* ============================================================================= 8. BANDEAU CTA FINAL ============================================================================= */ .hv3-cta-band { padding: 84px 0; background-image: linear-gradient(130deg, #241C63 0%, #3B2A8E 48%, #6C4BC2 100%); position: relative; overflow: hidden; } /* IMAGE 3 (optionnelle) — photo de fond du bandeau. Décommenter ce bloc une fois cta-fond.jpg déposée dans /img/v2/home/refonte/. Voir _BRIEFS-IMAGES-CHATGPT.txt. .hv3-cta-band { background-image: linear-gradient(130deg, rgba(36, 28, 99, .93) 0%, rgba(59, 42, 142, .90) 48%, rgba(108, 75, 194, .88) 100%), url("/img/v2/home/refonte/cta-fond.jpg"); background-size: cover, cover; background-position: center, center; } */ .hv3-cta-band::before { content: ""; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 28, 96, .28) 0%, rgba(255, 28, 96, 0) 68%); pointer-events: none; } .hv3-cta-band::after { content: ""; position: absolute; bottom: -160px; left: -100px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 218, 210, .22) 0%, rgba(34, 218, 210, 0) 68%); pointer-events: none; } .hv3-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; } .hv3-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; } /* ============================================================================= 9. ANIMATIONS D'APPARITION ============================================================================= */ /* Les blocs ne sont masqués que si porte .hv3-js (posée par le script inline de home_v2.php). Sans JS, la page reste intégralement visible. */ .hv3-js .hv3-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); will-change: opacity, transform; } .hv3-js .hv3-reveal.hv3-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hv3-page * { animation: none !important; transition-duration: .01ms !important; } .hv3-js .hv3-reveal { opacity: 1; transform: none; } } /* ============================================================================= 10. RESPONSIVE ============================================================================= */ /* ---- < 1200px ---- */ @media (max-width: 1199px) { .hv3-h1 { font-size: 46px; } .hv3-h2 { font-size: 34px; } .hv3-h3 { font-size: 27px; } .hv3-feature { gap: 44px; } .hv3-float-1 { left: -8px; } .hv3-float-2 { right: -8px; } .hv3-float-3 { left: 0; } } /* ---- Tablette ---- */ @media (max-width: 991px) { .hv3-section { padding: 72px 0; } .hv3-hero { padding: 32px 0 64px; } .hv3-hero-grid { grid-template-columns: 1fr; gap: 44px; } .hv3-hero-text { max-width: 680px; margin: 0 auto; text-align: center; } .hv3-hero-sub { margin-left: auto; margin-right: auto; } .hv3-hero-actions, .hv3-chips { justify-content: center; } .hv3-hero-visual { max-width: 460px; } .hv3-h1 { font-size: 42px; } .hv3-path { margin-top: 62px; } .hv3-path-grid { grid-template-columns: 1fr; gap: 16px; } .hv3-path-grid::before { display: none; } .hv3-step-featured .hv3-step-title { font-size: 21px; } .hv3-feature { grid-template-columns: 1fr; gap: 34px; padding: 34px 0; } /* Le texte repasse toujours au-dessus de l'image (y compris sur les blocs .hv3-feature-reverse : sélecteur à spécificité équivalente). */ .hv3-feature .hv3-feature-body { max-width: 640px; margin: 0 auto; order: 1; } .hv3-feature .hv3-feature-media { order: 2; max-width: 520px; margin: 0 auto; width: 100%; } .hv3-deliverables { grid-template-columns: repeat(2, 1fr); } .hv3-trust { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; } } /* ---- Mobile ---- */ @media (max-width: 767px) { .hv3-page main.hv3-main { background-size: 100% 780px; } .hv3-section { padding: 58px 0; } .hv3-section-head { margin-bottom: 38px; } .hv3-h1 { font-size: 34px; letter-spacing: -.6px; } .hv3-h2 { font-size: 27px; } .hv3-h3 { font-size: 23px; } .hv3-hero-sub { font-size: 16px; } .hv3-hero-actions { flex-direction: column; align-items: stretch; } .hv3-hero-actions .hv3-btn { width: 100%; } .hv3-chips { gap: 8px 16px; } .hv3-chips li { font-size: 12.5px; } .hv3-hero-visual { max-width: 340px; } /* Les cartes flottantes sont réduites et recentrées pour ne pas déborder */ .hv3-float { padding: 10px 13px; border-radius: 13px; gap: 9px; } .hv3-float-title { font-size: 12px; } .hv3-float-sub { font-size: 10.5px; } .hv3-donut { width: 44px; height: 44px; } .hv3-donut::before { width: 33px; height: 33px; } .hv3-donut-val { font-size: 12px; } .hv3-bignum { font-size: 21px; } .hv3-float-1 { top: 2%; left: -12px; } .hv3-float-2 { top: 46%; right: -12px; } .hv3-float-3 { bottom: 2%; left: -6px; min-width: 172px; } .hv3-step { padding: 24px 22px; } .hv3-step-title, .hv3-step-featured .hv3-step-title { font-size: 19px; } .hv3-feature { padding: 26px 0; gap: 28px; } .hv3-deliverables { grid-template-columns: 1fr; } .hv3-trust { grid-template-columns: 1fr; gap: 30px; text-align: center; } .hv3-cta-band { padding: 62px 0; } .hv3-cta-actions { flex-direction: column; } .hv3-cta-actions .hv3-btn { width: 100%; } .hv3-btn-lg { padding: 16px 26px; font-size: 15px; } .hv3-faq-item > summary { font-size: 15px; padding: 18px 50px 18px 18px; } .hv3-faq-body { padding: 0 18px 18px; } } /* ---- Petits mobiles ---- */ @media (max-width: 420px) { .hv3-h1 { font-size: 30px; } .hv3-wrap { padding: 0 16px; } .hv3-hero-visual { max-width: 300px; } .hv3-float-3 { min-width: 156px; } }