/* ---------- palette ----------
     Les trois couleurs viennent du logo : le bleu ocean du costume et du
     mot Aquaclean, le jaune de la cape, le roux du pelage du panda roux.
     Le bleu porte l'identite, le jaune sert d'accent (il attire l'oeil, donc
     on le reserve aux points chauds), le roux sert de contrepoint chaud sur
     les elements secondaires. Les noms de variables sont restes ceux de la
     premiere version pour ne pas avoir a reecrire les 850 lignes qui suivent :
     --water = le bleu, --spark = le jaune, --rust = le roux. */
  :root{
    --ink:#0E2742;          /* bleu nuit : le texte, tire du bleu du logo */
    --ink-soft:#40587A;
    --paper:#F4F7FB;
    --paper-dim:#E6EEF7;
    --rust:#C4551F;         /* roux du pelage */
    --rust-dark:#8E3B12;
    --water:#1F5AA8;        /* bleu ocean du costume et du mot Aquaclean */
    --water-dark:#123F7A;
    --foam:#D8EDF9;         /* le bleu tres clair de l'eau projetee */
    --spark:#F2D040;        /* jaune de la cape */
    --spark-dark:#B8930A;
    --line:rgba(14,39,66,0.14);
    --radius:14px;
    --shadow:0 18px 40px -22px rgba(14,39,66,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:2px; border-radius:4px;
    /* le jaune seul ne fait que 1,7:1 sur le fond papier : le liseré bleu
       comble le décalage et rend l'anneau visible sur les deux ambiances */
    box-shadow:0 0 0 2px var(--water-dark);
  }

  /* 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(244,247,251,0.55); color:var(--paper);}
  .btn-ghost-light:hover{background:rgba(244,247,251,0.12);}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(244,247,251,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    gap:28px;                                /* sinon le logo touche le premier lien */
    padding-top:16px; padding-bottom:16px;   /* surtout pas `padding:` : ecraserait .wrap */
  }
  .logo{
    font-family:var(--display);
    font-weight:900;
    font-size:24px;
    flex:none;                 /* jamais comprime : son contenu est en nowrap,
                                  il deborderait sur le premier lien du menu */
    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);}
  /* Le nom de l'entreprise s'ecrit ATTACHE : "Aquaclean". Le conteneur est en
     flex avec un gap, donc "Aqua" et "clean" doivent former UN SEUL element,
     sinon le gap s'intercale et le nom s'affiche coupe en deux a l'ecran. */
  .logo-text{display:flex; align-items:baseline; gap:6px;}
  .logo-word{white-space:nowrap;}
  .logo-word-alt{color:var(--water);}
  .nav-links{display:flex; gap:24px; font-weight:600; font-size:14.5px;}
  .nav-links a{white-space:nowrap;}
  .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.
     Les largeurs ci-dessous ont ete mesurees, pas devinees : logo 190px,
     les six liens 523px, le bouton seul 147px, avec le telephone 303px.
     La barre dispose de 1096px utiles (max-width 1160 moins les marges). */

  /* 1025 -> 1180px : les six liens tiennent encore, mais plus avec le
     telephone. C'est lui qui saute en premier : il est deja repete dans le
     hero, dans la barre collante du bas et dans le bloc contact. */
  @media (max-width:1180px){
    .nav{gap:24px;}
    .nav-links{gap:20px; font-size:14px;}
    .phone-chip{display:none;}
  }

  /* Sous 1025px : les liens passent dans le tiroir du burger. La place ainsi
     liberee permet de REMETTRE le telephone dans la barre — sur tablette il
     est plus utile que la liste des sections. */
  @media (max-width:1024px){
    /* `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 .phone-chip{display:flex;}
    body.has-burger .nav{justify-content:space-between;}

    /* Repli sans JavaScript : on empile proprement au lieu de 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; flex-wrap:wrap; gap:8px 16px;}
    body:not(.has-burger) .nav-cta{width:100%; justify-content:center;}
  }

  /* Sous 821px : telephone et bouton descendent dans la barre collante. */
  @media (max-width:820px){
    .nav{padding-top:12px; padding-bottom:12px; gap:12px;}
    body.has-burger .nav-cta{display:none;}
    .logo{font-size:21px;}
    .logo-mark{width:40px; height:40px;}
  }

  /* ---------- menu burger (sous 1025px) ---------- */
  .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(31,90,168,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:1024px){ body.has-burger .burger{display:inline-flex;} }

  .nav-scrim{
    position:fixed; inset:0; z-index:70;
    background:rgba(14,39,66,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(14,39,66,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(14,39,66,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:var(--rust-dark);}
  .layer-dirty .reveal-label{background:rgba(14,39,66,0.55); color:var(--paper);}
  .layer-clean{
    background:var(--foam);
    clip-path:inset(0 0 0 var(--reveal-pos, 52%));
  }
  .layer-clean .reveal-label{background:rgba(31,90,168,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(244,247,251,0.08);
  }
  .trust-rating:hover{background:rgba(244,247,251,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(--rust-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 ---------- */
  /* ---------- galerie de chantiers ----------
     Les photos de chantier sont prises au telephone, donc en portrait : le
     comparateur du hero (paysage) ne convient pas, d'ou le modificateur. */
  .chantiers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:32px;
  }
  .chantier{margin:0;}
  .reveal-portrait{aspect-ratio:3/4;}
  .chantier figcaption{
    margin-top:14px;
    font-size:14.5px; color:var(--ink-soft); line-height:1.45;
  }
  @media (max-width:560px){
    .chantiers-grid{gap:26px;}
  }

  .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(242,208,64,0.25);}
  .pin-label{
    margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--paper);
    background:rgba(244,247,251,0.1); padding:4px 8px; border-radius:6px; white-space:nowrap;
  }


  /* ---------- camion laveur de conteneurs ----------
     Pleine largeur et fond bleu : la section doit trancher avec les cartes
     claires qui l'entourent, parce que c'est l'argument commercial le plus
     fort du site. Le prix est le seul element jaune, donc le premier lu. */
  section#conteneurs{
    background:var(--water-dark);
    color:var(--paper);
    padding:0;
    margin:26px 0;
  }
  .bins{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:48px;
    align-items:center;
    padding-top:64px;
    padding-bottom:64px;
  }
  .bins h2{color:var(--paper); margin:0 0 18px;}
  .bins h2 em{color:var(--spark); font-style:normal;}
  .eyebrow-light{color:var(--spark);}
  .bins-lead{
    font-size:17px; line-height:1.6;
    color:rgba(244,247,251,0.86);
    max-width:52ch;
    margin:0 0 26px;
  }

  /* le prix : etiquette jaune, seul point chaud de la section */
  .price-tag{
    display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    background:var(--spark); color:var(--ink);
    border-radius:14px;
    padding:12px 20px;
    margin-bottom:28px;
  }
  .price-from{font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;}
  .price-amount{font-family:var(--display); font-size:38px; font-weight:900; line-height:1;}
  .price-unit{font-size:15px; font-weight:600;}

  .bins-points{
    list-style:none; margin:0 0 30px; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:18px 26px;
  }
  .bins-points li{display:flex; gap:11px; align-items:flex-start;}
  .bins-points svg{width:18px; height:18px; flex:none; margin-top:3px; stroke:var(--spark);}
  .bins-points strong{display:block; font-size:15px;}
  .bins-points span{font-size:14px; color:rgba(244,247,251,0.75); line-height:1.45;}

  .bins-actions{display:flex; gap:12px; flex-wrap:wrap;}

  /* Les deux photos du camion : le lavage en action a gauche, le caisson
     inox a droite. Elles restent cote a cote meme sur telephone — ce sont
     des portraits, deux colonnes tiennent largement dans 390px. */
  .bins-visual{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .bins-visual figure{margin:0;}
  .bins-visual img{
    /* `height:auto` est indispensable : l'attribut height="1120" du HTML est
       une indication de presentation qui l'emporte sur `aspect-ratio`, et la
       photo s'affichait donc a 1120px de haut. */
    width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
    border-radius:16px;
    border:1px solid rgba(244,247,251,0.18);
  }
  .bins-visual figcaption{
    margin-top:8px;
    font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
    color:rgba(244,247,251,0.72); line-height:1.35;
  }

  @media (max-width:940px){
    .bins{grid-template-columns:1fr; gap:34px; padding-top:48px; padding-bottom:48px;}
  }
  @media (max-width:560px){
    .bins-points{grid-template-columns:1fr; gap:16px;}
    .price-amount{font-size:32px;}
    .bins-actions .btn{flex:1 1 100%; justify-content:center;}
  }


  /* ---------- 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(14,39,66,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-bin{background:var(--rust-dark);}
  @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(244,247,251,0.09);
    border:1px solid rgba(244,247,251,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(244,247,251,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(244,247,251,0.65); margin-top:8px; max-width:26ch;}
  .quote-attr{margin-top:18px; font-family:var(--mono); font-size:13px; color:rgba(244,247,251,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(244,247,251,0.06);
    border:1px solid rgba(244,247,251,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(244,247,251,0.85); margin:0;}
  .review-tag{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(244,247,251,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(--rust-dark);}

  /* ---------- footer ---------- */
  footer{
    background:var(--ink); color:rgba(244,247,251,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(244,247,251,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(242,208,64,0.12);
    border:1px solid rgba(242,208,64,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(242,208,64,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(31,90,168,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(31,90,168,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(244,247,251,0.5); color:var(--paper);}
  @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;}
  }