/* ================== Design System Moderne ================== */
    :root{
      --white:#ffffff;
      --ink:#0B1B2F;
      --muted:#44607C;
      --blue:#0E2646;
      --blue-50:#F2F6FB;
      --blue-75:#EAF2FF;
      --line:#E1E8F0;
      --yellow:#F6C000;
      --yellow-2:#FFD454;
      --yellow-glow:rgba(246,192,0,.4);
      --wa:#25D366;
      --wa-compat:#4dc247;
      --wa-dark:#1DA851;

      --radius:24px;
      --radius-lg:32px;
      --shadow:0 20px 60px rgba(8,28,55,.12);
      --shadow-lg:0 30px 80px rgba(8,28,55,.18);
      --shadow-glow:0 0 40px rgba(246,192,0,.3);
      --easing:cubic-bezier(.25,.46,.45,.94);
      --easing-bounce:cubic-bezier(.68,-0.55,.265,1.55);
      --easing-smooth:cubic-bezier(.4,0,.2,1);
      --pad:clamp(20px,5vw,60px);
      --container:1280px;
      
      /* Glassmorphism */
      --glass-bg:rgba(255,255,255,.7);
      --glass-border:rgba(255,255,255,.3);
      --glass-shadow:0 8px 32px rgba(0,0,0,.1);
    }

    /* ============ Reset & layout ============ */
    *{box-sizing:border-box}
    html,body{height:100%;scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      color:var(--ink);
      background:#fafbfc;
      overflow:hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    a{color:inherit;text-decoration:none}

    /* ============ Deck avec transitions fluides ============ */
    #deck{
      position:fixed; inset:0;
      overflow:auto;
      scroll-snap-type:y mandatory;
      scroll-padding-top:0;
      -webkit-overflow-scrolling:touch;
      /* Fond design moderne avec motifs d'engins uniques et élégants */
      background-color: #fafbfc;
      background-image:
        /* Tractopelle stylisée - motif unique positionné */
        url("data:image/svg+xml,%3Csvg width='400' height='280' viewBox='0 0 400 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F6C000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.13'%3E%3Cpath d='M60 220 Q70 200 90 190 Q110 180 140 175 Q170 170 200 168 Q230 166 260 170 Q290 175 310 185 Q325 192 335 205 Q340 215 335 225 Q328 235 315 240 Q300 242 285 238 Q270 234 255 228 Q240 222 225 218 Q210 214 195 212 Q180 210 165 210 Q150 210 135 212 Q120 214 105 218 Q90 222 75 228 Q60 234 60 220 Z'/%3E%3Ccircle cx='80' cy='245' r='12'/%3E%3Ccircle cx='280' cy='235' r='10'/%3E%3Cpath d='M120 220 Q135 210 155 205'/%3E%3Cpath d='M200 220 Q220 210 240 205'/%3E%3Crect x='140' y='168' width='120' height='25' rx='3'/%3E%3C/g%3E%3C/svg%3E"),
        /* Grue moderne - motif unique positionné */
        url("data:image/svg+xml,%3Csvg width='320' height='420' viewBox='0 0 320 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F6C000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.11'%3E%3Crect x='130' y='280' width='60' height='50' rx='4'/%3E%3Cline x1='160' y1='280' x2='160' y2='80'/%3E%3Cline x1='160' y1='100' x2='250' y2='100'/%3E%3Cline x1='250' y1='100' x2='250' y2='150'/%3E%3Cpath d='M250 150 L275 175 L265 180 L235 150 Z'/%3E%3Ccircle cx='145' cy='310' r='8'/%3E%3Ccircle cx='175' cy='310' r='8'/%3E%3Cpath d='M140 280 Q155 270 170 280'/%3E%3C/g%3E%3C/svg%3E"),
        /* Camion benne stylisé - motif unique positionné */
        url("data:image/svg+xml,%3Csvg width='450' height='240' viewBox='0 0 450 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F6C000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.12'%3E%3Crect x='50' y='160' width='140' height='45' rx='5'/%3E%3Cpath d='M190 160 L190 135 L240 135 Q260 130 280 135 Q300 140 315 150 Q330 160 340 170 Q350 180 350 195 L350 205 L345 205 L345 175 L190 175 Z'/%3E%3Ccircle cx='80' cy='205' r='14'/%3E%3Ccircle cx='220' cy='205' r='14'/%3E%3Cpath d='M70 160 L70 140'/%3E%3Cpath d='M120 160 L120 140'/%3E%3Cpath d='M200 160 Q210 150 220 160'/%3E%3C/g%3E%3C/svg%3E"),
        /* Formes géométriques modernes en arrière-plan */
        radial-gradient(ellipse 2000px 1400px at 10% 30%, rgba(246, 192, 0, 0.09) 0%, transparent 75%),
        radial-gradient(ellipse 1700px 1200px at 90% 70%, rgba(14, 38, 70, 0.07) 0%, transparent 75%),
        radial-gradient(ellipse 1500px 1000px at 50% 10%, rgba(246, 192, 0, 0.06) 0%, transparent 70%),
        /* Formes circulaires pour la profondeur */
        radial-gradient(circle 1100px at 30% 70%, rgba(246, 192, 0, 0.08) 0%, transparent 60%),
        radial-gradient(circle 900px at 70% 30%, rgba(14, 38, 70, 0.06) 0%, transparent 55%),
        /* Gradient de base avec variation subtile */
        linear-gradient(180deg, #fafbfc 0%, #f5f7fa 25%, #f0f3f7 60%, #eef2f6 100%);
      background-size: 
        400px 280px,
        320px 420px,
        450px 240px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 200%;
      background-position:
        8% 15%,
        88% 55%,
        45% 88%,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
      background-attachment: fixed;
      background-repeat: no-repeat;
      overscroll-behavior-y:contain;
    }
    
    /* Mobile: scroll continu sans snap - une seule page fluide */
    @media (max-width: 980px){
      #deck{
        scroll-snap-type:none; /* Désactivé pour scroll continu */
      }
    }
    
    section.page{
      min-height:100vh; height:100vh; width:100%;
      scroll-snap-align:start;
      scroll-snap-stop:always;
      display:grid; place-items:center;
      padding:var(--pad);
      position:relative;
      opacity:0;
      transform:translateY(30px) scale(0.98);
      transition:opacity 0.8s var(--easing-smooth), transform 0.8s var(--easing-smooth);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    
    /* Mobile: design continu - une seule page fluide et belle */
    @media (max-width: 980px){
      /* Désactiver toutes les transitions et animations sur mobile */
      *,
      *::before,
      *::after{
        transition:none !important;
        animation:none !important;
      }
      
      section.page{
        scroll-snap-align:none; /* Désactivé pour scroll continu */
        scroll-snap-stop:normal;
        height:auto; /* Hauteur adaptée au contenu */
        min-height:auto; /* Pas de hauteur minimale fixe */
        overflow-y:visible; /* Pas de scroll interne, tout est dans le flux */
        display:flex;
        flex-direction:column;
        justify-content:flex-start; /* Contenu aligné en haut */
        align-items:stretch;
        padding-top:clamp(50px,10vw,80px); /* Espacement généreux en haut */
        padding-bottom:clamp(50px,10vw,80px); /* Espacement généreux en bas */
        margin-bottom:clamp(30px,6vw,50px); /* Espacement entre sections pour séparation visuelle */
        position:relative;
        /* Séparateur visuel subtil entre sections */
        border-bottom:1px solid rgba(225,232,240,.5);
        /* Transitions désactivées sur mobile */
        opacity:1 !important;
        transform:none !important;
      }
      
      section.page.active{
        opacity:1 !important;
        transform:none !important;
      }
      
      /* Première section avec plus d'espace en haut */
      section.page:first-child{
        padding-top:clamp(80px,12vw,100px);
        border-top:none;
      }
      
      /* Dernière section avec plus d'espace en bas et sans bordure */
      section.page:last-child{
        margin-bottom:0;
        padding-bottom:clamp(80px,12vw,100px);
        border-bottom:none;
      }
      
      section.page .container{
        width:100%;
        max-width:100%;
        margin:0 auto;
      }
      
      /* Améliorer l'espacement interne des containers */
      section.page .container > *:first-child{
        margin-top:0;
      }
      
      section.page .container > *:last-child{
        margin-bottom:0;
      }
      
      /* Rapprocher les sections de réalisations sur mobile */
      #p6, #p7, #p8, #p9{
        padding-top:clamp(30px,6vw,50px) !important;
        padding-bottom:clamp(30px,6vw,50px) !important;
        margin-bottom:clamp(15px,3vw,25px) !important;
      }
    }
    
    section.page.active{
      opacity:1;
      transform:translateY(0) scale(1);
    }
    
    /* Frame effect entre les pages */
    section.page::before{
      content:"";
      position:absolute;
      inset:0;
      border:2px solid transparent;
      border-radius:0;
      pointer-events:none;
      opacity:0;
      transition:opacity 0.6s var(--easing);
    }
    
    section.page.active::before{
      opacity:1;
      border-color:var(--yellow);
      border-width:1px;
      animation:frameGlow 2s ease-in-out infinite;
    }
    
    @keyframes frameGlow{
      0%,100%{box-shadow:inset 0 0 0 rgba(246,192,0,0)}
      50%{box-shadow:inset 0 0 60px rgba(246,192,0,.15)}
    }
    
    /* Mobile: désactiver le frame effect pour un design continu */
    @media (max-width: 980px){
      section.page::before{
        display:none !important; /* Désactivé pour design continu */
      }
    }
    
    .container{
      width:100%; 
      max-width:var(--container); 
      margin:0 auto;
      position:relative;
      z-index:1;
    }
    
    /* Mobile: container s'adapte au contenu */
    @media (max-width: 980px){
      .container{
        width:100%;
        max-width:100%;
        padding:0 clamp(16px,4vw,24px);
        margin:0 auto; /* Centre horizontalement */
      }
    }

    .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }

    /* ============ Typo & UI Moderne ============ */
    h1,h2,h3{margin:0 0 .5rem;font-weight:800}
    h1{
      font-size:clamp(42px,7vw,72px);
      line-height:1.05;
      letter-spacing:-.03em;
      background:linear-gradient(135deg, var(--ink) 0%, var(--blue) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    h2{
      font-size:clamp(32px,5vw,48px);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    h3{font-size:clamp(22px,3vw,28px);line-height:1.2}
    p{margin:.25rem 0 1rem;color:var(--muted);font-size:clamp(16px,2.4vw,19px);line-height:1.7}
    
    .kicker{
      display:inline-flex;align-items:center;gap:8px;
      padding:.5rem 1.2rem;border-radius:999px;
      color:#27445f;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      font-size:.8rem;
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-shadow);
      position:relative;
      overflow:hidden;
    }
    
    .kicker::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
      transform:translateX(-100%);
      transition:transform 0.6s var(--easing);
    }
    
    .kicker:hover::before{transform:translateX(100%)}
    
    .btn{
      display:inline-flex;align-items:center;gap:.7rem;
      padding:clamp(.9rem,2.5vw,1.1rem) clamp(1.4rem,4vw,1.8rem);
      border-radius:999px;border:0;cursor:pointer;
      background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-2) 100%);
      color:#1b1200;font-weight:800;font-size:clamp(.9rem,2.5vw,1rem);
      box-shadow:0 8px 24px rgba(246,192,0,.35), 0 0 0 0 rgba(246,192,0,.5);
      transition:all 0.3s var(--easing-bounce);
      position:relative;
      overflow:hidden;
      min-height:44px; /* Touch target minimum for mobile */
      justify-content:center;
      text-align:center;
      text-decoration:none;
    }
    
    /* Amélioration CTA pour conversion */
    .btn-primary{
      font-weight:900;
      letter-spacing:.01em;
      box-shadow:0 10px 30px rgba(246,192,0,.4), 0 0 0 0 rgba(246,192,0,.6);
      position:relative;
    }
    
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.3), transparent);
      opacity:0;
      transition:opacity 0.3s;
    }
    
    .btn-primary:hover::after{
      opacity:1;
    }
    
    /* Animation pulse subtile pour attirer l'attention */
    .btn-primary{
      animation:btnPulse 3s ease-in-out infinite;
    }
    
    @keyframes btnPulse{
      0%,100%{box-shadow:0 8px 24px rgba(246,192,0,.35), 0 0 0 0 rgba(246,192,0,.5)}
      50%{box-shadow:0 8px 24px rgba(246,192,0,.45), 0 0 0 4px rgba(246,192,0,.2)}
    }
    
    .btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,.3), transparent);
      opacity:0;
      transition:opacity 0.3s var(--easing);
    }
    
    .btn:hover{
      transform:translateY(-3px) scale(1.02);
      box-shadow:0 12px 32px rgba(246,192,0,.45), 0 0 0 4px rgba(246,192,0,.2);
    }
    
    .btn:hover::before{opacity:1}
    
    .btn:active{transform:translateY(-1px) scale(0.98)}
    
    .btn-outline{
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      border:2px solid var(--line);
      color:var(--ink);
      box-shadow:var(--glass-shadow);
      transition:all 0.3s var(--easing);
    }
    
    .btn-outline:hover{
      border-color:var(--yellow);
      background:rgba(246,192,0,.1);
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(14,38,70,.15);
    }
    
    .card{
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      border:1px solid var(--glass-border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      padding:clamp(20px,4vw,36px);
      transition:all 0.4s var(--easing);
      position:relative;
      overflow:hidden;
    }
    
    .card::before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;
      height:3px;
      background:linear-gradient(90deg, var(--yellow), var(--yellow-2));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform 0.4s var(--easing);
    }
    
    .card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-lg);
      border-color:rgba(246,192,0,.3);
    }
    
    .card:hover::before{transform:scaleX(1)}
    
    /* Badge de confiance pour les cartes */
    .trust-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 12px;
      background:rgba(39,174,96,.1);
      border:1px solid rgba(39,174,96,.3);
      border-radius:999px;
      font-size:clamp(.7rem,1.8vw,.75rem);
      font-weight:700;
      color:#27ae60;
      margin-top:8px;
    }
    
    .trust-badge::before{
      content:"✓";
      font-weight:900;
      font-size:1.1em;
    }

    /* ===== Page 1 : Garde Moderne ===== */
    .hero{
      display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center
    }
    
    .brand{
      display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;
      animation:slideInLeft 0.8s var(--easing) 0.2s both;
    }
    
    @keyframes slideInLeft{
      from{opacity:0;transform:translateX(-30px)}
      to{opacity:1;transform:translateX(0)}
    }
    
    .brand .logo-mini{
      width:64px;height:64px;border-radius:18px;
      background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-2) 100%);
      display:grid;place-items:center;color:#0E2646;font-weight:900;
      font-size:1.5rem;
      box-shadow:0 12px 32px rgba(246,192,0,.4);
      position:relative;
      animation:pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse{
      0%,100%{transform:scale(1);box-shadow:0 12px 32px rgba(246,192,0,.4)}
      50%{transform:scale(1.05);box-shadow:0 16px 40px rgba(246,192,0,.6)}
    }
    
    .hero-visual{
      min-height:400px;border-radius:var(--radius-lg);overflow:hidden;
      border:2px solid var(--glass-border);
      background:
        linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0)),
        url('img/cover-buildingcg.jpg') center/cover no-repeat;
      box-shadow:var(--shadow-lg);
      position:relative;
      animation:slideInRight 0.8s var(--easing) 0.4s both;
    }
    
    @keyframes slideInRight{
      from{opacity:0;transform:translateX(30px) scale(0.95)}
      to{opacity:1;transform:translateX(0) scale(1)}
    }
    
    .hero-visual::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(246,192,0,.1) 0%, transparent 50%);
      pointer-events:none;
    }

    /* Logo en haut à droite (page de garde) */
    #p1 .corner-logo{
      position:absolute; top:18px; right:18px; z-index:20;
      display:block; 
      
    }
    #p1 .corner-logo img{display:block; height:106px; width:auto}

    /* ===== Sommaire ===== */
    .toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
    .toc a{display:flex;gap:.9rem;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;transition:transform .2s var(--easing), box-shadow .2s}
    .toc a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,38,70,.08)}
    .toc .num{flex:0 0 40px;height:40px;border-radius:12px;background:var(--yellow);color:#111;display:grid;place-items:center;font-weight:900}

    /* Deux colonnes */
    .two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,40px);align-items:center}
    .illus{
      min-height:280px;border-radius:var(--radius);border:1px solid var(--line);
      background:#eef5ff url('img/about.jpg') center/cover no-repeat
    }

    /* Services */
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .service{grid-column:span 6}
    .badge{background:rgba(246,192,0,.15);border:1px solid rgba(246,192,0,.35);color:#563f00;padding:.35rem .6rem;border-radius:999px;font-weight:800;font-size:.85rem}

    /* Réalisations */
    .work{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.6vw,24px);align-items:stretch}

    /* === Slider Moderne === */
    .slider{
      position:relative; 
      border-radius:var(--radius-lg); 
      border:2px solid var(--glass-border); 
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      overflow:hidden; 
      box-shadow:var(--shadow-lg); 
      user-select:none;
      aspect-ratio: 16 / 10;
      transition:all 0.4s var(--easing);
    }
    
    .slider:hover{
      box-shadow:var(--shadow-lg), 0 0 0 1px rgba(246,192,0,.2);
      transform:scale(1.01);
    }
    
    .slides{
      display:flex; 
      height:100%; 
      width:100%; 
      transition:transform .8s cubic-bezier(.25,.46,.45,.94);
    }
    
    .slides img{
      width:100%; 
      height:100%; 
      object-fit:cover; 
      flex:0 0 100%; 
      display:block; 
      cursor:pointer; 
      background:#e9eef5;
      transition:transform 0.6s var(--easing);
    }
    
    .slides img:hover{transform:scale(1.05)}
    
    .s-nav{
      position:absolute; 
      top:50%; 
      translate:0 -50%; 
      z-index:3;
      width:50px; 
      height:50px; 
      border-radius:50%; 
      border:2px solid var(--glass-border);
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      display:grid; 
      place-items:center; 
      cursor:pointer; 
      box-shadow:var(--shadow);
      transition:all 0.3s var(--easing);
      opacity:0.8;
    }
    
    .s-nav:hover{
      opacity:1;
      transform:translateY(-50%) scale(1.1);
      background:rgba(255,255,255,.95);
      box-shadow:var(--shadow-lg);
    }
    
    .s-prev{left:16px} 
    .s-next{right:16px}
    
    .s-nav svg{
      width:20px; 
      height:20px; 
      fill:var(--blue);
      transition:transform 0.3s var(--easing);
    }
    
    .s-nav:hover svg{transform:scale(1.2)}
    
    .s-dots{
      position:absolute; 
      left:50%; 
      bottom:16px; 
      translate:-50% 0; 
      z-index:3; 
      display:flex; 
      gap:8px;
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      padding:10px 14px; 
      border-radius:999px; 
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-shadow);
    }
    
    .s-dots button{
      width:10px; 
      height:10px; 
      border-radius:999px; 
      border:0; 
      background:#b8c6d8; 
      cursor:pointer;
      transition:all 0.3s var(--easing);
    }
    
    .s-dots button:hover{background:var(--yellow);transform:scale(1.3)}
    .s-dots button.active{
      background:var(--yellow);
      width:24px;
      box-shadow:0 0 12px rgba(246,192,0,.6);
    }

    /* ===== Contact ===== */
    .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,40px);align-items:start}
    form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    label{display:block;font-weight:700;color:#27445f;margin:.5rem 0 .35rem;font-size:clamp(.85rem,2vw,.95rem)}
    .label-optional{font-weight:400;color:#7a95b0;font-size:.8rem}
    input,textarea,select{
      width:100%;
      padding:clamp(14px,3vw,18px);
      border-radius:14px;
      border:2px solid var(--line);
      background:var(--glass-bg);
      backdrop-filter:blur(10px);
      color:#0B1B2F;
      outline:none;
      transition:all .3s var(--easing);
      font-size:clamp(.95rem,2.2vw,1rem);
      font-family:inherit;
      -webkit-appearance:none;
      appearance:none;
    }
    
    input:focus,textarea:focus,select:focus{
      border-color:var(--yellow);
      background:#fff;
      box-shadow:0 0 0 4px rgba(246,192,0,.15), 0 4px 12px rgba(246,192,0,.1);
      transform:translateY(-2px);
    }
    input::placeholder,textarea::placeholder{color:#9fb5cc;font-size:clamp(.9rem,2vw,.95rem)}
    textarea{min-height:clamp(100px,20vw,130px);resize:vertical;line-height:1.6}
    select{
      cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2344607C' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 14px center;
      padding-right:40px;
    }
    
    /* Contact info cards */
    .contact-info-item{
      display:flex;
      align-items:center;
      gap:clamp(10px,2vw,14px);
      padding:clamp(12px,2.5vw,16px);
      background:var(--blue-75);
      border-radius:14px;
      transition:all .3s var(--easing);
    }
    .contact-info-item:hover{
      background:rgba(234,242,255,.9);
      transform:translateY(-2px);
      box-shadow:0 4px 12px rgba(14,38,70,.1);
    }
    .contact-info-icon{
      flex-shrink:0;
      width:clamp(38px,8vw,44px);
      height:clamp(38px,8vw,44px);
      background:var(--yellow);
      border-radius:12px;
      display:grid;
      place-items:center;
      box-shadow:0 4px 12px rgba(246,192,0,.25);
    }
    .contact-info-icon svg{
      width:clamp(18px,4vw,20px);
      height:clamp(18px,4vw,20px);
    }
    .contact-info-text{
      flex:1;
      min-width:0;
    }
    .contact-info-label{
      font-weight:700;
      color:var(--ink);
      font-size:clamp(.8rem,2vw,.9rem);
      margin-bottom:2px;
    }
    .contact-info-value{
      color:var(--muted);
      font-size:clamp(.85rem,2vw,.95rem);
      word-break:break-word;
    }
    .contact-info-value a{
      color:var(--muted);
      text-decoration:none;
      transition:color .2s;
    }
    .contact-info-value a:hover{
      color:var(--blue);
      text-decoration:underline;
    }
    
    /* Form validation styles */
    input:invalid:not(:placeholder-shown),
    textarea:invalid:not(:placeholder-shown),
    select:invalid:not(:placeholder-shown){
      border-color:#e74c3c;
      background:#fff5f5;
    }
    input:valid:not(:placeholder-shown),
    textarea:valid:not(:placeholder-shown),
    select:valid:not(:placeholder-shown){
      border-color:#27ae60;
    }
    
    /* Error message styling */
    .error-message{
      color:#e74c3c;
      font-size:clamp(.75rem,2vw,.85rem);
      margin-top:4px;
      display:block;
    }
    
    /* Badge "Réponse sous 24h" */
    .response-badge{
      position:absolute;
      top:-12px;
      right:16px;
      background:var(--yellow);
      color:#1b1200;
      font-weight:800;
      font-size:clamp(.7rem,1.8vw,.75rem);
      padding:clamp(5px,1.5vw,7px) clamp(10px,2.5vw,14px);
      border-radius:999px;
      box-shadow:0 4px 12px rgba(246,192,0,.3);
      z-index:10;
      white-space:nowrap;
    }
    
    /* Mobile: badge intégré dans le flux */
    @media (max-width: 980px){
      .response-badge{
        position:relative;
        top:auto;
        right:auto;
        display:inline-block;
        margin:0 0 clamp(16px,4vw,20px) 0;
        width:auto;
        align-self:flex-start;
      }
      
      /* Sur très petits écrans, centrer le badge */
      @media (max-width: 520px){
        .response-badge{
          margin:0 auto clamp(14px,3vw,18px) auto;
          display:block;
          text-align:center;
        }
      }
    }
    
    /* Submit button loading state */
    .btn-submit{position:relative;min-width:160px}
    .btn-submit.loading{pointer-events:none;color:transparent}
    .btn-submit.loading::after{
      content:"";position:absolute;inset:0;margin:auto;
      width:22px;height:22px;border:3px solid rgba(0,0,0,.2);
      border-top-color:#1b1200;border-radius:50%;
      animation:spin .7s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    
    /* Success modal */
    .success-modal{
      position:fixed;inset:0;z-index:100;
      display:none;align-items:center;justify-content:center;
      background:rgba(7,16,28,.8);backdrop-filter:blur(6px);
    }
    .success-modal.show{display:flex}
    .success-content{
      background:#fff;border-radius:24px;padding:clamp(28px,5vw,48px);
      max-width:440px;width:90%;text-align:center;
      box-shadow:0 30px 80px rgba(0,0,0,.3);
      animation:modalPop .4s var(--easing);
    }
    @keyframes modalPop{
      from{opacity:0;transform:scale(.9) translateY(20px)}
      to{opacity:1;transform:scale(1) translateY(0)}
    }
    .success-icon{
      width:80px;height:80px;margin:0 auto 20px;
      background:linear-gradient(135deg,#27ae60,#2ecc71);
      border-radius:50%;display:grid;place-items:center;
      box-shadow:0 12px 30px rgba(39,174,96,.35);
    }
    .success-icon svg{width:40px;height:40px;fill:#fff}
    .success-content h3{font-size:1.6rem;margin-bottom:8px;color:var(--ink)}
    .success-content p{color:var(--muted);margin-bottom:20px;line-height:1.6}
    .success-email{
      display:inline-block;background:var(--blue-75);
      padding:6px 14px;border-radius:8px;
      font-weight:600;color:var(--blue);font-size:.9rem;
    }

    /* ===== Pagination Moderne ===== */
    .dots{
      position:fixed;
      right:20px;
      top:50%;
      transform:translateY(-50%); /* Centré verticalement au milieu */
      display:flex;
      flex-direction:column;
      gap:12px;
      z-index:30;
      pointer-events:none;
    }
    
    /* Mobile: pagination centrée au milieu comme sur desktop */
    @media (max-width: 980px){
      .dots{
        position:fixed;
        right:16px;
        top:50%;
        transform:translateY(-50%); /* Centré verticalement au milieu */
        bottom:auto;
        flex-direction:column;
        gap:8px;
        z-index:30;
        background:rgba(255,255,255,.85);
        backdrop-filter:blur(12px);
        padding:10px 8px;
        border-radius:20px;
        border:1px solid rgba(14,38,70,.1);
        box-shadow:0 4px 20px rgba(0,0,0,.1);
        display:flex; /* Réactivée sur mobile */
      }
      
      .dots button{
        width:8px;
        height:8px;
        opacity:.4;
        transition:none !important; /* Pas de transition */
      }
      
      .dots button.active{
        opacity:1;
        transform:scale(1.4);
        background:var(--yellow);
        border-color:transparent;
        box-shadow:0 0 0 2px rgba(246,192,0,.3);
        transition:none !important; /* Pas de transition */
      }
    }
    
    .dots button{
      width:12px;
      height:12px;
      border-radius:999px;
      border:2px solid rgba(14,38,70,.3);
      background:var(--glass-bg);
      backdrop-filter:blur(10px);
      opacity:.6;
      pointer-events:auto;
      cursor:pointer;
      transition:all .4s var(--easing);
      position:relative;
    }
    
    .dots button::before{
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:999px;
      border:2px solid var(--yellow);
      opacity:0;
      transform:scale(0.8);
      transition:all 0.4s var(--easing);
    }
    
    .dots button:hover{
      opacity:1;
      transform:scale(1.2);
      border-color:var(--yellow);
    }
    
    .dots button.active{
      background:var(--yellow);
      opacity:1;
      border-color:transparent;
      transform:scale(1.3);
      box-shadow:0 0 0 4px rgba(246,192,0,.3), 0 0 20px rgba(246,192,0,.5);
    }
    
    .dots button.active::before{
      opacity:1;
      transform:scale(1.5);
    }

    /* ===== Astuce Moderne ===== */
    .help{
      position:fixed;
      left:var(--pad);
      bottom:20px;
      z-index:25;
      color:#4c6d8f;
      font-size:clamp(.75rem,2vw,.85rem);
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      padding:.6rem 1rem;
      border-radius:999px;
      border:1px solid var(--glass-border);
      box-shadow:var(--glass-shadow);
      opacity:0.8;
      transition:opacity 0.3s var(--easing);
      display:none; /* Hidden on mobile for cleaner UI */
    }
    
    @media (min-width: 768px){
      .help{display:block}
    }
    
    .help:hover{opacity:1}

    /* ===== Bouton WhatsApp Moderne ===== */
    .wa{
      position:fixed; 
      right:24px; 
      bottom:24px; 
      z-index:40;
      display:grid; 
      place-items:center;
      width:68px; 
      height:68px; 
      border-radius:50%;
      background:linear-gradient(135deg, var(--wa-compat) 0%, var(--wa-dark) 100%);
      box-shadow: 0 16px 40px rgba(77,194,71,.4), 0 0 0 0 rgba(77,194,71,.5);
      border:3px solid #fff;
      transition:all .3s var(--easing-bounce);
      animation:waPulse 2s ease-in-out infinite;
    }
    
    @keyframes waPulse{
      0%,100%{box-shadow: 0 16px 40px rgba(77,194,71,.4), 0 0 0 0 rgba(77,194,71,.5)}
      50%{box-shadow: 0 16px 40px rgba(77,194,71,.5), 0 0 0 8px rgba(77,194,71,.1)}
    }
    
    .wa:hover{
      transform:translateY(-4px) scale(1.08); 
      box-shadow:0 20px 50px rgba(77,194,71,.5), 0 0 0 4px rgba(77,194,71,.3);
      animation:none;
    }
    
    .wa:active{transform:translateY(-2px) scale(1.02)}
    
    .wa::before{
      content:""; 
      position:absolute; 
      inset:-8px; 
      border-radius:50%;
      border:2px solid rgba(77,194,71,.4);
      animation:ping 2s infinite;
    }
    
    @keyframes ping{
      0%{transform:scale(1); opacity:.6}
      70%{transform:scale(1.3); opacity:.2}
      100%{transform:scale(1.5); opacity:0}
    }
    
    .wa .whatsapp-ico{ 
      fill:#fff; 
      width:32px; 
      height:32px; 
      display:block;
      transition:transform 0.3s var(--easing);
    }
    
    .wa:hover .whatsapp-ico{transform:scale(1.1)}
    
    .wa[data-tip]:hover::after{
      content:attr(data-tip);
      position:absolute; 
      right:84px; 
      bottom:50%; 
      translate:0 50%;
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      color:var(--ink); 
      font-weight:700; 
      font-size:.85rem;
      padding:.5rem .9rem; 
      border-radius:12px; 
      border:1px solid var(--glass-border);
      box-shadow:var(--shadow);
      white-space:nowrap;
      animation:slideInTooltip 0.3s var(--easing);
    }
    
    @keyframes slideInTooltip{
      from{opacity:0;transform:translateX(10px) translateY(-50%)}
      to{opacity:1;transform:translateX(0) translateY(-50%)}
    }

    /* ===== Reveal Animations Modernes ===== */
    .reveal{
      opacity:0;
      filter:blur(8px);
      will-change:opacity, transform, filter;
      transition:
        opacity .8s var(--easing-smooth),
        transform .8s var(--easing-smooth),
        filter .8s var(--easing-smooth);
      transition-delay: var(--d, 0ms);
    }
    
    .reveal[data-rev="up"]{ 
      transform: translateY(30px) scale(0.95); 
    }
    
    .reveal[data-rev="right"]{ 
      transform: translateX(30px) scale(0.95); 
    }
    
    .reveal[data-rev="left"]{ 
      transform: translateX(-30px) scale(0.95); 
    }
    
    .reveal[data-rev="scale"]{ 
      transform: scale(0.9); 
    }
    
    .reveal[data-rev="fade"]{ 
      transform: none; 
      filter: none;
    }
    
    .page.is-visible .reveal{ 
      opacity:1; 
      transform:none; 
      filter:none; 
    }
    
    /* Animation stagger pour les éléments multiples */
    .reveal:nth-child(1){--d: 0ms}
    .reveal:nth-child(2){--d: 100ms}
    .reveal:nth-child(3){--d: 200ms}
    .reveal:nth-child(4){--d: 300ms}
    .reveal:nth-child(5){--d: 400ms}
    .reveal:nth-child(6){--d: 500ms}
    
    /* Mobile: animations reveal désactivées */
    @media (max-width: 980px){
      .reveal{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
      }
      
      .page.is-visible .reveal,
      .page .reveal{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
      }
    }
    
    @media (prefers-reduced-motion: reduce){
      .reveal{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
    }

    /* ===== Lightbox Moderne ===== */
    .lightbox{
      position:fixed; 
      inset:0; 
      background:rgba(7,16,28,.92);
      backdrop-filter:blur(20px);
      display:none; 
      align-items:center; 
      justify-content:center; 
      z-index:60;
      opacity:0;
      transition:opacity 0.4s var(--easing);
    }
    
    .lightbox.open{
      display:flex;
      opacity:1;
    }
    
    .lb-inner{
      position:relative; 
      width:min(96vw,1200px); 
      height:min(86vh,800px); 
      display:grid; 
      place-items:center;
      transform:scale(0.9);
      transition:transform 0.4s var(--easing-bounce);
    }
    
    .lightbox.open .lb-inner{
      transform:scale(1);
    }
    
    .lb-img{
      max-width:100%; 
      max-height:100%; 
      object-fit:contain; 
      background:#0b1b2f;
      border-radius:16px;
      box-shadow:0 30px 80px rgba(0,0,0,.5);
      animation:zoomIn 0.4s var(--easing-bounce);
    }
    
    @keyframes zoomIn{
      from{opacity:0;transform:scale(0.8)}
      to{opacity:1;transform:scale(1)}
    }
    
    .lb-close{
      position:absolute; 
      top:20px; 
      right:20px; 
      width:50px; 
      height:50px; 
      border-radius:50%; 
      border:2px solid rgba(255,255,255,.2);
      display:grid; 
      place-items:center; 
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      color:#fff; 
      cursor:pointer;
      font-size:24px;
      transition:all 0.3s var(--easing);
    }
    
    .lb-close:hover{
      background:rgba(255,255,255,.2);
      transform:rotate(90deg) scale(1.1);
      border-color:rgba(255,255,255,.4);
    }
    
    .lb-prev,.lb-next{
      position:absolute; 
      top:50%; 
      translate:0 -50%; 
      width:60px; 
      height:60px; 
      border-radius:50%; 
      border:2px solid rgba(255,255,255,.2);
      display:grid; 
      place-items:center; 
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      color:#fff; 
      cursor:pointer;
      font-size:28px;
      transition:all 0.3s var(--easing);
    }
    
    .lb-prev:hover,.lb-next:hover{
      background:rgba(255,255,255,.2);
      transform:translateY(-50%) scale(1.1);
      border-color:rgba(255,255,255,.4);
    }
    
    .lb-prev{left:20px} 
    .lb-next{right:20px}
    
    .lb-counter{
      position:absolute; 
      left:50%; 
      bottom:20px; 
      translate:-50% 0; 
      color:#fff; 
      font-weight:700; 
      background:var(--glass-bg);
      backdrop-filter:blur(20px);
      border:2px solid rgba(255,255,255,.2);
      padding:.6rem 1rem; 
      border-radius:999px;
      box-shadow:var(--glass-shadow);
    }

    /* ===== Aide sous les sliders ===== */
    .slider-help{
      text-align:center;
      color:#48627d;
      font-size:.9rem;
      margin-top:.6rem;
      font-style:italic;
    }
    /* Place la note sous le SLIDER (colonne 2) en desktop/tablette */
    .work .slider-help{ grid-column: 2; align-self:start; }
    @media (max-width:600px){
      .slider-help{font-size:.82rem;margin-top:.4rem;}
    }
    /* En une colonne, la note revient naturellement sous le slider */
    @media (max-width: 980px){
      .work{grid-template-columns:1fr}
      .work .slider-help{ grid-column: 1; }
    }

    /* ===== Responsive Moderne ===== */
    @media (max-width: 980px){
      /* Les règles pour section.page sont déjà définies plus haut dans le fichier */
      
      /* Ensure contact page scrolls properly on mobile */
      #p10{
        padding-top:clamp(24px,5vw,40px);
        padding-bottom:clamp(24px,5vw,40px);
      }

      /* Compactage spécifique de la page Nos services (#p4) */
      #p4{ padding-block: calc(var(--pad) * 0.6); }
      #p4 .grid{ gap:14px; }
      #p4 .card{ padding:18px; }
      #p4 h2{ margin-bottom:6px; }
      #p4 p{ margin:.3rem 0 .9rem; font-size:clamp(15px,2.8vw,17px); }
      #p4 .badge{ font-size:.8rem; padding:.3rem .6rem; }

      .hero,.two{grid-template-columns:1fr; gap:clamp(20px,4vw,32px)}
      .service{grid-column:span 12}
      /* .dots masqués sur mobile pour design continu */
      .contact-grid{
        grid-template-columns:1fr;
        gap:clamp(24px,5vw,40px);
        align-items:stretch;
      }
      form .row{grid-template-columns:1fr; gap:clamp(12px,2.5vw,16px)}
      .success-content{padding:28px;max-width:90%;}
      .success-icon{width:70px;height:70px}
      .success-icon svg{width:36px;height:36px}
      
      /* Contact section mobile optimizations */
      #p10 .card{
        padding:clamp(20px,4vw,32px);
      }
      #p10 h2{
        font-size:clamp(24px,5vw,32px);
        margin-bottom:clamp(12px,3vw,20px);
      }
      #p10 .contact-info-item{
        padding:clamp(14px,3vw,18px);
      }
      
      .s-nav{width:44px; height:44px}
      .s-nav svg{width:18px; height:18px}
      .s-prev{left:12px}
      .s-next{right:12px}
    }
    
    @media (max-width: 520px){
      :root{--pad:clamp(16px,4vw,24px)}
      
      section.page{
        padding:clamp(16px,4vw,24px);
        min-height:100svh;
        height:auto;
        display:flex;
        flex-direction:column;
        justify-content:center; /* Centre le contenu quand il y a de l'espace */
        align-items:stretch;
      }
      
      section.page .container{
        width:100%;
        max-width:100%;
        padding:0;
      }
      
      #p4{ padding-block: calc(var(--pad) * 0.5); }
      #p4 .grid{ gap:12px; }
      #p4 .card{ padding:16px; }
      #p4 p{ font-size:clamp(14px,3.6vw,16px); }
      
      #p1 .corner-logo img{height:64px}
      
      .wa{
        width:60px;
        height:60px;
        right:16px;
        bottom:16px;
      }
      .wa .whatsapp-ico{width:28px;height:28px}
      
      /* .dots masqués sur mobile pour design continu */
      
      .btn{
        padding:clamp(.85rem,3vw,1rem) clamp(1.2rem,4vw,1.6rem);
        font-size:clamp(.85rem,2.5vw,.95rem);
        min-height:44px; /* Touch target minimum */
      }
      
      .card{padding:clamp(18px,4vw,24px)}
      
      /* Contact section ultra-mobile */
      #p10{
        padding:clamp(16px,4vw,20px);
        min-height:100svh;
        display:flex;
        align-items:flex-start;
        padding-top:clamp(20px,5vw,32px);
      }
      #p10 .container{
        width:100%;
        max-width:100%;
      }
      #p10 .contact-grid{
        gap:clamp(20px,4vw,28px);
      }
      #p10 .card{
        padding:clamp(18px,4vw,24px);
      }
      #p10 h2{
        font-size:clamp(22px,6vw,28px);
        line-height:1.2;
        margin-bottom:clamp(16px,4vw,20px);
      }
      #p10 .kicker{
        font-size:clamp(.7rem,2vw,.8rem);
        padding:clamp(.4rem,1vw,.5rem) clamp(.7rem,2vw,.9rem);
        margin-bottom:clamp(8px,2vw,12px);
      }
      #p10 .contact-info-item{
        padding:clamp(12px,3vw,16px);
        gap:clamp(10px,2vw,12px);
      }
      #p10 .contact-info-icon{
        width:clamp(36px,8vw,40px);
        height:clamp(36px,8vw,40px);
      }
      #p10 .contact-info-icon svg{
        width:clamp(16px,3.5vw,18px);
        height:clamp(16px,3.5vw,18px);
      }
      #p10 input,
      #p10 textarea,
      #p10 select{
        padding:clamp(14px,3vw,16px);
        font-size:clamp(.9rem,2.5vw,1rem);
        min-height:44px; /* Touch target */
      }
      #p10 textarea{
        min-height:clamp(90px,25vw,120px);
      }
      #p10 label{
        font-size:clamp(.8rem,2vw,.9rem);
        margin:.4rem 0 .3rem;
      }
      #p10 form .row{
        gap:clamp(10px,2.5vw,14px);
        margin-top:clamp(10px,2vw,14px);
      }
      #p10 .btn{
        width:100%;
        justify-content:center;
        margin-top:clamp(12px,3vw,16px);
      }
      #p10 .btn-outline{
        width:100%;
        margin-top:clamp(8px,2vw,12px);
      }
      
    }
    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto}
      .btn,.toc a,.dots button{transition:none}
      .wa{transition:none}
      .wa::before{animation:none}
    }

    /* ===== Améliorations dynamiques ===== */
    /* Animation ripple pour les boutons */
    @keyframes ripple{
      to{transform:scale(2);opacity:0}
    }
    
    /* Animation slide-in pour les éléments au scroll */
    @keyframes slideInUp{
      from{opacity:0;transform:translateY(30px)}
      to{opacity:1;transform:translateY(0)}
    }
    
    .animate-in{
      animation:slideInUp 0.6s ease-out forwards;
    }
    
    /* Amélioration du focus pour la navigation clavier */
    .keyboard-nav *:focus{
      outline:3px solid var(--yellow) !important;
      outline-offset:2px !important;
    }
    
    /* Effet parallaxe pour hero-visual */
    .hero-visual{
      will-change:transform;
      transition:transform 0.1s ease-out;
    }
    
    /* Amélioration des transitions de formulaire */
    input.error,textarea.error,select.error{
      animation:shake 0.4s ease-in-out;
    }
    
    @keyframes shake{
      0%,100%{transform:translateX(0)}
      25%{transform:translateX(-8px)}
      75%{transform:translateX(8px)}
    }
    
    /* Smooth scroll amélioré */
    @media (prefers-reduced-motion: no-preference){
      html{scroll-behavior:smooth}
    }
    
    /* Performance: GPU acceleration */
    .card,.btn,.slider,.hero-visual{
      transform:translateZ(0);
      backface-visibility:hidden;
      perspective:1000px;
    }
    
    /* ===== Indicateur de progression de scroll sur mobile ===== */
    .scroll-progress{
      position:fixed;
      top:0;
      left:0;
      width:0%;
      height:3px;
      background:linear-gradient(90deg, var(--yellow), var(--yellow-2));
      z-index:100;
      transition:width .1s ease-out;
      box-shadow:0 2px 8px rgba(246,192,0,.4);
      display:none;
    }
    
    @media (max-width: 980px){
      .scroll-progress{
        display:block; /* Visible sur mobile */
        transition:none !important; /* Pas de transition pour la barre de progression */
      }
      
      /* Toutes les animations désactivées sur mobile */
      .card{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
      }
      
      .card.visible{
        opacity:1 !important;
        transform:none !important;
      }
      
      /* Pas d'animation pour les boutons */
      .btn:active{
        transform:none !important;
        transition:none !important;
      }
      
      /* Pas d'animation pour les inputs */
      input:focus, textarea:focus, select:focus{
        transform:none !important;
        transition:none !important;
      }
    }