/* ==========================================================================
   NM Plomberie — feuille de style unique du site
   Charte : navy #16233F, bleu de marque #2A8FCE, bleu profond #0F3F5F
   Polices : Archivo (texte et titres) et JetBrains Mono (libellés, chiffres),
   servies depuis assets/fonts/ — aucune ressource tierce n'est chargée.

   ATTENTION — toute modification de ce fichier oblige à incrémenter le ?v=N
   dans les 11 pages ET dans contact.php. Il est servi avec un an de cache :
   sans cela, un visiteur déjà venu garde l'ancienne version. Version : v=8.
   ========================================================================== */

/* ---------- Polices locales servies depuis assets/fonts/ -------- */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ----------------------------------------------------- */
:root {
  --navy: #16233F;
  --navy-2: #1B2B4A;
  --navy-3: #22355A;
  --navy-deep: #0F3F5F;
  --navy-ink: #0B1B2E;
  --line: #2C4068;
  --line-2: #34496F;
  --line-3: #55688A;
  --accent: #2A8FCE;
  --accent-hover: #67B6E6;
  --accent-ink: #67B6E6;
  --accent-ink-strong: #7FC1EA;
  --chip: #1E3A5C;

  --ink: #FFFFFF;
  --ink-2: #E4EBF3;
  --body: #B6C4D8;
  --muted: #A9B9CE;
  --muted-2: #9FB0C6;

  /* code couleur des fluides (repérage bâtiment / NF P 98-332) */
  --f-froide: #2A8FCE;
  --f-froide-ink: #7FC1EA;
  --f-froide-bg: #12304A;
  --f-chaude: #C42B31;
  --f-chaude-ink: #EE8E92;
  --f-chaude-bg: #3A1E27;
  --f-gaz: #E3A400;
  --f-gaz-ink: #E3C05A;
  --f-gaz-bg: #332B14;
  --f-usees: #8A5A33;
  --f-usees-ink: #C89A74;
  --f-usees-bg: #33261B;
  --f-incendie: #1F8347;
  --f-incendie-ink: #6FC28E;
  --f-incendie-bg: #15301F;
  --f-chauffage: #7745B0;
  --f-chauffage-ink: #B79BE0;
  --f-chauffage-bg: #261B3A;

  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-x: clamp(16px, 4vw, 56px);
  --sec-y: clamp(56px, 8vw, 112px);
  --wrap: 1440px;
}

/* ---------- Reset / base -------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

[hidden] { display: none !important; }

a {
  color: var(--accent-ink);
  text-decoration: none;
}
a:hover { color: #A8D7F2; }

button,
input,
select,
textarea { font-family: inherit; }

::selection { background: var(--accent); color: var(--navy-ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  /* 44 px de haut : c'est une cible comme une autre, atteinte au clavier
     comme au doigt. La hauteur tient a la regle de base, pas au :focus —
     le lien existe (hors ecran) avant d'avoir le focus. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--accent);
  color: var(--navy-ink);
  padding: 12px 18px;
  font: 600 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--navy-ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Typographie --------------------------------------------------- */
h1, h2, h3 { margin: 0; letter-spacing: -.03em; text-wrap: balance; }

.h1 { font: 800 clamp(40px, 6.4vw, 92px)/0.94 var(--sans); letter-spacing: -.035em; }
.h1-sm { font: 800 clamp(36px, 5.6vw, 78px)/1 var(--sans); letter-spacing: -.035em; }
.h2 { font: 700 clamp(30px, 4vw, 56px)/1.05 var(--sans); }
.h2-sm { font: 700 clamp(26px, 3.2vw, 44px)/1.08 var(--sans); }
.h3 { font: 600 clamp(19px, 1.7vw, 23px)/1.2 var(--sans); letter-spacing: -.015em; }

