/* ===================================================================== VELYON — SECTIONS ===================================================================== */ /* ============================ HERO ============================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media picture { display: block; width: 100%; height: 100%; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 55%; will-change: transform; } /* Assombrissement + lisibilité du texte (bas + gauche) */ .hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(9,9,9,.92) 0%, rgba(9,9,9,.55) 32%, rgba(9,9,9,.10) 62%, rgba(9,9,9,.35) 100%), linear-gradient(to right, rgba(9,9,9,.80) 0%, rgba(9,9,9,.30) 40%, transparent 70%); } /* Lueur dorée ambiante */ .hero-glow { position: absolute; z-index: -1; pointer-events: none; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; right: -8%; top: 8%; background: radial-gradient(circle, rgba(212,175,55,.20), transparent 62%); filter: blur(10px); } /* Phares qui s'allument */ .hero-headlight { position: absolute; z-index: -1; pointer-events: none; width: 190px; height: 120px; left: 12%; top: 56%; background: radial-gradient(ellipse at center, rgba(255,244,214,.55), rgba(255,220,150,.18) 45%, transparent 72%); filter: blur(6px); opacity: 0; mix-blend-mode: screen; } .hero-headlight.two { width: 120px; height: 90px; left: 6%; top: 60%; opacity: 0; } /* Balayage lumineux sur la carrosserie */ .hero-sweep { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .hero-sweep::before { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; transform: translateX(-160%) skewX(-14deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), rgba(212,175,55,.14), transparent); mix-blend-mode: screen; } /* Contenu du hero */ .hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(56px, 9vh, 120px); padding-top: calc(var(--nav-h) + 24px); } .hero-inner { max-width: 760px; } .hero-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--or); margin-bottom: 22px; } .hero-kicker::before { content: ""; width: 40px; height: 1px; background: var(--grad-or); } .hero h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: .02em; margin-bottom: 24px; text-transform: uppercase; } .hero h1 .or-text { display: inline-block; } .hero-slogan { font-family: var(--font-titre); font-size: clamp(1.4rem, 3.4vw, 2.1rem); color: var(--blanc); font-style: italic; font-weight: 500; line-height: 1.28; max-width: 22ch; margin-bottom: 40px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; } /* Indicateur de scroll */ .hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gris); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; } .hero-scroll .line { width: 1px; height: 46px; background: linear-gradient(var(--or), transparent); position: relative; overflow: hidden; } .hero-scroll .line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--or-clair); animation: scrollDot 2.2s cubic-bezier(.7,0,.3,1) infinite; } /* ---- Animations d'entrée (jouées via .is-ready sur ) ---- */ /* Les états initiaux cachés ne s'appliquent que si JS est actif (classe .js sur ), pour rester visible en amélioration progressive sans JS. */ .js .hero-media img { opacity: 0; transform: scale(1.08); } .js .hero-kicker, .js .hero h1, .js .hero-tagline, .js .hero-slogan, .js .hero-actions, .js .hero-scroll { opacity: 0; } .js .reveal-up { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-up.in { opacity: 1; transform: none; } body.is-ready .hero-media img { animation: heroImgIn 1.8s cubic-bezier(.22,.61,.36,1) forwards; } body.is-ready .hero-glow { animation: fadeIn 2s ease .3s forwards; opacity: 0; } body.is-ready .hero-headlight { animation: headlightsOn 1.6s ease 1s forwards; } body.is-ready .hero-sweep::before { animation: sweep 2.6s cubic-bezier(.6,0,.2,1) 1.3s; } body.is-ready .hero-kicker { animation: fadeUp .9s var(--ease) .5s both; } body.is-ready .hero h1 { animation: fadeUp 1s var(--ease) .65s both; } body.is-ready .hero-tagline { animation: fadeUp 1s var(--ease) .85s both; } body.is-ready .hero-slogan { animation: fadeUp 1s var(--ease) 1s both; } body.is-ready .hero-actions { animation: fadeUp 1s var(--ease) 1.15s both; } body.is-ready .hero-scroll { animation: fadeIn 1s ease 1.6s both; } @keyframes heroImgIn { to { opacity: 1; transform: scale(1); } } @keyframes fadeIn { to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes headlightsOn { 0% { opacity: 0; } 30% { opacity: .85; } 42% { opacity: .35; } 60% { opacity: 1; } 100% { opacity: .9; } } @keyframes sweep { from { transform: translateX(-160%) skewX(-14deg); } to { transform: translateX(320%) skewX(-14deg); } } @keyframes scrollDot { 0% { top: -50%; } 100% { top: 100%; } } /* ============================ SERVICES ============================ */ .svc-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .svc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; padding: 26px 24px 22px; background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--bord); border-radius: var(--r-lg); box-shadow: var(--ombre-carte); transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med), background var(--t-med); position: relative; overflow: hidden; min-height: 190px; } .svc-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(140px 90px at 85% 0%, rgba(212,175,55,.10), transparent 70%); opacity: 0; transition: opacity var(--t-med); } .svc-card:hover, .svc-card:focus-visible { transform: translateY(-6px); border-color: var(--bord-fort); box-shadow: var(--ombre-carte-h), var(--glow-or); background: linear-gradient(180deg, var(--noir-4), var(--noir-3)); } .svc-card:hover::after, .svc-card:focus-visible::after { opacity: 1; } .svc-ic-wrap { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--bord); background: rgba(212,175,55,.06); color: var(--or); transition: color var(--t-med), border-color var(--t-med), transform var(--t-med); } .svc-card:hover .svc-ic-wrap { color: var(--or-clair); border-color: var(--bord-fort); transform: scale(1.05); } .svc-ic { width: 28px; height: 28px; } .svc-ic-wrap.lg { width: 64px; height: 64px; flex: 0 0 64px; } .svc-ic-wrap.lg .svc-ic { width: 34px; height: 34px; } .svc-name { font-family: var(--font-titre); font-size: 1.5rem; color: var(--blanc); line-height: 1.1; } .svc-price { font-size: .95rem; color: var(--gris); margin-top: -4px; } .svc-price strong { color: var(--or-clair); font-weight: 600; } .svc-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or); transition: gap var(--t-fast); } .svc-more svg { width: 14px; height: 14px; } .svc-card:hover .svc-more { gap: 11px; } /* ---------- Modal service ---------- */ .svc-modal { width: min(720px, 92vw); max-height: 88vh; padding: 0; overflow: visible; position: fixed; inset: 0; margin: auto; /* centrage horizontal + vertical */ border: 1px solid var(--bord-fort); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); color: var(--gris-clair); box-shadow: 0 30px 80px rgba(0,0,0,.7), var(--glow-or); } .svc-modal::backdrop { background: rgba(5,5,5,.72); backdrop-filter: blur(4px); } .svc-modal[open] { animation: modalIn .3s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } #service-modal-body { padding: clamp(24px, 4vw, 40px); overflow-y: auto; max-height: 88vh; } .svc-modal-close { position: absolute; top: -16px; right: -16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--noir-3); border: 1px solid var(--bord-fort); color: var(--blanc); display: grid; place-items: center; transition: all var(--t-fast); } .svc-modal-close:hover { background: var(--or); color: #1a1300; transform: rotate(90deg); } .svc-modal-close svg { width: 20px; height: 20px; } .svc-modal-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } .svc-modal-head h3 { font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--blanc); } .svc-modal-price { font-size: 1.05rem; color: var(--gris); margin-top: 4px; } .svc-modal-desc { color: var(--gris-clair); margin-bottom: 24px; } .svc-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 24px; } .svc-sub { font-family: var(--font-corps); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-bottom: 10px; } .svc-sub + .svc-sub { margin-top: 16px; } .svc-txt { font-size: .95rem; color: var(--gris-clair); } .mat-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .mat-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--bord-neutre); } .mat-name { color: var(--blanc); font-size: .98rem; } .mat-price { color: var(--or-clair); font-weight: 600; font-size: .95rem; white-space: nowrap; } .mat-price.mat-etude { color: var(--gris); font-weight: 500; font-style: italic; } .mat-note { grid-column: 1 / -1; font-size: .82rem; color: var(--gris); } .svc-acces { margin-top: 14px; font-size: .86rem; color: var(--or-clair); background: rgba(212,175,55,.07); border: 1px solid var(--bord); border-radius: var(--r-sm); padding: 10px 14px; } .svc-modal-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; } @media (max-width: 620px) { .svc-modal-grid { grid-template-columns: 1fr; gap: 20px; } .svc-modal-close { top: 8px; right: 8px; } } /* ============================ CONFIGURATEUR ============================ */ .cfg-card { background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 30px; } .cfg-step { animation: fadeUp .5s var(--ease) both; } .cfg-q { display: flex; align-items: center; gap: 12px; font-family: var(--font-titre); font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--blanc); margin-bottom: 18px; } .cfg-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-corps); font-size: 14px; font-weight: 700; color: #1a1300; background: var(--grad-or); } .cfg-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .cfg-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px 12px; border-radius: var(--r-md); border: 1px solid var(--bord-neutre); background: rgba(255,255,255,.02); color: var(--gris-clair); font-size: 14px; font-weight: 500; transition: all var(--t-fast); } .cfg-tile-ic { width: 40px; height: 40px; color: var(--gris); transition: color var(--t-fast), transform var(--t-med); } .cfg-tile-ic svg { width: 100%; height: 100%; } .cfg-tile:hover { border-color: var(--bord-fort); color: var(--blanc); transform: translateY(-3px); } .cfg-tile:hover .cfg-tile-ic { color: var(--or); } .cfg-tile.active { border-color: var(--or); background: rgba(212,175,55,.10); color: var(--or-clair); box-shadow: var(--glow-or); } .cfg-tile.active .cfg-tile-ic { color: var(--or-clair); transform: scale(1.08); } .cfg-chips { display: flex; flex-wrap: wrap; gap: 10px; } .cfg-mat-price { color: var(--gris); font-weight: 400; font-size: .9em; } .cfg-mat.active .cfg-mat-price { color: var(--or); } .cfg-surface { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .cfg-input { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bord-fort); border-radius: var(--r-pill); padding: 6px 20px; background: rgba(255,255,255,.02); } .cfg-input input { width: 90px; background: none; border: none; outline: none; font-size: 1.5rem; font-family: var(--font-titre); color: var(--blanc); } .cfg-input span { color: var(--gris); font-size: 1rem; } /* Masquer les flèches natives du number */ .cfg-input input::-webkit-outer-spin-button, .cfg-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cfg-input input[type=number] { -moz-appearance: textfield; } .cfg-result { border-top: 1px solid var(--bord); padding-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .cfg-res-label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--or); } .cfg-res-total { font-family: var(--font-titre); font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; background: var(--grad-or-texte); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--or); } .cfg-res-etude { font-family: var(--font-titre); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--blanc); font-style: italic; } .cfg-res-detail { color: var(--gris-clair); font-size: 1rem; } /* ============================ VITRERIE ============================ */ .vit-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: start; } .vit-intro { background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--ombre-carte); } .vit-price { display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--bord); } .vit-price-label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--or); } .vit-price-value { font-family: var(--font-titre); line-height: 1; display: flex; align-items: baseline; gap: 6px; } .vit-price-value strong { font-size: clamp(3rem, 8vw, 4.4rem); font-weight: 600; background: var(--grad-or-texte); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--or); } .vit-price-value span { font-size: 1.4rem; color: var(--gris); } .vit-price-note { font-size: 13px; color: var(--gris-fonce); } .vit-txt { color: var(--gris-clair); margin-bottom: 16px; } .vit-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .vit-tags li { font-size: 13px; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--bord-neutre); background: rgba(255,255,255,.02); color: var(--gris-clair); } .vit-acces { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--or-clair); line-height: 1.5; background: rgba(212,175,55,.06); border: 1px solid var(--bord); border-radius: var(--r-md); padding: 14px 16px; } .vit-acces svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--or); margin-top: 1px; } .vit-config-title { font-family: var(--font-titre); font-size: 1.4rem; color: var(--blanc); margin-bottom: 16px; } .vit-explain { font-size: .9rem; color: var(--gris-clair); line-height: 1.55; background: rgba(212,175,55,.06); border-left: 2px solid var(--or); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; } .vit-explain strong { color: var(--or-clair); } @media (max-width: 880px) { .vit-layout { grid-template-columns: 1fr; gap: 28px; } } /* ============================ TARIFS ============================ */ .tarifs-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; } .tarif-group:last-child:nth-child(odd) { grid-column: 1 / -1; } .tarif-group-title { font-family: var(--font-corps); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bord); } .tarif-rows { display: flex; flex-direction: column; } .tarif-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 14px; width: 100%; text-align: left; padding: 16px 12px; border-radius: var(--r-sm); border-bottom: 1px solid var(--bord-neutre); transition: background var(--t-fast), padding var(--t-fast); } .tarif-row:hover { background: rgba(212,175,55,.06); padding-inline: 18px; } .tarif-label { font-family: var(--font-titre); font-size: 1.2rem; color: var(--blanc); } .tarif-dots { border-bottom: 1px dotted var(--bord-fort); transform: translateY(-4px); } .tarif-price { font-size: 1.3rem; font-weight: 600; color: var(--or-clair); white-space: nowrap; } .tarif-unit { font-size: .8rem; color: var(--gris); font-weight: 400; } .tarif-go { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or); opacity: 0; transform: translateX(-4px); transition: all var(--t-fast); } .tarif-go svg { width: 13px; height: 13px; } .tarif-row:hover .tarif-go { opacity: 1; transform: none; } @media (max-width: 720px) { .tarifs-grid { grid-template-columns: 1fr; gap: 30px; } .tarif-row { grid-template-columns: 1fr auto; gap: 4px 12px; } .tarif-dots { display: none; } .tarif-go { display: none; } } /* ============================ AVANT / APRÈS ============================ */ .ba-feature { max-width: 860px; margin: 0 auto 48px; } .ba-slider { container-type: inline-size; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--bord-fort); box-shadow: var(--ombre-carte-h); touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; } .ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-before { position: absolute; inset: 0; width: 50%; overflow: hidden; } .ba-before img { width: 100cqw; max-width: none; } .ba-label { position: absolute; bottom: 14px; z-index: 3; padding: 6px 14px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; background: rgba(9,9,9,.6); backdrop-filter: blur(4px); color: var(--blanc); } .ba-label-a { left: 14px; } .ba-label-b { right: 14px; color: var(--or-clair); } .ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--or); z-index: 4; transform: translateX(-1px); } .ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--noir-2); border: 2px solid var(--or); color: var(--or); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.5), var(--glow-or); cursor: ew-resize; transition: transform var(--t-fast), background var(--t-fast); } .ba-handle:hover { background: var(--or); color: #1a1300; transform: translate(-50%, -50%) scale(1.06); } .ba-handle svg { width: 22px; height: 22px; } .ba-caption { text-align: center; margin-top: 16px; font-family: var(--font-titre); font-size: 1.2rem; color: var(--gris-clair); } .ba-gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .ba-card { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre-carte); transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med); } .ba-card:hover { transform: translateY(-4px); border-color: var(--bord-fort); box-shadow: var(--ombre-carte-h), var(--glow-or); } .ba-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 688 / 286; display: block; } .ba-card figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(9,9,9,.62); backdrop-filter: blur(4px); font-family: var(--font-corps); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blanc); } /* ============================ POURQUOI CHOISIR ============================ */ .why-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .why-card { background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--ombre-carte); transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } .why-card:hover { transform: translateY(-5px); border-color: var(--bord-fort); box-shadow: var(--ombre-carte-h), var(--glow-or); } .why-ic { width: 40px; height: 40px; color: var(--or); margin-bottom: 18px; } .why-card h3 { font-size: 1.35rem; color: var(--blanc); margin-bottom: 10px; } .why-card p { color: var(--gris); font-size: .98rem; } /* ============================ PROFESSIONNELS ============================ */ .section-pros { padding-block: clamp(40px, 6vw, 72px); } .pros-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; background: radial-gradient(600px 300px at 90% 10%, rgba(212,175,55,.10), transparent 60%), linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--bord-fort); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 52px); box-shadow: var(--ombre-carte-h); } .pros-main .section-eyebrow { margin-bottom: 14px; } .pros-main .section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); } .pros-services { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; } .pros-services span { font-size: 13px; padding: 7px 15px; border-radius: var(--r-pill); border: 1px solid var(--bord); background: rgba(212,175,55,.05); color: var(--or-clair); } .pros-targets { list-style: none; display: grid; gap: 10px; } .pros-targets li { padding: 13px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.02); border: 1px solid var(--bord-neutre); color: var(--gris-clair); font-family: var(--font-titre); font-size: 1.15rem; display: flex; align-items: center; gap: 12px; } .pros-targets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-or); flex: 0 0 6px; } @media (max-width: 780px) { .pros-card { grid-template-columns: 1fr; gap: 28px; } } /* ============================ FORMULAIRE DEVIS ============================ */ .devis-form { max-width: 760px; margin-inline: auto; background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px); box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; } .field label, .field legend { font-size: 13px; letter-spacing: .06em; color: var(--gris-clair); font-weight: 500; } .field input, .field textarea { background: rgba(255,255,255,.02); border: 1px solid var(--bord-neutre); border-radius: var(--r-sm); padding: 13px 15px; color: var(--blanc); transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(212,175,55,.12); } .field input::placeholder, .field textarea::placeholder { color: var(--gris-fonce); } .field textarea { resize: vertical; min-height: 110px; } .field input[type=file] { padding: 11px 15px; color: var(--gris); cursor: pointer; } .field input[type=file]::file-selector-button { background: rgba(212,175,55,.1); color: var(--or-clair); border: 1px solid var(--bord-fort); border-radius: var(--r-pill); padding: 7px 16px; margin-right: 14px; cursor: pointer; font-weight: 600; } .crosssell-note { font-size: 13px; color: var(--or); margin: 4px 0 10px; } .chk-chips { display: flex; flex-wrap: wrap; gap: 10px; } .chk { position: relative; cursor: pointer; } .chk input { position: absolute; opacity: 0; pointer-events: none; } .chk span { display: inline-block; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--bord-neutre); background: rgba(255,255,255,.02); color: var(--gris-clair); font-size: 14px; transition: all var(--t-fast); } .chk:hover span { border-color: var(--bord-fort); color: var(--blanc); } .chk input:checked + span { background: rgba(212,175,55,.14); border-color: var(--or); color: var(--or-clair); box-shadow: var(--glow-or); } .chk input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 2px; } .btn-submit { align-self: flex-start; margin-top: 6px; } .devis-ok { max-width: 760px; margin: 24px auto 0; text-align: center; padding: 22px; border-radius: var(--r-md); background: rgba(212,175,55,.08); border: 1px solid var(--bord-fort); color: var(--or-clair); font-size: 1.05rem; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } /* ============================ SECTIONS GÉNÉRIQUES (placeholder socle) ============================ */ .placeholder-note { border: 1px dashed var(--bord-fort); border-radius: var(--r-md); padding: 22px 24px; color: var(--gris); background: rgba(212,175,55,.03); } /* ============================ FOOTER (minimal socle) ============================ */ .footer { border-top: 1px solid var(--bord-neutre); padding-block: 56px 40px; background: var(--noir-2); position: relative; z-index: 1; } .footer-cols { display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand .emblem { height: 40px; margin-bottom: 16px; } .footer h4 { color: var(--blanc); font-family: var(--font-corps); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; } .footer a { color: var(--gris-clair); display: block; padding: 5px 0; font-size: 15px; transition: color var(--t-fast); } .footer a:hover { color: var(--or); } .footer-bottom { border-top: 1px solid var(--bord-neutre); margin-top: 40px; padding-top: 24px; color: var(--gris-fonce); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ---------------- Réglages responsive Hero ---------------- */ @media (max-width: 860px) { .hero-media img { object-position: 58% 52%; } .hero-scrim { background: linear-gradient(to top, rgba(9,9,9,.94) 0%, rgba(9,9,9,.55) 38%, rgba(9,9,9,.15) 70%, rgba(9,9,9,.4) 100%); } .hero-headlight { left: 8%; top: 52%; width: 130px; height: 90px; } .hero-headlight.two { left: 2%; top: 56%; } .hero-scroll { display: none; } .hero h1 { font-size: clamp(2.1rem, 8.5vw, 3.4rem); margin-bottom: 20px; } .footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } } /* ---------------- prefers-reduced-motion ---------------- */ @media (prefers-reduced-motion: reduce) { .hero-media img { opacity: 1 !important; transform: none !important; animation: none !important; } .hero-glow, .hero-headlight { opacity: .8 !important; animation: none !important; } .hero-sweep::before { display: none; } .reveal-up { opacity: 1 !important; transform: none !important; } body.is-ready .hero-kicker, body.is-ready .hero h1, body.is-ready .hero-tagline, body.is-ready .hero-slogan, body.is-ready .hero-actions, body.is-ready .hero-scroll { animation: none !important; opacity: 1 !important; transform: none !important; } .hero-scroll .line::after { animation: none; } }