@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/inter-tight.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/newsreader.woff2') format('woff2');}

/* ==========================================================================
   Léonce Giraud, plombier chauffagiste - feuille de style
   Charte : bleu #2566ae / navy #0f2b4d (logo), orange #ed6c39 / cuivre #9b4a24.
   Formes : boutons pilule, cartes et images 16 px, champs 10 px.
   Thème clair verrouillé (site de confiance locale).
   ========================================================================== */

:root {
  color-scheme: light;
  /* Couleurs du logo */
  --navy: #0f2b4d;
  --navy-2: #163a66;
  --blue: #1f5c9e;
  --orange: #ed6c39;
  --orange-deep: #a83f15;
  --orange-clair: #f79366;   /* orange lisible sur fond navy */
  --focus: #d9531e;         /* anneau de focus : contraste sur clair ET sur navy */
  --copper: #9b4a24;
  /* Surfaces : creme chaud plutot que blanc froid */
  --bg: #faf6ef;
  --bg-2: #f2ebdf;
  --bg-card: #ffffff;
  --blue-pale: #e7eef7;
  /* Encre */
  --ink: #0f2b4d;
  --ink-2: #4b5a6b;
  --mot-off: #5e6a79;
  --line: #ded4c4;
  --line-field: #7a889a;
  --on-navy: #ffffff;
  --on-navy-2: #c9d6e6;
  /* Formes : angles francs, pas de pilules */
  --r-card: 14px;
  --r-field: 8px;
  --r-btn: 8px;
  --header-h: 74px;
  --stack-pad: clamp(24px, 5vh, 56px);
  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 20px 60px -24px rgba(15, 43, 77, .3);
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; margin: 0 0 .5em; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -.01em; }
/* Surtitre : petite capitale espacee, en Inter Tight */
.surtitre { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); margin: 0 0 1.1em; }
p { margin: 0 0 1em; }
p.lead, .lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; }
ul, ol { padding: 0; margin: 0; list-style: none; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
/* Double anneau : l'un des deux contraste toujours, quel que soit le fond */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .92); }
section { position: relative; }
.sec-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p { color: var(--ink-2); font-size: 1.1rem; }

/* ---- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-btn); border: 2px solid var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: .97rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 54px; padding: 15px 26px; font-size: 1.04rem; }
.btn-primary { background: var(--orange-deep); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15, 43, 77, .6); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--orange-deep); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); }
.btn .ic { width: 1.15em; height: 1.15em; }

/* ---- En-tête ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-nom { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; color: var(--navy); text-transform: uppercase; letter-spacing: .045em; }
.brand-metier { font-size: .74rem; font-weight: 600; color: var(--orange-deep); letter-spacing: .04em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a:not(.btn) { padding: 10px 14px; border-radius: 6px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.nav > a:not(.btn):hover, .nav > a[aria-current="page"] { background: var(--blue-pale); color: var(--blue); }
.btn-tel { margin-left: 10px; }
.nav-toggle { display: none; }

/* ---- Hero cinematique -----------------------------------------------------
   La scene occupe l'ecran puis se retracte en carte arrondie au defilement
   (pilotage GSAP, valeurs par defaut = etat plein ecran sans JS). */
