/* ============================================================
   PLOMB'ART — Design tokens
   Direction : artisan haut de gamme, chaleureux, rassurant.
   Signature : le trait "conduite de cuivre" — une ligne courbe
   continue qui évoque à la fois la plomberie et le geste de
   l'artisan (Plomb'ART = plomberie + art).
   ============================================================ */

:root{
  /* ---- Couleurs de marque ---- */
  --marine-900:#0C2431;   /* fond très sombre (footer, panneaux) */
  --marine-800:#123B52;   /* bleu confiance principal */
  --marine-700:#1B4E68;
  --azure-600:#1F7A9C;    /* accent bleu secondaire (liens, icônes) */
  --azure-100:#E4F1F5;    /* fond bleu très clair */

  --copper-600:#BA4A18;   /* CTA — cuivre chaud (ajusté pour contraste AA) */
  --copper-700:#8F3811;   /* CTA hover */
  --copper-100:#FCE7DA;   /* fond cuivre très clair (badges) */

  --paper:#FAF7F2;        /* fond principal chaud */
  --paper-alt:#F2ECE1;    /* fond section alternée */
  --mist:#EFEAE0;         /* fond carte / bordure douce */
  --white:#FFFFFF;

  --ink:#1B2530;          /* texte principal */
  --slate:#526270;        /* texte secondaire */
  --line:#E1DACB;         /* hairline sur fond clair */
  --line-dark:rgba(255,255,255,.14); /* hairline sur fond sombre */

  --success:#2E8B57;
  --warn:#C34F1B;

  /* ---- Typographie ---- */
  --f-display:'Fraunces Display', 'Iowan Old Style', Georgia, serif;
  --f-heading:'Fraunces Heading', 'Iowan Old Style', Georgia, serif;
  --f-body:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3.1rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.15rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --fs-lead: clamp(1.05rem, .98rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* ---- Rythme / espacements ---- */
  --space-1: .5rem;
  --space-2: .875rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5.5rem;
  --space-7: 8rem;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(18,32,44,.06), 0 1px 1px rgba(18,32,44,.04);
  --shadow-m: 0 8px 24px -8px rgba(18,32,44,.18);
  --shadow-l: 0 24px 60px -20px rgba(18,32,44,.28);
  --shadow-copper: 0 10px 26px -10px rgba(226,103,43,.55);

  --container: 1240px;
  --container-narrow: 820px;

  --ease: cubic-bezier(.22,.68,.34,1);
  --dur-s: .2s;
  --dur-m: .45s;
}
/* ============================================================
   BASE — reset, fonts, typographie, éléments natifs
   ============================================================ */

@font-face{
  font-family:'Fraunces Display';
  src:url('/assets/fonts/fraunces-display-600.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces Heading';
  src:url('/assets/fonts/fraunces-heading-560.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('/assets/fonts/figtree-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('/assets/fonts/figtree-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('/assets/fonts/figtree-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('/assets/fonts/figtree-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

h1,.h1{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.01em; color:var(--marine-800); }
h2,.h2{ font-family:var(--f-heading); font-weight:600; font-size:var(--fs-h2); line-height:1.16; letter-spacing:-.005em; color:var(--marine-800); }
h3,.h3{ font-family:var(--f-heading); font-weight:600; font-size:var(--fs-h3); line-height:1.28; color:var(--marine-800); }
.lead{ font-size:var(--fs-lead); color:var(--slate); line-height:1.55; }
.eyebrow{
  font-family:var(--f-body); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--copper-600);
  display:inline-flex; align-items:center; gap:.5em;
}
.eyebrow::before{
  content:''; width:1.4em; height:1px; background:currentColor; display:inline-block;
}

/* Visually-hidden utility (a11y) */
.vh{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip link */
.skip-link{
  position:absolute; left:1rem; top:-4rem; background:var(--marine-800); color:#fff;
  padding:.75rem 1.25rem; border-radius:var(--radius-s); z-index:1000; transition:top var(--dur-s) var(--ease);
  font-weight:600;
}
.skip-link:focus{ top:1rem; }

/* Focus visibility */
:focus-visible{ outline:3px solid var(--azure-600); outline-offset:2px; border-radius:4px; }

/* Selection */
::selection{ background:var(--copper-100); color:var(--marine-900); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.container-narrow{ width:100%; max-width:var(--container-narrow); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

.section{ padding-block:var(--space-6); position:relative; }
.section-tight{ padding-block:var(--space-5); }
.section-alt{ background:var(--paper-alt); }
.section-dark{ background:var(--marine-900); color:#EAF0F3; }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-dark .lead{ color:#B9C6CC; }

.section-head{ max-width:640px; margin-bottom:var(--space-4); }
.section-head.center{ margin-inline:auto; text-align:center; }

@media (max-width:720px){
  .section{ padding-block:var(--space-5); }
}
/* ============================================================
   COMPOSANTS
   ============================================================ */

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.9rem 1.6rem; border-radius:var(--radius-pill);
  font-family:var(--f-body); font-weight:700; font-size:.98rem;
  white-space:nowrap; transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  border:1.5px solid transparent;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn-primary{ background:var(--copper-600); color:#fff; box-shadow:var(--shadow-copper); }
.btn-primary:hover{ background:var(--copper-700); transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(226,103,43,.6); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-outline{ background:transparent; border-color:var(--marine-800); color:var(--marine-800); }
.btn-outline:hover{ background:var(--marine-800); color:#fff; }
.btn-sm{ padding:.65rem 1.15rem; font-size:.875rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.site-header.is-scrolled{ border-color:var(--line); box-shadow:0 2px 20px rgba(18,32,44,.06); }
.header-bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.9rem; }
.logo{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:600; font-size:1.35rem; color:var(--marine-800); flex:none; }
.logo .logo-mark{ width:34px; height:34px; flex:none; }
.logo .logo-sep{ color:var(--copper-600); }

.main-nav{ display:flex; align-items:center; gap:1.5rem; }
.main-nav a{ font-weight:600; font-size:.92rem; color:var(--ink); position:relative; padding:.3rem 0; white-space:nowrap; }
.main-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--copper-600); transition:right var(--dur-s) var(--ease); }
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{ right:0; }
.main-nav a[aria-current="page"]{ color:var(--marine-800); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  min-width:280px; background:#fff; border-radius:var(--radius-m); box-shadow:var(--shadow-l);
  border:1px solid var(--line); padding:.6rem; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); margin-top:.6rem;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.dropdown a{ display:block; padding:.6rem .8rem; border-radius:var(--radius-s); font-weight:500; }
.dropdown a:hover{ background:var(--paper-alt); }
.dropdown a::after{ display:none; }

.header-actions{ display:flex; align-items:center; gap:1.1rem; flex:none; }
.header-phone{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--marine-800); font-size:.92rem; white-space:nowrap; }
.header-phone svg{ width:1.1em; height:1.1em; color:var(--copper-600); flex:none; }
.header-bar{ flex-wrap:nowrap; }
.logo{ white-space:nowrap; }
.logo span{ white-space:nowrap; }

.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--radius-s); }
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width:960px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(88vw,380px); background:#fff; flex-direction:column; align-items:stretch;
    padding:5.5rem 1.75rem 2rem; gap:.2rem; transform:translateX(100%); transition:transform var(--dur-m) var(--ease); box-shadow:var(--shadow-l); overflow-y:auto; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ padding:.9rem 0; border-bottom:1px solid var(--line); }
  .main-nav a::after{ display:none; }
  .dropdown{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; border:0; padding:0 0 0 1rem; display:none; margin-top:0; }
  .has-dropdown.is-open .dropdown{ display:block; }
  .header-phone span{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(18,32,44,.4); opacity:0; visibility:hidden; transition:opacity var(--dur-s) var(--ease); z-index:90; }
  .nav-scrim.is-open{ opacity:1; visibility:visible; }
}

/* ---------- Urgency top bar ---------- */
.urgency-bar{ background:var(--marine-900); color:#fff; font-size:.85rem; }
.urgency-bar .container{ display:flex; align-items:center; justify-content:center; gap:1.5rem; padding-block:.55rem; flex-wrap:wrap; text-align:center; }
.urgency-bar a{ font-weight:700; display:inline-flex; align-items:center; gap:.4em; }
.urgency-bar a:hover{ color:var(--copper-600); }
.urgency-bar svg{ width:1em; height:1em; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--copper-600); flex:none; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(226,103,43,.55);} 50%{ box-shadow:0 0 0 6px rgba(226,103,43,0);} }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(18,32,44,.1);
  padding:.6rem .8rem; gap:.6rem;
}
.sticky-cta .btn{ flex:1; padding:.8rem 1rem; font-size:.9rem; }
@media (max-width:720px){ .sticky-cta{ display:flex; } body{ padding-bottom:70px; } }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-s); transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease); }
.card-hover:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.card-pad{ padding:var(--space-4); }

