:root{
    --ink:#04262a;
    --teal:#01696f;
    --teal-deep:#013c40;
    --teal-pale:#e4f1ef;
    --foam:#f3f8f7;
    --concrete:#e7e3d8;
    --concrete-dark:#c9c3b2;
    --hazard:#d8ff5e;
    --hazard-ink:#213600;
    --rust:#b6491f;
    --white:#ffffff;
    --display: "Anton", sans-serif;
    --body: "Work Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --radius: 6px;
    --maxw: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
  body{
    margin:0;
    font-family:var(--body);
    color:var(--ink);
    background:var(--foam);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  img,svg{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:.01em; line-height:1.02; margin:0;}
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal); font-weight:600;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:.03em; text-transform:uppercase;
    padding:14px 22px; border-radius:var(--radius); text-decoration:none; border:2px solid transparent;
    cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:focus-visible{outline:3px solid var(--teal); outline-offset:2px;}
  .btn-hazard{background:var(--hazard); color:var(--hazard-ink); box-shadow:4px 4px 0 var(--ink);}
  .btn-hazard:hover{box-shadow:6px 6px 0 var(--ink);}
  .btn-outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,.55);}
  .btn-outline:hover{border-color:var(--white);}
  .btn-outline-dark{background:transparent; color:var(--ink); border-color:var(--ink);}

  /* ===== NAV ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--ink);
    border-bottom:3px solid var(--hazard);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px clamp(10px,4vw,24px); max-width:var(--maxw); margin:0 auto; gap:clamp(6px,2vw,18px);
  }
  .logo{
    font-family:var(--display); color:var(--white); font-size:clamp(14px,4.2vw,22px); letter-spacing:.02em;
    text-decoration:none; display:flex; align-items:center; gap:clamp(5px,1.5vw,10px); white-space:nowrap;
    min-width:0; overflow:hidden; text-overflow:ellipsis; flex-shrink:1;
  }
  .logo .dot{width:8px; height:8px; background:var(--hazard); border-radius:50%; flex-shrink:0;}
  nav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0;}
  nav ul a{
    color:rgba(255,255,255,.8); text-decoration:none; font-size:14px; font-weight:600;
    letter-spacing:.02em; transition:color .15s;
  }
  nav ul a:hover{color:var(--hazard);}
  .nav-links{display:flex; align-items:center; gap:26px; min-width:0; flex-shrink:1;}
  .nav-cta{display:flex; flex-shrink:0;}
  .nav-cta .btn{padding:clamp(8px,2.5vw,14px) clamp(12px,4vw,22px); font-size:clamp(11px,3vw,14px); white-space:nowrap;}
  @media(max-width:780px){
    nav ul{display:none;}
  }

  /* ===== HERO ===== */
  .hero{
    background:var(--ink);
    color:var(--white);
    padding:64px 0 0;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(115deg, rgba(1,105,111,.55) 0 2px, transparent 2px 34px);
    opacity:.5; pointer-events:none;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
    position:relative;
  }
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .hero-copy .eyebrow{color:var(--hazard);}
  .hero h1{
    font-size:clamp(40px, 5.6vw, 68px);
    margin-top:14px;
    text-transform:uppercase;
  }
  .hero h1 span{color:var(--hazard);}
  .hero p.lede{
    font-size:18px; line-height:1.55; color:rgba(255,255,255,.82); max-width:46ch; margin-top:20px;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;}
  .hero-meta{
    display:flex; gap:26px; margin-top:38px; flex-wrap:wrap;
    font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.65);
  }
  .hero-meta b{color:var(--white); display:block; font-size:15px; font-family:var(--body); font-weight:700;}

  /* ---- signature: before/after drag slider ---- */
  .slider-card{
    position:relative; border-radius:10px; overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    border:3px solid var(--ink);
  }
  .compare{
    position:relative; width:100%; aspect-ratio:4/5; user-select:none; touch-action:none;
    background:var(--concrete-dark);
  }
  @media(max-width:520px){
    .compare{aspect-ratio:1/1.05;}
  }
  .layer{position:absolute; inset:0;}
  .layer svg{width:100%; height:100%;}
  .layer img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
  .layer-after{clip-path:inset(0 0 0 50%);}
  .compare-handle{
    position:absolute; top:0; bottom:0; left:50%;
    width:0; transform:translateX(-50%);
    pointer-events:none;
  }
  .compare-handle .line{position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--hazard); transform:translateX(-1.5px);}
  .compare-handle .grip{
    position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
    width:46px; height:46px; border-radius:50%; background:var(--hazard);
    display:flex; align-items:center; justify-content:center; gap:3px;
    box-shadow:0 6px 16px rgba(0,0,0,.45); pointer-events:none;
  }
  .compare-handle .grip::before,.compare-handle .grip::after{
    content:""; width:3px; height:14px; background:var(--hazard-ink); border-radius:2px;
  }
  .compare input[type=range]{
    position:absolute; inset:0; width:100%; height:100%; margin:0;
    opacity:0; cursor:ew-resize; -webkit-appearance:none;
  }
  .compare-tag{
    position:absolute; bottom:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; padding:6px 10px; border-radius:4px; font-weight:600;
  }
  .compare-tag.before{left:14px; background:rgba(4,38,42,.75); color:var(--concrete);}
  .compare-tag.after{right:14px; background:var(--hazard); color:var(--hazard-ink);}
  .slider-caption{
    display:flex; justify-content:space-between; align-items:center;
    background:var(--ink); color:rgba(255,255,255,.55); padding:10px 16px;
    font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    border-top:1px solid rgba(255,255,255,.1);
  }

  /* ===== SECTION SHARED ===== */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(30px,4vw,44px); margin-top:12px; text-transform:uppercase;}
  .section-head p{font-size:16.5px; line-height:1.6; color:#3c5a5c; margin-top:14px;}
  .band-teal{background:var(--teal); color:var(--white);}
  .band-teal .section-head p{color:rgba(255,255,255,.85);}
  .band-teal .eyebrow{color:var(--hazard);}
  .band-concrete{background:var(--concrete);}

  /* ===== PACKAGES ===== */
  .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:880px){.pkg-grid{grid-template-columns:1fr;}}
  .pkg{
    background:var(--white); border-radius:10px; padding:30px 26px;
    border:1px solid rgba(1,105,111,.15);
    display:flex; flex-direction:column; gap:16px;
    position:relative;
  }
  .pkg.featured{border:2px solid var(--teal); box-shadow:0 18px 40px -24px rgba(1,105,111,.5);}
  .pkg-flag{
    position:absolute; top:-13px; left:26px; background:var(--hazard); color:var(--hazard-ink);
    font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:5px 10px; border-radius:4px;
  }
  .pkg h3{font-family:var(--body); font-weight:700; font-size:19px;}
  .pkg .price{
    font-family:var(--mono); font-size:38px; font-weight:600; color:var(--teal); line-height:1;
    display:flex; align-items:baseline; gap:6px;
  }
  .pkg .price small{font-size:14px; font-weight:600; color:var(--ink); opacity:.6;}
  .pkg p{font-size:14.5px; line-height:1.55; color:#3c4d4e; margin:0;}
  .pkg .add{
    font-family:var(--mono); font-size:12.5px; color:var(--teal); background:var(--teal-pale);
    padding:8px 10px; border-radius:5px;
  }
  .pkg .btn{margin-top:auto; justify-content:center;}

  .press-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  @media(max-width:980px){.press-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.press-grid{grid-template-columns:1fr;}}
  .press-card{
    background:var(--white); border-radius:10px; padding:24px; display:flex; flex-direction:column; gap:12px;
    border:1px solid rgba(1,105,111,.15);
  }
  .press-card .price{font-family:var(--mono); font-weight:600; color:var(--teal); font-size:15px;}
  .press-card h3{font-family:var(--body); font-weight:700; font-size:16.5px;}
  .press-card p{font-size:13.8px; color:#3c4d4e; line-height:1.5; margin:0; flex-grow:1;}
  .press-card .btn{font-size:12px; padding:10px 14px;}

  /* gauge visual */
  .gauge-row{display:flex; align-items:center; gap:18px; margin-top:10px;}
  .gauge-num{font-family:var(--mono); font-size:15px; color:var(--hazard);}

  /* ===== STEPS ===== */
  .steps{display:grid; gap:0;}
  .step{
    display:grid; grid-template-columns:90px 1fr; gap:22px; padding:26px 0;
    border-top:1px solid rgba(1,105,111,.18);
  }
  .step:last-child{border-bottom:1px solid rgba(1,105,111,.18);}
  .step .n{font-family:var(--display); font-size:44px; color:var(--concrete-dark); line-height:1;}
  .band-teal .step{border-color:rgba(255,255,255,.2);}
  .band-teal .step .n{color:rgba(255,255,255,.28);}
  .step h4{font-family:var(--body); font-weight:700; font-size:17px; margin:0 0 6px;}
  .step p{margin:0; font-size:14.5px; line-height:1.55; opacity:.85;}
  .steps-2col{display:grid; grid-template-columns:1fr 1fr;}
  @media(max-width:760px){.steps-2col{grid-template-columns:1fr;}}

  /* ===== ZONE / CONTACT ===== */
  .zone-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  @media(max-width:860px){.zone-grid{grid-template-columns:1fr;}}
  .badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
  .city-badge{
    font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em;
    padding:9px 14px; border:2px solid var(--ink); border-radius:5px; text-transform:uppercase;
  }
  .hours-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px; margin-top:8px;}
  .hours-table td{padding:9px 4px; border-bottom:1px solid rgba(4,38,42,.12);}
  .hours-table td:first-child{font-weight:600; text-transform:capitalize;}
  .hours-table td:last-child{text-align:right; color:var(--teal); font-weight:600;}
  .band-teal .hours-table td{border-bottom:1px solid rgba(255,255,255,.2);}
  .band-teal .hours-table td:last-child{color:var(--hazard);}

  /* ===== CTA BAND ===== */
  .cta-band{
    background:var(--ink); color:var(--white); text-align:center; padding:80px 0;
    position:relative; overflow:hidden;
  }
  .cta-band::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, rgba(1,105,111,.5) 0 2px, transparent 2px 34px);
    opacity:.45;
  }
  .cta-band .inner{position:relative;}
  .cta-band h2{font-size:clamp(28px,4.5vw,46px); text-transform:uppercase; max-width:760px; margin:0 auto;}
  .cta-band p{color:rgba(255,255,255,.75); margin-top:16px; font-size:16px;}
  .cta-band .hero-actions{justify-content:center; margin-top:30px;}

  /* ===== FOOTER ===== */
  footer{background:var(--ink); color:rgba(255,255,255,.6); padding:52px 0 26px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr; gap:30px;}}
  .foot-grid h5{
    font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--hazard); margin:0 0 14px;
  }
  .foot-grid a{display:block; color:rgba(255,255,255,.7); text-decoration:none; font-size:14.5px; margin-bottom:9px;}
  .foot-grid a:hover{color:var(--white);}
  .foot-logo{font-family:var(--display); color:var(--white); font-size:22px; margin-bottom:12px;}
  .foot-bottom{
    max-width:var(--maxw); margin:40px auto 0; padding:20px 24px 0; border-top:1px solid rgba(255,255,255,.12);
    font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }

  ::selection{background:var(--hazard); color:var(--hazard-ink);}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .btn{transition:none;}
  }

  /* ===== PAGE HERO (pages internes) ===== */
  .page-hero{
    background:var(--ink); color:var(--white); padding:56px 0 60px; position:relative; overflow:hidden;
  }
  .page-hero::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, rgba(1,105,111,.5) 0 2px, transparent 2px 34px);
    opacity:.45; pointer-events:none;
  }
  .page-hero .inner{position:relative; max-width:760px;}
  .page-hero .eyebrow{color:var(--hazard);}
  .page-hero h1{font-size:clamp(34px,5vw,54px); margin-top:12px; text-transform:uppercase;}
  .page-hero p{font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.82); margin-top:16px; max-width:56ch;}
  .page-hero .hero-actions{margin-top:26px;}
  .crumb{
    font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(255,255,255,.5); margin-bottom:8px;
  }
  .crumb a{color:rgba(255,255,255,.75); text-decoration:none;}
  .crumb a:hover{color:var(--hazard);}

  /* ===== FORM (soumission-devis) ===== */
  .quote-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
  @media(max-width:860px){.quote-wrap{grid-template-columns:1fr;}}
  .quote-form{
    background:var(--white); border:1px solid rgba(1,105,111,.18); border-radius:10px;
    padding:32px; display:flex; flex-direction:column; gap:18px;
  }
  .field{display:flex; flex-direction:column; gap:6px;}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
  .field label{
    font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--teal); font-weight:600;
  }
  .field input, .field select, .field textarea{
    font-family:var(--body); font-size:15px; padding:12px 14px; border:1.5px solid rgba(4,38,42,.18);
    border-radius:6px; background:var(--foam); color:var(--ink); width:100%;
  }
  .field textarea{resize:vertical; min-height:100px;}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--teal); background:var(--white);
  }
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media(max-width:480px){.field-row{grid-template-columns:1fr;}}
  .form-note{font-size:13px; color:#5c6f70; line-height:1.5; margin:0;}
  .form-status{
    font-family:var(--mono); font-size:13px; padding:12px 14px; border-radius:6px; display:none;
  }
  .form-status.show{display:block;}
  .form-status.ok{background:var(--teal-pale); color:var(--teal-deep);}
  .form-status.error{background:#fbe4db; color:var(--rust);}
  .side-card{
    background:var(--concrete); border-radius:10px; padding:28px; display:flex; flex-direction:column; gap:14px;
  }
  .side-card h4{font-family:var(--body); font-weight:700; font-size:16px; margin:0;}
  .side-card p{font-size:14px; line-height:1.55; color:#3c4d4e; margin:0;}
  .side-card a.inline-link{color:var(--teal); font-weight:600; text-decoration:underline;}

  /* ===== GALLERY (réalisations) ===== */
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  @media(max-width:980px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
  .gallery-item{
    min-width:0; margin:0; border-radius:10px; overflow:hidden; background:var(--white);
    border:1px solid rgba(1,105,111,.15); box-shadow:0 10px 24px -18px rgba(4,38,42,.4);
    transition:transform .15s ease;
  }
  .gallery-item:hover{transform:translateY(-3px);}
  .gallery-item img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
  .gallery-item figcaption{
    font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--teal); font-weight:600; padding:10px 12px;
  }