:root{
    --ink:#16241F;
    --ink-soft:#3B4A44;
    --paper:#F5F7F1;
    --paper-dim:#ECEFE7;
    --grime:#8A7A63;
    --grime-dark:#5B4F3E;
    --water:#1E7F78;
    --water-dark:#155f5a;
    --foam:#D7ECE1;
    --spark:#E8A33D;
    --spark-dark:#c8811f;
    --line:rgba(22,36,31,0.14);
    --radius:14px;
    --shadow:0 18px 40px -22px rgba(22,36,31,0.35);
    --display:'Big Shoulders Display', sans-serif;
    --body:'Work Sans', sans-serif;
    --mono:'IBM Plex Mono', monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}
  :focus-visible{outline:3px solid var(--spark); outline-offset:3px; border-radius:4px;}

  /* Marge de bord unique pour tout le site. Fluide : 18px sur un petit telephone,
     32px sur grand ecran. Toute regle qui redefinit `padding` sur un element .wrap
     l'ecraserait (meme specificite, declaree plus loin) : n'utiliser que des
     longhands verticaux -- padding-top / padding-bottom -- sur ces elements. */
  :root{--gut:clamp(18px, 4.4vw, 32px);}
  .wrap{max-width:1160px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut);}


  /* ---------- garde-fous de mise a l'echelle ----------
     En CSS grid et flex, un element ne descend jamais sous la largeur
     intrinseque de son contenu (`min-width:auto`). Un simple <select> dont
     une option est longue suffit a faire deborder toute une carte sur un
     petit ecran. On neutralise ce plancher partout ou la mise en page doit
     pouvoir se comprimer. */
  .contact > *, .zone > *, .reviews > *, .services-grid > *,
  .hero > *, .field-row > *, .slot-grid > *, .foot-row > *{min-width:0;}

  .field input, .field select, .field textarea,
  .contact-card input, .contact-card select, .contact-card textarea{
    min-width:0; max-width:100%; box-sizing:border-box;
  }
  /* un <select> se dimensionne sur son option la plus longue : on l'en empeche
     et on tronque proprement plutot que de pousser la carte hors de l'ecran */
  .field select{width:100%; text-overflow:ellipsis;}

  /* aucune image ou media ne peut depasser son conteneur */
  img, svg, video, iframe{max-width:100%;}

  /* un mot trop long (URL, nom compose) ne doit pas elargir la page */
  h1, h2, h3, p, li, td, th, label, legend{overflow-wrap:break-word;}

  /* zones cliquables : au moins 40px de haut sur tout ce qui se tape au doigt */

  .foot-links a{display:inline-block; padding:6px 0;}
  .marquee-toggle{min-height:40px;}
  .phone-chip{min-height:40px;}
  /* liens dans une phrase : on agrandit la zone tactile sans decaler le texte */
  .consent a, .form-note a{padding:8px 2px; margin:-8px 0;}
  /* le telephone du bloc contact est une action a part entiere */
  .info-row a{display:inline-block; padding:5px 0; min-height:34px;}

  /* ---------- utility text ---------- */
  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--water-dark);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--spark);
    display:inline-block;
  }
  h1,h2,h3{
    font-family:var(--display);
    font-weight:900;
    line-height:0.96;
    margin:0;
    letter-spacing:0.005em;
  }
  h2{font-size:clamp(30px,4.4vw,46px); text-transform:uppercase;}
  h3{font-size:22px; text-transform:uppercase; font-weight:800;}
  p{margin:0;}
  .lede{font-size:17px; color:var(--ink-soft); max-width:56ch;}

  .btn{
    font-family:var(--body);
    font-weight:700;
    font-size:15px;
    padding:14px 26px;
    border-radius:999px;
    border:2px solid transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--spark); color:var(--ink);}
  .btn-primary:hover{background:var(--spark-dark); box-shadow:var(--shadow);}
  .btn-outline{border-color:var(--ink); background:transparent; color:var(--ink);}
  .btn-outline:hover{background:var(--ink); color:var(--paper);}
  .btn-ghost-light{border-color:rgba(245,247,241,0.55); color:var(--paper);}
  .btn-ghost-light:hover{background:rgba(245,247,241,0.12);}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(245,247,241,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;   /* surtout pas `padding:` : ecraserait .wrap */
  }
  .logo{
    font-family:var(--display);
    font-weight:900;
    font-size:24px;
    text-transform:uppercase;
    letter-spacing:0.01em;
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:inherit;
  }
  .logo-mark{
    width:46px; height:46px;
    object-fit:contain;
    flex:none;
    transition:transform .25s ease;
  }
  .logo:hover .logo-mark{transform:scale(1.06) rotate(-3deg);}
  .logo-text{display:flex; align-items:baseline; gap:6px;}
  .logo-text > span{color:var(--water);}
  .nav-links{display:flex; gap:28px; font-weight:600; font-size:14.5px;}
  .nav-links a{
    text-decoration:none; border-bottom:2px solid transparent;
    display:inline-flex; align-items:center;
    min-height:40px;                 /* cible tactile confortable sur tablette */
  }
  .nav-links a:hover{border-bottom-color:var(--spark);}
  .nav-cta{display:flex; align-items:center; gap:14px; flex:none;}
  /* sans ces deux lignes, flex comprime le telephone jusqu'a l'empiler
     lettre par lettre (constate a 834px, largeur d'un iPad Air) */
  .phone-chip{flex:none; white-space:nowrap;}
  .nav-cta .btn{flex:none; white-space:nowrap;}
  .phone-chip{
    font-family:var(--mono); font-size:14px; font-weight:500;
    display:flex; align-items:center; gap:8px;
    text-decoration:none;
  }
  .phone-chip svg{width:16px; height:16px; stroke:var(--water-dark);}
  /* Le header se degarnit par paliers, du plus accessoire au plus essentiel.
     Entre 821 et 1040px (tablettes), les 5 liens + le telephone + le bouton
     ne tiennent plus sur une ligne : on retire d'abord le telephone, qui est
     deja repete dans le hero et dans le bloc contact. */
  @media (max-width:1040px){
    .nav-links{gap:20px; font-size:14px;}
    .phone-chip{display:none;}
  }
  @media (max-width:900px){
    .nav-links{gap:15px; font-size:13.5px;}
  }
  @media (max-width:820px){
    /* La navigation passe dans un tiroir ouvert par le burger.
       `body.has-burger` n'est posee que par le JS : sans JavaScript, les liens
       restent dans le header (empiles, moins jolis, mais accessibles). */
    body.has-burger .nav-links{display:none;}
    body.has-burger .nav-cta{display:none;}
    .nav{padding-top:12px; padding-bottom:12px; gap:12px;}
    body.has-burger .nav{justify-content:space-between;}
    .nav-links{flex-wrap:wrap; gap:8px 16px;}
    /* Repli sans JavaScript : le burger n'existe pas, les liens restent dans
       le header. On les empile proprement au lieu de les laisser deborder. */
    body:not(.has-burger) .nav{flex-wrap:wrap; justify-content:center; row-gap:14px;}
    body:not(.has-burger) .nav-links{width:100%; justify-content:center;}
    body:not(.has-burger) .nav-cta{width:100%; justify-content:center;}
    .logo{font-size:21px;}
    .logo-mark{width:40px; height:40px;}
  }

  /* ---------- menu burger (sous 820px) ---------- */
  .burger{
    display:none;
    align-items:center; justify-content:center;
    width:46px; height:46px; flex:none;
    background:none; border:1px solid var(--line); border-radius:12px;
    cursor:pointer; color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .burger:hover{border-color:var(--water); background:rgba(30,127,120,0.06);}
  .burger:focus-visible{outline:2px solid var(--water-dark); outline-offset:2px;}
  /* sans ceci, un tap sur iOS vise le <svg> et Safari n'y synthetise aucun clic */
  .burger svg{width:24px; height:24px; stroke:currentColor; fill:none; pointer-events:none;}
  @media (max-width:820px){ body.has-burger .burger{display:inline-flex;} }

  .nav-scrim{
    position:fixed; inset:0; z-index:70;
    background:rgba(22,36,31,0.5);
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
    cursor:pointer;              /* sans curseur, iOS ne declenche pas le clic */
  }
  body.nav-open .nav-scrim{opacity:1; visibility:visible;}

  .nav-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:80;
    width:min(86vw, 340px);
    background:var(--paper);
    border-left:1px solid var(--line);
    box-shadow:-16px 0 40px rgba(22,36,31,0.18);
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
    display:flex; flex-direction:column;
    padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto; overscroll-behavior:contain;
  }
  body.nav-open .nav-drawer{transform:translateX(0);}
  @media (prefers-reduced-motion: reduce){
    .nav-drawer{transition:none;}
    .nav-scrim{transition:none;}
  }

  .nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:22px;
  }
  .nav-drawer-title{
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--water-dark);
  }
  .nav-drawer-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; flex:none;
    background:none; border:none; border-radius:12px;
    cursor:pointer; color:var(--ink-soft);
  }
  .nav-drawer-close:hover{background:rgba(22,36,31,0.06); color:var(--ink);}
  .nav-drawer-close:focus-visible{outline:2px solid var(--water-dark); outline-offset:2px;}
  .nav-drawer-close svg{width:22px; height:22px; stroke:currentColor; fill:none; pointer-events:none;}
  .nav-drawer nav{display:flex; flex-direction:column;}
  .nav-drawer nav a{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:15px 2px; min-height:52px;
    font-size:17px; font-weight:600; text-decoration:none; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .nav-drawer nav a:last-child{border-bottom:none;}
  .nav-drawer nav a::after{
    content:'→'; color:var(--water-dark); font-size:15px; opacity:.55;
  }
  .nav-drawer nav a:hover{color:var(--water-dark);}
  .nav-drawer-foot{
    margin-top:auto; padding-top:24px;
    display:flex; flex-direction:column; gap:10px;
  }
  .nav-drawer-foot .btn{justify-content:center; min-height:50px;}
  .nav-drawer-tel{
    display:flex; align-items:center; justify-content:center; gap:9px;
    min-height:50px;
    font-family:var(--mono); font-size:15px; font-weight:500;
    text-decoration:none; color:var(--ink);
    border:1px solid var(--line); border-radius:999px;
  }
  .nav-drawer-tel svg{width:16px; height:16px; stroke:currentColor; fill:none; pointer-events:none;}
  .nav-drawer-legal{
    display:flex; flex-wrap:wrap; gap:6px 16px;
    margin-top:18px; font-size:13px;
  }
  .nav-drawer-legal a{color:var(--ink-soft); text-decoration:none;
                      display:inline-flex; align-items:center; min-height:40px;}
  .nav-drawer-legal a:hover{color:var(--water-dark); text-decoration:underline;}

  /* le tiroir ouvert bloque le defilement de la page derriere lui */
  body.nav-open{overflow:hidden;}

  /* ---------- hero ---------- */
  .hero{
    padding-top:56px; padding-bottom:40px;   /* idem : le hero porte aussi .wrap */
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:900px){ .hero{grid-template-columns:1fr; padding-top:32px; padding-bottom:28px;} }

  .hero-copy h1{font-size:clamp(40px,6.4vw,68px); text-transform:uppercase;}
  .hero-copy h1 em{
    font-style:normal;
    color:var(--water);
  }
  .hero-copy .eyebrow{margin-bottom:16px;}
  .hero-copy .lede{margin:20px 0 28px; font-size:18px;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px;}
  .hero-badges{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13.5px; color:var(--ink-soft); font-weight:600;}
  .hero-badges li{list-style:none; display:flex; align-items:center; gap:7px;}
  .hero-badges{padding:0; margin:0; display:flex; flex-wrap:wrap;}
  .hero-badges svg{width:15px; height:15px; stroke:var(--water); fill:none;}
  /* sous 560px, deux badges sur une ligne debordent : on empile */
  @media (max-width:560px){ .hero-badges{flex-direction:column; gap:9px;} }

  /* before/after reveal — the signature element */
  .reveal{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
    aspect-ratio:4/3.1;
    border:1px solid var(--line);
  }
  .reveal-layer{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:18px;
  }
  .reveal-label{
    position:relative; z-index:2; align-self:flex-start;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:6px 10px;
    border-radius:999px;
    width:fit-content;
    backdrop-filter:blur(3px);
  }
  .reveal-layer img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    user-select:none; -webkit-user-drag:none;
  }
  .layer-dirty{background:#6f5f45;}
  .layer-dirty .reveal-label{background:rgba(22,36,31,0.55); color:#F5F7F1;}
  .layer-clean{
    background:#e8f4f0;
    clip-path:inset(0 0 0 var(--reveal-pos, 52%));
  }
  .layer-clean .reveal-label{background:rgba(30,127,120,0.9); color:#fff; align-self:flex-end;}
  .reveal-handle-wrap{
    position:absolute; inset:0;
    display:flex; align-items:center;
    pointer-events:none;
  }
  .reveal-line{
    position:absolute; top:0; bottom:0;
    left:var(--reveal-pos, 52%);
    width:3px; background:#fff;
    box-shadow:0 0 0 1px rgba(0,0,0,0.15);
    transform:translateX(-1.5px);
  }
  .reveal-dot{
    position:absolute; top:50%; left:var(--reveal-pos, 52%);
    width:46px; height:46px; border-radius:50%;
    background:#fff; transform:translate(-50%,-50%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
  }
  .reveal-dot svg{width:20px; height:20px; stroke:var(--ink);}
  .reveal-slider{
    position:absolute; inset:0;
    width:100%; height:100%;
    opacity:0; cursor:ew-resize;
    margin:0;
  }
  .reveal-caption{
    text-align:center; font-family:var(--mono); font-size:12px; color:var(--ink-soft);
    margin-top:10px; letter-spacing:0.03em;
  }

  /* ---------- trust bar ---------- */
  .trust{
    background:var(--ink); color:var(--paper);
    padding:22px 0;
  }
  .trust .wrap{
    display:flex; flex-wrap:wrap; gap:24px 40px;
    align-items:center; justify-content:space-between;
  }
  .trust-item{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600;}
  .trust-item svg{width:18px; height:18px; stroke:var(--spark); flex:none;}
  .trust-rating{
    display:flex; align-items:center; gap:8px;
    text-decoration:none;
    padding:6px 14px 6px 6px;
    border-radius:999px;
    background:rgba(245,247,241,0.08);
  }
  .trust-rating:hover{background:rgba(245,247,241,0.16);}
  .stars{color:var(--spark); font-size:15px; letter-spacing:1px;}

  /* ---------- section shell ---------- */
  section{padding:60px 0;}
  main > section + section{border-top:1px solid var(--line);}
  @media (max-width:900px){ section{padding:44px 0;} }
  @media (max-width:560px){ section{padding:34px 0;} }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:44px; flex-wrap:wrap;
  }
  /* Ces regles remplacent des attributs style="" : la politique de securite
     du site (CSP style-src 'self') interdit le style en ligne. */
  .section-head h2, .zone h2{margin-top:14px;}
  .rating-block .eyebrow{color:var(--spark);}
  .rating-number{margin-top:14px;}
  .trust-rating .trust-item{font-weight:700;}
  .btn-block{width:100%; justify-content:center;}

  /* ---------- services ---------- */
  .services-grid{
    display:grid; gap:22px;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  }
  .service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px 26px 28px;
    display:flex; flex-direction:column; gap:16px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
  .service-icon{
    width:52px; height:52px; border-radius:12px;
    background:var(--foam);
    display:flex; align-items:center; justify-content:center;
  }
  .service-icon svg{width:26px; height:26px; stroke:var(--water-dark); fill:none; stroke-width:1.8;}
  .service-card.accent .service-icon{background:var(--spark);}
  .service-card.accent .service-icon svg{stroke:var(--ink);}
  .service-tag{
    font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--grime-dark);
  }
  .service-card ul{margin:4px 0 0; padding-left:18px; font-size:14.5px; color:var(--ink-soft); display:grid; gap:6px;}
  .service-card ul li::marker{color:var(--water);}

  /* ---------- zone ---------- */
  .zone{
    background:var(--foam);
    border-radius:24px;
    padding:48px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
  }
  @media (max-width:820px){ .zone{grid-template-columns:1fr; padding:32px 26px;} }
  .zone-list{display:grid; gap:14px; margin-top:22px;}
  .zone-row{display:flex; gap:12px; align-items:flex-start; font-size:15px;}
  .zone-row svg{width:18px; height:18px; stroke:var(--water-dark); flex:none; margin-top:2px;}
  .zone-row strong{display:block; font-size:15px;}
  .zone-visual{
    position:relative;
    background:var(--ink);
    border-radius:18px;
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .zone-visual svg{width:78%; height:78%;}
  .zone-visual .pin{
    position:absolute; top:52%; left:47%;
    display:flex; flex-direction:column; align-items:center;
    transform:translate(-50%,-100%);
  }
  .pin-dot{width:14px; height:14px; border-radius:50%; background:var(--spark); box-shadow:0 0 0 6px rgba(232,163,61,0.25);}
  .pin-label{
    margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--paper);
    background:rgba(245,247,241,0.1); padding:4px 8px; border-radius:6px; white-space:nowrap;
  }


  /* ---------- carrousel des prestations ---------- */
  /* le defilement est infini : le JS duplique la liste, rien n'est recopie dans le HTML */
  /* le titre et le ruban forment un seul bloc : la section ne referme pas
     son padding avant le ruban, sinon on cumule deux fois l'espacement */
  section#prestations{padding-bottom:26px;}
  section#prestations .section-head{margin-bottom:0;}
  section#prestations{display:flex; flex-direction:column; align-items:flex-start;}
  section#prestations > .section-head{width:100%;}
  .marquee{
    padding:0 0 60px;
    display:grid; gap:14px;
    overflow:hidden;
    --fade:clamp(28px, 7vw, 90px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  }
  .marquee{position:relative;}
  .marquee-row{overflow:hidden;}

  /* un defilement automatique doit toujours pouvoir etre arrete (WCAG 2.2.2) :
     le survol ne suffit pas, il n'existe pas sur mobile */
  .marquee-toggle{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:22px;
    background:var(--paper); border:1px solid var(--line);
    border-radius:999px; padding:7px 14px 7px 11px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink-soft); cursor:pointer;
  }
  .marquee-toggle:hover{border-color:var(--water); color:var(--ink);}
  .marquee-toggle svg{width:14px; height:14px; stroke:currentColor; fill:none; pointer-events:none;}
  .marquee-toggle .ico-play{display:none;}
  .marquee-toggle[aria-pressed="true"] .ico-pause{display:none;}
  .marquee-toggle[aria-pressed="true"] .ico-play{display:block;}
  .marquee.is-paused .marquee-track{animation-play-state:paused !important;}
  @media (max-width:900px){
    .marquee-toggle{margin-top:18px;}
  }
  .marquee-track{
    display:flex; gap:12px;
    list-style:none; margin:0; padding:0;
    width:max-content;
    will-change:transform;
    animation:marquee var(--dur,44s) linear infinite;
  }
  .marquee-row.reverse .marquee-track{animation-direction:reverse;}
  /* le survol met en pause : on peut lire une prestation qui defile */
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track{animation-play-state:paused;}
  @keyframes marquee{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
  }
  .chip{
    display:flex; align-items:center; gap:10px;
    flex:none;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:999px;
    padding:11px 20px 11px 12px;
    font-size:15px; font-weight:600;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(22,36,31,0.04);
  }
  .chip-cat{
    font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:0.08em; text-transform:uppercase;
    padding:4px 9px; border-radius:999px;
    color:#fff;
  }
  .cat-in{background:var(--water-dark);}
  .cat-out{background:var(--spark); color:var(--ink);}
  .cat-tr{background:var(--ink);}
  .cat-auto{background:#7A5C3E;}
  @media (max-width:900px){
    .marquee{padding-bottom:44px; --fade:56px;}
    section#prestations{padding-bottom:20px;}
    .chip{font-size:14px; padding:9px 16px 9px 10px;}
  }
  @media (max-width:560px){ .marquee{padding-bottom:34px;} }
  @media (prefers-reduced-motion: reduce){
    /* pas d'animation : la liste devient un ruban qu'on fait defiler au doigt */
    .marquee-track{animation:none;}
    .marquee-row{overflow-x:auto; scrollbar-width:none;}
    .marquee-row::-webkit-scrollbar{display:none;}
  }

  /* ---------- communes desservies ---------- */
  .zone-visual{
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    aspect-ratio:auto; padding:28px 26px; gap:16px;
  }
  .zone-visual-title{color:var(--spark);}
  .commune-list{
    display:flex; flex-wrap:wrap; gap:8px;
    list-style:none; margin:0; padding:0;
  }
  .commune-list li{
    font-size:13.5px; font-weight:600; color:var(--paper);
    background:rgba(245,247,241,0.09);
    border:1px solid rgba(245,247,241,0.14);
    border-radius:999px; padding:6px 12px;
  }
  .commune-list li.is-home{background:var(--spark); color:var(--ink); border-color:var(--spark);}
  .commune-note{font-size:13.5px; color:rgba(245,247,241,0.7); margin:2px 0 0;}
  .zone-sub{color:var(--ink-soft); font-size:14px;}
  .service-lead{color:var(--ink-soft); font-size:14.5px;}

  /* ---------- reviews ---------- */
  .reviews{
    background:var(--ink); color:var(--paper);
    border-radius:24px; padding:56px 48px;
    display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px; align-items:center;
  }
  @media (max-width:860px){ .reviews{grid-template-columns:1fr; padding:40px 28px;} }
  .rating-block{text-align:left;}
  .rating-number{font-family:var(--display); font-size:88px; font-weight:900; line-height:0.85;}
  .rating-block .stars{font-size:22px; margin-top:4px; display:block;}
  .rating-sub{font-size:13.5px; color:rgba(245,247,241,0.65); margin-top:8px; max-width:26ch;}
  .quote-attr{margin-top:18px; font-family:var(--mono); font-size:13px; color:rgba(245,247,241,0.7);}
  .review-cta{margin-top:26px;}

  /* vertical scrolling testimonial cards */
  .scroller{
    position:relative;
    height:440px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .scroller-track{
    display:flex; flex-direction:column; gap:14px;
    animation:scrollY 60s linear infinite;
  }
  .scroller:hover .scroller-track,
  .scroller:focus-within .scroller-track{
    animation-play-state:paused;
  }
  @keyframes scrollY{
    from{transform:translateY(0);}
    to{transform:translateY(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .scroller-track{animation:none;}
    .scroller{overflow-y:auto; max-height:440px;}
  }
  .review-card{
    background:rgba(245,247,241,0.06);
    border:1px solid rgba(245,247,241,0.14);
    border-radius:12px;
    padding:18px 20px;
    flex:none;
  }
  .review-card-top{
    display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
  }
  .review-name{font-weight:700; font-size:14.5px;}
  .review-stars{color:var(--spark); font-size:14px; letter-spacing:1px;}
  .review-text{font-size:14px; line-height:1.5; color:rgba(245,247,241,0.85); margin:0;}
  .review-tag{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(245,247,241,0.5); margin-top:8px; display:block;
  }

  /* ---------- contact ---------- */
  .contact{
    display:grid; grid-template-columns:1fr 1fr; gap:52px;
  }
  @media (max-width:900px){ .contact{grid-template-columns:1fr;} }
  .contact-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:34px; box-shadow:var(--shadow);
  }
  .field{margin-bottom:18px; display:flex; flex-direction:column; gap:7px;}
  .field label{font-size:13px; font-weight:700; letter-spacing:0.02em;}
  .field input, .field select, .field textarea{
    font-family:var(--body); font-size:15px;
    padding:12px 14px; border-radius:9px; border:1.5px solid var(--line);
    background:var(--paper); color:var(--ink);
  }
  .field textarea{resize:vertical; min-height:90px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:520px){
    .field-row{grid-template-columns:1fr;}
    .contact-card{padding:22px 18px;}
    .slots{padding:14px 14px 12px;}
  }
  .contact-info{display:flex; flex-direction:column; gap:26px;}
  .info-row{display:flex; gap:16px; align-items:flex-start;}
  .info-row .icon{
    width:44px; height:44px; border-radius:11px; background:var(--foam);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .info-row .icon svg{width:20px; height:20px; stroke:var(--water-dark);}
  .info-row strong{display:block; font-size:15px; margin-bottom:2px;}
  .info-row span, .info-row a{font-size:14.5px; color:var(--ink-soft); text-decoration:none;}
  .info-row a:hover{color:var(--water-dark);}
  .siret{font-family:var(--mono); font-size:13px; color:var(--grime-dark);}

  /* ---------- footer ---------- */
  footer{
    background:var(--ink); color:rgba(245,247,241,0.8);
    padding:36px 0; margin-top:10px;
  }
  .foot-row{
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; flex-wrap:wrap; font-size:13px;
  }
  .foot-logo{
    font-family:var(--display); font-weight:800; color:var(--paper);
    font-size:17px; text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .foot-mark{width:38px; height:38px; object-fit:contain; flex:none;}



  /* ---------- pages de texte (legal, merci) ---------- */
  .foot-links{display:flex; gap:18px; flex-wrap:wrap;}
  .foot-links a{color:rgba(245,247,241,0.75); text-decoration:none; font-size:14px;}
  .foot-links a:hover{color:var(--paper); text-decoration:underline;}

  .prose{max-width:760px;}
  .prose h1{font-family:var(--display); font-weight:900; text-transform:uppercase;
            font-size:clamp(34px,5vw,52px); line-height:1.02; margin:14px 0 28px;}
  .prose h2{font-family:var(--display); font-weight:800; text-transform:uppercase;
            font-size:24px; margin:40px 0 14px;}
  .prose p, .prose li{font-size:16px; line-height:1.7; color:var(--ink-soft);}
  .prose p{margin:0 0 16px;}
  .prose ul{margin:0 0 16px; padding-left:22px;}
  .prose li{margin-bottom:8px;}
  .prose a{color:var(--water-dark); padding:7px 1px; margin:-7px 0; display:inline-block;}
  .prose strong{color:var(--ink);}
  .prose-lead{font-size:18px !important; color:var(--ink) !important;}
  .prose-date{font-family:var(--mono); font-size:13px; margin-top:40px;}

  .data-table{width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15px;}
  .data-table th, .data-table td{
    text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  }
  .data-table th{
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--water-dark); font-weight:500;
  }
  .data-table td{color:var(--ink-soft);}
  .data-table td:first-child{color:var(--ink); font-weight:600;}
  /* Un tableau de 3 colonnes ne rentre pas sur un telephone : plutot que de le
     faire deborder ou defiler, chaque ligne devient une petite fiche etiquetee. */
  @media (max-width:600px){
    .data-table, .data-table tbody, .data-table tr, .data-table td{display:block; width:100%;}
    .data-table thead{position:absolute; left:-9999px;}
    .data-table tr{
      border:1px solid var(--line); border-radius:12px;
      padding:12px 14px; margin-bottom:12px;
    }
    .data-table td{border:none; padding:4px 0;}
    .data-table td::before{
      content:attr(data-l);
      display:block;
      font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em;
      text-transform:uppercase; color:var(--water-dark); margin-bottom:2px;
    }
  }

  .todo{
    background:rgba(232,163,61,0.12);
    border:1px solid rgba(232,163,61,0.5);
    border-radius:14px; padding:18px 20px; margin:24px 0;
  }
  .todo strong{display:block; margin-bottom:10px; font-size:15px;}
  .todo p{font-size:15px; margin:0 0 10px;}
  .todo p:last-child{margin-bottom:0;}
  .todo em{font-style:italic;}
  .todo ul{margin:0; padding-left:20px;}
  .todo li{font-size:15px; margin-bottom:6px;}
  .todo-inline em{background:rgba(232,163,61,0.2); font-style:normal; padding:2px 8px; border-radius:6px;}

  .merci{text-align:center; padding:40px 0;}
  .merci-icon{
    width:74px; height:74px; margin:0 auto 24px;
    border-radius:50%; background:rgba(30,127,120,0.12);
    display:flex; align-items:center; justify-content:center;
  }
  .merci-icon svg{width:36px; height:36px; stroke:var(--water-dark); fill:none;}
  .merci-icon.is-error{background:rgba(180,69,58,0.12);}
  .merci-icon.is-error svg{stroke:#B4453A;}
  .merci-tel{margin-bottom:30px;}
  .merci-tel a{font-weight:700; white-space:nowrap;}
  .legal-page .prose{padding-top:8px;}

  /* ---------- formulaire de rappel ---------- */
  .req{color:#B4453A;}
  .opt{color:var(--ink-soft); font-weight:400; font-size:13px;}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  .slots{border:1px solid var(--line); border-radius:14px; padding:18px 18px 14px; margin:0 0 18px;}
  .slots legend{
    font-size:14px; font-weight:600; padding:0 8px; margin-left:-8px;
    max-width:calc(100% - 8px);   /* une legende trop longue debordait du cadre */
  }
  .slot-grid{display:grid; gap:10px; margin-bottom:14px; grid-template-columns:repeat(2,1fr);}
  @media (max-width:430px){ .slot-grid{grid-template-columns:1fr;} }
  .slot{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--line); border-radius:12px;
    padding:12px 14px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .slot:hover{border-color:var(--water);}
  .slot input{width:18px; height:18px; accent-color:var(--water-dark); flex:none; margin:0;}
  .slot span{display:flex; flex-direction:column; font-size:14.5px; font-weight:600; line-height:1.3;}
  .slot small{font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink-soft);}
  .slot:has(input:checked){border-color:var(--water-dark); background:rgba(30,127,120,0.07);}
  .slot:has(input:focus-visible){outline:2px solid var(--water-dark); outline-offset:2px;}
  .jours{margin-bottom:0;}

  .consent{
    display:flex; gap:12px; align-items:flex-start;
    font-size:14px; line-height:1.5; color:var(--ink-soft);
    margin:4px 0 18px; cursor:pointer;
  }
  .consent input{width:18px; height:18px; accent-color:var(--water-dark); flex:none; margin-top:1px;}
  .consent a{color:var(--water-dark);}

  .form-error{
    background:rgba(180,69,58,0.1);
    border:1px solid rgba(180,69,58,0.35);
    color:#8E3229;
    border-radius:12px; padding:12px 14px; margin:0 0 16px;
    font-size:14.5px; font-weight:600;
  }
  .form-note{
    text-align:center; font-size:14px; color:var(--ink-soft); margin:16px 0 0;
  }
  .form-note a{color:var(--water-dark); font-weight:700;}



  .sticky-call{
    display:none;
  }
  /* le fond de la barre collante est sombre : le bouton secondaire doit
     s'eclaircir pour rester lisible */
  .sticky-call .btn-outline{border-color:rgba(245,247,241,0.5); color:#F5F7F1;}
  @media (max-width:820px){
    .sticky-call{
      display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
      background:var(--ink); gap:10px;
      padding:12px var(--gut);
      padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
      box-shadow:0 -8px 20px rgba(0,0,0,0.25);
    }
    .sticky-call .btn{flex:1; justify-content:center; min-height:46px;}
    .sticky-call .btn:last-child{flex:1.25;}   /* l'action principale reste la plus large */
    /* la barre mesure ~70px + l'encoche : on reserve toujours plus, sinon elle
       recouvre la derniere ligne du pied de page */
    body{padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px));}
  }
  @media (max-width:380px){
    /* deux boutons cote a cote ne tiennent plus : on serre */
    .sticky-call .btn{font-size:14px; padding-left:12px; padding-right:12px;}
  }
  /* Telephone en paysage : 79px de barre sur 375px de haut mangeaient un cinquieme
     de l'ecran. On la compacte, et le hero cesse de reserver la pleine hauteur. */
  @media (max-height:460px) and (orientation:landscape){
    .sticky-call{padding-top:7px; padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px));}
    .sticky-call .btn{min-height:38px; padding-top:8px; padding-bottom:8px; font-size:14px;}
    body{padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px));}
    .hero{padding-top:22px; padding-bottom:22px;}
    section{padding-top:36px; padding-bottom:36px;}
  }