:root{
    --navy:#0A1B33;
    --navy-2:#122A4D;
    --blue:#1C6FE0;
    --blue-dark:#124FA8;
    --red:#E4293B;
    --bg-alt:#F4F6F9;
    --white:#FFFFFF;
    --ink:#0A1B33;
    --text-soft:#4A5568;
    --line:#E2E6ED;
    --radius:10px;
    --shadow: 0 8px 30px rgba(10,27,51,0.08);
    --container: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Public Sans', sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    margin:0 0 .5em;
    color:var(--navy);
    line-height:1.15;
  }
  p{margin:0 0 1em;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .container{max-width:var(--container);margin:0 auto;padding:0 24px;}
  section{padding:88px 0;}
  @media (max-width:640px){ section{padding:56px 0;} }

  .eyebrow{
    display:flex;align-items:center;gap:14px;
    font-family:'Oswald',sans-serif;
    font-size:13px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--blue);font-weight:600;margin-bottom:14px;
  }
  .eyebrow::before, .eyebrow::after{content:"";flex:0 0 32px;height:1px;background:var(--blue);opacity:.5;}
  .eyebrow.center{justify-content:center;}
  .section-head{max-width:680px;margin-bottom:48px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head p{color:var(--text-soft);font-size:17px;}

  /* Header */
  header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 24px;max-width:var(--container);margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
  .brand img{height:56px;width:auto;}
  .brand-text{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:var(--navy);letter-spacing:.03em;line-height:1.2;}
  .brand-text span{display:block;font-size:11px;color:var(--blue);letter-spacing:.15em;font-weight:500;}
  nav.main-nav{display:flex;align-items:center;gap:28px;}
  nav.main-nav a{
    text-decoration:none;color:var(--navy);font-weight:600;font-size:14.5px;
    font-family:'Oswald',sans-serif;letter-spacing:.03em;text-transform:uppercase;
    padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .15s;
  }
  nav.main-nav a:hover{border-color:var(--blue);}
  .header-cta{display:flex;align-items:center;gap:18px;}
  .phone-link{
    display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);
    text-decoration:none;font-size:15px;white-space:nowrap;
  }
  .phone-link svg{flex:none;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--blue);color:#fff;font-family:'Oswald',sans-serif;
    font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:14px;
    padding:13px 24px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;
    transition:background .15s, transform .15s;white-space:nowrap;
  }
  .btn:hover{background:var(--blue-dark);}
  .btn.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);}
  .btn.btn-outline:hover{background:var(--navy);color:#fff;}
  .btn.btn-red{background:var(--red);}
  .btn.btn-red:hover{background:#c31f30;}
  .btn:disabled{opacity:.6;cursor:not-allowed;}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
  @media (max-width: 980px){
    nav.main-nav{
      position:fixed;top:76px;left:0;right:0;bottom:0;background:#fff;
      flex-direction:column;align-items:flex-start;padding:24px 24px;gap:22px;
      transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
    }
    nav.main-nav.open{transform:translateX(0);}
    .menu-toggle{display:block;}
    .header-cta .phone-link span{display:none;}
    .brand-text{display:none;}
  }

  /* Hero */
  .hero{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
    color:#fff;padding:100px 0 70px;
  }
  .hero .route-line{position:absolute;inset:0;opacity:.16;pointer-events:none;}
  .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
  @media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} }
  .hero-badge{
    display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);color:#DCE7FA;padding:8px 16px;border-radius:30px;
    font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:24px;
    font-family:'Oswald',sans-serif;
  }
  .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#3DDC84;}
  .hero h1{color:#fff;font-size:44px;margin-bottom:20px;}
  .hero h1 em{font-style:normal;color:#6FA8FF;}
  .hero p.lead{color:#C6D3E8;font-size:18px;max-width:560px;}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin:28px 0 34px;}
  .hero-trust{display:flex;gap:24px;flex-wrap:wrap;}
  .hero-trust div{display:flex;align-items:center;gap:10px;font-size:14px;color:#C6D3E8;}
  .hero-trust svg{flex:none;color:#6FA8FF;}
  @media (max-width:520px){ .hero h1{font-size:32px;} }

  .hero-card{
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius);padding:28px;backdrop-filter:blur(4px);
  }
  .hero-card h3{color:#fff;font-size:18px;margin-bottom:16px;}
  .hero-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  .hero-card li{display:flex;align-items:flex-start;gap:10px;color:#DCE7FA;font-size:14.5px;}
  .hero-card li svg{flex:none;margin-top:2px;color:#3DDC84;}

  /* Marquee strip */
  .strip{background:var(--blue);color:#fff;padding:12px 0;overflow:hidden;}
  .strip-track{display:flex;gap:48px;white-space:nowrap;font-family:'Oswald',sans-serif;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;animation:scroll 32s linear infinite;}
  .strip-track span{opacity:.95;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .strip-track{animation:none;overflow-x:auto;} }

  /* Services */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .services-grid{grid-template-columns:1fr;} }
  .service-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:30px 26px;transition:box-shadow .18s, transform .18s, border-color .18s;
  }
  .service-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent;}
  .service-icon{
    width:52px;height:52px;border-radius:10px;background:var(--bg-alt);
    display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:18px;
  }
  .service-card h3{font-size:19px;margin-bottom:10px;}
  .service-card p{color:var(--text-soft);font-size:15px;margin-bottom:14px;}
  .service-card .tag{
    display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--red);font-family:'Oswald',sans-serif;
  }
  .intl-note{
    text-align:center;max-width:640px;margin:36px auto 0;padding:16px 22px;
    border:1px dashed var(--blue);border-radius:8px;color:var(--navy);font-size:14.5px;font-weight:600;
    background:var(--bg-alt);
  }
  .intl-note svg{vertical-align:-4px;margin-right:8px;color:var(--blue);}

  /* Zones */
  .zones{background:var(--navy);color:#fff;}
  .zones .section-head p{color:#B9C7DD;}
  .zones-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
  @media (max-width:800px){ .zones-grid{grid-template-columns:1fr;} }
  .zone-block{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);padding:28px;}
  .zone-block h3{color:#fff;display:flex;align-items:center;gap:10px;font-size:20px;}
  .zone-block .dept{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:8px;background:var(--blue);
    font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;
  }
  .city-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .city-chips span{
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);
    padding:6px 12px;border-radius:20px;font-size:13px;color:#DCE7FA;
  }
  .zones-note{margin-top:32px;text-align:center;color:#B9C7DD;font-size:14.5px;}

  /* Why us */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  @media (max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .why-grid{grid-template-columns:1fr;} }
  .why-card{text-align:left;padding:6px 0;}
  .why-card .num{font-family:'Oswald',sans-serif;font-size:13px;color:var(--blue);letter-spacing:.1em;margin-bottom:10px;font-weight:700;}
  .why-card h3{font-size:18px;}
  .why-card p{color:var(--text-soft);font-size:14.5px;}

  /* Avis */
  .avis{background:var(--bg-alt);}
  .avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:900px){ .avis-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){ .avis-grid{grid-template-columns:1fr;} }
  .avis-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
  .avis-stars{color:#F5A623;font-size:15px;letter-spacing:2px;margin-bottom:12px;}
  .avis-card p.quote{font-size:15px;color:var(--navy);margin-bottom:16px;}
  .avis-author{display:flex;align-items:center;gap:10px;}
  .avis-avatar{
    width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;
  }
  .avis-author div span{display:block;}
  .avis-name{font-weight:700;font-size:14px;color:var(--navy);}
  .avis-meta{font-size:12.5px;color:var(--text-soft);}
  .avis-summary{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:36px;flex-wrap:wrap;}
  .avis-score{font-family:'Oswald',sans-serif;font-size:34px;font-weight:700;color:var(--navy);}
  .avis-summary .avis-stars{margin-bottom:0;font-size:20px;}

  /* FAQ */
  .faq{max-width:820px;margin:0 auto;}
  details{border-bottom:1px solid var(--line);padding:20px 0;}
  details summary{
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:16.5px;color:var(--navy);gap:16px;
  }
  details summary::-webkit-details-marker{display:none;}
  details summary::after{content:"+";font-size:22px;color:var(--blue);flex:none;transition:transform .2s;}
  details[open] summary::after{transform:rotate(45deg);}
  details p{margin-top:14px;color:var(--text-soft);font-size:15px;}

  /* Quote form */
  .quote{background:var(--bg-alt);}
  .quote-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
  @media (max-width:900px){ .quote-wrap{grid-template-columns:1fr;} }
  .quote-info h2{font-size:32px;}
  .quote-info p{color:var(--text-soft);}
  .quote-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;}
  .quote-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--navy);font-weight:600;}
  .quote-points li svg{flex:none;color:var(--blue);margin-top:2px;}
  .quote-points li small{display:block;font-weight:400;color:var(--text-soft);margin-top:2px;}

  form#quoteForm{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:32px;box-shadow:var(--shadow);
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;font-family:'Oswald',sans-serif;letter-spacing:.02em;text-transform:uppercase;}
  .field input, .field select, .field textarea{
    width:100%;border:1.5px solid var(--line);border-radius:6px;padding:12px 14px;
    font-family:'Public Sans',sans-serif;font-size:14.5px;color:var(--ink);background:#fff;
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);}
  .field textarea{resize:vertical;min-height:100px;}
  .field-hint{font-size:12px;color:var(--text-soft);margin-top:5px;}
  .hp-field{position:absolute;left:-9999px;top:-9999px;}
  #photoList{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  #photoList span{
    background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;
    padding:6px 10px;font-size:12.5px;color:var(--navy);
  }
  .form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;}
  .form-note{font-size:12.5px;color:var(--text-soft);}
  #formStatus{margin-top:14px;font-size:14.5px;font-weight:600;padding:12px 14px;border-radius:6px;display:none;}
  #formStatus.ok{display:block;background:#E7F7EE;color:#1C7B41;border:1px solid #BFE9CE;}
  #formStatus.err{display:block;background:#FDEBEC;color:#B3202F;border:1px solid #F4C2C6;}

  /* CTA band */
  .cta-band{background:linear-gradient(120deg,var(--blue),var(--blue-dark));color:#fff;text-align:center;}
  .cta-band h2{color:#fff;font-size:30px;}
  .cta-band p{color:#DCEBFF;max-width:520px;margin:0 auto 26px;}
  .cta-band .btn{background:#fff;color:var(--blue-dark);}
  .cta-band .btn:hover{background:#EAF2FF;}

  /* Footer */
  footer.site{background:var(--navy);color:#B9C7DD;padding:60px 0 24px;font-size:14px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;}
  @media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
  footer.site h4{color:#fff;font-size:14px;letter-spacing:.08em;margin-bottom:16px;}
  footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  footer.site a{text-decoration:none;color:#B9C7DD;}
  footer.site a:hover{color:#fff;}
  .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .footer-brand img{height:44px;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.1);margin-top:44px;padding-top:22px;
    text-align:center;font-size:12.5px;color:#8AA0C2;
  }

  .skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:10px 16px;z-index:100;}
  .skip-link:focus{left:12px;top:12px;}
  :focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

  /* Bulle WhatsApp */
  .whatsapp-float{
    position:fixed;right:22px;bottom:22px;z-index:60;
    width:60px;height:60px;border-radius:50%;
    background:#25D366;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(37,211,102,0.45);
    text-decoration:none;transition:transform .18s, box-shadow .18s;
  }
  .whatsapp-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px rgba(37,211,102,0.55);}
  .whatsapp-float svg{width:30px;height:30px;}
  @media (max-width:640px){
    .whatsapp-float{width:54px;height:54px;right:16px;bottom:16px;}
    .whatsapp-float svg{width:27px;height:27px;}
  }

  /* Galerie de chantiers */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(2, 200px);
    gap:16px;
  }
  .gallery-item{
    border-radius:10px;overflow:hidden;background:var(--line);
    box-shadow:0 4px 16px rgba(10,27,51,0.08);
  }
  .gallery-item img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .35s ease;
  }
  .gallery-item:hover img{transform:scale(1.06);}
  .gallery-item-tall{grid-row:span 2;}
  @media (max-width:900px){
    .gallery-grid{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(3, 220px);}
    .gallery-item-tall{grid-row:span 2;grid-column:1;}
  }
  @media (max-width:560px){
    .gallery-grid{grid-template-columns:1fr;grid-template-rows:none;}
    .gallery-item{height:280px;}
    .gallery-item-tall{grid-row:auto;height:400px;}
  }