/* Icon tile */
.icon-tile{ width:52px; height:52px; border-radius:var(--radius-m); background:var(--azure-100); color:var(--marine-800); display:flex; align-items:center; justify-content:center; flex:none; }
.icon-tile svg{ width:26px; height:26px; }
.icon-tile.copper{ background:var(--copper-100); color:var(--copper-700); }

/* Service card */
.service-card{ padding:var(--space-4); display:flex; flex-direction:column; gap:.9rem; height:100%; }
.service-card h3{ font-size:1.15rem; }
.service-card p{ color:var(--slate); font-size:.95rem; }
.service-card .card-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.4em; font-weight:700; color:var(--marine-800); }
.service-card .card-link svg{ width:1.1em; height:1.1em; transition:transform var(--dur-s) var(--ease); }
.service-card:hover .card-link svg{ transform:translateX(4px); }

/* Trust badges row */
.trust-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1.25rem .75rem; }
.trust-item svg{ width:30px; height:30px; color:var(--copper-600); }
.trust-item span{ font-weight:600; font-size:.9rem; color:var(--marine-800); }
@media (max-width:720px){ .trust-row{ grid-template-columns:repeat(2,1fr); } }

/* Rating pill */
.rating-pill{ display:inline-flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:.55rem 1.1rem .55rem .7rem; box-shadow:var(--shadow-s); }
.rating-pill .stars{ color:var(--copper-600); display:flex; gap:1px; }
.rating-pill .stars svg{ width:16px; height:16px; }
.rating-pill strong{ color:var(--marine-800); }
.rating-pill span{ color:var(--slate); font-size:.875rem; }

