:root{
  --navy:#0b2b5a;
  --navy2:#071c3a;
  --accent:#F99904; /* orange logo */
  --ink:#0b1320;
  --muted:#667690;
  --bg1:#ffffff;
  --bg2:#f6f8fb;
  --card:#ffffff;
  --line:rgba(7,28,58,.10);
  --shadow: 0 18px 50px rgba(11,19,32,.14);
  --shadow2: 0 10px 26px rgba(11,19,32,.10);
  --radius: 22px;
  --max: 1160px;

  /* Typography */
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-heading: "Fraunces", ui-serif, Georgia, "Times New Roman", Times, serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-body);
  color:var(--ink);
  line-height:1.55;
  background:
    radial-gradient(1000px 520px at 14% 8%, rgba(249,153,4,.16), transparent 58%),
    radial-gradient(1000px 560px at 86% 14%, rgba(11,43,90,.14), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Headings */
h1,h2{font-family:var(--font-heading)}
h3,h4,.panel-title{font-family:var(--font-body)}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

/* Topbar (NOT sticky) */
.topbar{
  position:relative;
  z-index:20;
  background:linear-gradient(135deg, rgba(7,28,58,.96), rgba(11,43,90,.92));
  color:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}
.topbar-left,.topbar-right{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; font-weight:800; font-size:13px}
.tb-item{opacity:.92; text-decoration:none}
.tb-item.strong{opacity:1}
.tb-dot{opacity:.55}
.tb-item:hover{opacity:1; text-decoration:underline}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(7,28,58,.14);
  background:rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  transition: transform .14s ease, box-shadow .22s ease, filter .22s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-1px); filter:saturate(1.04)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(135deg, var(--accent), #ffd36c);
  color:#1b2a45;
  border-color:transparent;
  box-shadow: 0 16px 40px rgba(249,153,4,.22);
}
.btn-primary:hover{box-shadow: 0 18px 46px rgba(249,153,4,.28)}

.btn-ghost{
  background:#fff;
  color:var(--navy2);
  border-color:rgba(7,28,58,.12);
}

.btn-gold{
  background:#25D366;
  color:#ffffff;
  border-color:transparent;
  box-shadow: 0 16px 40px rgba(37,211,102,.22);
  padding:14px 22px;
  min-width: 172px;
}
.btn-gold:hover{background:#1ebe5d; box-shadow: 0 18px 46px rgba(37,211,102,.28)}
.btn-gold:active{transform:translateY(0)}

.btn .ico{width:18px; height:18px; display:block; flex:0 0 auto}
.btn span{white-space:nowrap}


/* Header sticky */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,248,251,.84);
  backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid rgba(7,28,58,.08);
}
.header.scrolled{box-shadow: 0 12px 26px rgba(11,19,32,.08)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.brand{display:flex; gap:14px; align-items:center; text-decoration:none}
.brand img{width:220px; height:220px; object-fit:contain; filter:drop-shadow(0 14px 26px rgba(0,0,0,.18))}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand strong{display:block; font-family:var(--font-heading); font-size:22px; letter-spacing:-.4px; color:var(--navy2)}
.brand strong span{color:var(--accent)}
.brand em{display:block; font-style:normal; font-size:13px; color:var(--muted); margin-top:-4px}

.nav{display:flex; gap:18px; align-items:center}
.nav a{font-weight:900; text-decoration:none; color:var(--navy2); opacity:.88}
.nav a:hover{opacity:1}

.header-actions{display:flex; gap:10px; align-items:center}

.burger{
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid rgba(7,28,58,.14);
  background:#fff;
  display:none;
  place-items:center;
}
.burger span{display:block; width:18px; height:2px; background:var(--navy2); margin:2px 0}

.mobile-nav{
  position:absolute;
  left:12px; right:12px;
  top:calc(100% + 10px);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(7,28,58,.10);
  border-radius:18px;
  box-shadow: 0 18px 40px rgba(11,19,32,.12);
  padding:14px 16px 16px;
}
.mobile-nav[hidden]{display:none}
.mobile-nav a{display:block; padding:12px 12px; text-decoration:none; font-weight:900; color:var(--navy2); opacity:.92; border-radius:14px}
.mobile-nav a:hover{opacity:1; background:rgba(249,153,4,.10)}
.mobile-cta{display:grid; gap:10px; margin-top:10px}
.mobile-cta .btn{width:100%}

/* Hero */
.hero{position:relative; overflow:hidden; padding:56px 0 42px}
.hero-bg{
  position:absolute;
  inset:-40px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(246,248,251,1)),
    radial-gradient(1100px 520px at 15% 10%, rgba(249,153,4,.20), transparent 58%),
    radial-gradient(1100px 560px at 85% 16%, rgba(11,43,90,.18), transparent 60%),
    url('/assets/img/hero_roof.jpg');
  background-size: auto, auto, auto, cover;
  background-position: center;
  filter:saturate(1.05);
}
.hero-overlay{position:absolute; inset:-2px; background-image: radial-gradient(circle at 1px 1px, rgba(7,28,58,.10) 1px, transparent 0); background-size: 26px 26px; opacity:.22; pointer-events:none}

