/* =========================================================
   Caniffi Plomberie — feuille de style
   Palette : encre / pierre / eau / ciel / laiton
   ========================================================= */

:root{
  --ink:        #101A26;
  --ink-soft:   #1B2836;
  --paper:      #EAE7DC;
  --paper-alt:  #DFDBCC;
  --white:      #FBFAF6;
  --water:      #175E96;
  --water-deep: #0E3F66;
  --sky:        #4FA0D8;
  --brass:      #B9853E;
  --brass-dark: #93672E;
  --slate:      #57626C;
  --line:       rgba(16,26,38,0.14);
  --line-light: rgba(251,250,246,0.18);

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --container: 1180px;
}

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

/* Filet laiton en tête de page — signature de marque */
.brand-rule{
  height: 3px;
  background: linear-gradient(90deg, var(--water-deep) 0%, var(--brass) 50%, var(--water-deep) 100%);
}

/* Motif de fond "plan technique" — grille fine + croix de repère, très discret */
.bg-grid{
  background-image:
    linear-gradient(rgba(16,26,38,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,26,38,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.section--ink.bg-grid{
  background-image:
    linear-gradient(rgba(251,250,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,250,246,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

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

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.96;
  margin: 0 0 0.4em;
  letter-spacing: 0.002em;
  color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; }
h2{ font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 700; }

p{ margin: 0 0 1em; max-width: 62ch; }
a{ color: var(--water-deep); text-decoration: none; }
a:hover{ color: var(--brass-dark); }
img{ max-width:100%; display:block; }

.mono{ font-family: var(--font-mono); }

:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--paper-alt); }
.section--ink{ background: var(--ink); color: var(--white); }
.section--ink p{ color: rgba(251,250,246,0.78); }
.section--ink h2, .section--ink h3{ color: var(--white); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--water-deep);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.section--ink .eyebrow{ color: var(--sky); }
.eyebrow::before{
  content:"";
  width: 28px; height: 2px;
  background: var(--brass);
  display:inline-block;
}

.rule{
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}
.section--ink .rule{ border-top-color: var(--line-light); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  line-height: 1;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn:active{ transform: translateY(0); box-shadow: 0 1px 3px rgba(16,26,38,0.2); }

.btn--brass{
  background: var(--brass);
  color: var(--ink);
  box-shadow: 0 2px 8px -2px rgba(147,103,46,0.55);
}
.btn--brass:hover{ background: var(--brass-dark); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(147,103,46,0.6); }

.btn--outline{
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn--outline:hover{ background: rgba(0,0,0,0.06); color: inherit; transform: translateY(-1px); }
.section--ink .btn--outline:hover{ background: rgba(255,255,255,0.09); }

.btn--ghost-ink{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost-ink:hover{ background: var(--ink); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(16,26,38,0.4); }

.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Header ---------- */
.topbar{
  background: var(--water-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar a{ color: var(--white); font-weight:600; }
.topbar a:hover{ color: var(--sky); }
.topbar__dot{ color: var(--sky); }

.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16,26,38,0.05);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 8px 20px -10px rgba(16,26,38,0.35);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  gap: 20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 52px; width:auto; }
.brand__text{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; line-height:0.95; }
.brand__text span{ display:block; font-family: var(--font-mono); font-weight:400; font-size:0.62rem; letter-spacing:0.08em; color: var(--slate); }

.nav{ display:flex; align-items:center; gap: 28px; }
.nav a{ color: var(--ink); font-weight:600; font-size:0.95rem; position:relative; }
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px; background: var(--brass);
  transition: width .2s ease;
}
.nav a:hover{ color: var(--water-deep); }
.nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:12px; }
.call-btn{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--ink); color: var(--white);
  padding: 11px 18px; border-radius:4px; font-weight:700;
  font-family: var(--font-body); font-size:0.95rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px -3px rgba(16,26,38,0.5);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.call-btn:hover{ background: var(--water-deep); color:var(--white); transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(16,26,38,0.5); }
.call-btn svg{ width:16px; height:16px; }

.nav-toggle{ display:none; background:none; border:1px solid var(--ink); border-radius:3px; padding:9px 10px; cursor:pointer; }
.nav-toggle svg{ width:20px; height:20px; display:block; }

@media (max-width: 880px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 0 24px;
    max-height:0; overflow:hidden;
    transition: max-height .28s ease, padding .28s ease;
  }
  .nav.is-open{ max-height:260px; padding: 6px 24px 18px; }
  .nav a{ padding: 10px 0; width:100%; border-top:1px solid var(--line); }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .header-cta .call-btn span.call-btn__label{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  padding: 68px 0 84px;
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
}
.hero h1{ margin-bottom:0.3em; }
.hero h1.sentence{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: 0;
}
.hero h1 em{
  font-style:normal;
  color: var(--water-deep);
}
.hero__lede{ font-size:1.15rem; color: var(--ink-soft); max-width: 46ch; }

.readouts{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 34px 0 30px;
}
.readout{
  padding: 20px 22px;
  border-left: 1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: 6px;
}
.readout:first-child{ border-left:none; padding-left:0; }
.readout__num{
  font-family: var(--font-mono);
  font-weight:600;
  font-size: 1.7rem;
  color: var(--water-deep);
  line-height: 1;
}
.readout__label{
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--slate);
}

.radar{ position:relative; width:100%; max-width: 480px; margin:0 auto; }
.radar svg{ width:100%; height:auto; display:block; }
.radar-sweep{
  transform-origin: 250px 250px;
  animation: sweep 6s linear infinite;
}
@keyframes sweep{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .radar-sweep{ animation: none; } }

/* ---------- Services (work-order list) ---------- */
.svc-list{ border-top:1px solid var(--line); margin-top: 30px; }
.svc-row{
  display:grid;
  grid-template-columns: 64px 40px 1fr;
  gap: 20px;
  align-items:start;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease, padding-left .15s ease;
}
.svc-row:hover{ background: rgba(23,94,150,0.05); padding-left:14px; }
.svc-row__num{
  font-family: var(--font-mono);
  color: var(--brass-dark);
  font-size: 0.95rem;
  padding-top: 4px;
}
.svc-row__icon svg{ width:34px; height:34px; color: var(--water-deep); transition: transform .2s ease; }
.svc-row:hover .svc-row__icon svg{ transform: scale(1.1); }
.svc-row h3{ margin-bottom:0.2em; }
.svc-row p{ color: var(--ink-soft); margin-bottom:0; }
.svc-row--compact{ grid-template-columns: 40px 1fr; padding:18px 4px; }
.svc-row--compact .svc-row__icon svg{ width:26px; height:26px; }
.svc-row--compact h3{ font-size:1.05rem; }
.svc-row--compact p{ font-size:0.92rem; }

/* ---------- Zone d'intervention ---------- */
.zone-block{ margin-bottom: 40px; }
.zone-block__head{
  display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
  flex-wrap:wrap;
}
.zone-block__head h3{ margin-bottom:0; }
.zone-block__range{ font-family: var(--font-mono); color:var(--slate); font-size:0.9rem; }

.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 4px;
  font-weight:600;
  font-size: 0.94rem;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16,26,38,0.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{
  border-color: var(--water-deep);
  color: var(--water-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(16,26,38,0.3);
}
.chip__km{ font-family: var(--font-mono); font-weight:400; color: var(--slate); font-size:0.82rem; }
.chip:hover .chip__km{ color: var(--water-deep); }

/* ---------- Engagements (charte) ---------- */
.charter{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line-light);
  position:relative;
}
.charter__item{
  padding: 28px;
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  transition: background-color .15s ease;
}
.charter__item:hover{ background: rgba(251,250,246,0.04); }
.charter__item:nth-child(2n){ border-right:none; }
.charter__icon{ color: var(--brass); margin-bottom:12px; display:block; }
.charter__icon svg{ width:26px; height:26px; }
.charter__item h3{ font-size:1.1rem; margin-bottom:0.35em; }
.charter__item p{ margin-bottom:0; font-size:0.95rem; color: rgba(251,250,246,0.78); }

/* Filigrane décoratif (clé à molette) dans les sections sombres */
.watermark{
  position:absolute;
  opacity:0.05;
  pointer-events:none;
  z-index:0;
}
.section--ink{ position:relative; overflow:hidden; }
.section--ink .container{ position:relative; z-index:1; }

@media (max-width: 640px){
  .charter{ grid-template-columns: 1fr; }
  .charter__item{ border-right:none; }
}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items:center;
}
.about-figure{
  background: var(--ink);
  padding: 34px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.about-figure::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(251,250,246,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(251,250,246,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none;
}
.about-figure > *{ position:relative; z-index:1; }
.about-figure img{ height:60px; width:auto; margin-bottom: 20px; }
.about-figure__stat{ font-family: var(--font-mono); font-size:2.6rem; color: var(--sky); line-height:1; }
.about-figure__label{ font-size:0.85rem; color: rgba(251,250,246,0.7); margin-top:6px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: var(--ink);
  color: var(--white);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(251,250,246,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(251,250,246,0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cta-banner .container{
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.cta-banner h2{ color:var(--white); margin-bottom:0.2em; }
.cta-banner p{ color: rgba(251,250,246,0.75); margin-bottom:0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(251,250,246,0.82); padding-top: 64px; }
.site-footer a{ color: rgba(251,250,246,0.82); }
.site-footer a:hover{ color: var(--sky); }
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
}
.footer-grid h4{
  font-family: var(--font-mono); font-weight:600; font-size:0.85rem;
  color: var(--sky); text-transform:none; margin-bottom:16px;
  letter-spacing:0.02em;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom: 8px; font-size:0.92rem; }
.footer-brand img{ height:46px; margin-bottom:16px; }
.footer-brand p{ font-size:0.9rem; color: rgba(251,250,246,0.65); }
.footer-bottom{
  border-top: 1px solid var(--line-light);
  padding: 20px 0 30px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.82rem; color: rgba(251,250,246,0.55);
}

@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero .container{ grid-template-columns: 1fr; }
  .radar{ max-width: 320px; }
  .about-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .readouts{ grid-template-columns: repeat(2, 1fr); }
  .readout:nth-child(2){ border-left:1px solid var(--line); }
  .readout:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
  .readout:nth-child(n+3){ padding-top:18px; }
  .svc-row{ grid-template-columns: 40px 1fr; }
  .svc-row__num{ display:none; }
}

/* ---------- Breadcrumb (village pages) ---------- */
.breadcrumb{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--slate);
  padding: 18px 0;
  display:flex; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color: var(--slate); }
.breadcrumb a:hover{ color: var(--water-deep); }

/* ---------- Village hero (shorter) ---------- */
.village-hero{ padding: 40px 0 60px; }
.village-hero .quickfacts{
  display:flex; gap:0; margin-top:28px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.quickfact{ padding: 14px 26px 0 0; border-right:1px solid var(--line); margin-right:26px; }
.quickfact:last-child{ border-right:none; }
.quickfact__val{ font-family:var(--font-mono); font-weight:600; font-size:1.3rem; color:var(--water-deep); display:block; }
.quickfact__label{ font-size:0.8rem; color:var(--slate); display:block; margin-top:2px; }

.neighbor-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* ---------- Misc ---------- */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; }
@media (max-width: 780px){ .two-col{ grid-template-columns:1fr; } }

.map-embed{ border:1px solid var(--line); filter: grayscale(0.15); width:100%; height:340px; }

.legal p, .legal li{ color: var(--ink-soft); }
.legal h2{ margin-top:1.4em; }