/* Avant / après */
.ba-slider{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-m); aspect-ratio:4/3; background:var(--mist); }
.ba-slider .ba-figure{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; color:var(--slate); }
.ba-slider .ba-figure svg{ width:40px; height:40px; opacity:.5; }
.ba-tag{ position:absolute; top:1rem; z-index:2; background:rgba(18,32,44,.72); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.4rem .8rem; border-radius:var(--radius-pill); }
.ba-tag.before{ left:1rem; } .ba-tag.after{ right:1rem; }

/* Photo placeholder (used wherever a real jobsite photo will go) */
.photo-frame{ position:relative; border-radius:var(--radius-l); overflow:hidden; background:linear-gradient(135deg,var(--azure-100),var(--mist)); display:flex; align-items:center; justify-content:center; color:var(--azure-600); }
.photo-frame svg{ width:20%; min-width:32px; max-width:64px; opacity:.55; }
.photo-frame::after{ content:'Photo à intégrer'; position:absolute; bottom:.8rem; left:50%; transform:translateX(-50%); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--azure-600); opacity:.7; }

/* Avis / testimonial card */
.review-card{ padding:var(--space-3); display:flex; flex-direction:column; gap:.9rem; }
.review-card .stars{ color:var(--copper-600); display:flex; gap:2px; }
.review-card .stars svg{ width:16px; height:16px; }
.review-card p{ color:var(--ink); font-size:.98rem; line-height:1.55; }
.review-card footer{ display:flex; align-items:center; gap:.7rem; margin-top:auto; }
.review-avatar{ width:38px; height:38px; border-radius:50%; background:var(--marine-800); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex:none; }
.review-name{ font-weight:700; font-size:.875rem; color:var(--marine-800); }
.review-meta{ font-size:.78rem; color:var(--slate); }

/* Badge */
.badge{ display:inline-flex; align-items:center; gap:.4em; background:var(--copper-100); color:var(--copper-700); font-weight:700; font-size:.75rem; letter-spacing:.03em; padding:.35rem .8rem; border-radius:var(--radius-pill); }
.badge.blue{ background:var(--azure-100); color:var(--marine-800); }

