@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --bleu: #1F2D3D;
  --bleu-2: #16212D;
  --bleu-clair: #2C4258;
  --beige: #C9A876;
  --beige-clair: #E4D4B8;
  --fond: #F5F1EA;
  --gris: #6B6660;
  --blanc: #ffffff;
  --radius: 20px;
}
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Poppins',sans-serif; color:var(--bleu); background:var(--blanc); line-height:1.65; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img, svg { display:block; max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
section { padding:100px 0; position:relative; }
h1,h2,h3 { font-weight:800; letter-spacing:-0.02em; }
.tag { letter-spacing:3px; text-transform:uppercase; font-size:12.5px; font-weight:700; color:var(--beige); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-delay-1.in { transition-delay:0.1s; }
.reveal-delay-2.in { transition-delay:0.2s; }
.reveal-delay-3.in { transition-delay:0.3s; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-toggle:focus-visible {
  outline:3px solid var(--beige); outline-offset:2px;
}
.skip-link { position:absolute; left:-999px; top:auto; background:var(--bleu); color:#fff; padding:12px 20px; z-index:1000; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; top:0; }

/* HEADER */
header { position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,0.9); backdrop-filter:blur(14px); z-index:200; border-bottom:1px solid rgba(0,0,0,0.05); }
.navbar { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1200px; margin:0 auto; }
.logo { display:flex; align-items:center; gap:10px; }
.logo-icon { width:36px; height:36px; flex-shrink:0; }
.logo-text { font-weight:800; font-size:17px; line-height:1; letter-spacing:-0.01em; }
.logo-text span { display:block; font-size:10px; font-weight:500; color:var(--gris); letter-spacing:0.5px; margin-top:3px; }
nav ul { display:flex; gap:26px; list-style:none; }
nav a { font-weight:500; font-size:14.5px; position:relative; padding:4px 0; }
nav a.active, nav a:hover { color:var(--bleu); }
nav a::after { content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--beige); transition:0.25s; }
nav a:hover::after, nav a.active::after { width:100%; }
.nav-cta { display:flex; gap:10px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; border:none; transition:0.25s cubic-bezier(.2,.8,.2,1); }
.btn-primary { background:var(--bleu); color:#fff; box-shadow:0 6px 18px -6px rgba(31,45,61,0.5); }
.btn-primary:hover { background:var(--bleu-clair); transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(31,45,61,0.55); }
.btn-outline { background:transparent; border:1.5px solid var(--bleu); color:var(--bleu); }
.btn-outline:hover { background:var(--bleu); color:#fff; }
.btn-gold { background:linear-gradient(135deg,#D8B98A,var(--beige)); color:var(--bleu); box-shadow:0 6px 18px -6px rgba(201,168,118,0.6); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(201,168,118,0.7); }
.btn-lg { padding:17px 32px; font-size:15.5px; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:22px; height:2px; background:var(--bleu); position:relative; transition:0.25s; }
.nav-toggle span::before { position:absolute; top:-7px; }
.nav-toggle span::after { position:absolute; top:7px; }
.nav-toggle.open span { background:transparent; }
.nav-toggle.open span::before { transform:rotate(45deg); top:0; }
.nav-toggle.open span::after { transform:rotate(-45deg); top:0; }
.mobile-menu { display:none; flex-direction:column; background:#fff; border-top:1px solid rgba(0,0,0,0.06); padding:8px 24px 20px; }
.mobile-menu a { display:block; padding:13px 0; font-weight:600; font-size:15.5px; border-bottom:1px solid rgba(0,0,0,0.05); }
.mobile-menu .nav-cta { flex-direction:column; align-items:stretch; margin-top:14px; gap:10px; }
.mobile-menu.open { display:flex; }

/* PAGE HERO (sous-pages) */
.page-hero { padding:150px 0 60px; background:linear-gradient(180deg, var(--fond) 0%, #fff 100%); text-align:center; }
.page-hero .tag { display:block; margin-bottom:12px; }
.page-hero h1 { font-size:42px; }
.breadcrumb { font-size:13px; color:var(--gris); margin-bottom:18px; }
.breadcrumb a:hover { color:var(--beige); }

/* HOME HERO */
.hero { padding:170px 0 90px; background:
    radial-gradient(circle at 85% 15%, rgba(201,168,118,0.16), transparent 45%),
    linear-gradient(180deg, var(--fond) 0%, #fff 75%);
  overflow:hidden;
}
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:70px; align-items:center; }
.hero h1 { font-size:52px; line-height:1.08; margin:18px 0 22px; }
.hero h1 em { font-style:normal; color:var(--beige); }
.hero p.lead { font-size:18.5px; color:var(--gris); margin-bottom:34px; max-width:480px; }
.hero-ctas { display:flex; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.stat-row { display:flex; gap:40px; flex-wrap:wrap; }
.stat .num { font-size:28px; font-weight:800; color:var(--bleu); }
.stat .lbl { font-size:12.5px; color:var(--gris); font-weight:500; }

/* BEFORE/AFTER SLIDER */
.ba-wrap { position:relative; border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(31,45,61,0.4); aspect-ratio:4/5; }
.ba-layer { position:absolute; inset:0; background-size:cover; background-position:center; }
.ba-before { background-image:
    repeating-linear-gradient(0deg, rgba(217,210,196,0.001) 0px, rgba(217,210,196,0.001) 38px, rgba(0,0,0,0.06) 39px, rgba(0,0,0,0.06) 40px),
    linear-gradient(0deg,#d9d2c4,#d9d2c4);
}
.ba-after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--split, 50%); width:3px; background:#fff; transform:translateX(-50%); z-index:5; }
.ba-handle::before { content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--bleu); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
.ba-slider { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:6; }
.ba-label { position:absolute; top:20px; padding:8px 14px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; z-index:4; }
.ba-label.before-lbl { left:20px; background:rgba(0,0,0,0.55); color:#fff; }
.ba-label.after-lbl { right:20px; background:rgba(255,255,255,0.9); color:var(--bleu); }
.ba-caption { position:absolute; bottom:20px; left:20px; right:20px; background:rgba(31,45,61,0.92); color:#fff; padding:14px 18px; border-radius:12px; font-size:13.5px; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* SECTION HEADS */
.section-head { text-align:center; max-width:660px; margin:0 auto 56px; }
.section-head h2 { font-size:36px; margin:14px 0 14px; }
.section-head p { color:var(--gris); font-size:16.5px; }

/* STATS BAND */
.stats-band { background:var(--bleu); padding:56px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats-grid .num { font-size:34px; font-weight:800; color:var(--beige); }
.stats-grid .lbl { color:#c3ccd4; font-size:13px; margin-top:6px; }

/* COMPARATIF */
.compare-table { border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px -25px rgba(31,45,61,0.25); border:1px solid #eee; }
.compare-row { display:grid; grid-template-columns:1.4fr 1fr 1fr; }
.compare-row > div { padding:20px 24px; font-size:14.5px; display:flex; align-items:center; }
.compare-row.head > div { font-weight:700; background:var(--bleu); color:#fff; font-size:14px; }
.compare-row:not(.head) { border-top:1px solid #eee; }
.compare-row:not(.head) > div:first-child { font-weight:600; background:var(--fond); }
.compare-row .yes { color:#1F7A4C; font-weight:600; }
.compare-row .no { color:#B5493A; font-weight:600; }

/* FINITIONS GRID */
.finitions-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.finition-card { border-radius:18px; overflow:hidden; border:1px solid #eee; transition:0.3s cubic-bezier(.2,.8,.2,1); }
.finition-card:hover { transform:translateY(-8px); box-shadow:0 30px 50px -20px rgba(31,45,61,0.3); border-color:transparent; }
.finition-swatch { aspect-ratio:1/1; position:relative; overflow:hidden; background-size:cover; background-position:center; }
.finition-swatch::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 2px, transparent 2px, transparent 50px); }
.finition-info { padding:18px 18px 20px; }
.finition-info .row1 { display:flex; justify-content:space-between; align-items:baseline; }
.finition-info h4 { font-size:16px; font-weight:700; }
.finition-info .price { color:var(--bleu); font-weight:800; font-size:16px; }
.finition-info span.desc { font-size:13px; color:var(--gris); }
.finition-badge { display:inline-block; font-size:11px; font-weight:700; color:var(--beige); text-transform:uppercase; letter-spacing:0.5px; margin-top:6px; }

/* PHOTO PLACEHOLDER (slot à uploader) */
.photo-slot {
  position:relative; border-radius:16px; overflow:hidden; background:var(--fond);
  border:2px dashed #d8cdb8; display:flex; align-items:center; justify-content:center;
  min-height:200px;
}
.photo-slot.has-image { border:none; background-size:cover; background-position:center; }
.photo-slot .slot-inner { text-align:center; padding:20px; color:var(--gris); }
.photo-slot .slot-inner svg { width:34px; height:34px; margin:0 auto 10px; opacity:0.5; }
.photo-slot .slot-inner .slot-title { font-weight:700; font-size:13px; color:var(--bleu); margin-bottom:4px; }
.photo-slot .slot-inner .slot-file { font-size:11px; font-family:monospace; background:#fff; padding:3px 8px; border-radius:5px; display:inline-block; margin-top:6px; border:1px solid #eee; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-grid .photo-slot:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:1/1; }
.gallery-grid .photo-slot:not(:first-child) { aspect-ratio:1/1; }

/* FINITION DETAIL */
.finition-hero { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.finition-hero .photo-slot, .finition-hero-img { border-radius:26px; aspect-ratio:4/5; box-shadow:0 40px 80px -30px rgba(31,45,61,0.35); }
.finition-hero-img { background-size:cover; background-position:center; }
.spec-table { width:100%; border-collapse:collapse; margin:26px 0; }
.spec-table tr { border-bottom:1px solid #eee; }
.spec-table td { padding:12px 0; font-size:14.5px; }
.spec-table td:first-child { color:var(--gris); width:45%; }
.spec-table td:last-child { font-weight:600; }

/* SPLIT PARTICULIERS/PRO */
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:28px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(31,45,61,0.25); }
.split-col { padding:56px 48px; }
.split-col.light { background:#fff; }
.split-col.dark { background:var(--bleu); color:#fff; }
.split-col.dark .desc { color:#c3ccd4; }
.split-col h3 { font-size:26px; margin:14px 0 12px; }
.split-col .desc { color:var(--gris); margin-bottom:6px; }
.split-col ul { list-style:none; margin:22px 0 28px; }
.split-col li { display:flex; gap:10px; margin-bottom:12px; font-size:14.5px; }
.split-col .check { color:var(--beige); font-weight:800; }
.price-box { border-radius:16px; padding:24px; margin:26px 0; }
.split-col.dark .price-box { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); }
.split-col.light .price-box { background:var(--fond); }
.price-box .amount { font-size:32px; font-weight:800; }
.price-box .unit { font-size:13.5px; }
.split-col.dark .price-box .unit { color:#c3ccd4; }
.split-col.light .price-box .unit { color:var(--gris); }
.price-box .sub { font-size:12.5px; margin-top:6px; opacity:0.8; }
.pro-price-box { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0; }
.pro-price-box .price-box { margin:0; }
.price-box-alt { background:rgba(201,168,118,0.12) !important; border:1px solid rgba(201,168,118,0.3) !important; }

/* STEPS */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; position:relative; }
.steps::before { content:""; position:absolute; top:24px; left:16%; right:16%; height:2px; background:repeating-linear-gradient(90deg,var(--beige) 0 8px, transparent 8px 16px); }
.step { text-align:center; position:relative; }
.step-num { width:48px; height:48px; border-radius:50%; background:var(--bleu); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin:0 auto 18px; position:relative; z-index:2; }
.step h4 { font-size:17px; margin-bottom:8px; }
.step p { font-size:14px; color:var(--gris); }

/* TRUST / AVIS */
.avis-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.avis-card { background:var(--fond); border-radius:18px; padding:30px; transition:0.3s; }
.avis-card:hover { transform:translateY(-4px); }
.stars { color:var(--beige); font-size:16px; margin-bottom:16px; letter-spacing:2px; }
.avis-card p { font-size:15px; color:var(--bleu); margin-bottom:18px; }
.avis-author { font-size:13px; color:var(--gris); font-weight:600; }

/* FAQ */
.faq-item { background:#fff; border-radius:14px; padding:22px 26px; margin-bottom:14px; border:1px solid #eee; cursor:pointer; }
.faq-item summary { list-style:none; font-weight:700; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:22px; color:var(--beige); font-weight:400; }
.faq-item[open] summary::after { content:"−"; }
.faq-item p { margin-top:14px; color:var(--gris); font-size:14.5px; }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; }
.contact-section { background:var(--bleu-2); color:#fff; padding:90px 0; }
.contact-section .desc { color:#c3ccd4; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; margin-bottom:7px; color:#cfd7dd; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:13px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#fff; font-family:inherit; font-size:14.5px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--beige); background:rgba(255,255,255,0.1); }
.form-group input::placeholder, .form-group textarea::placeholder { color:#8fa0ac; }
.form-row { display:flex; gap:16px; }
.form-row .form-group { flex:1; }

/* STICKY MINI CTA */
.sticky-cta { position:fixed; bottom:24px; right:24px; z-index:150; display:flex; gap:10px; opacity:0; transform:translateY(20px); pointer-events:none; transition:0.3s; }
.sticky-cta.show { opacity:1; transform:translateY(0); pointer-events:auto; }

/* FOOTER */
footer { background:#121A23; color:#9fb0bc; padding:64px 0 28px; font-size:14px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; }
.footer-grid h4 { color:#fff; font-size:15px; margin-bottom:18px; }
.footer-grid ul { list-style:none; }
.footer-grid li { margin-bottom:11px; }
.footer-grid a:hover { color:var(--beige); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#7c8b96; }

@media (max-width: 960px) {
  nav, .navbar .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .hero-grid, .split-grid, .contact-grid, .finition-hero { grid-template-columns:1fr; }
  .finitions-grid { grid-template-columns:repeat(2,1fr); }
  .steps, .avis-grid, .stats-grid { grid-template-columns:1fr; }
  .steps::before { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:36px; }
  .page-hero h1 { font-size:30px; }
  .compare-row { grid-template-columns:1.2fr 1fr 1fr; }
  .compare-row > div { padding:14px; font-size:13px; }
  .pro-price-box { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-grid .photo-slot:first-child { grid-column:span 2; }
}
@media (max-width: 560px) {
  section { padding:60px 0; }
  .hero { padding:130px 0 60px; }
  .hero h1 { font-size:30px; }
  .stat-row { gap:24px; }
  .finitions-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .footer-grid { grid-template-columns:1fr; }
  .sticky-cta { left:16px; right:16px; bottom:16px; }
  .sticky-cta .btn { flex:1; justify-content:center; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-grid .photo-slot:first-child { grid-column:span 1; }
}