.hero-grid{position:relative; display:grid; grid-template-columns: 1.12fr .88fr; gap:28px; align-items:center}
.hero-kicker{font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:rgba(7,28,58,.70)}
.hero h1{margin:12px 0 10px; font-family:var(--font-heading); font-size:clamp(34px, 3.8vw, 58px); line-height:1.03; letter-spacing:-.9px; color:var(--navy2)}
.hero-lead{font-size:clamp(16px, 1.4vw, 18px); color:rgba(11,19,32,.80); max-width: 60ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.hero-cta .btn{box-shadow: var(--shadow)}

.hero-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.badge{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(7,28,58,.08);
  border-radius:18px;
  padding:14px 16px;
  box-shadow: var(--shadow2);
  display:flex;
  gap:12px;
  align-items:center;
}
.badge-ico{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(249,153,4,.18);
  border:1px solid rgba(7,28,58,.10);
  color:var(--navy2);
  flex:0 0 auto;
}
.badge-ico svg{display:block}
.badge-text strong{display:block; color:var(--navy2); margin-bottom:4px; font-weight:1000}
.badge-text span{color:var(--muted)}

.hero-panel .panel{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(7,28,58,.08);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-top{padding:20px 20px 12px}
.panel-title{font-weight:1000; color:var(--navy2); letter-spacing:-.3px}
.panel-sub{color:var(--muted); font-weight:800; margin-top:4px}
.panel-illus{margin:0 20px 0; border-radius:18px; overflow:hidden; border:1px solid rgba(7,28,58,.10)}
.hero-photo{display:block; width:100%; height:auto}

.panel-list{display:grid; gap:12px; padding:16px 20px 20px}
.panel-list .li{display:flex; gap:12px; align-items:center}
.panel-list .li > span{
  width:26px; height:26px;
  border-radius:10px;
  display:grid; place-items:center;
  background:rgba(249,153,4,.22);
  border:1px solid rgba(7,28,58,.10);
  font-weight:1000;
  color:var(--navy2);
  flex:0 0 auto;
}
.panel-list strong{display:block; color:var(--navy2)}
.panel-list small{display:block; color:var(--muted); margin-top:2px}

/* Sections */
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, rgba(7,28,58,.03), rgba(7,28,58,0) 60%)}
.section-head{display:flex; justify-content:space-between; gap:22px; align-items:flex-end; margin-bottom:22px}
.eyebrow{margin:0 0 6px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:rgba(11,43,90,.75)}
.section-head h2{margin:0; font-size:clamp(24px, 2.2vw, 36px); letter-spacing:-.5px; color:var(--navy2)}
.section-head .muted{margin:0; color:var(--muted); max-width: 72ch}
.muted{color:var(--muted)}

/* About */
.about-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
.about-card{
  background:var(--card);
  border:1px solid rgba(7,28,58,.08);
  border-radius:var(--radius);
  box-shadow: var(--shadow2);
  padding:22px;
}
.about-card h3{margin:0 0 12px; color:var(--navy2)}
.check{margin:0; padding-left:18px; display:grid; gap:10px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(11,43,90,.08); border:1px solid rgba(7,28,58,.10); font-weight:900; font-size:12px; color:var(--navy2)}
.callout{margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:18px; border:1px solid rgba(7,28,58,.08); background:linear-gradient(135deg, rgba(11,43,90,.06), rgba(249,153,4,.10))}
.callout a{text-decoration:none; font-weight:1000}

/* Services */
.cards3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.card{
  position:relative;
  background:var(--card);
  border:1px solid rgba(7,28,58,.08);
  border-radius:var(--radius);
  box-shadow: var(--shadow2);
  padding:22px;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--accent), rgba(249,153,4,.2));
}
.card:hover{transform:translateY(-1px)}
.icon{width:46px;height:46px; border-radius:16px; display:grid; place-items:center; background:rgba(249,153,4,.18); border:1px solid rgba(7,28,58,.10); font-weight:1000; color:var(--navy2)}
.card h3{margin:14px 0 8px; color:var(--navy2)}