/* ---------- Pipe-route divider (signature graphique) ---------- */
.pipe-divider{ width:100%; height:auto; color:var(--copper-600); opacity:.35; }
.pipe-divider.thin{ height:28px; }

/* ---------- Process chain ---------- */
.chain{ display:flex; align-items:stretch; gap:.4rem; flex-wrap:wrap; }
.chain-step{ flex:1 1 140px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1rem 1.1rem; text-align:center; position:relative; }
.chain-step .num{ font-family:var(--f-heading); font-weight:600; color:var(--copper-600); font-size:1.3rem; display:block; margin-bottom:.3rem; }
.chain-step strong{ display:block; font-size:.92rem; color:var(--marine-800); }
.chain-arrow{ display:flex; align-items:center; color:var(--line); flex:none; }
.chain-arrow svg{ width:20px; height:20px; }
@media (max-width:820px){ .chain{ flex-direction:column; } .chain-arrow{ transform:rotate(90deg); align-self:center; } }

/* ---------- FAQ accordion ---------- */
.faq-list{ display:flex; flex-direction:column; gap:.75rem; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; text-align:left; font-weight:700; color:var(--marine-800); font-size:1rem; }
.faq-q .chev{ flex:none; width:20px; height:20px; transition:transform var(--dur-s) var(--ease); color:var(--copper-600); }
.faq-item[data-open="true"] .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease); }
.faq-a-inner{ padding:0 1.4rem 1.3rem; color:var(--slate); line-height:1.6; }

/* ---------- Formulaires ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-field{ display:flex; flex-direction:column; gap:.4rem; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-weight:600; font-size:.875rem; color:var(--marine-800); }
.form-field .req{ color:var(--copper-600); }
.form-field input,.form-field select,.form-field textarea{
  border:1.5px solid var(--line); border-radius:var(--radius-s); padding:.8rem .95rem; background:#fff; color:var(--ink); font-size:.98rem;
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--azure-600); box-shadow:0 0 0 4px var(--azure-100); outline:none; }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-consent{ display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color:var(--slate); }
.form-consent input{ margin-top:.2rem; flex:none; width:18px; height:18px; accent-color:var(--copper-600); }
.form-note{ font-size:.8rem; color:var(--slate); }
.form-success,.form-error{ display:none; padding:1rem 1.2rem; border-radius:var(--radius-m); font-weight:600; margin-top:1rem; }
.form-success{ background:#E7F4EC; color:var(--success); }
.form-error{ background:#FBEAE3; color:var(--warn); }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } }

/* Multi-step devis */
.step-tracker{ display:flex; gap:.5rem; margin-bottom:var(--space-4); }
.step-tracker .step{ flex:1; height:5px; border-radius:var(--radius-pill); background:var(--line); }
.step-tracker .step.is-active,.step-tracker .step.is-done{ background:var(--copper-600); }
.form-step{ display:none; }
.form-step.is-active{ display:block; animation:fadeIn .35s var(--ease); scroll-margin-top:6.5rem; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.choice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.choice-card{ border:1.5px solid var(--line); border-radius:var(--radius-m); padding:1.1rem .9rem; text-align:center; cursor:pointer; transition:all var(--dur-s) var(--ease); background:#fff; }
.choice-card svg{ width:26px; height:26px; margin-inline:auto; margin-bottom:.5rem; color:var(--marine-800); }
.choice-card span{ font-weight:600; font-size:.875rem; display:block; }
.choice-card:hover{ border-color:var(--azure-600); }
.choice-card.is-selected{ border-color:var(--copper-600); background:var(--copper-100); box-shadow:0 0 0 3px rgba(226,103,43,.15); }
@media (max-width:640px){ .choice-grid{ grid-template-columns:repeat(2,1fr); } }
.step-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-3); gap:1rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.82rem; color:var(--slate); padding-block:1rem; }
.breadcrumb a{ color:var(--slate); font-weight:600; }
.breadcrumb a:hover{ color:var(--marine-800); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--marine-800); font-weight:700; }

