/* ─────────────────── Variables & Reset ─────────────────── */
:root{
  --color-bg:#FFF;
  --color-primary:#1E3A8A;
  --color-accent:#F97316;
  --color-text:#111;
  --color-text-light:#555;
  --color-border:#E5E7EB;
  --chips-bg:#F5F5F5;
  --header-height:60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI', Arial, sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-accent)}
.container{width:90%;max-width:1200px;margin:0 auto;padding:0 16px}

/* Focus visible (accessibilité) */
a:focus-visible,
button:focus-visible,
.input-group:focus-within { outline:3px solid rgba(249,115,22,.5); outline-offset:2px; }

/* ─────────────────── Header ─────────────────── */
.site-header{
  position:sticky;top:0;left:0;right:0;
  height:var(--header-height);
  background:#fff;border-bottom:1px solid var(--color-border);z-index:1000;
}
.header-inner{
  max-width:1200px;margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
}
.logo img{height:40px;width:auto;object-fit:contain}

/* Nav bureau */
.desktop-nav{display:flex;gap:24px;align-items:center}
.desktop-nav a{color:var(--color-primary);font-weight:500;position:relative;padding:4px 0}
.desktop-nav a:hover::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--color-accent);
}

/* Boutons header */
.btn-secondary,.btn-primary{padding:8px 16px;border-radius:6px;font-weight:600}
.btn-secondary{color:var(--color-primary);background:#fff;border:2px solid var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary);color:#fff}
.btn-primary{background:var(--color-accent);color:#fff;border:none;cursor:pointer}
.btn-primary:hover{background:#de7500}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}

/* Burger */
.nav-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--color-primary)}
@media (max-width:768px){.desktop-nav{display:none}.nav-toggle{display:block}}

/* ─────────────────── Menu mobile (animation fluide) ─────────────────── */
body.no-scroll{overflow:hidden}
.mobile-nav{
  position:fixed; top:var(--header-height); left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:32px 16px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  transform:translateY(-8%); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
  overflow-y:auto; z-index:999;
}
.mobile-nav.open{
  transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .28s ease, opacity .28s ease, visibility 0s;
}
.mobile-nav a{color:var(--color-primary);font-size:1.1rem;font-weight:500;padding:10px 0}
.mobile-login{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:12px}
.mobile-login .btn-secondary,.mobile-login .btn-primary{width:100%;text-align:center}

/* ─────────────────── Hero ─────────────────── */
.hero{padding:60px 16px}
.hero-inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:40px;flex-wrap:wrap
}
.hero-left{flex:1;min-width:280px;max-width:520px}
.hero-left h1{font-size:2rem;color:var(--color-primary);margin-bottom:12px}
.hero-subtitle{margin-bottom:20px;color:#333}

.inputs{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.input-group{
  display:flex;align-items:center;background:#F3F8FA;border:1px solid var(--color-border);
  border-radius:8px;padding:0 12px
}
.icon{margin-right:8px;font-size:1.2rem;color:#888;flex-shrink:0}
.address-input{
  flex:1;border:none;background:transparent;padding:14px 0;font-size:1rem;outline:none;color:var(--color-text)
}
#btn-show-prices{
  background:var(--color-accent);color:#fff;border:none;border-radius:8px;
  padding:12px 24px;font-size:1rem;cursor:pointer;transition:background .15s
}
#btn-show-prices:hover{background:#de7500}

.hero-right img{border-radius:16px;box-shadow:0 4px 28px rgba(0,0,0,.08)}

/* Mobile hero */
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse;text-align:center}
  .hero-right img{margin-bottom:20px}
}

