/* ============================================================================ form-redesign.css — Refonte visuelle du formulaire de devis multi-étapes ---------------------------------------------------------------------------- Lié APRÈS index.min.css (page d'accueil) et contact.min.css (page contact) pour surcharger proprement les styles de base, sans recompiler Tailwind (aucune nouvelle classe utilitaire n'est introduite). Les règles « COLONNE GAUCHE » (titre, voile de fond, badges hero, avis Google) ne ciblent que des éléments présents sur le hero de l'accueil (.hero-title, .hero-chip, .hero-gbp, .hero-left, #contact). Elles sont donc inertes sur la page contact, qui n'a pas ce hero. ============================================================================ */ /* ─────────────────────────────────────────────────────────────── 1. STRUCTURE & CONTRASTE DE LA CARTE Coins adoucis (~21px) + ombre portée multi-couches : un lift profond teinté marque qui décolle la carte du fond, sans halo agressif. Anneau blanc 1px = arête nette. Highlight interne = effet « verre ». ─────────────────────────────────────────────────────────────── */ .hero-form-card.bg-white{ border-radius:21px; background:#ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,.7), /* arête nette */ 0 1px 3px rgba(10,37,30,.10), 0 18px 32px -14px rgba(10,37,30,.45), /* ombre proche */ 0 40px 64px -28px rgba(10,37,30,.55), /* lift profond */ inset 0 1px 0 rgba(255,255,255,.92); /* highlight haut */ } /* Bandeau de marque en tête de carte (dégradé forêt → menthe) */ .hero-form-card::before{ height:5px; background:linear-gradient(90deg,#0a251e 0%,#2c4c3b 50%,#4ade80 100%); } /* Badge « En moins de 2 minutes » un cran plus lisible, discrétion conservée */ .form-accent{ font-size:.82rem; padding:3px 9px 3px 7px; } .form-accent svg{ width:13px; height:13px; } /* ─────────────────────────────────────────────────────────────── 2. BARRE DE PROGRESSION 3 segments égaux pleine largeur. L'état rempli est piloté par le JS existant (classe .bg-arkeo-dark = vert de marque) ; on ne style QUE par #id pour survivre au remplacement de className fait par le script à chaque étape. Le libellé texte passe en lecteur-d'écran-seul. ─────────────────────────────────────────────────────────────── */ .form-progress{ display:flex; align-items:center; gap:6px; } #dot-1, #dot-2, #dot-3{ flex:1 1 0 !important; /* segments de largeur identique */ width:auto !important; /* neutralise les w-8 / w-3 du JS */ height:6px !important; border-radius:999px !important; } #step-label{ /* masqué visuellement, lu par les lecteurs d'écran */ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ─────────────────────────────────────────────────────────────── 3. CARTES DE SÉLECTION (Vente / Location / Maison…) Plus de respiration + transition fluide. Défaut : bordure fine grise, fond blanc, icône grise. Sélectionné : bordure 2px forêt, fond vert 10%, icône forêt pleine avec relief. Léger lift au survol. ─────────────────────────────────────────────────────────────── */ .choice-card{ padding:22px 10px 18px; border-radius:16px; transition:all .2s ease; } .choice-card.is-selected{ padding:21px 9px 17px; /* compense la bordure +1px : pas de saut */ border:2px solid #2c4c3b; background:rgba(44,76,59,.10); /* teinte verte 10% → contraste net */ box-shadow:0 8px 20px -10px rgba(44,76,59,.28); } /* Icône de la carte sélectionnée en vert plein, ombrage interne pour le relief */ .choice-card.is-selected .choice-icon{ background:#2c4c3b; color:#fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), /* highlight haut */ inset 0 -2px 4px rgba(10,37,30,.45), /* ombre interne basse = relief */ 0 4px 12px rgba(44,76,59,.32); /* ombre portée douce */ } .choice-card:hover{ transform:translateY(-2px); border-color:#c7d2cb; box-shadow:0 8px 18px -9px rgba(10,37,30,.18); } .choice-card.is-selected:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(44,76,59,.32); } /* ─────────────────────────────────────────────────────────────── 4. BOUTON « ÉTAPE SUIVANTE » Couleur forêt conservée. Survol = flèche qui glisse + luminosité. Focus-ring net pour l'accessibilité clavier. ─────────────────────────────────────────────────────────────── */ .btn-cta:hover{ filter:brightness(1.08); } .btn-cta--arrow:hover svg{ transform:translateX(5px); } .btn-cta:focus-visible{ outline:2px solid #2c4c3b; outline-offset:3px; } @media (prefers-reduced-motion: reduce){ .choice-card{ transition:none; } .choice-card:hover, .choice-card.is-selected:hover{ transform:none; } .btn-cta--arrow:hover svg{ transform:none; } } /* ═══════════════════════════════════════════════════════════════ COLONNE GAUCHE DU HERO (accueil uniquement — inerte sur /contact) ═══════════════════════════════════════════════════════════════ */ /* TITRE : ombre ultra-diffuse → décolle le blanc de la texture du toit ; interlignage resserré (1.06 → 1.0) pour un bloc compact. */ .hero-title{ line-height:1.0; text-shadow:0 2px 10px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.34); } /* CONTRASTE FOND : voile dégradé horizontal gauche→droite, sombre à gauche puis transparent dès ~58% → isole le texte sans assombrir le formulaire ni la droite de la photo. Couche entre l'image (z-0) et le contenu (z-10). */ #contact::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,0) 58%); } @media (max-width:768px){ /* mobile : voile vertical (texte au-dessus, formulaire en dessous) */ #contact::after{ background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 75%); } } /* BADGES RÉASSURANCE : fond subtilement sombre + flou léger (glass), texte + icônes blanc pur, icônes +10%, padding plus généreux. */ .hero-chip{ padding:0.62rem 1.1rem; background:rgba(10,37,30,.45); border-color:rgba(255,255,255,.22); color:#ffffff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .hero-chip svg{ width:1.16rem; height:1.16rem; color:#ffffff; } /* +10% ; blanc pur */ /* ALIGNEMENT VERTICAL : légère remontée de la colonne gauche sur desktop pour un équilibre parfait avec le centre du formulaire. */ @media (min-width:768px){ .hero-left{ transform:translateY(-14px); } } /* AVIS GOOGLE : glassmorphism (fond blanc 10% + backdrop-blur), étoiles or vif #FBBF24 pour maximiser la preuve sociale. */ .hero-gbp{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%); } .hero-gbp:hover{ background:rgba(255,255,255,.16); } .hero-gbp-star{ fill:#FBBF24; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); } /* Repli sans transparence : fonds opaques si l'utilisateur réduit la transparence */ @media (prefers-reduced-transparency: reduce){ .hero-chip{ background:rgba(20,52,39,.6); backdrop-filter:none; -webkit-backdrop-filter:none; } .hero-gbp{ background:rgba(10,37,30,.6); backdrop-filter:none; -webkit-backdrop-filter:none; } }