/* ---------- Counter stat ---------- */
.stat{ text-align:center; }
.stat .num{ font-family:var(--f-display); font-size:clamp(2rem,1.6rem + 1.6vw,2.9rem); font-weight:600; color:var(--marine-800); }
.stat .num .unit{ color:var(--copper-600); }
.stat .label{ color:var(--slate); font-size:.9rem; margin-top:.25rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--marine-900); color:#C6D2D7; }
.footer-top{ padding-block:var(--space-6) var(--space-4); display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:2.5rem; }
.footer-brand .logo{ color:#fff; }
.footer-brand p{ margin-top:1rem; color:#9FB0B7; font-size:.92rem; line-height:1.6; max-width:280px; }
.footer-col h4{ color:#fff; font-family:var(--f-body); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:.92rem; color:#B7C4CA; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--copper-600); border-color:var(--copper-600); }
.footer-social svg{ width:17px; height:17px; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-block:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#8CA0A8; }
.footer-bottom a{ color:#8CA0A8; }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ display:flex; gap:1.3rem; flex-wrap:wrap; }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; right:1rem; bottom:5.6rem; z-index:96; width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(37,211,102,.45);
  transition:transform var(--dur-s) var(--ease);
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:26px; height:26px; }
@media (min-width:721px){ .whatsapp-float{ bottom:1.75rem; width:56px; height:56px; } .whatsapp-float svg{ width:28px; height:28px; } }

/* ---------- Scroll reveal ----------
   N'active l'effet que si le JS a bien pris la main (classe .js sur html).
   Sans JS, ou tant que le script n'a pas encore tourné, le contenu reste visible. */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-group] > *{ transition-delay:calc(var(--i,0) * 80ms); }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- Misc ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr 1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.check-list{ display:flex; flex-direction:column; gap:.75rem; }
.check-list li{ display:flex; align-items:flex-start; gap:.7rem; color:var(--ink); }
.check-list svg{ width:20px; height:20px; color:var(--success); flex:none; margin-top:.1rem; }

.price-tag{ display:inline-flex; align-items:baseline; gap:.3rem; font-family:var(--f-heading); color:var(--marine-800); }
.price-tag .from{ font-size:.8rem; color:var(--slate); font-family:var(--f-body); }
.price-tag .amount{ font-size:1.6rem; font-weight:600; }

.map-frame{ border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-s); }

.skip-to-content-wrap{ position:relative; }

/* Icone miroir (ex: flèche "retour" réutilisant l'icône flèche-droite) */
.icon-flip{ transform:scaleX(-1); }
/* ============================================================
   SECTIONS — mises en page spécifiques
   ============================================================ */

/* ---------- Hero (accueil) ---------- */
.hero{ position:relative; overflow:hidden; padding-block:var(--space-6) var(--space-7); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-6); align-items:center; }
.hero-eyebrow{ margin-bottom:1.1rem; }
.hero h1{ font-size:var(--fs-hero); margin-bottom:1.25rem; }
.hero h1 em{ font-style:normal; color:var(--copper-600); }
.hero .lead{ max-width:520px; margin-bottom:1.9rem; }
.hero-cta-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.hero-trust{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero-trust .avatars{ display:flex; }
.hero-trust .avatars span{ width:34px; height:34px; border-radius:50%; border:2px solid var(--paper); background:var(--marine-800); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; margin-left:-10px; }
.hero-trust .avatars span:first-child{ margin-left:0; }

.hero-visual{ position:relative; }
.hero-visual .pipe-bg{ position:absolute; inset:-10% -10% auto auto; width:130%; color:var(--copper-600); opacity:.14; z-index:0; }
.hero-photo{ position:relative; z-index:1; aspect-ratio:4/5; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-l); }
.hero-badge-float{
  position:absolute; z-index:2; bottom:-1.4rem; left:-1.6rem; background:#fff; border-radius:var(--radius-m);
  padding:1rem 1.25rem; box-shadow:var(--shadow-l); display:flex; align-items:center; gap:.8rem; max-width:230px;
}
.hero-badge-float .icon-tile{ width:42px; height:42px; }
.hero-badge-float strong{ display:block; font-size:.95rem; color:var(--marine-800); }
.hero-badge-float span{ font-size:.78rem; color:var(--slate); }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:340px; margin:0 auto 3rem; }
  .hero-badge-float{ left:.25rem; bottom:-1.1rem; padding:.8rem 1rem; max-width:200px; }
  .hero-badge-float strong{ font-size:.85rem; }
  .hero-badge-float span{ font-size:.72rem; }
}
@media (max-width:520px){
  .hero-visual{ max-width:260px; margin-bottom:2.6rem; }
}

