/* =========================
   Variables & base
   ========================= */
:root{
  --nav-h: 56px;         /* hauteur du header sur mobile */
  --bg:#111;
  --paper:#fff;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#1f3b88;
  --brand-2:#0d2e7a;
  --border:#e5e7eb;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text); background:#fafafa; }
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--brand-2); text-decoration:none; }
.container{ max-width:1200px; margin-inline:auto; padding:0 16px; }
section{ scroll-margin-top: var(--nav-h); } /* ancres propres sur mobile */

/* =========================
   HEADER / NAV
   ========================= */
.site-header{ position:sticky; top:0; z-index:1000; background:var(--bg); color:#fff; }
.nav-inner{
  height:var(--nav-h);
  max-width:1200px; margin:0 auto; padding:0 12px;
  display:flex; align-items:center; gap:14px;
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand-name{ color:#fff; font-weight:800; font-size:1.08rem; }

/* desktop nav */
.desktop-nav{ margin-left:auto; display:flex; align-items:center; gap:22px; }
.desktop-nav .nav-link{ color:#fff; opacity:.9; }
.desktop-nav .nav-link:hover{ opacity:1; }

.nav-right{ display:flex; align-items:center; gap:12px; }
.nav-phone{ color:#fff; background:rgba(255,255,255,.12); padding:6px 12px; border-radius:12px; }
.nav-cta{ color:var(--brand-2); background:#fff; border:1px solid #fff; padding:10px 16px; border-radius:12px; font-weight:700; }
.nav-btn.nav-call{ color:#fff; border:1.5px solid #fff; padding:10px 16px; border-radius:12px; }

/* mobile actions */
.mobile-actions{ display:none; margin-left:auto; align-items:center; gap:8px; }
.call-ico{ color:#fff; font-size:20px; }
.nav-toggle{ background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle .bar{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; border-radius:2px; }

/* drawer + backdrop */
.nav-backdrop{
  position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.mobile-drawer{
  position:fixed; top:var(--nav-h); right:0; bottom:0; left:30%;
  background:#0f1116; color:#fff; transform:translateX(100%);
  transition: transform .28s ease; padding:16px; overflow:auto; z-index:1001;
}
.mobile-drawer .drawer-section{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.drawer-link{ color:#fff; background:rgba(255,255,255,.06); padding:12px; border-radius:10px; }
.btn{ display:flex; justify-content:center; align-items:center; padding:12px; border-radius:12px; }
.drawer-cta{ background:#fff; color:var(--brand-2); font-weight:800; }
.drawer-call{ border:1.5px solid #fff; color:#fff; }

/* opened state */
body.nav-open{ overflow:hidden; }
body.nav-open .nav-backdrop{ opacity:.5; pointer-events:auto; }
body.nav-open .mobile-drawer{ transform:translateX(0); }

/* =========================
   Titles / sections
   ========================= */
.title-wrap{ padding:12px 0; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.page-title{ font-weight:800; font-size: clamp(1.2rem, .8rem + 1.8vw, 1.9rem); margin:6px 0; }

.section-title{ font-weight:800; font-size: clamp(1.15rem, .8rem + 1.2vw, 1.55rem); margin:0 0 14px; }

/* =========================
   Intro split
   ========================= */
.intro-split{ padding:18px 0 10px; }
.intro-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:22px; align-items:center; }
.intro-media img{ border-radius:14px; box-shadow:var(--shadow); }
.intro-text p{ color:#374151; line-height:1.45; }
.intro-list{ margin:8px 0 0; padding-left:18px; }

/* =========================
   Services
   ========================= */
.services-section{ padding:28px 0 8px; }
.service-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
.service-card{ background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.service-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.service-body{ padding:14px; }
.icon-list{ margin:0; padding-left:18px; color:#374151; line-height:1.45; }

/* =========================
   Devis
   ========================= */
.lead-section{ padding:28px 0 8px; }
.lead-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:18px; }
.lead-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.lead-form form{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.form-group label{ display:block; font-weight:600; margin-bottom:6px; font-size:.95rem; }
input[type="text"], input[type="email"], input[type="tel"]{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:12px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus{
  border-color:#9bb1ff; box-shadow:0 0 0 3px rgba(110,125,255,.15);
}
.btn-quote{ background:var(--brand); color:#fff; border:0; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer; }
.btn-quote--full{ width:100%; margin-top:10px; }
.form-status{ min-height:20px; margin-top:8px; }
.form-status.is-success{ color:#137a3c; }
.form-status.is-error{ color:#c22721; }

/* =========================
   FAQ
   ========================= */
.faq-section{ padding:24px 0 8px; }
.faq-list details{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:10px 0; box-shadow:var(--shadow); }
.faq-list summary{ cursor:pointer; font-weight:700; }

/* =========================
   Avis inline
   ========================= */
.testimonials-section{ padding:18px 0 8px; }
.review-inline-wrap{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px; box-shadow:var(--shadow); }
.review-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ri-name,.ri-comment{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.ri-name{ min-width:180px; }
.ri-comment{ flex:1 1 260px; }

.rating{ display:inline-flex; flex-direction:row-reverse; }
.rating input{ position:absolute; opacity:0; }
.rating label{ font-size:20px; color:#ddd; cursor:pointer; margin-inline:2px; }
.rating input:checked ~ label,
.rating label:hover, .rating label:hover ~ label{ color:#f59e0b; }

/* =========================
   Témoignages (en bas)
   ========================= */
.clients-talk{ padding:24px 0 40px; }
.clients-title{ font-weight:800; font-size: clamp(1.15rem, .8rem + 1.2vw, 1.55rem); margin:0 0 14px; }
.talk-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
.talk{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.talk p{ margin:0 0 12px; color:#111827; font-style:italic; line-height:1.45; }
.talk footer{ color:#fff; background:#111827; display:inline-block; padding:6px 10px; border-radius:8px; }

/* =========================
   Footer
   ========================= */
footer{ background:#0c0c0f; color:#d1d5db; margin-top:20px; }
.footer-grid{ display:grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap:18px; padding:20px 16px; }
footer h3{ color:#fff; margin:0 0 8px; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:6px 0; }
.footer-links a{ color:#e5e7eb; }
.footer-links a:hover{ color:#fff; }
.copy{ border-top:1px solid rgba(255,255,255,.12); padding:10px 16px; text-align:center; color:#9ca3af; }

/* =========================
   Responsive
   ========================= */

/* Desktop plus confortable */
@media (min-width: 1024px){
  :root{ --nav-h: 68px; }
  .nav-inner{ height:var(--nav-h); }
  .title-wrap{ padding:16px 0; }
}

/* Tablettes et petits laptops */
@media (max-width: 1024px){
  /* nav : on bascule en mobile */
  .desktop-nav{ display:none; }
  .mobile-actions{ display:flex; }
  .mobile-drawer{ left:20%; }  /* un peu plus large */
  .page-title{ text-wrap:balance; }
  .intro-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lead-grid{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

/* Téléphones */
@media (max-width: 640px){
  :root{ --nav-h: 60px; }           /* header un peu plus haut, confortable au doigt */
  .nav-inner{ height:var(--nav-h); padding-inline:10px; }
  .brand-name{ font-size:1rem; }
  .mobile-drawer{ left:0; }         /* drawer plein écran pour mobile */
  .intro-split{ padding:14px 0 6px; }
  .services-section{ padding:20px 0 6px; }
  .service-grid{ grid-template-columns: 1fr; }
  .lead-section{ padding:20px 0 6px; }
  .faq-section{ padding:18px 0 6px; }
  .testimonials-section{ padding:14px 0 6px; }

  .rating label{ font-size:18px; }
  .ri-name{ min-width:140px; }
  .ri-comment{ min-width:200px; }

  .talk-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}