.hero { position: relative; background: var(--navy); }
.hero-scene {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(calc(100dvh - var(--header-h)), 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(40px, 7vw, 80px) clamp(24px, 6vw, 88px) clamp(32px, 4vw, 52px);
  transform-origin: 50% 0;
}
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--navy); }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
}
.hero-voile {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(8, 24, 44, .93) 0%, rgba(8, 24, 44, .8) 34%, rgba(8, 24, 44, .28) 64%, rgba(8, 24, 44, .12) 100%),
    linear-gradient(0deg, rgba(8, 24, 44, .8) 0%, rgba(8, 24, 44, .1) 46%, transparent 70%);
}
.hero-in { position: relative; z-index: 3; max-width: 760px; }
.hero-sur {
  color: var(--orange-clair); font-family: var(--font-body); font-weight: 700;
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.4em;
}
.hero-h1 { color: #fff; font-size: clamp(2.5rem, 6.6vw, 5.4rem); line-height: .96; margin-bottom: .12em; }
.hero-h2 {
  font-family: var(--font-display); font-weight: 500;
  color: #fff; font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.15;
  margin-bottom: .7em; opacity: .92;
}
.hero-p { color: #fff; font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 46ch; margin-bottom: 1.6em; }
.hero-cta > span { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-preuves {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: clamp(32px, 5vw, 56px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero-preuves li { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 600; font-size: .98rem; }
.hero-preuves .ic { width: 20px; height: 20px; color: var(--orange); }


/* ---- Hero 3D : la maison en coupe qui pivote au defilement ----------------
   Le canvas se superpose a l'image ; tant que la 3D n'est pas prete (ou si elle
   est desactivee), c'est l'image qui reste visible. */
.hero-3d {
  position: absolute; z-index: 2; pointer-events: none;
  right: clamp(0px, 2vw, 40px); top: 52%; transform: translateY(-50%);
  width: min(44vw, 580px); height: min(80%, 620px);
}
.hero-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-canvas.prete { opacity: 1; }
/* Quand la 3D tourne, on efface l'image de fond pour ne pas melanger les deux */
.hero.a-3d .hero-img { opacity: 0; transition: opacity .9s var(--ease); }
.hero.a-3d .hero-media { background: radial-gradient(120% 90% at 72% 45%, #1b3d63 0%, var(--navy) 58%, #081a2e 100%); }
.hero.a-3d .hero-voile {
  background:
    linear-gradient(90deg, rgba(8, 24, 44, .86) 0%, rgba(8, 24, 44, .55) 40%, rgba(8, 24, 44, 0) 66%),
    linear-gradient(0deg, rgba(8, 24, 44, .7) 0%, rgba(8, 24, 44, .06) 42%, transparent 66%);
}

/* ---- Chiffres cles (compteurs animes) ------------------------------------ */
.chiffres { background: var(--bg); border-bottom: 1px solid var(--line); }
.chiffres-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.chiffre { padding: clamp(28px, 3.5vw, 44px) clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 4px; }
.chiffre + .chiffre { border-left: 1px solid var(--line); }
.chiffre-n {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.chiffre strong { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--ink); }
.chiffre-d { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.chiffre-txt > .ic { width: 38px; height: 38px; color: var(--orange-deep); margin-bottom: 6px; }

/* ---- Prestations : pile épinglée ------------------------------------------ */
.prestations { padding-top: clamp(64px, 9vw, 120px); background: var(--bg); }
.stack { position: relative; }
.stack-card {
  position: sticky; top: var(--header-h);
  min-height: calc(100dvh - var(--header-h));
  display: flex; align-items: center;
  border-top-left-radius: 32px; border-top-right-radius: 32px;
  box-shadow: 0 -20px 50px -30px rgba(15, 43, 77, .5);
  transform-origin: 50% 0;
  will-change: transform;
}
.stack-card:last-child { min-height: auto; padding: clamp(48px, 7vw, 96px) 0; }
.stack-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--stack-pad) 0; }
.stack-txt h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
.stack-txt p { font-size: 1.12rem; max-width: 46ch; }
.stack-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 14px; align-items: center; justify-content: center; margin-bottom: 20px; }
.stack-ic .ic { width: 30px; height: 30px; }
.stack-list { display: grid; gap: 6px; margin: 18px 0 26px; }
.stack-list li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.stack-list .ic { color: var(--orange); }
.stack-media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--header-h) - 2 * var(--stack-pad)); justify-self: end; width: 100%; }
.stack-img { width: 100%; height: 100%; object-fit: cover; }

.tone-blanc { background: var(--bg-card); color: var(--ink); }
.tone-blanc .stack-ic { background: var(--blue-pale); color: var(--blue); }
.tone-blanc .stack-txt p { color: var(--ink-2); }
.tone-navy { background: var(--navy); color: var(--on-navy); }
.tone-navy h3 { color: #fff; }
.tone-navy .stack-txt p { color: var(--on-navy-2); }
.tone-navy .stack-ic { background: rgba(255, 255, 255, .1); color: var(--orange); }
.tone-bleu { background: var(--blue); color: #fff; }
.tone-bleu h3 { color: #fff; }
.tone-bleu .stack-txt p { color: #e3edf9; }
.tone-bleu .stack-ic { background: rgba(255, 255, 255, .14); color: #fff; }
.tone-bleu .stack-list .ic { color: #fff; }
.tone-orange { background: var(--bg-2); color: var(--ink); }
.tone-orange .stack-ic { background: var(--orange); color: var(--navy); }
.tone-orange .stack-txt p { color: var(--ink-2); }
.tone-orange .stack-list .ic { color: var(--orange-deep); }

/* ---- Salle de bain : pleine largeur avec parallaxe ----------------------- */
.showcase { position: relative; isolation: isolate; overflow: hidden; min-height: min(90dvh, 820px); display: flex; align-items: flex-end; background: var(--navy); }
.showcase-media { position: absolute; inset: -12% 0; z-index: -1; }
.showcase-img { width: 100%; height: 100%; object-fit: cover; }
.showcase-in { width: min(100% - 2 * var(--pad), var(--wrap)); padding: clamp(48px, 8vw, 96px) 0; }
.showcase-panel { background: rgba(255, 255, 255, .96); border-radius: var(--r-card); padding: clamp(28px, 4vw, 48px); max-width: 560px; box-shadow: var(--shadow); }
.showcase-panel p { color: var(--ink-2); font-size: 1.08rem; }

/* ---- Comment ça se passe ------------------------------------------------- */
.process { padding: clamp(72px, 10vw, 140px) 0; background: var(--bg); }
.process-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 8vw, 120px); align-items: start; }
.process-head { position: sticky; top: calc(var(--header-h) + 40px); }
.process-head p { color: var(--ink-2); font-size: 1.1rem; max-width: 36ch; margin-bottom: 1.5em; }
.steps { position: relative; padding-left: 64px; display: grid; gap: clamp(40px, 6vw, 72px); counter-reset: etape; }
/* Filet vertical qui se trace au fil des etapes, sobre et net */
.steps-tuyau {
  position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; z-index: 0;
  background: var(--navy); opacity: .22;
  transform: scaleY(0); transform-origin: 50% 0;
}
.step-raccord {
  position: absolute; left: -44px; top: 58px; width: 8px; height: 8px; z-index: 1;
  border-radius: 2px; background: var(--orange-deep);
  opacity: 0; transform: scale(.2); transform-origin: 50% 50%;
}
html.no-gsap .steps-tuyau { transform: none; }
html.no-gsap .step-raccord { opacity: 1; transform: none; }
.step { position: relative; }
.step-n {
  position: absolute; left: -64px; top: 0;
  width: 48px; height: 48px; border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: var(--navy); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 6px var(--bg);
}
.step h3 { margin-top: 8px; }
.step p { color: var(--ink-2); max-width: 52ch; }

/* ---- Zone d'intervention ------------------------------------------------- */
.zone { padding: clamp(72px, 10vw, 140px) 0; background: var(--bg-2); }
.zone-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.zone-media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.zone-txt p { color: var(--ink-2); font-size: 1.08rem; }
.communes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.communes li { padding: 7px 13px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
.communes li:first-child { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- Avis ---------------------------------------------------------------- */
.avis { padding: clamp(72px, 10vw, 140px) 0 0; background: var(--bg); }
.avis-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.avis-card { margin: 0; padding: 28px; border-radius: var(--r-card); background: var(--bg-card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.avis-card:first-child { background: var(--navy); color: #fff; }
.avis-card:first-child figcaption { color: var(--on-navy-2); }
.stars { display: flex; gap: 2px; color: var(--orange-deep); }
.avis-card:first-child .stars { color: var(--orange); }
.stars .ic { width: 20px; height: 20px; }
.avis-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; line-height: 1.35; flex: 1; }
.avis-card figcaption { font-size: .95rem; color: var(--ink-2); font-weight: 600; }

/* ---- Contact ------------------------------------------------------------- */
.contact { padding: clamp(72px, 10vw, 140px) 0; background: var(--bg); }
.contact-in { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-txt p { color: var(--ink-2); font-size: 1.08rem; }
.contact-list { display: grid; gap: 18px; margin-top: 28px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .ic { width: 26px; height: 26px; color: var(--orange-deep); margin-top: 2px; }
.contact-list a { font-weight: 700; }
.contact-form { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(24px, 4vw, 40px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.champ label { font-weight: 700; font-size: .98rem; }
.champ .opt { font-weight: 500; color: var(--ink-2); }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: 12px 14px; min-height: 48px;
  border: 2px solid var(--line-field); border-radius: var(--r-field); background: var(--bg-card);
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 102, 174, .18); }
.champ-err input, .champ-err select, .champ-err textarea { border-color: var(--orange-deep); }
.err { color: var(--orange-deep); font-weight: 600; font-size: .92rem; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 44px; }
.select-wrap .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-2); }
.piege { position: absolute; left: -9999px; }
.form-erreur-globale { background: var(--bg); color: var(--orange-deep); border-left: 4px solid var(--orange-deep); padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.form-rgpd { font-size: .9rem; color: var(--ink-2); margin: 16px 0 0; }
.form-ok { text-align: center; padding: 24px 0; }
.form-ok .ic { width: 56px; height: 56px; color: var(--blue); margin: 0 auto 12px; }
.form-ok p { color: var(--ink-2); }

/* ---- Pied de page -------------------------------------------------------- */
.site-footer { background: var(--navy); color: var(--on-navy-2); padding: clamp(56px, 7vw, 96px) 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.foot-brand img { width: 170px; margin-bottom: 20px; background: var(--bg); padding: 12px; border-radius: var(--r-field); }
.foot-brand p { max-width: 40ch; }
.foot-h { font-family: var(--font-body); font-size: .74rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 18px; }
.foot-list { display: grid; gap: 10px; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--orange); }
.foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .92rem; }
.tel-flottant { display: none; }

/* ---- Pages intérieures --------------------------------------------------- */
.page-hero { background: var(--navy); color: #fff; padding: clamp(48px, 7vw, 96px) 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: var(--on-navy-2); font-size: 1.15rem; max-width: 60ch; margin: 0; }
.fil { display: flex; flex-wrap: wrap; gap: 6px; font-size: .92rem; font-weight: 600; margin-bottom: 20px; }
.fil a { color: var(--on-navy-2); text-decoration: none; }
.fil a:hover { color: #fff; text-decoration: underline; }
.fil a::after { content: '/'; margin-left: 8px; opacity: .5; }
.fil span { color: #fff; }

.svc-hero { background: var(--navy); color: #fff; overflow: hidden; }
.svc-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding: clamp(40px, 6vw, 80px) 0; }
.svc-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.svc-hero .lead { color: #fff; max-width: 40ch; margin-bottom: 1.4em; }
.svc-hero-media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; max-height: 640px; }
.svc-hero-img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero .fil a { color: var(--on-navy-2); }

.svc-intro { padding: clamp(56px, 8vw, 110px) 0 0; }
.svc-intro-in { max-width: 72ch; }
.svc-intro .lead { color: var(--ink-2); }

.svc-points { padding: clamp(56px, 8vw, 110px) 0; }
.points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.point { padding: 28px; border-radius: var(--r-card); background: var(--bg-card); border: 1px solid var(--line); }
.point .ic { width: 30px; height: 30px; color: var(--orange-deep); margin-bottom: 14px; }
.point h3 { font-size: 1.2rem; }
.point p { color: var(--ink-2); margin: 0; }
.point-main { background: var(--navy); color: #fff; }
.point-main h3 { color: #fff; font-size: 1.5rem; }
.point-main p { color: var(--on-navy-2); }
.point-main .ic { color: var(--orange); }
.points-grid .point:nth-child(5) { background: var(--blue-pale); }
.nb { white-space: nowrap; }

.svc-pourquoi { padding: 0 0 clamp(56px, 8vw, 110px); }
.pourquoi-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.pourquoi-media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.pourquoi-txt p { color: var(--ink-2); font-size: 1.08rem; }

.svc-faq { padding: clamp(56px, 8vw, 110px) 0; background: var(--bg-2); }
.faq-in { max-width: 820px; }
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--bg-card); border-radius: var(--r-field); border: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; padding: 18px 22px; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { color: var(--blue); transition: transform .3s var(--ease); }
.faq-item[open] summary .ic { transform: rotate(180deg); }
.faq-item p { padding: 0 22px 20px; color: var(--ink-2); margin: 0; }

.svc-autres { padding: clamp(56px, 8vw, 110px) 0 0; }
.autres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.autres a { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--r-field); background: var(--bg-card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; transition: background .25s, transform .25s var(--ease); }
.autres a:hover { background: var(--navy); color: #fff; transform: translateX(4px); }
.autres a .ic:first-child { color: var(--orange-deep); width: 28px; height: 28px; }
.autres a:hover .ic:first-child { color: var(--orange); }
.autres a span { flex: 1; }

.legal { padding: clamp(48px, 7vw, 96px) 0; }
.legal-in { max-width: 72ch; }
.legal h2 { font-size: 1.4rem; margin-top: 1.6em; }
.legal p { color: var(--ink-2); }


/* ---- Actualités ---------------------------------------------------------- */
.actus { padding: clamp(56px, 8vw, 110px) 0; }
.actus-home { padding-bottom: 0; }
.actus-suite { background: var(--bg-2); }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; }
.sec-head-row p { margin: 0; }
.actu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.actu-card { display: flex; flex-direction: column; gap: 16px; }
.actu-card-media { display: block; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.actu-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.actu-card:hover .actu-card-img { transform: scale(1.04); }
.actu-meta { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--ink-2); font-weight: 600; margin: 0; }
.actu-tag { background: var(--blue-pale); color: var(--navy); padding: 4px 9px; border-radius: 5px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.actu-card h3 { font-size: 1.3rem; line-height: 1.25; margin: 0; }
.actu-card h3 a { color: var(--ink); text-decoration: none; }
.actu-card h3 a:hover { color: var(--blue); }
.actu-resume { color: var(--ink-2); margin: 0; }
.actu-card-grande { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.actu-card-grande .actu-card-media { aspect-ratio: 16 / 10; }
.actu-card-grande h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.actu-card-grande .actu-resume { font-size: 1.08rem; }

.article-head { background: var(--navy); color: #fff; padding: clamp(40px, 6vw, 80px) 0 clamp(120px, 16vw, 200px); }
.article-head-in { max-width: 900px; }
.article-head h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.article-meta { color: var(--on-navy-2); margin: 0; font-weight: 600; }
.article-media { margin-top: calc(-1 * clamp(100px, 14vw, 170px)); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 8; }
.article-img { width: 100%; height: 100%; object-fit: cover; }
.article-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 6vw, 72px) 0; align-items: start; }
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 1.8em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink-2); }
.prose .lead { color: var(--ink); font-weight: 600; }
.prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose strong { color: var(--ink); }
.prose .encart { background: var(--bg-card); border-left: 3px solid var(--orange-deep); border-radius: 0 var(--r-field) var(--r-field) 0; padding: 18px 22px; margin: 1.6em 0; }
.prose .encart p { margin: 0; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .98rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); background: var(--bg-2); }
.sources { margin-top: 2.5em; padding: 22px 26px; border-radius: var(--r-card); background: var(--bg-card); border: 1px solid var(--line); }
.sources h2 { font-size: 1.1rem; margin: 0 0 .6em; }
.sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sources a { font-weight: 600; }
.article-side { position: sticky; top: calc(var(--header-h) + 24px); }
.side-cta { background: var(--navy); color: #fff; border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.side-cta > .ic { width: 40px; height: 40px; color: var(--orange); }
.side-cta h2 { color: #fff; font-size: 1.3rem; margin: 0; }
.side-cta p { color: var(--on-navy-2); margin: 0 0 8px; }
.side-cta .btn { justify-content: center; }
.side-cta .btn-navy { background: rgba(255, 255, 255, .1); }


/* ---- Comparateur avant / apres -------------------------------------------- */
.avant-apres { padding: clamp(64px, 9vw, 120px) 0; background: var(--bg-2); }
.compare { margin: 0; }
.compare-cadre {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow); aspect-ratio: 16 / 9; background: var(--navy);
  --x: 50%;
}
.compare-avant, .compare-apres { position: absolute; inset: 0; }
.compare-apres { clip-path: inset(0 0 0 var(--x)); }
.compare-img { width: 100%; height: 100%; object-fit: cover; }
.compare-etq {
  position: absolute; bottom: 16px; z-index: 3;
  background: rgba(15, 43, 77, .92); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: .72rem;
  padding: 7px 14px; border-radius: 6px; letter-spacing: .14em; text-transform: uppercase;
}
.compare-etq-avant { left: 16px; }
.compare-etq-apres { right: 16px; background: var(--orange); color: var(--navy); }
.compare-poignee {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; z-index: 4;
  background: #fff; transform: translateX(-50%); pointer-events: none;
  box-shadow: 0 0 18px rgba(15, 43, 77, .45);
}
.compare-poignee span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 20px rgba(15, 43, 77, .35);
  display: grid; place-items: center;
}
.compare-poignee span::before, .compare-poignee span::after {
  content: ""; position: absolute; width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.compare-poignee span::before { border-right: 9px solid var(--navy); left: 12px; }
.compare-poignee span::after { border-left: 9px solid var(--navy); right: 12px; }
.compare-label { position: absolute; left: -9999px; }
.compare-range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none;
  cursor: ew-resize; opacity: 0;
}
.compare-range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.compare-range::-moz-range-thumb { width: 60px; height: 100%; border: 0; background: transparent; }
.compare-range:focus-visible { opacity: 1; outline: 3px solid var(--focus); outline-offset: -3px; }
.compare figcaption { color: var(--ink-2); font-size: .92rem; margin-top: 14px; }
.avant-apres-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: clamp(28px, 4vw, 44px); }
.avant-apres-cta p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 1.08rem; }

/* ---- Habitat : panoramique horizontal epingle ----------------------------- */
.habitat { background: var(--navy); color: #fff; }
.habitat-pin { overflow: hidden; }
.habitat-track {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(56px, 8vh, 96px) max(var(--pad), (100vw - var(--wrap)) / 2);
  will-change: transform;
}
.habitat-panneau { flex: none; }
.habitat-intro { width: min(86vw, 460px); }
.habitat-intro h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.habitat-intro p { color: var(--on-navy-2); font-size: 1.08rem; }
.habitat-suite { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-btn); background: var(--orange); color: var(--navy); margin-top: 8px; }
.habitat-suite .ic { width: 26px; height: 26px; }
.habitat-carte { width: min(78vw, 400px); margin: 0; background: rgba(255, 255, 255, .06); border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); }
.habitat-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.habitat-carte figcaption { padding: 22px 24px 26px; }
.habitat-carte h3 { color: #fff; font-size: 1.3rem; margin-bottom: .35em; }
.habitat-carte p { color: var(--on-navy-2); margin: 0; font-size: .98rem; }
.habitat-fin { width: min(86vw, 470px); }
.habitat-fin h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.habitat-fin .communes li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.habitat-fin .communes li:first-child { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.habitat-fin-p { color: var(--on-navy-2); margin: 20px 0 18px; }

/* ---- En-tete compact au defilement ---------------------------------------- */
.site-header { transition: box-shadow .35s var(--ease), background .35s, margin-bottom .35s var(--ease); }
.site-header.compact { box-shadow: 0 8px 30px -18px rgba(15, 43, 77, .55); }
.site-header.compact .header-in { height: 58px; }
/* L'en-tête collant rétrécit de 16 px : une marge compense pour que rien ne bouge en dessous
   (sinon les positions mesurées par ScrollTrigger se décalent pendant le défilement). */
.site-header.compact { margin-bottom: calc(var(--header-h) - 58px); }
.site-header.compact .brand img { width: 32px; }
.site-header.compact .brand-metier { opacity: 0; max-height: 0; }
.header-in { transition: height .35s var(--ease); }
.brand img { transition: width .35s var(--ease); }
.brand-metier { transition: opacity .3s, max-height .35s; max-height: 2em; overflow: hidden; }

/* ---- Revelation mot a mot -------------------------------------------------- */
/* Le mot pas encore revele reste lisible : on joue sur la couleur, jamais sur l'opacite */
.mot { display: inline-block; }
html.js .mot-anim .mot { color: var(--mot-off); transition: color .55s var(--ease); }
html.js .mot-anim .mot.vu { color: var(--ink); }

/* ---- Apparitions au défilement ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
  html.js .reassurance-in [data-reveal]:nth-child(2) { transition-delay: .1s; }
  html.js .reassurance-in [data-reveal]:nth-child(3) { transition-delay: .2s; }
  html.js .points-grid [data-reveal]:nth-child(2), html.js .avis-grid [data-reveal]:nth-child(2) { transition-delay: .1s; }
  html.js .points-grid [data-reveal]:nth-child(3), html.js .avis-grid [data-reveal]:nth-child(3) { transition-delay: .2s; }
  html.js .points-grid [data-reveal]:nth-child(4) { transition-delay: .3s; }
  html.js .points-grid [data-reveal]:nth-child(5) { transition-delay: .4s; }
  html.js .points-grid [data-reveal]:nth-child(6) { transition-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .line > span { transform: none; animation: none; }
  .steps-line line { stroke-dashoffset: 0; }
  .btn, .autres a, .faq-item summary .ic { transition: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav > a:not(.btn) { padding: 10px 10px; font-size: .95rem; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .nav-toggle {
    display: grid; place-items: center; width: 48px; height: 48px;
    border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 999px;
  }
  .nav-toggle .ic { width: 30px; height: 30px; }
  .nav-toggle .ic-close, .nav-open .nav-toggle .ic-open { display: none; }
  .nav-open .nav-toggle .ic-close { display: block; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 12px var(--pad) 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s, visibility .3s;
  }
  .nav-open .nav { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav > a:not(.btn) { padding: 14px 16px; font-size: 1.05rem; }
  .btn-tel { margin: 8px 0 0; justify-content: center; }

  .chiffres-in { grid-template-columns: 1fr 1fr; }
  .chiffre:nth-child(3) { border-left: 0; }
  .chiffre:nth-child(n+3) { border-top: 1px solid var(--line); }
  .habitat-track { padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .habitat-track::-webkit-scrollbar { display: none; }
  .habitat-panneau { scroll-snap-align: center; }
  .avant-apres-cta { flex-direction: column; align-items: flex-start; }
  .compare-cadre { aspect-ratio: 4 / 3; }
  .compare-etq { bottom: auto; top: 14px; font-size: .8rem; padding: 6px 13px; }
  .compare-poignee span { width: 44px; height: 44px; }
  .hero-scene { min-height: auto; padding: 56px var(--pad) 40px; border-radius: 0 !important; transform: none !important; }
  .hero-img { object-position: 70% 50%; }
  .hero-preuves { gap: 8px 20px; }
  /* Mobile : la maison passe au-dessus du texte, qui descend d'autant */
  .hero-3d {
    right: 50%; transform: translateX(50%); top: 8px;
    width: min(94vw, 420px); height: 40vh; max-height: 340px;
  }
  .hero.a-3d .hero-scene { padding-top: calc(40vh + 24px); }
  .hero.a-3d .hero-media { background: radial-gradient(120% 70% at 50% 26%, #1b3d63 0%, var(--navy) 60%, #081a2e 100%); }
  .hero.a-3d .hero-voile {
    background:
      linear-gradient(0deg, rgba(8, 24, 44, .92) 0%, rgba(8, 24, 44, .7) 38%, rgba(8, 24, 44, .1) 62%, transparent 78%);
  }
  .reassurance-in { grid-template-columns: 1fr; }
  .reass-item + .reass-item { border-left: 0; border-top: 1px solid var(--line); }
  .reass-item { padding: 18px 0; }

  .stack-card { position: relative; top: auto; min-height: auto; border-radius: 0; box-shadow: none; }
  .stack-in { grid-template-columns: 1fr; padding: 48px 0; }
  .stack-media { order: -1; aspect-ratio: 4 / 3; max-height: none; }
  .stack-txt h3 { font-size: 1.8rem; }

  .showcase { min-height: auto; align-items: stretch; }
  .showcase-in { padding: 42vh 0 32px; }
  .showcase-media { inset: 0; }
  .process-in, .zone-in, .contact-in, .svc-hero-in, .pourquoi-in { grid-template-columns: 1fr; }
  .process-head { position: static; }
  .svc-hero-media { aspect-ratio: 16 / 10; max-height: none; }
  .avis-grid { grid-template-columns: 1fr; }
  .points-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .actu-grid { grid-template-columns: 1fr; }
  .actu-card-grande { grid-template-columns: 1fr; }
  .article-body { grid-template-columns: 1fr; }
  .article-side { position: static; }
  .article-media { aspect-ratio: 16 / 10; }
  .sec-head-row { flex-direction: column; align-items: flex-start; }

  .tel-flottant {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 52px; padding: 0 20px; border-radius: var(--r-btn);
    background: var(--orange-deep); color: #fff; border: 2px solid var(--ink); font-family: var(--font-body); font-weight: 700; text-decoration: none;
    box-shadow: 0 12px 30px -8px rgba(15, 43, 77, .5);
  }
  .tel-flottant .ic { width: 22px; height: 22px; }
  .site-footer { padding-bottom: 96px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .btn-lg { width: 100%; justify-content: center; }
  .hero-cta > span { flex-direction: column; }
  .points-grid { grid-template-columns: 1fr; }
  .autres { grid-template-columns: 1fr; }
  .chiffres-in { grid-template-columns: 1fr; }
  .chiffre + .chiffre { border-left: 0; border-top: 1px solid var(--line); }
  .steps { padding-left: 56px; }
  .step-n { left: -56px; width: 42px; height: 42px; }
  .steps-tuyau { left: 20px; }
  .step-raccord { left: -39px; top: 50px; }
  .showcase-in { padding-top: 36vh; }
}