/* Hero interior pages (prestation/clim/ville/simple) */
.hero-inner{ background:var(--marine-900); color:#fff; padding-block:var(--space-5); position:relative; overflow:hidden; }
.hero-inner .pipe-bg{ position:absolute; inset:auto -5% -30% auto; width:60%; color:var(--copper-600); opacity:.18; }
.hero-inner .breadcrumb{ color:#93A5AC; }
.hero-inner .breadcrumb a{ color:#93A5AC; }
.hero-inner .breadcrumb .current{ color:#fff; }
.hero-inner h1{ color:#fff; font-size:clamp(1.9rem,1.5rem + 1.8vw,2.9rem); max-width:820px; }
.hero-inner .lead{ color:#C3D0D5; max-width:620px; margin-top:1rem; }
.hero-inner .hero-cta-row{ margin-top:1.6rem; }
.hero-inner .price-tag{ color:#fff; }
.hero-inner .price-tag .from{ color:#C3D0D5; }

/* ---------- Two expertises (accueil) ---------- */
.expertise-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.expertise-card{ position:relative; padding:var(--space-4); border-radius:var(--radius-l); overflow:hidden; color:#fff; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; }
.expertise-card.plomberie{ background:linear-gradient(160deg,var(--marine-800),var(--marine-900)); }
.expertise-card.climatisation{ background:linear-gradient(160deg,#1B5A66,#0C2431); }
.expertise-card .icon-tile{ background:rgba(255,255,255,.14); color:#fff; margin-bottom:1.2rem; }
.expertise-card h3{ color:#fff; font-size:1.5rem; margin-bottom:.5rem; }
.expertise-card p{ color:#C9D6DA; margin-bottom:1.3rem; }
.expertise-card .mini-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.expertise-card .mini-list span{ font-size:.78rem; background:rgba(255,255,255,.12); padding:.35rem .7rem; border-radius:var(--radius-pill); }
@media (max-width:820px){ .expertise-grid{ grid-template-columns:1fr; } }

/* ---------- Zone map ---------- */
.zone-layout{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); align-items:center; }
.zone-list{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.zone-list a{ display:flex; align-items:center; gap:.55rem; padding:.7rem .9rem; border-radius:var(--radius-s); background:#fff; border:1px solid var(--line); font-weight:600; font-size:.92rem; }
.zone-list a:hover{ border-color:var(--copper-600); color:var(--copper-700); }
.zone-list svg{ width:16px; height:16px; color:var(--copper-600); flex:none; }
@media (max-width:820px){ .zone-layout{ grid-template-columns:1fr; } }

/* ---------- Avant/Après grid ---------- */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:980px){ .ba-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .ba-grid{ grid-template-columns:1fr; } }

/* ---------- Lead magnet banner ---------- */
.leadmagnet{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-4); align-items:center; background:var(--azure-100); border-radius:var(--radius-l); padding:var(--space-4); }
.leadmagnet .icon-tile{ width:64px; height:64px; margin-bottom:1rem; }
.leadmagnet-form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.leadmagnet-form input[type=email]{ flex:1; min-width:220px; border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.85rem 1.3rem; }
@media (max-width:820px){ .leadmagnet{ grid-template-columns:1fr; } }

/* ---------- CTA banner pleine largeur ---------- */
.cta-banner{ background:linear-gradient(120deg,var(--marine-800),var(--marine-900)); color:#fff; border-radius:var(--radius-l); padding:var(--space-5); text-align:center; position:relative; overflow:hidden; }
.cta-banner .pipe-bg{ position:absolute; inset:-20% -10% auto auto; width:60%; color:var(--copper-600); opacity:.18; }
.cta-banner h2{ color:#fff; margin-bottom:.8rem; }
.cta-banner .lead{ color:#C3D0D5; margin-bottom:1.8rem; max-width:560px; margin-inline:auto; }
.cta-banner .hero-cta-row{ justify-content:center; }

/* ---------- Timeline (méthodologie / à propos) ---------- */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{ content:''; position:absolute; left:.55rem; top:.4rem; bottom:.4rem; width:2px; background:var(--line); }
.timeline-item{ position:relative; padding-bottom:2.2rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:''; position:absolute; left:-2.2rem; top:.2rem; width:14px; height:14px; border-radius:50%; background:var(--copper-600); border:3px solid var(--paper); box-shadow:0 0 0 2px var(--copper-600); }
.timeline-item h3{ margin-bottom:.35rem; }
.timeline-item p{ color:var(--slate); }

/* ---------- Pricing table (tarifs indicatifs) ---------- */
.price-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-s); }
.price-table th{ background:var(--marine-800); color:#fff; text-align:left; padding:1rem 1.3rem; font-family:var(--f-body); font-size:.85rem; letter-spacing:.03em; }
.price-table td{ padding:1rem 1.3rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.price-table tr:last-child td{ border-bottom:0; }
.price-table td.amount{ font-weight:700; color:var(--marine-800); white-space:nowrap; }

/* ---------- Persona / profile cards (a-propos, ressources) ---------- */
.profile-card{ display:flex; gap:1.1rem; align-items:flex-start; padding:var(--space-3); }
.profile-card .icon-tile{ width:48px; height:48px; }

/* ---------- Blog / conseils cards ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.blog-card{ overflow:hidden; display:flex; flex-direction:column; }
.blog-card .photo-frame{ aspect-ratio:16/10; border-radius:var(--radius-l) var(--radius-l) 0 0; }
.blog-card-body{ padding:var(--space-3); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.blog-card .cat{ font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--copper-600); }
.blog-card h3{ font-size:1.05rem; }
.blog-card p{ color:var(--slate); font-size:.9rem; }
.blog-card .meta{ margin-top:auto; font-size:.78rem; color:var(--slate); display:flex; justify-content:space-between; padding-top:.6rem; border-top:1px solid var(--line); }
@media (max-width:980px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- Ressources (lead magnets hub) ---------- */
.resource-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.resource-card{ padding:var(--space-3); display:flex; flex-direction:column; gap:.8rem; }
.resource-card .format{ align-self:flex-start; }
@media (max-width:980px){ .resource-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .resource-grid{ grid-template-columns:1fr; } }

/* ---------- Filter tabs (réalisations) ---------- */
.filter-tabs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:var(--space-4); }
.filter-tabs button{ padding:.6rem 1.2rem; border-radius:var(--radius-pill); border:1.5px solid var(--line); font-weight:600; font-size:.88rem; background:#fff; transition:all var(--dur-s) var(--ease); }
.filter-tabs button.is-active{ background:var(--marine-800); border-color:var(--marine-800); color:#fff; }
.realisations-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.realisations-grid .photo-frame{ aspect-ratio:1/1; border-radius:var(--radius-m); }
@media (max-width:980px){ .realisations-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .realisations-grid{ grid-template-columns:1fr; } }

/* ---------- Contact page split ---------- */
.contact-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-5); align-items:start; }
.contact-info-card{ padding:var(--space-4); display:flex; flex-direction:column; gap:1.4rem; }
.contact-line{ display:flex; align-items:flex-start; gap:.9rem; }
.contact-line strong{ display:block; color:var(--marine-800); font-size:.95rem; }
.contact-line span,.contact-line a{ color:var(--slate); font-size:.92rem; }
@media (max-width:980px){ .contact-layout{ grid-template-columns:1fr; } }

/* ---------- Legal pages ---------- */
.legal-content h2{ margin-top:var(--space-4); margin-bottom:.8rem; font-size:1.3rem; }
.legal-content p,.legal-content li{ color:var(--slate); line-height:1.7; margin-bottom:.9rem; }
.legal-content ul{ padding-left:1.2rem; list-style:disc; }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding-block:var(--space-7); }
.error-page .code{ font-family:var(--f-display); font-size:clamp(4rem,3rem + 5vw,8rem); color:var(--copper-600); line-height:1; }

/* ---------- Print ---------- */
@media print{
  .site-header,.urgency-bar,.sticky-cta,.whatsapp-float,.site-footer,.nav-toggle{ display:none!important; }
}