.eyebrow {
  font: 500 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow--onphoto { color: var(--accent-ink-strong); }

.lead {
  font: 400 clamp(16px, 1.4vw, 19px)/1.6 var(--sans);
  color: var(--body);
  text-wrap: pretty;
  max-width: 52ch;
}
.p { font: 400 16px/1.65 var(--sans); color: var(--body); text-wrap: pretty; }
.p--sm { font: 400 14px/1.6 var(--sans); color: var(--body); text-wrap: pretty; }
.meta {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Structure ----------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap--narrow { max-width: 1000px; margin: 0 auto; }
.wrap--text { max-width: 820px; margin: 0 auto; }

.sec {
  padding: var(--sec-y) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.sec--alt { background: var(--navy-2); }
.sec--flush { border-bottom: 0; }
.sec--tight { padding-block: clamp(40px, 5vw, 72px); }

/* bandeau de titre de page (option bicolore) */
.pagehead {
  padding: clamp(48px, 7vw, 104px) var(--pad-x) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.pagehead--photo {
  background-image:
    linear-gradient(100deg, rgba(9, 23, 40, .86) 0%, rgba(9, 23, 40, .80) 55%, rgba(9, 23, 40, .80) 100%),
    url('../assets/img/outillage.jpg');
  background-size: cover;
  background-position: center;
}
.pagehead__inner { position: relative; max-width: var(--wrap); margin: 0 auto; }
.pagehead .eyebrow { margin-bottom: 20px; display: block; }
.pagehead .p { margin: 26px 0 0; max-width: 56ch; }

.watermark {
  position: absolute;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.watermark--right {
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(52%, 680px);
}
.watermark--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(120%, 1500px);
  opacity: .06;
}
.watermark--footer { right: -6%; bottom: -14%; width: min(70%, 900px); opacity: .06; }
/* Dans un bandeau de titre, le filigrane passe a 8 % : le fond y est le marine
   profond uni, plus clair que celui du pied de page, donc le logo s'y noie a
   6 ou 7 %. Reste sous le texte grace au `position: relative` de
   .pagehead__inner, et hors de portee du pointeur grace a .watermark. */
.pagehead .watermark { opacity: .08; }

/* ---------- En-tête ------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--pad-x);
  background: rgba(15, 25, 45, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.header__logo img { height: 42px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 9px 12px;
  white-space: nowrap;
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent-ink); }

.header__cta { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
/* Le numero ne doit jamais se couper : « 06 16 71 82 / 44 » sur deux lignes
   casse la lecture du seul element qui compte sur ce site. */
.header__cta .btn { white-space: nowrap; }
/* Le bouton de devis en fin de nav ne sert qu'au volet mobile ; au-dessus du
   point de rupture il doublonnait celui de .header__cta. */
.nav > .btn { display: none; }

.burger {
  display: none;
  align-items: center;
  gap: 10px;
  /* 44 px est le minimum d'une cible tactile. La charte importée s'arrêtait
     à 35 px, sur le contrôle le plus utilisé du site en mobile. */
  min-height: 44px;
  background: none;
  border: 1px solid var(--line-3);
  color: var(--ink);
  padding: 11px 14px;
  cursor: pointer;
  font: 600 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.burger__bars { display: block; width: 16px; height: 10px; position: relative; }
.burger__bars::before,
.burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.burger__bars::before { top: 0; }
.burger__bars::after { bottom: 0; }

/* ---------- Boutons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  font: 600 13px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 48px;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--navy-ink); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--navy-ink); }
.btn--ghost { background: none; border-color: var(--line-3); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--line { background: none; border-color: var(--accent); color: var(--accent-ink); }
.btn--line:hover { background: var(--accent); color: var(--navy-ink); }
.btn--sm { padding: 12px 18px; font-size: 12px; min-height: 44px; }
.btn--lg { padding: 18px 30px; font-size: 14px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* ---------- Grilles à filets --------------------------------------------- */
.grid {
  display: grid;
  gap: 1px;
  background: transparent;
}
.grid--170 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.grid--190 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card {
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--line);
  padding: 26px 22px;
}
.card--alt { background: var(--navy-2); }
.card--pad-lg { padding: clamp(24px, 3vw, 40px); }
.card--pad-md { padding: clamp(24px, 2.6vw, 34px); }
.card--glass { background: rgba(12, 22, 40, .86); }
.card--link { display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
.card--link:hover { background: var(--navy-3); }
.card__num { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--muted-2); }
.card__stat { font: 700 clamp(28px, 3.4vw, 44px)/1 var(--sans); letter-spacing: -.03em; }
.card__title { font: 600 16px/1.3 var(--sans); }
.card__more {
  margin-top: auto;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.row {
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--line);
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  flex-wrap: wrap;
}
.row__label { font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.row__value {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  white-space: nowrap;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.split--start { align-items: start; }
.split--center { align-items: center; }

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(56px, 9vw, 132px) var(--pad-x) clamp(40px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(100deg, rgba(11, 20, 36, .84) 0%, rgba(11, 20, 36, .74) 52%, rgba(15, 63, 95, .50) 100%),
    url('../assets/img/hero-vasque.jpg');
  background-size: cover;
  background-position: center;
}
.hero--urgence {
  background-image:
    linear-gradient(180deg, rgba(9, 23, 40, .74) 0%, rgba(11, 27, 46, .89) 100%),
    url('../assets/img/urgence-robinet.jpg');
  background-position: center 30%;
}
.hero__inner { max-width: var(--wrap); margin: 0 auto; }
.hero__ping {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.hero__dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  animation: nm-pulse 1.6s ease-in-out infinite;
}
.hero__ping .meta { color: var(--body); letter-spacing: .16em; }
.hero .lead { margin: 28px 0 0; }
.hero .btn-row { margin-top: 36px; }
.hero__stats { margin: clamp(40px, 6vw, 80px) auto 0; }

@keyframes nm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ---------- Bandeau défilant des villes ---------------------------------- */
.marquee {
  overflow: hidden;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  background: var(--navy-2);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: nm-marquee 32s linear infinite;
}
.marquee__item {
  padding: 0 26px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@keyframes nm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Pastilles de fluide ------------------------------------------ */
.fluid { display: flex; align-items: center; gap: 9px; }
.fluid__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fluid__label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fluid__bar { height: 8px; margin-bottom: 16px; }

.fluid-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 20px;
}
.fluid-badge .fluid__label { font-weight: 600; }

.is-froide { --dot: var(--f-froide); --dot-ink: var(--f-froide-ink); --dot-bg: var(--f-froide-bg); }
.is-chaude { --dot: var(--f-chaude); --dot-ink: var(--f-chaude-ink); --dot-bg: var(--f-chaude-bg); }
.is-gaz { --dot: var(--f-gaz); --dot-ink: var(--f-gaz-ink); --dot-bg: var(--f-gaz-bg); }
.is-usees { --dot: var(--f-usees); --dot-ink: var(--f-usees-ink); --dot-bg: var(--f-usees-bg); }
.is-incendie { --dot: var(--f-incendie); --dot-ink: var(--f-incendie-ink); --dot-bg: var(--f-incendie-bg); }
.is-chauffage { --dot: var(--f-chauffage); --dot-ink: var(--f-chauffage-ink); --dot-bg: var(--f-chauffage-bg); }

.fluid__dot,
.fluid__bar { background: var(--dot, var(--accent)); }
.fluid__label { color: var(--dot-ink, var(--accent-ink)); }
.fluid-badge { background: var(--dot-bg, var(--chip)); }

/* ---------- Étapes / méthode -------------------------------------------- */
.step {
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--line);
  padding: 24px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
.step__num { font: 700 20px/1 var(--sans); color: var(--accent); }
.step__title { font: 600 17px/1.3 var(--sans); }

/* ---------- Onglets services -------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 16px 20px;
  cursor: pointer;
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 48px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent-ink); }
.tabpanel { max-width: 780px; }
.tabpanel[hidden] { display: none; }
.tabpanel .p { margin: 22px 0 0; max-width: 50ch; }
.tabpanel .stack { margin-top: 32px; }
.tabpanel .btn { margin-top: 32px; }

.bullet {
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--line);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 16px;
  align-items: start;
}
.bullet__mark { width: 8px; height: 8px; margin-top: 7px; background: var(--dot, var(--accent)); }
.bullet__text { font: 400 15px/1.55 var(--sans); color: var(--ink-2); }

/* ---------- Filtres réalisations ---------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.chip {
  padding: 12px 18px;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--muted);
  cursor: pointer;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 44px;
}
.chip:hover { border-color: var(--accent-ink); }
.chip[aria-pressed='true'] { background: var(--chip); border-color: var(--accent-ink); color: var(--ink); }

.zone-chip {
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body);
}
.zone-list { display: flex; flex-wrap: wrap; gap: 10px; }

.project__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project__place { color: var(--muted); }
.project__title { margin: 12px 0 0; font: 600 20px/1.25 var(--sans); }
.project__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- FAQ ---------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); background: var(--navy); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  width: 100%;
  display: flex;
  gap: 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 24px 4px;
  cursor: pointer;
  font: 600 clamp(17px, 1.6vw, 21px)/1.4 var(--sans);
  color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign { font: 400 22px/1 var(--sans); color: var(--accent-ink); flex: 0 0 auto; }
.faq__item[open] .faq__sign::before { content: '\2212'; }
.faq__item:not([open]) .faq__sign::before { content: '+'; }
.faq__a {
  margin: 0;
  padding: 0 60px 28px 4px;
  max-width: 70ch;
  font: 400 16px/1.7 var(--sans);
  color: var(--body);
  text-wrap: pretty;
}

.callout {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line-2);
  background: var(--navy-2);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.callout__title { font: 600 clamp(19px, 2vw, 24px)/1.3 var(--sans); }

/* ---------- Citation ----------------------------------------------------- */
.quote { max-width: 1100px; margin: 0 auto; text-align: center; }
.quote blockquote {
  margin: 0;
  font: 600 clamp(22px, 3vw, 40px)/1.28 var(--sans);
  letter-spacing: -.02em;
}
.quote__source { margin-top: 28px; }

/* ---------- Formulaire --------------------------------------------------- */
.form-card {
  border: 1px solid var(--line-2);
  background: var(--navy-2);
  padding: clamp(24px, 3vw, 40px);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field > span {
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body);
}
.field input,
.field select,
.field textarea {
  background: var(--navy);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 14px;
  font-size: 15px;
  min-height: 48px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline-offset: 0; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }

.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 400 13px/1.6 var(--sans);
  color: var(--body);
}
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { margin: 16px 0 0; font: 400 12px/1.6 var(--sans); color: var(--muted); }

.mode-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.mode-switch .chip { flex: 1 1 140px; }

/* ---------- Pied de page ------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--navy-2);
  padding: clamp(48px, 6vw, 88px) var(--pad-x) 32px;
}
.footer__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.footer__logo { height: 74px; width: auto; display: block; }
.footer__title {
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.footer__list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__list a,
.footer__list span { font: 400 15px/1.4 var(--sans); color: var(--ink-2); }
/* WCAG 2.5.8 niveau AA : 24 px pour une cible atteinte a la souris. Ces liens
   sont autonomes dans une liste, l'exemption des liens en ligne dans une
   phrase ne s'y applique pas. Au doigt, la media query les porte a 44 px. */
.footer__list a,
.avis__source a { display: inline-flex; align-items: center; min-height: 24px; }
.footer__list a:hover { color: var(--accent-ink); }
.footer__legal {
  position: relative;
  max-width: var(--wrap);
  margin: clamp(36px, 4vw, 56px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: var(--accent-ink); }

/* ---------- Barre d'appel mobile ---------------------------------------- */
.callbar { display: none; }

/* ---------- Pages légales ----------------------------------------------- */
.legal { padding: clamp(40px, 6vw, 88px) var(--pad-x) clamp(56px, 8vw, 112px); }
.legal h2 { font: 700 clamp(21px, 2.2vw, 28px)/1.2 var(--sans); margin: clamp(32px, 4vw, 48px) 0 12px; }
.legal p,
.legal li { font: 400 16px/1.7 var(--sans); color: var(--body); }
.legal ul { padding-left: 20px; }
.legal a { text-decoration: underline; }


/* ==========================================================================
   APPORTS DE LA VERSION EN LIGNE
   Blocs repris du site publié et rhabillés à cette charte : bandeau de
   chantier, carte OpenStreetMap sans cookie, avis Google réels, retours du
   formulaire branché sur contact.php.
   ========================================================================== */

/* ---------- Bandeau « site en cours de construction » -------------------- */
/* À retirer à la mise en ligne définitive (cf. ETAT-ACTUEL-DU-SITE.md § 11). */
.chantier {
  padding: 10px var(--pad-x);
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line-2);
  text-align: center;
}
.chantier__texte {
  margin: 0;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chantier__texte a { color: var(--accent-ink); text-decoration: underline; }

/* ---------- Carte : image de plan, pas d'iframe --------------------------- */
/* Tuiles OpenStreetMap composées en une image hébergée ici, attribution
   incrustée. Aucune requête vers un tiers, donc aucun cookie et pas de
   bandeau de consentement à afficher. Un clic ouvre l'itinéraire. */
.carte-geo {
  display: block;
  position: relative;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--navy-2);
}
.carte-geo img { width: 100%; }
.carte-geo__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 18px;
  background: var(--navy-2);
  border-top: 1px solid var(--line);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-align: center;
}
.carte-geo:hover .carte-geo__lien { background: var(--chip); color: var(--ink); }

/* ---------- Avis Google réels -------------------------------------------- */
/* Trois avis authentiques, chacun cliquable vers sa fiche d'origine.
   Ne jamais les réécrire ni en fabriquer d'autres. */
.avis {
  margin: 0;
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.avis--alt { background: var(--navy-2); }
.avis__note { margin: 0; font-size: 17px; letter-spacing: .18em; color: var(--accent-ink); }
.avis__texte { margin: 0; font: 400 15px/1.65 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.avis__source { margin: auto 0 0; }
.avis__source a {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.avis__source a:hover { color: var(--accent-ink); }

/* ---------- Retours du formulaire ---------------------------------------- */
/* Le pot de miel : invisible à l'œil, atteignable par un robot. */
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.statut {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--chip);
  box-shadow: 0 0 0 1px var(--accent);
  font: 400 14px/1.55 var(--sans);
  color: var(--ink);
}
.statut:empty { display: none; }
.statut--erreur { background: var(--f-chaude-bg); box-shadow: 0 0 0 1px var(--f-chaude); }

.erreur {
  font: 400 12px/1.45 var(--sans);
  color: var(--f-chaude-ink);
}
.erreur:empty { display: none; }
.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--f-chaude); }

/* ---------- Fiches de coordonnées (page Contact) ------------------------- */
.coord {
  background: var(--navy-2);
  box-shadow: 0 0 0 1px var(--line);
  padding: 22px;
}
.coord__valeur { margin: 10px 0 0; font: 500 17px/1.4 var(--sans); color: var(--ink); }

/* ---------- Page en construction ---------------------------------------- */
.attente {
  padding: clamp(56px, 9vw, 120px) var(--pad-x);
  text-align: center;
}
.attente__inner { max-width: 640px; margin: 0 auto; }
.attente .p { margin: 22px 0 0; }
.attente .btn-row { margin-top: 40px; }

/* ==========================================================================
   UTILITAIRES
   Le site n'utilise aucun attribut style= : la politique de sécurité du
   contenu peut donc refuser tout style en ligne (cf. .htaccess).
   ========================================================================== */

.accent { color: var(--accent-ink); }
.pos-rel { position: relative; }
.overflow-h { overflow: hidden; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* largeurs de lecture, en caractères */
.mw-20 { max-width: 20ch; }
.mw-22 { max-width: 22ch; }
.mw-24 { max-width: 24ch; }
.mw-26 { max-width: 26ch; }
.mw-30 { max-width: 30ch; }
.mw-34 { max-width: 34ch; }
.mw-46 { max-width: 46ch; }
.mw-50 { max-width: 50ch; }
.mw-56 { max-width: 56ch; }
.mw-60 { max-width: 60ch; }
.mw-70 { max-width: 70ch; }

/* rythme vertical */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 32px; }
.mt-6 { margin-top: 40px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 32px; }
.sep { margin-bottom: clamp(32px, 4vw, 56px); }
.sep--sm { margin-bottom: clamp(24px, 3vw, 40px); }

.eyebrow--block { display: block; margin-bottom: 18px; }
.gap-lg { gap: clamp(32px, 5vw, 80px); }

/* carte dont le bouton reste collé en bas, quelle que soit la hauteur du texte */
.card--column { display: flex; flex-direction: column; gap: 20px; }
.card--column .btn { align-self: flex-start; margin-top: auto; }

/* section d'appel en fin de page, avec le logo en filigrane */
.sec--cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(64px, 9vw, 128px);
}
.sec--cta .h1-sm { position: relative; max-width: 22ch; margin: 0 auto; }
.sec--cta .btn-row { position: relative; margin-top: 40px; }

/* ---------- Fonds photo : le WebP pour qui sait le demander ---------------- */
/* Chaque règle ci-dessus pose le JPEG, que tous les navigateurs affichent.
   Le bloc suivant sert le WebP — trois fois plus léger — mais seulement aux
   moteurs qui savent lire `image-set()` avec `type()`. Un moteur qui ne la
   comprend pas ignore tout le bloc et garde le JPEG : aucun ne se retrouve
   sans photo.

   Volontairement PAS de `-webkit-image-set()` : cette forme ne sait pas
   exprimer une préférence de format. Un WebKit assez ancien pour en avoir
   besoin, mais trop ancien pour lire le WebP (Safari 13 et antérieurs),
   recevrait le WebP et n'afficherait rien du tout. */
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  .pagehead--photo {
    background-image:
      linear-gradient(100deg, rgba(9, 23, 40, .86) 0%, rgba(9, 23, 40, .80) 55%, rgba(9, 23, 40, .80) 100%),
      image-set(url('../assets/img/outillage.webp') type('image/webp'), url('../assets/img/outillage.jpg') type('image/jpeg'));
  }
  .hero {
    background-image:
      linear-gradient(100deg, rgba(11, 20, 36, .84) 0%, rgba(11, 20, 36, .74) 52%, rgba(15, 63, 95, .50) 100%),
      image-set(url('../assets/img/hero-vasque.webp') type('image/webp'), url('../assets/img/hero-vasque.jpg') type('image/jpeg'));
  }
  .hero--urgence {
    background-image:
      linear-gradient(180deg, rgba(9, 23, 40, .74) 0%, rgba(11, 27, 46, .89) 100%),
      image-set(url('../assets/img/urgence-robinet.webp') type('image/webp'), url('../assets/img/urgence-robinet.jpg') type('image/jpeg'));
  }
}

/* ---------- En-tête : la zone intermédiaire ------------------------------ */
/* Avec 7 entrées de menu, l'en-tête déployé réclame 1320 px. En dessous, il
   débordait horizontalement — le défaut existait déjà à 6 entrées (1223 px
   requis) et le point de rupture du burger était à 900 px : toute fenêtre
   entre les deux sortait de l'écran.
   Plutôt que d'imposer un burger aux portables de 1280 px, on resserre
   l'en-tête dans cette bande : liens plus serrés, et le bouton de devis de
   l'en-tête s'effface — le numéro, lui, reste toujours visible, c'est le seul
   élément qui compte. Le devis reste atteignable par le menu et par le hero. */
@media (max-width: 1400px) and (min-width: 1051px) {
  .header { gap: 14px; }
  .nav { gap: 0; }
  .nav__link { padding: 9px 8px; }
  .header__cta .btn--primary { display: none; }
}

/* ---------- Responsive --------------------------------------------------- */
/* Point de rupture du burger : 1050 px et non 900. Même resserré, l'en-tête
   déployé réclame 1022 px ; sous ce seuil il débordait de l'écran. */
@media (max-width: 1050px) {
  .burger { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad-x) 20px;
  }
  .nav[hidden] { display: none; }
  .nav__link {
    padding: 16px 4px;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav__link[aria-current='page'] { border-bottom-color: var(--accent-ink); }
  .nav > .btn { display: inline-flex; margin-top: 16px; }

  .header { position: sticky; }
  .header__cta { display: none; }

  body { padding-bottom: 78px; }

  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--line);
    border-top: 1px solid var(--line);
  }
  .callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    font: 700 13px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .callbar__call { background: var(--accent); color: var(--navy-ink); }
  .callbar__call:hover { color: var(--navy-ink); }
  .callbar__quote { background: var(--navy); color: var(--ink); }
  .callbar__quote:hover { color: var(--ink); }

  /* Le bandeau de chantier se resserre sur un écran étroit — mais pas en
     descendant sous 11 px : à cette taille, du mono en capitales n'est plus
     lisible. On abandonne les capitales et l'interlettrage large, qui coûtent
     bien plus de largeur qu'un point de corps. */
  .chantier { padding: 9px 14px; }
  .chantier__texte {
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: none;
  }

  /* la mention de la carte respire davantage au pouce */
  .carte-geo__lien { min-height: 56px; }

  /* Cibles tactiles : au doigt, les liens du pied de page et la signature des
     avis tombaient a 15-21 px de haut. On les remonte a 44 px. */
  .footer__list a,
  .avis__source a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  .marquee { overflow-x: auto; }
  .hero__dot { animation: none; }
  * { scroll-behavior: auto !important; }
}

@media print {
  .header, .callbar, .marquee, .watermark, .chantier { display: none !important; }
  body { background: #fff; color: #000; }
}