/* Welix Hydrashield · design "redesign-1a" (converti depuis le gabarit de l'outil design) */

/* ---------- Base ---------- */
body{margin:0;background:#F4F6F3;color:#16302C;font-family:'Source Sans 3',sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:#16302C;text-decoration:none}
a:hover{color:#D6461C}
html{scroll-behavior:smooth}
summary::-webkit-details-marker{display:none}
summary{list-style:none;cursor:pointer}
.leaflet-container{font:inherit}

/* ---------- Utilitaires responsive du design (préfixe hb-) ---------- */
@media (max-width:900px){
  .hb-desk{display:none!important}
  .hb-grid2{grid-template-columns:1fr!important}
  .hb-grid3{grid-template-columns:1fr!important}
  .hb-pad{padding-left:20px!important;padding-right:20px!important}
  .hb-h1{font-size:54px!important}
  .hb-h2{font-size:44px!important}
  .hb-h2b{font-size:52px!important}
  .hb-lede{font-size:18px!important}
  .hb-figs{font-size:26px!important}
  .hb-panelimg{aspect-ratio:3/2!important}
  .hb-stack{display:grid!important;gap:10px!important}
  .hb-stack>*{text-align:center}
  .hb-sticky{position:static!important}
  .hb-noborder{border-right:none!important}
  .hb-tight{padding-top:56px!important;padding-bottom:56px!important}
  .hb-grid2>*,.hb-grid3>*{min-width:0}
}
@media (min-width:901px){.hb-mob{display:none!important}}

/* ---------- Garde-fous anti-débordement horizontal ---------- */
img,svg{max-width:100%}
table{max-width:100%}

/* ---------- Accessibilité ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid #2E7FB5;outline-offset:3px}

/* ---------- Menu mobile (checkbox + label, sans JS), en overlay sous la nav ---------- */
.hbmobmenu{display:none;position:absolute;left:0;right:0;box-shadow:0 16px 32px -12px rgba(22,48,44,.28)}
#navtoggle:checked ~ .hbmobmenu{display:grid}

/* ---------- Recherche de revendeurs (cartes générées par js/site.js) ---------- */
.dmap.off{display:grid;place-items:center;color:#3E5350;text-align:center;padding:20px}
.dlist{scrollbar-gutter:stable}
.dlist .card{background:#fff;border-radius:18px;padding:20px 22px;display:grid;gap:8px}
.dlist .card.ex{border:1.5px dashed rgba(22,48,44,.3)}
.dlist .card address{font-style:normal;display:grid;gap:8px}
.dlist .card address>b{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;display:block}
.dlist .card i.ex{font-style:normal;font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#7A8A86;margin-left:6px}
.dlist .card address>span{color:#3E5350;font-size:16px}
.dlist .card .svc{display:flex;flex-wrap:wrap;gap:6px}
.dlist .card .svc em{font-style:normal;font-size:13px;padding:4px 10px;border-radius:999px;background:#EEE6D3}
.dlist .card .cardfoot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dlist .card .dist{font-family:'Instrument Serif',serif;font-size:22px;color:#D6461C;white-space:nowrap}
.dlist .card a.go{font-family:'Archivo',sans-serif;font-weight:700;color:#2E7FB5;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- plan de situation animé (conservé de la version précédente) ---------- */
@media (prefers-reduced-motion:no-preference){
  .plan #wind path{stroke-dasharray:6 6;animation:flow 1.6s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-24}}
  .ambient #glow1{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.75}}
  .ambient #smoke{animation:drift 7s ease-in-out infinite}
  @keyframes drift{50%{transform:translateX(26px);opacity:.4}}
  .ambient #wet,.ambient #wetring{transform-origin:520px 278px;animation:breathe 3.2s ease-in-out infinite}
  @keyframes breathe{50%{transform:scale(1.03)}}
}

/* ---------- titre en eau (conservé de la version précédente ; utilisé si le gabarit fournit #emB / #rain) ---------- */
@media (prefers-reduced-motion:no-preference){
  #emB.armed{
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M0 0 H200 V78 C170 88,150 68,120 78 C90 88,70 68,40 78 C25 83,12 88,0 78 Z' fill='black'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><path d='M0 0 H200 V78 C170 88,150 68,120 78 C90 88,70 68,40 78 C25 83,12 88,0 78 Z' fill='black'/></svg>");
    -webkit-mask-size:100% 130%;mask-size:100% 130%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 433%;mask-position:0 433%;
  }
  #emB.play{animation:fillwater 1.6s cubic-bezier(.3,.7,.3,1) forwards}
  @keyframes fillwater{from{-webkit-mask-position:0 433%;mask-position:0 433%}to{-webkit-mask-position:0 0%;mask-position:0 0%}}
  .rain{position:absolute;inset:-60px 0 0 0;pointer-events:none}
  .rain i{position:absolute;top:0;width:5px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#8CC4E6,#2E7FB5);opacity:0}
  .play ~ .rain i{animation:raindrop .9s cubic-bezier(.5,0,.9,.6) forwards}
  @keyframes raindrop{0%{opacity:0;transform:translateY(0) scaleY(1)}15%{opacity:1}85%{opacity:1;transform:translateY(var(--h)) scaleY(1.3)}100%{opacity:0;transform:translateY(var(--h)) scaleY(.4) scaleX(2.4)}}
  .rain b{position:absolute;bottom:-6px;width:4px;height:4px;border-radius:50%;background:#8CC4E6;opacity:0}
  .play ~ .rain b{animation:splash .6s ease-out forwards}
  @keyframes splash{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),18px) scale(.3)}}
}