@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

  /* ---------- tokens ---------- */
  :root{
    --paper:#0a1420;
    --paper-alt:#0d1c2b;
    --surface:#122a3d;
    --ink:#f2f6fa;
    --ink-muted:#93a9bd;
    --border:#22374a;
    --brand-deep:#0f4d6e;
    --brand-deep-strong:#0a3a54;
    --brand-bright:#2babe0;
    --brand-bright-strong:#4fc3ec;
    --brand-soft:#132c3e;
    --chip-light:#dbeef6;
    --sun:#f0a93a;
    --sun-soft:#2b220f;
    --coral:#e8763f;
    --coral-soft:#2a1c10;
    --on-brand:#1c1103;
    --shadow:rgba(0,0,0,0.5);
    --success-bg:#123a2b;
    --success-text:#7fd9a8;
    --danger:#ff6b6b;

    --font-display:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  }

  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg, var(--sun), var(--coral));
    z-index:60; transition:width 0.1s linear;
  }
  .reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1; transform:none;}
  .reveal-stagger.in .reveal-child{transition-delay:calc(var(--i, 0) * 90ms);}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  button{font:inherit;}
  h1,h2,h3,h4{
    font-family:var(--font-display);
    margin:0;
    text-wrap:balance;
    font-weight:800;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--brand-bright-strong);
    margin:0 0 0.8rem;
  }
  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:24px;
    position:relative;
  }
  section{padding-block:clamp(3.2rem, 6vw, 6rem);}
  :focus-visible{outline:3px solid var(--brand-bright); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- decorative shapes ---------- */
  .deco{position:absolute; pointer-events:none; z-index:0;}
  .deco-sparkle{
    width:var(--s, 26px); height:var(--s, 26px);
    background:var(--c, var(--sun));
    clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    opacity:var(--o, 0.9);
    animation:float 7s ease-in-out infinite;
    animation-delay:var(--d, 0s);
  }
  .deco-bubble{
    width:var(--s, 60px); height:var(--s, 60px);
    border-radius:50%;
    background:var(--c, rgba(255,255,255,0.18));
    border:1.5px solid rgba(255,255,255,0.35);
    opacity:var(--o, 1);
    animation:float 9s ease-in-out infinite;
    animation-delay:var(--d, 0s);
  }
  @keyframes float{
    0%, 100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-10px) rotate(6deg);}
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.55em;
    padding:0.85em 1.6em;
    border-radius:999px;
    font-family:var(--font-body);
    font-weight:700;
    font-size:0.98rem;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    line-height:1.2;
    position:relative;
    z-index:1;
    white-space:nowrap;
  }
  .btn svg{flex:none;}
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--sun); color:#241a02; box-shadow:0 10px 24px -10px rgba(0,0,0,0.5);}
  .btn-primary:hover{background:#ffbb55;}
  .btn-white{background:#fff; color:var(--brand-deep-strong); box-shadow:0 10px 24px -10px rgba(0,0,0,0.3);}
  .btn-white:hover{background:#f2f2f2;}
  .btn-outline-white{background:transparent; border-color:rgba(255,255,255,0.7); color:#fff;}
  .btn-outline-white:hover{background:rgba(255,255,255,0.14);}
  .btn-ghost{background:transparent; border-color:var(--border); color:var(--ink);}
  .btn-ghost:hover{background:var(--brand-soft);}
  .btn-dark{background:var(--brand-deep); color:#fff; border-radius:12px;}
  .btn-dark:hover{background:var(--brand-deep-strong);}
  .btn-block{width:100%; justify-content:center;}
  .btn[disabled]{opacity:0.45; cursor:not-allowed; transform:none;}

  /* ---------- announcement bar ---------- */
  .announce{
    background:var(--brand-deep-strong);
    color:#fff;
    text-align:center;
    font-size:0.82rem;
    font-weight:600;
    padding:0.5rem 1rem;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--paper) 85%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:12px;}
  .brand{display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:1.15rem; white-space:nowrap;}
  .brand-badge{display:flex; flex:none; align-items:center; justify-content:center; width:40px; height:40px; padding:5px; border-radius:12px; background:#ffffff; box-shadow:0 1px 4px rgba(6,30,44,0.22);}
  .brand-badge img{width:100%; height:100%; object-fit:contain;}
  nav.links{display:flex; align-items:center; gap:0.1rem;}
  nav.links a{
    text-decoration:none; font-weight:600; font-size:0.9rem; color:var(--ink-muted);
    white-space:nowrap; padding:0.5em 0.7em; border-radius:999px; transition:background 0.15s ease, color 0.15s ease;
  }
  nav.links a:hover{background:var(--brand-soft); color:var(--brand-deep);}
  .nav-actions{display:flex; align-items:center; gap:0.6rem;}
  .nav-phone{
    display:flex; align-items:center; gap:0.5rem; text-decoration:none;
    font-family:var(--font-mono); font-weight:600; font-size:0.92rem; color:var(--brand-deep-strong);
    white-space:nowrap; background:var(--chip-light); padding:0.5em 0.9em; border-radius:999px;
  }
  .nav-phone svg{color:var(--brand-deep-strong);}
  .menu-toggle{display:none; background:none; border:1.5px solid var(--border); border-radius:999px; padding:8px; color:var(--ink);}

  @media (max-width:1320px){
    nav.links{
      position:absolute; top:100%; left:0; right:0; background:var(--surface);
      border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch;
      padding:0.8rem 24px 1.2rem; gap:0.3rem; display:none;
    }
    nav.links a{padding:0.7em 1em;}
    nav.links.open{display:flex;}
    .menu-toggle{display:inline-flex;}
  }
  @media (max-width:520px){
    .nav-phone span.full{display:none;}
  }
  @media (max-width:640px){
    /* the sticky bottom bar already offers "Soumission" + "Appeler" on small screens */
    .nav-actions > a.btn{display:none;}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(120% 140% at 15% 0%, var(--brand-bright) 0%, var(--brand-deep) 55%, var(--brand-deep-strong) 100%);
    color:#fff;
    padding-block:clamp(3.2rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:clamp(1.5rem, 4vw, 3rem);
    align-items:center;
    z-index:1;
  }
  .hero .eyebrow{color:var(--sun);}
  .hero h1{
    font-size:clamp(2.3rem, 4.4vw, 3.6rem);
    font-weight:600;
    line-height:1.08;
    color:#fff;
  }
  .hero p.lede{font-size:1.12rem; color:rgba(255,255,255,0.86); max-width:42ch; margin:1.2rem 0 1.8rem;}
  .hero-ctas{display:flex; flex-wrap:wrap; gap:0.9rem;}

  .hero-visual{
    position:relative;
    aspect-ratio:1/0.92;
    display:flex; align-items:center; justify-content:center;
    z-index:1;
    perspective:1400px;
  }
  .hero-visual .layer{
    position:absolute;
    width:74%;
    aspect-ratio:1;
    border-radius:32px;
    transform-style:preserve-3d;
  }
  .hero-visual .layer-1{background:rgba(255,255,255,0.10); transform:rotate(10deg) translate(4%, 6%);}
  .hero-visual .layer-2{background:rgba(255,255,255,0.16); transform:rotate(-14deg) translate(-3%, -2%);}
  .hero-visual .badge{
    position:relative;
    width:82%;
    aspect-ratio:1;
    background:#fff;
    border-radius:32px;
    display:flex; align-items:center; justify-content:center;
    padding:9%;
    box-shadow:0 40px 80px -24px rgba(4,20,29,0.55);
    transform:rotate(-4deg);
    animation:tilt 6s ease-in-out infinite;
    transform-style:preserve-3d;
  }
  .hero-visual.tracking .badge{animation-play-state:paused; transition:transform 0.5s ease-out;}
  @keyframes tilt{
    0%, 100%{transform:rotate(-4deg) translateY(0);}
    50%{transform:rotate(-1deg) translateY(-10px);}
  }
  .hero-visual .badge img{width:100%;}

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero-visual{max-width:340px; margin-inline:auto; order:-1;}
  }

  /* ---------- section heads ---------- */
  .section-head{max-width:62ch; margin-bottom:clamp(2rem, 4vw, 3rem);}
  .section-head h2{font-size:clamp(1.7rem, 2.6vw, 2.4rem);}
  .section-head p{color:var(--ink-muted); font-size:1.05rem; margin-top:0.7rem;}
  .section-head.centered{margin-inline:auto; text-align:center;}

  /* ---------- services ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;}
  .service-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 16px 32px -26px var(--shadow);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .service-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px var(--shadow);}
  .service-photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-alt);}
  .service-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease;}
  .service-card:hover .service-photo img{transform:scale(1.05);}
  .service-photo .icon-badge{
    position:absolute; left:14px; bottom:-22px;
    width:48px; height:48px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; color:var(--accent, var(--brand-deep));
    box-shadow:0 6px 16px -4px rgba(0,0,0,0.45);
  }
  .service-body{padding:2.1rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:0.6rem;}
  .service-card h3{font-size:1.2rem;}
  .service-card p{color:var(--ink-muted); font-size:0.95rem; margin:0;}
  @media (max-width:820px){.services-grid{grid-template-columns:1fr;}}

  /* ---------- photo gallery ---------- */
  .gallery-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem;}
  .gallery-item{
    position:relative; border-radius:18px; overflow:hidden;
    aspect-ratio:4/3; box-shadow:0 16px 32px -22px var(--shadow);
  }
  .gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease;}
  .gallery-item:hover img{transform:scale(1.06);}
  .gallery-caption{
    position:absolute; left:14px; bottom:14px;
    background:rgba(10,20,32,0.72); color:#fff;
    font-family:var(--font-mono); font-size:0.7rem; font-weight:600;
    letter-spacing:0.05em; text-transform:uppercase;
    padding:0.5em 0.9em; border-radius:999px;
  }
  .gallery-expand{
    position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,0.92); color:var(--brand-deep-strong);
    display:flex; align-items:center; justify-content:center;
  }
  .gallery-note{color:var(--ink-muted); font-size:0.85rem; margin-top:1rem;}
  @media (max-width:820px){.gallery-grid{grid-template-columns:1fr;}}

  /* ---------- compare (avant/après) ---------- */
  .compare{
    position:relative; max-width:780px; margin-inline:auto;
    aspect-ratio:600/380; border-radius:24px; overflow:hidden;
    box-shadow:0 24px 50px -24px var(--shadow); user-select:none;
    touch-action:pan-y;
  }
  .compare-media{position:absolute; inset:0;}
  .compare-media svg{width:100%; height:100%; display:block;}
  .compare-before{clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0);}
  .compare-labels{position:absolute; inset:0; pointer-events:none;}
  .compare-tag{
    position:absolute; top:1rem; left:1rem;
    background:rgba(15,7,13,0.78); color:#fff; font-size:0.78rem; font-weight:700;
    letter-spacing:0.04em; text-transform:uppercase; padding:0.35em 0.85em; border-radius:999px;
  }
  .compare-tag.right{left:auto; right:1rem;}
  .compare-handle{
    position:absolute; top:0; bottom:0; left:var(--pos, 50%); transform:translateX(-50%);
    width:44px; display:flex; align-items:center; justify-content:center; pointer-events:none;
  }
  .compare-handle::before{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:3px;
    background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.08); transform:translateX(-50%);
  }
  .compare-handle svg{
    position:relative; width:38px; height:38px; padding:9px; border-radius:50%;
    background:#fff; color:var(--brand-deep); box-shadow:0 6px 16px -4px rgba(0,0,0,0.35);
  }
  .compare input[type="range"]{
    position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
    -webkit-appearance:none; appearance:none;
  }

  /* ---------- 3d tilt ---------- */
  .tilt-card{transition:transform 0.25s ease, box-shadow 0.25s ease; transform-style:preserve-3d; will-change:transform;}
  .tilt-card:hover{box-shadow:0 20px 40px -18px var(--shadow);}

  /* ---------- benefits ---------- */
  .benefits{background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .benefits-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem;}
  .benefit{display:flex; flex-direction:column; gap:0.6rem;}
  .benefit .icon-badge{
    width:44px; height:44px; border-radius:13px; background:var(--chip-light);
    display:flex; align-items:center; justify-content:center; color:var(--brand-deep-strong);
    box-shadow:0 6px 16px -6px rgba(0,0,0,0.5);
  }
  .benefit h3{font-size:1.05rem;}
  .benefit p{margin:0; color:var(--ink-muted); font-size:0.92rem;}
  @media (max-width:820px){.benefits-grid{grid-template-columns:1fr 1fr; row-gap:1.8rem;}}
  @media (max-width:520px){.benefits-grid{grid-template-columns:1fr;}}

  /* ---------- process ---------- */
  .process-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem;
    position:relative; counter-reset:step;
  }
  .process-grid::before{
    content:""; position:absolute; top:34px; left:calc(100%/6); right:calc(100%/6);
    height:2px; background:repeating-linear-gradient(90deg, var(--border) 0 10px, transparent 10px 18px);
    z-index:0;
  }
  .process-step{
    position:relative; z-index:1;
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:1.8rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:0.6rem;
    box-shadow:0 16px 32px -26px var(--shadow);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .process-step:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px var(--shadow);}
  .process-num{
    width:44px; height:44px; border-radius:14px;
    background:linear-gradient(150deg, var(--brand-deep), var(--brand-bright)); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:1.05rem;
    box-shadow:0 8px 18px -8px var(--shadow);
  }
  .process-step h3{font-size:1.12rem;}
  .process-step p{color:var(--ink-muted); font-size:0.94rem; margin:0;}
  @media (max-width:820px){
    .process-grid{grid-template-columns:1fr; gap:1.4rem;}
    .process-grid::before{display:none;}
  }

  /* ---------- faq ---------- */
  .faq-list{display:flex; flex-direction:column; gap:0.9rem; max-width:52rem;}
  .faq-item{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:0; box-shadow:0 16px 32px -26px var(--shadow); overflow:hidden;
  }
  .faq-item summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:1.2rem 1.4rem; font-family:var(--font-display); font-weight:600;
    font-size:1.02rem; color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+"; flex:0 0 auto; width:28px; height:28px; border-radius:9px;
    background:linear-gradient(150deg, var(--brand-deep), var(--brand-bright)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
    transition:transform 0.2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{color:var(--ink-muted); font-size:0.96rem; margin:0; padding:0 1.4rem 1.3rem; line-height:1.6;}

  /* ---------- zone ---------- */
  .zone-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem, 5vw, 3.5rem); align-items:center;}
  .radius-diagram{width:100%; max-width:320px; margin-inline:auto;}
  .radius-diagram svg{width:100%; height:auto; display:block;}
  .city-chips{display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:1.4rem;}
  .city-chip{background:var(--chip-light); color:var(--brand-deep-strong); font-size:0.86rem; font-weight:600; padding:0.4em 0.9em; border-radius:999px;}
  @media (max-width:860px){.zone-wrap{grid-template-columns:1fr;}}

  /* ---------- cta band ---------- */
  .cta-band{
    position:relative; overflow:hidden;
    background:linear-gradient(120deg, var(--coral) 0%, var(--sun) 100%);
    color:#241a02;
    border-radius:28px;
    margin-inline:24px;
    padding:clamp(2.2rem, 5vw, 3.2rem);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  }
  .cta-band h2{font-size:clamp(1.5rem, 2.4vw, 2rem); max-width:34ch;}
  .cta-band p{margin:0.5rem 0 0; color:rgba(36,26,2,0.75); max-width:44ch;}

  /* ---------- form ---------- */
  .quote{background:var(--paper-alt);}
  .quote-panel{
    background:var(--surface);
    border-radius:24px;
    overflow:hidden;
    display:grid;
    grid-template-columns:230px 1fr;
    box-shadow:0 30px 60px -30px var(--shadow);
    border:1px solid var(--border);
  }
  .quote-steps{background:var(--paper-alt); border-right:1px solid var(--border); padding:1.8rem 1.4rem; display:flex; flex-direction:column; gap:1.5rem;}
  .qstep{display:flex; align-items:flex-start; gap:0.7rem; font-size:0.9rem; color:var(--ink-muted);}
  .qstep .dot{
    flex:none; width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
    font-size:0.75rem; font-weight:600; color:var(--ink-muted); background:var(--surface);
  }
  .qstep.active{color:var(--ink); font-weight:700;}
  .qstep.active .dot{border-color:var(--brand-bright); color:var(--brand-deep);}
  .qstep.done .dot{background:var(--brand-bright); border-color:var(--brand-bright); color:#fff;}
  .qstep.done{color:var(--ink);}
  .quote-recap{
    margin-top:auto; padding-top:1.2rem; border-top:1px dashed var(--border);
    display:flex; flex-direction:column; gap:0.35rem;
  }
  .quote-recap-title{
    font-family:var(--font-mono); font-size:0.68rem; font-weight:600; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink-muted); margin:0 0 0.2rem;
  }
  .quote-recap-line{
    position:relative; margin:0; padding-left:0.95rem; font-size:0.85rem; font-weight:600; color:var(--brand-deep);
  }
  .quote-recap-line::before{
    content:""; position:absolute; left:0; top:0.5em; width:6px; height:6px; border-radius:50%; background:var(--brand-bright);
  }
  .quote-recap-line:empty{display:none;}

  .quote-body{padding:clamp(1.8rem, 4vw, 2.6rem);}
  .qstage{display:none;}
  .qstage.active{display:block; animation:fadein 0.25s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
  .qstage h3{font-size:1.35rem; margin-bottom:0.35rem;}
  .qstage > p.help{color:var(--ink-muted); margin:0 0 1.4rem; font-size:0.95rem;}

  .option-grid{display:grid; grid-template-columns:1fr 1fr; gap:0.75rem;}
  .option-card{
    position:relative; border:1.5px solid var(--border); border-radius:14px; padding:0.9rem 1rem;
    cursor:pointer; display:flex; align-items:center; gap:0.7rem; font-weight:600; font-size:0.94rem;
    transition:border-color 0.15s ease, background 0.15s ease;
  }
  .option-card:hover{border-color:var(--brand-bright);}
  .option-card input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;}
  .option-card .check{
    flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:transparent;
  }
  .option-card input:checked ~ .check{background:var(--brand-bright); border-color:var(--brand-bright); color:#fff;}
  .option-card:has(input:checked){border-color:var(--brand-bright); background:var(--brand-soft);}
  .option-card.radio .check{border-radius:50%;}
  @media (max-width:520px){.option-grid{grid-template-columns:1fr;}}

  .field{margin-bottom:1.1rem;}
  .field label{display:block; font-size:0.85rem; font-weight:700; margin-bottom:0.4rem;}
  .field .optional{font-weight:500; color:var(--ink-muted);}
  .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea{
    width:100%; padding:0.75em 0.95em; border-radius:12px; border:1.5px solid var(--border);
    background:var(--surface); color:var(--ink); font-family:var(--font-body); font-size:1rem;
  }
  .field textarea{ min-height:110px; resize:vertical; }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brand-bright);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
  @media (max-width:560px){.field-row{grid-template-columns:1fr;}}
  @media (max-width:600px){
    .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea{
      padding:1em 1.05em; font-size:16px;
    }
    .field textarea{ min-height:130px; }
    .field label{font-size:0.92rem;}
  }

  .qnav{display:flex; justify-content:space-between; align-items:center; margin-top:1.6rem; gap:1rem;}
  .qnav .spacer{flex:1;}
  .err-msg{color:var(--danger); font-size:0.85rem; display:none; margin-top:0.8rem;}

  .qsuccess{display:none; text-align:center; padding:1.2rem 0;}
  .qsuccess.active{display:block;}
  .qsuccess .icon-badge{
    width:64px; height:64px; border-radius:50%; background:var(--success-bg); color:var(--success-text);
    display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem;
  }
  .qsuccess h3{font-size:1.4rem; margin-bottom:0.6rem;}
  .qsuccess p{color:var(--ink-muted); max-width:42ch; margin:0 auto 1.4rem;}

  @media (max-width:760px){
    .quote-panel{grid-template-columns:1fr;}
    .quote-steps{
      flex-direction:row; flex-wrap:wrap; justify-content:center;
      border-right:none; border-bottom:1px solid var(--border);
      padding:1.4rem 1.2rem; gap:1rem 1.6rem;
    }
    .qstep{font-size:1rem;}
    .qstep .dot{width:32px; height:32px; font-size:0.85rem;}
    .qstep span.label-text{display:inline; font-size:0.95rem;}
  }

  /* ---------- footer ---------- */
  footer{background:var(--brand-deep-strong); color:rgba(255,255,255,0.85); padding-block:3rem 2rem;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem;}
  .footer-brand{display:flex; align-items:center; gap:0.7rem; font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:#fff; margin-bottom:0.8rem;}
  footer p{color:rgba(255,255,255,0.68); font-size:0.92rem;}
  footer h4{font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.55); margin-bottom:0.9rem;}
  footer a{text-decoration:none; color:rgba(255,255,255,0.88); display:flex; align-items:center; gap:0.55rem; margin-bottom:0.7rem; font-size:0.95rem;}
  footer a:hover{color:var(--sun);}
  .footer-bottom{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.14); font-size:0.82rem; color:rgba(255,255,255,0.5); text-align:center;}
  @media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:2rem;}}

  /* ---------- sticky mobile cta ---------- */
  .mobile-cta{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--border); padding:0.7rem 1rem; gap:0.7rem;
    box-shadow:0 -10px 24px -14px var(--shadow);
  }
  @media (max-width:640px){.mobile-cta{display:flex;} body{padding-bottom:78px;}}

  /* ---------- SEO : ajouts ---------- */
  .h1-kicker{display:block; margin-bottom:0.9rem;}
  .brand-badge{width:46px; height:46px; padding:0; border-radius:50%; background:transparent; box-shadow:0 0 0 2px rgba(42,166,223,0.7), 0 2px 10px rgba(0,0,0,0.35);}
  .brand-badge img{border-radius:50%;}
  a.city-chip{text-decoration:none; transition:background 0.2s, color 0.2s;}
  a.city-chip:hover{background:var(--brand-deep); color:#fff;}
  .footer-cities{display:flex; flex-wrap:wrap; gap:0.25rem 0.8rem; margin:0.4rem 0 0.9rem; font-size:0.85rem;}
  .footer-cities a{display:inline; margin:0;}
  .hero-city .wrap{grid-template-columns:1fr; max-width:900px;}
  .hero-city h1{max-width:20ch;}
  .city-text{max-width:70ch; color:var(--ink-muted); font-size:1.05rem;}
  .city-text p{margin:0 0 1rem;}
  .card-link{color:inherit; text-decoration:none;}
  .card-link:hover{text-decoration:underline;}
  .check-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:0.7rem 1.4rem;}
  .check-list li{position:relative; padding-left:1.6rem; color:var(--ink-muted);}
  .check-list li::before{content:"✓"; position:absolute; left:0; color:var(--sun); font-weight:700;}
  .check-list li strong{color:var(--ink);}
  .breadcrumb{font-size:0.85rem; margin-bottom:1rem; color:rgba(255,255,255,0.7);}
  .breadcrumb a{color:inherit;}
  /* ---------- Galerie avant / après ---------- */
  .ba-title{font-size:1.15rem; margin:2.2rem 0 1rem;}
  .ba-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.4rem;}
  .ba-pair{background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden;}
  .ba-imgs{display:grid; grid-template-columns:1fr 1fr; gap:3px; background:var(--border);}
  .ba-imgs figure{margin:0; position:relative; aspect-ratio:3/4; background:var(--paper-alt);}
  .ba-imgs.single{grid-template-columns:1fr;}
  .ba-imgs.single figure{aspect-ratio:3/2;}
  .ba-imgs img{width:100%; height:100%; object-fit:cover; display:block;}
  .ba-tag{position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:0.3em 0.75em; border-radius:999px; background:rgba(10,20,32,0.82); color:#fff;}
  .ba-tag.after{background:var(--sun); color:#241a02;}
  .ba-wide{grid-column:span 2;}
  .ba-imgs.split figure{aspect-ratio:16/9;}
  .ba-imgs.tall figure{aspect-ratio:7/8;}
  .ba-tag.ba-bottom{top:auto; bottom:10px;}
  .ba-tag.ba-right{left:auto; right:10px;}
  @media (max-width:760px){.ba-wide{grid-column:auto;} .ba-imgs.tall figure{aspect-ratio:3/2;}}
  .ba-cap{padding:1rem 1.2rem 1.2rem;}
  .ba-cap h4{font-size:1rem; margin:0 0 0.35rem;}
  .ba-cap p{color:var(--ink-muted); font-size:0.92rem; margin:0;}
  /* ---------- Conversion : confiance, avis, formulaire ---------- */
  .trust-row{display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; margin-top:1.4rem; font-size:0.92rem; color:rgba(255,255,255,0.92);}
  .trust-row a{color:inherit; text-decoration:none; font-weight:600;}
  .trust-row a:hover{text-decoration:underline;}
  .stars{color:var(--sun); letter-spacing:2px;}
  .reviews-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.2rem;}
  .review-card{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.3rem 1.3rem 1.1rem; display:flex; flex-direction:column;}
  .review-card blockquote{margin:0.7rem 0 1rem; color:var(--ink); font-size:0.98rem; line-height:1.55; flex:1;}
  .review-who{color:var(--ink-muted); font-size:0.85rem;}
  .review-who strong{color:var(--ink);}
  .reviews-cta{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:0.8rem;}
  .form-promise{margin-top:0.6rem; color:var(--ink-muted); font-size:1rem;}
  .form-promise strong{color:var(--sun);}

  /* ---------- Menu du haut : passe en menu ☰ plus tôt pour que le bouton « Soumission gratuite » ne soit jamais coupé ---------- */
  .nav-row{flex-wrap:nowrap;}
  .nav-actions{flex-shrink:0;}
  @media (max-width:1440px){
    nav.links{
      position:absolute; top:100%; left:0; right:0; background:var(--surface);
      border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch;
      padding:0.8rem 24px 1.2rem; gap:0.3rem; display:none;
    }
    nav.links a{padding:0.7em 1em;}
    nav.links.open{display:flex;}
    .menu-toggle{display:inline-flex;}
  }