/* ─────────────────── Promo / Coverage ─────────────────── */
.promo,.coverage{padding:60px 16px}
.promo-inner,.coverage-inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:40px;flex-wrap:wrap
}
.promo-left img,.coverage-image img{border-radius:16px}
.promo-right,.coverage-text{flex:1;min-width:280px}
.promo-right h2,.coverage-text h3{color:var(--color-primary);margin-bottom:12px}
.promo-right p,.coverage-text p{color:#333;margin-bottom:18px}
.promo-right a,.coverage-text a{
  display:inline-block;background:var(--color-accent);color:#fff;padding:12px 24px;border-radius:8px;transition:background .15s
}
.promo-right a:hover,.coverage-text a:hover{background:#de7500}

/* Couverture: texte à gauche, image à droite en bureau */
.coverage-text{order:1}
.coverage-image{order:2}
@media (max-width:900px){
  .promo-inner,.coverage-inner{flex-direction:column;text-align:center}
  .coverage-text{order:2}
  .coverage-image{order:1}
}

/* ─────────────────── Testimonials ─────────────────── */
.testimonials{padding:60px 16px;background:#F8FAFD}
.testimonials h2{text-align:center;color:var(--color-primary);margin-bottom:32px}
.testimonial-cards{
  max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px
}
.testimonial-card{
  background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.05)
}
.testimonial-card blockquote{font-style:italic;margin-bottom:12px}
.author{text-align:right;color:var(--color-accent);font-weight:700}

/* ─────────────────── FAQ ─────────────────── */
.faq{padding:60px 16px}
.faq h2{text-align:center;color:var(--color-primary);margin-bottom:32px}
.faq-item{max-width:800px;margin:0 auto 16px;border-radius:8px;background:#F3F8FA;overflow:hidden}
.faq-question{
  width:100%;padding:16px;background:#EAF2F7;border:none;text-align:left;
  font-size:1rem;color:var(--color-primary);display:flex;justify-content:space-between;align-items:center;cursor:pointer
}
.faq-answer{
  max-height:0;padding:0 16px;background:#fff;color:var(--color-text);font-size:.95rem;line-height:1.4;
  transition:max-height .3s ease,padding .3s ease
}
.faq-item.open .faq-answer{max-height:200px;padding:16px}

/* ─────────────────── Footer ─────────────────── */
.site-footer{background:#fff;color:var(--color-text);border-top:1px solid var(--color-border)}
.footer-top{padding:60px 16px}
.footer-logo img{height:40px;width:auto;margin-bottom:16px}
.footer-columns{
  max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;padding-top:24px
}
.footer-columns h4{margin-bottom:12px;font-size:1rem;color:var(--color-primary)}
.footer-columns a{color:var(--color-text-light);font-size:.95rem}
.footer-columns a:hover{color:var(--color-primary)}
.footer-bottom{
  border-top:1px solid var(--color-border);padding:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;font-size:.85rem
}
.social-icons a{margin-right:12px;color:var(--color-text-light)}
.social-icons a:hover{color:var(--color-primary)}
.footer-legal,.app-buttons{display:flex;align-items:center;gap:16px}
.footer-legal span{margin-right:24px}
.app-buttons img{height:32px}

/* ─────────────────── Responsives complémentaires ─────────────────── */
@media (max-width:768px){ #btn-show-prices{width:100%} }

/* ─────────────────── Préférences d’animation ─────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ─────────────────── Dark mode (optionnel) ─────────────────── */
@media (prefers-color-scheme: dark){
  :root{
    --color-bg:#0b0e12;
    --color-text:#e9eef6;
    --color-text-light:#b9c2cf;
    --color-border:#1f2a37;
  }
  body, .site-footer, .testimonial-card, .faq-item, .summary{ background:#11151a; }
  .site-header{ background:#0f1318; border-bottom-color:#1f2a37; }
  .footer-bottom{ border-top-color:#1f2a37; }
  .input-group{ background:#121821; border-color:#1f2a37; }
  .promo, .coverage, .testimonials, .faq { background:#0b0e12; }
  .mobile-nav{ background:rgba(17,21,26,.9); }
  .faq-question{ background:#0f1722; }
}