/* CSS Document */

        /* ================== CSS INTÉGRÉ PROTUP ================== */
        :root {
          --blue-dark: #004A80;
          --blue-mid:  #0A74BB;
          --blue-light:#2EA3F2;
          --bg-light:  #f5f8fb;
          --text-dark:#1a1a1a;
          --radius:   14px;
        }

        *,*::before,*::after{box-sizing:border-box;}

        body{
          margin:0;
          font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
          color:var(--text-dark);
          background:#fff;
          scroll-behavior:smooth;
        }

        img{max-width:100%;display:block;}

        .container{
          max-width:1100px;
          margin:0 auto;
          padding:0 16px;
        }

        /* HEADER */
        .site-header{
          position:sticky;
          top:0;
          z-index:1000;
          background:rgba(255,255,255,.97);
          backdrop-filter:blur(8px);
          box-shadow:0 2px 10px rgba(0,0,0,.07);
        }
        .nav-container{
          display:flex;
          align-items:center;
          justify-content:space-between;
          min-height:70px;
        }
        .brand img{
          height:60px;
        }
        .brand a{
          display:inline-block;
        }
        .main-nav ul{
          list-style:none;
          display:flex;
          gap:14px;
          padding:0;
          margin:0;
          align-items:center;
        }
        .main-nav a{
          text-decoration:none;
          color:var(--blue-dark);
          font-weight:600;
          font-size:.85rem;
          white-space:nowrap;
        }
        .main-nav a:hover{
          color:var(--blue-light);
        }

        /* BURGER MOBILE */
        .burger{
          display:none;
          flex-direction:column;
          gap:5px;
          background:none;
          border:none;
          cursor:pointer;
        }
        .burger span{
          width:28px;
          height:3px;
          background:var(--blue-dark);
          border-radius:3px;
          transition:.3s;
        }
        .burger.open span:nth-child(1){
          transform:rotate(45deg) translate(5px,5px);
        }
        .burger.open span:nth-child(2){
          opacity:0;
        }
        .burger.open span:nth-child(3){
          transform:rotate(-45deg) translate(6px,-6px);
        }

        /* HERO */
        .hero{
          height:70vh;
          background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url('../images/banner.png');
          background-size:cover;
          background-position:center;
          color:#fff;
          display:flex;
          align-items:center;
          justify-content:center;
          text-align:center;
          padding:20px;
        }
        .hero-inner h1{
          font-size:42px;
          margin-bottom:10px;
          font-weight:800;
        }
        .hero-inner p{
          max-width:700px;
          margin:0 auto 20px;
          font-size:18px;
        }
        .hero-ctas{
          display:flex;
          justify-content:center;
          gap:12px;
          flex-wrap:wrap;
          margin-bottom:10px;
        }
        .hero-bullets{
          list-style:none;
          padding:0;
          margin:10px 0 0;
          display:flex;
          flex-wrap:wrap;
          justify-content:center;
          gap:10px;
          font-size:.95rem;
        }
        .hero-bullets li::before{
          content:"• ";
          color:var(--blue-light);
        }

        .btn{
          padding:12px 20px;
          border-radius:8px;
          font-weight:600;
          text-decoration:none;
          display:inline-block;
          transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s ease-out;
        }
        .btn.primary{
          background:var(--blue-mid);
          color:#fff;
        }
        .btn.primary:hover{
          background:var(--blue-light);
          transform: translateY(-1px);
          box-shadow:0 8px 18px rgba(0,0,0,.18);
        }
        .btn.ghost{
          border:2px solid #fff;
          color:#fff;
        }
        .btn.ghost:hover{
          transform: translateY(-1px);
          box-shadow:0 8px 18px rgba(0,0,0,.18);
        }

        /* SECTIONS */
        .section{
          padding:70px 0;
        }
        .section-alt{
          background:var(--bg-light);
        }
        h2{
          font-size:32px;
          color:var(--blue-dark);
          margin-top:0;
        }
        .two-cols{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:30px;
          align-items:flex-start;
        }
        .card{
          background:#fff;
          padding:20px;
          border-radius:var(--radius);
          box-shadow:0 4px 14px rgba(0,0,0,.08);
          transition: transform .25s ease-out, box-shadow .25s ease-out;
        }
        .card:hover{
          transform:translateY(-4px);
          box-shadow:0 10px 24px rgba(0,0,0,.12);
        }

        /* AVANT / APRÈS 2 PHOTOS */
        .before-after{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:12px;
        }
        .before-after figure{
          margin:0;
          background:#fff;
          border-radius:var(--radius);
          overflow:hidden;
          box-shadow:0 4px 12px rgba(0,0,0,.08);
          transition: transform .25s ease-out, box-shadow .25s ease-out;
        }
        .before-after figure:hover{
          transform:translateY(-4px);
          box-shadow:0 10px 24px rgba(0,0,0,.12);
        }
        .before-after img{
          width:100%;
          height:auto;
          display:block;
          transition: transform .4s ease-out;
        }
        .before-after figure:hover img{
          transform:scale(1.03);
        }
        .before-after figcaption{
          text-align:center;
          padding:6px 8px 10px;
          font-size:.9rem;
          font-weight:600;
          color:var(--blue-dark);
        }

        /* PHOTO UNIQUE (hydrofuge / gouttière / sols / franchise) */
        .single-photo{
          margin:0;
          background:#fff;
          border-radius:var(--radius);
          overflow:hidden;
          box-shadow:0 4px 12px rgba(0,0,0,.08);
          transition: transform .25s ease-out, box-shadow .25s ease-out;
        }
        .single-photo:hover{
          transform:translateY(-4px);
          box-shadow:0 10px 24px rgba(0,0,0,.12);
        }
        .single-photo img{
          width:100%;
          height:auto;
          display:block;
          transition: transform .4s ease-out;
        }
        .single-photo:hover img{
          transform:scale(1.03);
        }
        .single-photo figcaption{
          text-align:center;
          padding:8px 10px;
          font-size:.9rem;
          font-weight:600;
          color:var(--blue-dark);
          background:#f0f4f8;
        }

        /* BANNIÈRE DRONE (VIDÉO) */
        .video-banner {
          width: 100%;
          max-width: 900px;
          margin: 0 auto 30px;
          border-radius: var(--radius);
          overflow: hidden;
          box-shadow: 0 4px 14px rgba(0,0,0,.1);
        }
        .video-banner video {
          width: 100%;
          display: block;
        }

        /* CHECKLIST */
        .checklist{
          list-style:none;
          padding-left:0;
        }
        .checklist li{
          margin-bottom:6px;
        }
        .checklist li::before{
          content:"✔";
          margin-right:8px;
          color:var(--blue-mid);
          font-weight:700;
        }

        /* CONTACT FORM */
        .contact-form .field{
          display:flex;
          flex-direction:column;
          margin-bottom:15px;
        }
        .contact-form label{
          font-weight:600;
          margin-bottom:5px;
        }
        .contact-form input,
        .contact-form select,
        .contact-form textarea{
          padding:12px;
          border-radius:8px;
          border:1px solid #d0d7df;
          font-size:16px;
        }
        .form-status{
          font-size:14px;
          margin-top:10px;
          color:var(--blue-dark);
        }

        /* MAP */
        .map-container iframe{
          width:100%;
          height:260px;
          border:none;
          border-radius:var(--radius);
          box-shadow:0 4px 14px rgba(0,0,0,.08);
        }

        /* FOOTER */
        .site-footer{
          background:var(--blue-dark);
          color:#fff;
          padding:20px 0;
        }
        .footer-inner{
          display:flex;
          justify-content:space-between;
          align-items:center;
          flex-wrap:wrap;
          gap:8px;
          font-size:.9rem;
        }

        /* FADE-IN */
        .fade-in{
          opacity:0;
          transform:translateY(24px);
          transition:opacity .6s ease-out,transform .6s ease-out;
        }
        .fade-in.visible{
          opacity:1;
          transform:translateY(0);
        }

        /* HERO STAGGER ANIMATION */
        .hero-inner h1,
        .hero-inner p,
        .hero-inner .hero-ctas,
        .hero-inner .hero-bullets{
          opacity:0;
          transform:translateY(16px);
          transition:opacity .6s ease-out, transform .6s ease-out;
        }
        .hero-inner.visible h1{
          transition-delay:.05s;
          opacity:1;
          transform:translateY(0);
        }
        .hero-inner.visible p{
          transition-delay:.15s;
          opacity:1;
          transform:translateY(0);
        }
        .hero-inner.visible .hero-ctas{
          transition-delay:.25s;
          opacity:1;
          transform:translateY(0);
        }
        .hero-inner.visible .hero-bullets{
          transition-delay:.35s;
          opacity:1;
          transform:translateY(0);
        }

        /* BOUTON APPEL MOBILE */
        @keyframes call-bounce {
          0%,100% { transform: translateY(0); }
          50% { transform: translateY(-3px); }
        }
        .call-mobile{
          position:fixed;
          bottom:16px;
          right:16px;
          background:var(--blue-mid);
          color:#fff;
          padding:12px 18px;
          border-radius:999px;
          text-decoration:none;
          font-weight:600;
          box-shadow:0 6px 18px rgba(0,0,0,.25);
          display:none;
          animation: call-bounce 1.4s ease-in-out infinite;
          z-index:900;
        }

        /* RESPONSIVE */
        @media (max-width:900px){
          .two-cols{grid-template-columns:1fr;}
          .main-nav ul{
            position:fixed;
            top:70px;
            right:0;
            background:#fff;
            width:70%;
            height:100vh;
            flex-direction:column;
            padding-top:30px;
            transform:translateX(100%);
            transition:.3s;
          }
          .main-nav ul.open{transform:translateX(0);}
          .burger{display:flex;}
          .call-mobile{display:inline-flex;align-items:center;gap:6px;}
          .hero{height:60vh;}
          .hero-inner h1{font-size:32px;}
          .before-after{grid-template-columns:1fr;}
        }
        @media (max-width:500px){
          .hero-inner h1{font-size:26px;}
        }