.cta-strip{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px solid rgba(7,28,58,.08);
  background:linear-gradient(135deg, rgba(7,28,58,.96), rgba(11,43,90,.86));
  color:#fff;
  box-shadow: var(--shadow);
}
.cta-strip strong{display:block; font-size:18px}
.cta-strip span{opacity:.88}
.cta-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cta-actions .btn{box-shadow:none}

/* Gallery carousel */
.gallery-carousel{
  position:relative;
  border-radius:var(--radius);
}
.car-viewport{
  overflow:hidden;
  border-radius:var(--radius);
  position:relative;
  z-index:1;
}
.car-track{
  display:flex;
  gap:14px;
  padding:4px;
  scroll-snap-type:x mandatory;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.car-track::-webkit-scrollbar{height:10px}
.car-track::-webkit-scrollbar-thumb{background:rgba(7,28,58,.18); border-radius:999px}
.car-slide{
  flex:0 0 33%;
  min-width: 320px;
  scroll-snap-align:start;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(7,28,58,.10);
  box-shadow: var(--shadow2);
  background:#fff;
  text-decoration:none;
  position:relative;
}
.car-slide img{width:100%; height:280px; object-fit:cover; display:block}
.car-cap{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; display:flex; gap:10px; align-items:center; background:linear-gradient(180deg, transparent, rgba(7,28,58,.62)); color:#fff}
.car-num{font-weight:1000; background:rgba(249,153,4,.92); color:#1b2a45; padding:6px 10px; border-radius:999px}
.car-alt{font-weight:900; opacity:.95}
.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(7,28,58,.12);
  background:rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  cursor:pointer;
  font-size:26px;
  font-weight:900;
  color:var(--navy2);
  z-index:5;
}
.car-btn:hover{transform:translateY(-50%) scale(1.02)}
.car-btn.prev{left:-10px}
.car-btn.next{right:-10px}

.empty{padding:18px; border-radius:18px; border:1px dashed rgba(7,28,58,.18); background:rgba(255,255,255,.70)}

/* FAQ */
.faq{display:grid; gap:12px}
.faq-item{border-radius:22px; border:1px solid rgba(7,28,58,.10); background:#fff; box-shadow: var(--shadow2); overflow:hidden}
.faq-q{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:18px 18px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-weight:1000;
  color:var(--navy2);
  text-align:left;
  font-size:18px;
  line-height:1.25;
}
.faq-q i{
  width:34px; height:34px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(249,153,4,.18);
  border:1px solid rgba(7,28,58,.10);
  font-style:normal;
  font-weight:1000;
  color:var(--navy2);
  transition: transform .18s ease;
}
.faq-item.is-open .faq-q i{transform:rotate(45deg)}
.faq-a{padding:0 18px 18px; color:rgba(11,19,32,.78); font-size:16px; line-height:1.55}
.faq-a p{margin:0}

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
.form{
  background:#fff;
  border:1px solid rgba(7,28,58,.08);
  border-radius:var(--radius);
  box-shadow: var(--shadow2);
  padding:22px;
}
label{display:block; font-weight:900; color:var(--navy2); margin:0 0 10px}
input,textarea{
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(7,28,58,.14);
  background:rgba(246,248,251,.72);
  outline:none;
  font:inherit;
}
textarea{resize:vertical}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.hp{position:absolute; left:-9999px; top:-9999px}
.flash{margin-top:12px; padding:12px 14px; border-radius:14px; font-weight:900}
.flash.ok{background:rgba(46, 204, 113, .12); border:1px solid rgba(46,204,113,.28)}
.flash.bad{background:rgba(231, 76, 60, .12); border:1px solid rgba(231,76,60,.28)}

.contact-card{border-radius:var(--radius); border:1px solid rgba(7,28,58,.08); box-shadow: var(--shadow2); overflow:hidden; background:#fff}
.contact-lines{display:grid; gap:14px; padding:22px}
.cline{display:flex; gap:12px; align-items:flex-start}
.cline > span{width:40px;height:40px;border-radius:16px; display:grid; place-items:center; background:rgba(11,43,90,.08); border:1px solid rgba(7,28,58,.10)}
.cline strong{display:block}
.cline small{color:var(--muted)}
.cline a{text-decoration:none; font-weight:1000}

.map{border-top:1px solid rgba(7,28,58,.08)}
.map-iframe{width:100%; height:340px; border:0; display:block}
.map-actions{display:flex; gap:10px; padding:14px; justify-content:flex-end; flex-wrap:wrap; background:rgba(246,248,251,.72)}
.map-actions .btn{box-shadow:none}

/* Footer */
.footer{padding:26px 0; border-top:1px solid rgba(7,28,58,.08)}
.footer-inner{display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap}
.foot-links{display:flex; gap:14px; flex-wrap:wrap}
.foot-links a{text-decoration:none; font-weight:900; color:rgba(11,19,32,.78)}
.foot-links a:hover{color:var(--navy2)}

/* Floating CTAs (avoid overlap) */
.fab-call,.fab-wa{
  position:fixed;
  right:18px;
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:1000;
  box-shadow: var(--shadow);
  border:1px solid rgba(7,28,58,.12);
  background:#fff;
}
.fab-call{bottom:18px; background:linear-gradient(135deg, var(--accent), #ffd36c); border-color:transparent; color:#1b2a45}
.fab-wa{bottom:78px; background:#25D366; border-color:transparent; color:#ffffff}
.fab-wa:hover{background:#1ebe5d}
.fab-call small,.fab-wa small{font-weight:1000}
.fab .ico{width:18px;height:18px;display:block}
.fab-call .ico{filter:grayscale(1)}

/* Reveal */
.reveal{opacity:0; transform:translateY(14px); transition: opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; align-items:center; justify-content:center; padding:18px; z-index:90}
.lightbox.open{display:flex}
.lightbox-frame{background:#fff; border-radius:22px; max-width:min(980px, 100%); width:100%; padding:14px; position:relative; box-shadow:0 40px 110px rgba(0,0,0,.35)}
.lightbox-frame img{width:100%; height:auto; border-radius:16px; display:block}
.lightbox-frame .x{position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:14px; border:0; cursor:pointer; background:rgba(255,255,255,.92); box-shadow: var(--shadow2); font-size:18px; font-weight:1000}
.lightbox-frame .cap{margin-top:10px; color:rgba(11,19,32,.72); font-weight:900}

/* Responsive */
@media (max-width: 980px){
  /* Keep header compact on laptops/tablets */
  .brand img{width:170px; height:170px}
  .brand strong{font-size:21px}
  .hero-grid{grid-template-columns:1fr}
  .hero-badges{grid-template-columns:1fr}
  .section-head{flex-direction:column; align-items:flex-start}
  .about-grid{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .car-slide{flex-basis:80%; min-width: 280px}
}

@media (max-width: 860px){
  .nav{display:none}
  .burger{display:grid}
  .header-actions .btn{display:none}
  .brand img{width:150px; height:150px}
}

@media (max-width: 520px){
  .wrap{width:calc(100% - 26px)}
  .topbar-inner{flex-direction:column; align-items:flex-start}
  .brand{gap:12px}
  .brand img{width:120px; height:120px}
  .brand strong{font-size:20px}
  .grid2{grid-template-columns:1fr}
  .cta-strip{flex-direction:column; align-items:flex-start}
  .map-actions{justify-content:flex-start}
  .fab-call,.fab-wa{right:12px}
  .fab-wa{bottom:76px}

  /* Mobile FAQ sizing */
  .faq-q{font-size:17px; padding:18px 16px}
  .faq-a{font-size:15.5px; padding:0 16px 18px}

  /* WhatsApp label should never clip */
  .btn-gold{min-width:0}
  /* Mobile: stack CTA buttons */
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%; justify-content:center}

}
/* Sticky header compact (compatible Safari) */
.header{
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
}

.header-inner{
  min-height: 96px;
  transition: padding .2s ease, min-height .2s ease;
}

/* Logo: animation de taille */
.brand img{
  transition: width .2s ease, height .2s ease, filter .2s ease;
}

/* Quand on scroll (main.js met déjà .scrolled) */
.header.scrolled .header-inner{
  min-height: 76px;
  padding: 6px 0;
}

.header.scrolled .brand img{
  width: 150px;
  height: 150px;
}

/* Tablette */
@media (max-width: 980px){
  .header.scrolled .brand img{ width: 130px; height: 130px; }
}

/* Mobile */
@media (max-width: 520px){
  .header.scrolled .header-inner{ min-height: 70px; padding: 6px 0; }
  .header.scrolled .brand img{ width: 96px; height: 96px; }
}