/*
Theme Name: Confort Auto Prestige
Theme URI: https://confort-auto-prestige.fr
Author: Confort Auto Prestige
Description: Thème administrable pour gérer un catalogue de véhicules et les demandes clients.
Version: 1.3.0
Text Domain: confort-auto-prestige
*/
:root { --black:#070708; --panel:#111114; --cream:#f3f1ed; --muted:#aaa9ad; --red:#d71920; --line:#27272b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--cream); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.nav-wrap { position:fixed; z-index:20; inset:0 0 auto; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; background:rgba(6,6,7,.82); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.08em; }
.brand img { width:50px; height:42px; object-fit:cover; object-position:left; }
.brand span { font-size:15px; }.brand small { display:block; color:#c7c7ca; font-size:9px; letter-spacing:.42em; margin-top:4px; }
nav { display:flex; align-items:center; gap:30px; font-size:13px; color:#d3d3d6; }
nav a { transition:.2s; } nav a:hover { color:white; }.nav-cta { border:1px solid #58585d; padding:11px 18px; }
.hero { min-height:0; height:clamp(520px,33.35vw,720px); margin-top:78px; position:relative; display:flex; align-items:flex-end; overflow:hidden; background:#070708; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center top; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.08) 52%,transparent),linear-gradient(0deg,rgba(0,0,0,.55),transparent 58%); }
.hero-content { position:relative; z-index:2; max-width:760px; padding:0 7vw 11vh; }
.eyebrow,.kicker { text-transform:uppercase; letter-spacing:.32em; font-size:11px; font-weight:700; color:#c9c9cc; }.eyebrow span { display:inline-block; width:38px; height:2px; background:var(--red); margin:0 12px 3px 0; }
h1 { font-size:clamp(40px,4.6vw,68px); line-height:1.02; letter-spacing:-.045em; margin:22px 0; max-width:640px; }
.hero-copy { max-width:590px; color:#c7c7ca; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; margin-left:90px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:16px 22px; font-weight:700; font-size:13px; border:1px solid transparent; cursor:pointer; }.button-primary { background:var(--red); color:white; }.button-primary:hover { background:#f0252c; }.button-ghost { border-color:#737378; background:rgba(0,0,0,.2); }
.scroll-cue { position:absolute; z-index:3; bottom:35px; right:5vw; width:46px; height:46px; border:1px solid #68686d; border-radius:50%; display:grid; place-items:center; }
.section { padding:110px 7vw; }.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:48px; }.section-heading>p { max-width:430px; color:var(--muted); line-height:1.7; }
h2 { font-size:clamp(36px,4vw,62px); line-height:1.08; letter-spacing:-.045em; margin:14px 0 0; }.kicker { color:var(--red); }
.vehicles { background:#f1efea; color:#151518; }.vehicle-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.vehicle-card { background:white; box-shadow:0 12px 30px rgba(0,0,0,.07); }.vehicle-photo { height:250px; position:relative; overflow:hidden; }.vehicle-photo img { height:100%; object-fit:cover; transition:.5s; }.vehicle-card:hover img { transform:scale(1.04); }.vehicle-photo span { position:absolute; top:14px; left:14px; padding:7px 10px; background:rgba(7,7,8,.82); color:white; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.vehicle-info { display:flex; justify-content:space-between; align-items:center; padding:22px; }.vehicle-info p { margin:0 0 6px; color:#77777c; font-size:11px; text-transform:uppercase; letter-spacing:.14em; }.vehicle-info h3 { margin:0; font-size:20px; }.vehicle-info a { width:40px; height:40px; display:grid; place-items:center; border:1px solid #ddd; border-radius:50%; }.center { text-align:center; margin-top:45px; }.text-link { color:#666; }.text-link span { color:#111; font-weight:700; margin-left:7px; }
.services { display:grid; grid-template-columns:.85fr 1.15fr; gap:10vw; background:#0a0a0b; }.service-list article { display:grid; grid-template-columns:70px 1fr; gap:28px; padding:34px 0; border-top:1px solid var(--line); }.service-list article:last-child { border-bottom:1px solid var(--line); }.service-list>article>span { color:var(--red); font:700 12px monospace; }.service-list h3 { margin:0 0 12px; font-size:24px; }.service-list p { color:var(--muted); line-height:1.7; margin:0; max-width:580px; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; background:#151517; }.about-image { position:relative; }.about-image>img { height:610px; object-fit:cover; filter:saturate(.7) contrast(1.08); }.about-badge { position:absolute; right:-45px; bottom:40px; width:210px; padding:24px; background:var(--red); display:flex; gap:16px; align-items:center; }.about-badge strong { font-size:31px; }.about-badge span { font-size:10px; text-transform:uppercase; line-height:1.7; letter-spacing:.1em; border-left:1px solid rgba(255,255,255,.5); padding-left:14px; }.about-copy>p:not(.kicker) { color:var(--muted); line-height:1.8; font-size:16px; }.about-copy blockquote { margin:35px 0; padding-left:24px; border-left:3px solid var(--red); font:italic 25px/1.5 Georgia,serif; color:white; }
.contact { display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; background:#ece9e4; color:#141416; }.contact-copy>p:not(.kicker) { color:#65656a; line-height:1.8; }.contact-points { display:flex; flex-direction:column; gap:14px; margin-top:34px; font-size:13px; font-weight:700; }.contact-points span::first-letter { color:var(--red); }.contact-form { background:white; padding:42px; box-shadow:0 20px 60px rgba(0,0,0,.08); }.contact-form label { display:flex; flex-direction:column; gap:9px; margin-bottom:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.contact-form input,.contact-form select,.contact-form textarea { border:0; border-bottom:1px solid #d8d6d2; padding:11px 3px; background:transparent; color:#222; font:14px Arial,sans-serif; outline:none; resize:vertical; }.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--red); }.contact-form button { width:100%; border:0; margin-top:5px; }.contact-form small { display:block; text-align:center; color:#888; margin-top:13px; font-size:10px; text-transform:none; letter-spacing:0; }
footer { padding:60px 7vw 25px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; border-top:1px solid var(--line); color:#8e8e93; }.footer-brand { display:flex; gap:13px; align-items:center; color:white; }.footer-brand img { width:55px; height:45px; object-fit:cover; object-position:left; }.footer-brand strong { display:block; font-size:13px; letter-spacing:.1em; }.footer-brand span { font-size:8px; letter-spacing:.4em; }.footer-links { display:flex; gap:22px; font-size:12px; color:#bbb; }footer>small { grid-column:1/-1; padding-top:24px; border-top:1px solid #1f1f22; font-size:10px; }
@media(max-width:980px){ nav a:not(.nav-cta){display:none}.vehicle-grid{grid-template-columns:1fr 1fr}.services,.about,.contact{grid-template-columns:1fr}.about-image>img{height:480px}.about-badge{right:20px}.section-heading{align-items:start;flex-direction:column}.hero{height:650px}.hero-image{object-position:center top}.hero-shade{background:linear-gradient(0deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.08) 70%,transparent)}.hero-actions{margin-left:45px}footer{grid-template-columns:1fr}}
@media(max-width:620px){.nav-wrap{height:68px}.brand span{font-size:12px}.brand img{width:38px;height:33px}.nav-cta{padding:9px 12px}.hero{height:650px;margin-top:68px}.hero-image{height:auto;object-fit:contain}.hero-content{padding:0 6vw 8vh}h1{font-size:38px}.hero-copy{font-size:15px}.section{padding:75px 6vw}.vehicle-grid{grid-template-columns:1fr}.vehicle-photo{height:270px}.services{gap:50px}.about-image>img{height:360px}.about-badge{width:180px;right:10px;bottom:15px}.contact-form{padding:27px 20px}.form-row{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}footer>p{font-size:13px}.hero-actions{margin-left:0}.hero-actions .button{width:100%}}
.vehicle-price{font-size:20px;font-weight:800;color:var(--red);margin:0}.vehicle-specs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.vehicle-specs span{background:#f0efec;padding:8px 11px;font-size:12px}.notice{padding:14px 18px;margin-bottom:20px;background:#e7f6ea;color:#226b32}.single-vehicle{padding:130px 7vw 80px;background:#f1efea;color:#151518;min-height:80vh}.single-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw}.single-gallery img{margin-bottom:14px}.single-copy h1{font-size:clamp(42px,5vw,72px)}.single-copy{position:sticky;top:110px;align-self:start}.back-link{display:inline-block;margin-bottom:20px;color:#666}.no-vehicles{grid-column:1/-1;padding:45px;background:white;text-align:center;color:#666}@media(max-width:800px){.single-grid{grid-template-columns:1fr}.single-copy{position:static}}