/* GH Couvreur 94 — système visuel
   Matières du métier : ardoise (encre), zinc (gris bleuté), liteau (jaune des lattes),
   terre cuite (tuile mécanique). Pente de toit = motif structurel. */

:root {
  --ardoise: #1c2731;
  --ardoise-2: #26333f;
  --zinc: #7e8c97;
  --zinc-clair: #c9d1d7;
  --brume: #edf0f2;
  --blanc: #ffffff;
  --liteau: #f2b705;
  --liteau-fonce: #d39e00;
  --terre: #b8472a;
  --texte: #1c2731;
  --texte-doux: #4a5865;

  --f-titre: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pente: 7vw;            /* hauteur du faîtage des séparateurs */
  --max: 1240px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--liteau); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--liteau); color: var(--ardoise); padding: 10px 16px; z-index: 100; font-weight: 700; }
.skip:focus { top: 8px; }

/* ---------- Typo ---------- */
h1, h2, h3 { font-family: var(--f-titre); font-weight: 800; line-height: 0.95; letter-spacing: 0.005em; margin: 0 0 0.4em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 8.2vw, 6.6rem); }
h2 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
h3 { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--texte-doux); max-width: 60ch; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 1.2em; }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font: 700 1.02rem/1 var(--f-texte);
  text-decoration: none; border-radius: var(--r); border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-liteau { background: var(--liteau); color: var(--ardoise); }
.btn-liteau:hover { background: #ffc81f; }
.btn-ligne { border-color: currentColor; color: var(--blanc); background: transparent; }
.btn-ligne:hover { background: rgba(255,255,255,.1); }
.btn-ardoise { background: var(--ardoise); color: var(--blanc); }
.btn-ardoise:hover { background: var(--ardoise-2); }
.btn:active { transform: translateY(1px); }

/* ---------- Barre haute ---------- */
.topbar { background: var(--ardoise); color: var(--zinc-clair); font-size: .875rem; }
.topbar .wrap { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 38px; }
.topbar a { color: var(--blanc); text-decoration: none; font-weight: 600; }
.topbar .note { display: inline-flex; align-items: center; gap: 6px; }
.topbar .note b { color: var(--liteau); }
.stars { color: var(--liteau); letter-spacing: 1px; }
.topbar a, .topbar span { white-space: nowrap; }
@media (max-width: 1020px) { .topbar .horaires { display: none; } }
@media (max-width: 760px) { .topbar .tel-haut { display: none; } .topbar .wrap { justify-content: center; } }

/* ---------- En-tête ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--brume); }
.header .wrap { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.header a, .header button { white-space: nowrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ardoise); margin-right: auto; }
.logo img { display: block; height: 40px; width: auto; }
.footer .logo img { height: 50px; }
.logo span { font-family: var(--f-titre); font-weight: 800; font-size: 1.65rem; line-height: .85; white-space: nowrap; }
.logo small { display: block; font-family: var(--f-texte); font-weight: 600; font-size: .72rem; color: var(--texte-doux); letter-spacing: .02em; margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .nav .sub > button {
  font: 600 .98rem var(--f-texte); color: var(--ardoise); text-decoration: none;
  padding: 10px 12px; border-radius: var(--r); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav > a:hover, .nav .sub > button:hover, .nav [aria-current="page"] { background: var(--brume); }
.nav .sub { position: relative; }
.nav .sub > button svg { width: 12px; height: 12px; transition: transform .2s; }
.nav .sub[data-open] > button svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 8px); left: -12px; min-width: 300px;
  background: var(--blanc); border: 1px solid var(--brume); border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(28,39,49,.35); padding: 8px; display: none;
}
.sub[data-open] .menu { display: block; }
.menu a { display: block; padding: 10px 12px; border-radius: var(--r); text-decoration: none; font-weight: 600; }
.menu a span { display: block; font-weight: 400; font-size: .86rem; color: var(--texte-doux); }
.menu a:hover { background: var(--brume); }
.header .btn { min-height: 46px; padding: 0 18px; }
.burger { display: none; width: 48px; height: 48px; border: 0; background: var(--brume); border-radius: var(--r); cursor: pointer; }
.burger svg { width: 24px; height: 24px; }
.burger .x { display: none; }
.header[data-menu] .burger .x { display: block; }
.header[data-menu] .burger .trois { display: none; }

@media (max-width: 1240px) { .header .btn-tel { display: none; } }
@media (max-width: 1020px) {
  .nav, .header .btn-tel { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .header[data-menu] .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--blanc);
    padding: 12px var(--gouttiere) 24px; border-bottom: 1px solid var(--brume);
    max-height: calc(100dvh - 110px); overflow-y: auto; padding-bottom: 96px;
    box-shadow: 0 24px 40px -24px rgba(28,39,49,.4);
  }
  .header[data-menu] .menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 8px; min-width: 0; }
  .header[data-menu] .sub > button svg { display: none; }
  .header .btn-devis { display: none; }
}

/* ---------- Héro ---------- */
.hero {
  position: relative; color: var(--blanc); background: var(--ardoise);
  min-height: min(88vh, 860px); display: flex; align-items: flex-end;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pente)), 50% 100%, 0 calc(100% - var(--pente)));
  padding-bottom: calc(var(--pente) + 40px);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20,29,37,.92) 0%, rgba(20,29,37,.72) 38%, rgba(20,29,37,.1) 75%),
    linear-gradient(0deg, rgba(20,29,37,.7) 0%, rgba(20,29,37,0) 45%);
}
.hero .wrap { position: relative; padding-top: 120px; }
.hero h1 { max-width: 12ch; margin-bottom: .3em; }
.hero h1 .ligne2 { display: block; color: var(--zinc-clair); font-weight: 600; font-size: .5em; line-height: 1.05; margin-top: .25em; max-width: 22ch; }
.hero p { font-size: clamp(1.08rem, 1.5vw, 1.25rem); max-width: 50ch; color: #dfe5ea; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 26px; }
.preuve { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: .95rem; color: #dfe5ea; text-decoration: none; }
.preuve:hover { background: rgba(255,255,255,.14); }
.preuve .g { width: 22px; height: 22px; flex: none; }
.preuve b { color: var(--blanc); }

/* vidéo aérienne : le seul moment animé de la page */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-video.prete { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media (max-width: 760px) {
  .hero-video { display: none; }
  .hero { min-height: 0; --pente: 9vw; }
  .hero .wrap { padding-top: 64px; }
  .hero::before { background: linear-gradient(180deg, rgba(20,29,37,.55) 0%, rgba(20,29,37,.88) 55%, rgba(20,29,37,.96) 100%); }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { display: grid; gap: 8px 48px; grid-template-columns: 1fr; margin-bottom: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .section-head { grid-template-columns: 1.1fr 1fr; align-items: end; } .section-head .lead { margin-bottom: .5em; } }
.fond-brume { background: var(--brume); }
.fond-ardoise { background: var(--ardoise); color: var(--blanc); }
.fond-ardoise .lead { color: var(--zinc-clair); }
.pente-haut { clip-path: polygon(0 var(--pente), 50% 0, 100% var(--pente), 100% 100%, 0 100%); padding-top: calc(var(--pente) + clamp(48px, 7vw, 96px)); margin-top: calc(var(--pente) * -0.5); }

/* ---------- Diagnostic express (tuiles à joints croisés) ---------- */
.diag { position: relative; z-index: 2; margin-top: calc(var(--pente) * -0.2); }
.diag h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.tuiles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.tuile {
  grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 132px; padding: 18px 18px 16px; text-decoration: none;
  background: var(--blanc); border: 1px solid var(--zinc-clair); border-radius: var(--r);
  transition: border-color .15s, background-color .15s;
}
.tuile:nth-child(4) { grid-column: 2 / span 2; }
.tuile:hover { border-color: var(--ardoise); background: #fbfcfc; }
.tuile b { font-family: var(--f-titre); font-weight: 700; font-size: 1.55rem; line-height: 1; }
.tuile span { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; color: var(--texte-doux); }
.tuile svg { width: 22px; height: 22px; color: var(--terre); flex: none; }
@media (max-width: 900px) { .tuiles { grid-template-columns: 1fr 1fr; } .tuile, .tuile:nth-child(4) { grid-column: auto; min-height: 112px; } }
@media (max-width: 420px) { .tuile b { font-size: 1.3rem; } }

/* ---------- Services (rangs décalés) ---------- */
.rangs { display: grid; gap: clamp(28px, 4vw, 44px) 24px; grid-template-columns: repeat(12, 1fr); }
.svc { grid-column: span 4; text-decoration: none; display: flex; flex-direction: column; }
.svc:nth-child(1), .svc:nth-child(2), .rangs-7 .svc:nth-child(6), .rangs-7 .svc:nth-child(7) { grid-column: span 6; }
.svc .ph { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--zinc-clair); }
.svc:nth-child(1) .ph, .svc:nth-child(2) .ph { aspect-ratio: 16 / 9; }
.svc img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .svc img { transition: none; } .svc:hover img { transform: none; } }
.svc h3 { margin: 18px 0 8px; }
.svc p { color: var(--texte-doux); margin: 0 0 12px; max-width: 46ch; }
.svc .lien { margin-top: auto; font-weight: 700; text-decoration: underline; text-decoration-color: var(--liteau); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rangs-2 .svc:nth-child(n) { grid-column: span 6; }
.rangs-3 .svc:nth-child(n) { grid-column: span 4; }
.rangs-3 .svc .ph { aspect-ratio: 16 / 10; }
@media (max-width: 900px) { .rangs .svc:nth-child(n) { grid-column: span 6; } }
@media (max-width: 620px) { .rangs { grid-template-columns: 1fr; } .rangs .svc:nth-child(n) { grid-column: auto; } }

/* ---------- Avis ---------- */
.avis-grille { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.avis { margin: 0; padding: 28px 26px 24px; border-top: 4px solid var(--liteau); background: var(--ardoise-2); display: flex; flex-direction: column; }
.avis blockquote { margin: 0 0 22px; font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.05rem); line-height: 1.08; }
.avis figcaption { margin-top: auto; font-size: .92rem; color: var(--zinc-clair); }
.avis figcaption b { color: var(--blanc); display: block; font-size: 1rem; }
.avis-note { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.avis-note .gros { font-family: var(--f-titre); font-weight: 800; font-size: 4.2rem; line-height: .9; color: var(--liteau); }
.avis-note p { margin: 0; color: var(--zinc-clair); }
.avis-note a { color: var(--blanc); font-weight: 700; }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }

/* ---------- Étapes (vraie séquence) ---------- */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: e; border-top: 2px solid var(--ardoise); }
.etapes li { counter-increment: e; padding: 24px 24px 8px 0; position: relative; }
.etapes li + li { padding-left: 24px; border-left: 1px solid var(--zinc-clair); }
.etapes li::before { content: counter(e); display: block; font-family: var(--f-titre); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--terre); margin-bottom: 10px; }
.etapes h3 { font-size: 1.6rem; }
.etapes p { color: var(--texte-doux); margin: 0; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr 1fr; } .etapes li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } .etapes li, .etapes li + li { padding: 20px 0 8px; border-left: 0; border-top: 1px solid var(--zinc-clair); } .etapes li:first-child { border-top: 0; } }

/* ---------- Zones ---------- */
.zones { display: grid; gap: 40px; grid-template-columns: 1.1fr 1fr; align-items: center; }
.zones .ph { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.zones .ph img { width: 100%; height: 100%; object-fit: cover; }
.villes { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.villes a, .villes span { display: inline-block; padding: 8px 14px; border: 1px solid var(--zinc-clair); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; background: var(--blanc); }
.villes a { border-color: var(--ardoise); }
.villes a:hover { background: var(--ardoise); color: var(--blanc); }
@media (max-width: 900px) { .zones { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--zinc-clair); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 700; font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; border-right: 3px solid var(--ardoise); border-bottom: 3px solid var(--ardoise); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 22px; color: var(--texte-doux); max-width: 70ch; }

/* ---------- Formulaire devis ---------- */
.devis-grille { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr 1.25fr; align-items: start; }
@media (max-width: 960px) { .devis-grille { grid-template-columns: 1fr; } }
.contact-direct { display: grid; gap: 18px; margin-top: 28px; }
.contact-direct a { text-decoration: none; }
.contact-direct .tel { font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--liteau); }
.contact-direct dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; color: var(--zinc-clair); }
.contact-direct dt { font-weight: 700; color: var(--blanc); }
.contact-direct dd { margin: 0; }

.form { background: var(--blanc); color: var(--texte); border-radius: 6px; padding: clamp(22px, 3.5vw, 40px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.form h3 { font-size: 2rem; }
.champs { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.full { grid-column: 1 / -1; }
.champ label, .champ legend { font-weight: 700; font-size: .95rem; }
.champ label .opt { font-weight: 400; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1rem; color: var(--texte); width: 100%;
  min-height: 50px; padding: 12px 14px; border: 1.5px solid #aab5be; border-radius: var(--r); background: var(--blanc);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--ardoise); box-shadow: 0 0 0 3px rgba(242,183,5,.55); }
.champ [aria-invalid="true"] { border-color: var(--terre); }
.champ .err { color: var(--terre); font-size: .88rem; font-weight: 600; min-height: 0; }
fieldset.champ { border: 0; padding: 0; margin: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.radios label { position: relative; font-weight: 600; }
.radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid #aab5be; border-radius: 999px; cursor: pointer; }
.radios input:checked + span { background: var(--ardoise); border-color: var(--ardoise); color: var(--blanc); }
.radios input:focus-visible + span { outline: 3px solid var(--liteau); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--texte-doux); }
.consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--ardoise); }
.form .btn { width: 100%; margin-top: 8px; min-height: 58px; font-size: 1.08rem; }
.form .btn[disabled] { opacity: .65; cursor: progress; }
.form-note { font-size: .85rem; color: var(--texte-doux); margin: 12px 0 0; }
.form-statut { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); font-weight: 600; display: none; }
.form-statut[data-etat="ok"] { display: block; background: #e7f4ea; color: #1d5b2c; }
.form-statut[data-etat="erreur"] { display: block; background: #fbeae5; color: #8a2f18; }
.hp { position: absolute; left: -5000px; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }

/* ---------- Pages intérieures ---------- */
.fil { font-size: .9rem; color: var(--zinc-clair); margin-bottom: 18px; }
.fil ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fil li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.fil a { color: var(--blanc); }
.page-hero { background: var(--ardoise); color: var(--blanc); padding: 56px 0 calc(var(--pente) + 48px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pente)), 50% 100%, 0 calc(100% - var(--pente))); }
.page-hero .wrap { display: grid; gap: 40px; grid-template-columns: 1.05fr 1fr; align-items: center; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.page-hero .lead { color: #dfe5ea; }
.page-hero .ph { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.page-hero .ph img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-cta { margin-bottom: 0; }
@media (max-width: 900px) { .page-hero { padding-top: 32px; } .page-hero .wrap { grid-template-columns: 1fr; gap: 28px; } .page-hero .ph { aspect-ratio: 16 / 9; } }

.contenu { display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.aside { position: sticky; top: 100px; border: 1px solid var(--zinc-clair); border-radius: 6px; padding: 24px; }
.aside h2 { font-size: 1.9rem; }
.aside p { color: var(--texte-doux); font-size: .97rem; }
.aside .btn { width: 100%; margin-top: 10px; }
.aside .tel-gros { display: block; font-family: var(--f-titre); font-weight: 800; font-size: 2rem; text-decoration: none; margin-top: 6px; }
@media (max-width: 960px) { .contenu { grid-template-columns: 1fr; } .aside { position: static; } }

.signes { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.signes li { padding: 14px 16px 14px 44px; background: var(--brume); border-radius: var(--r); position: relative; margin: 0; }
.signes li::before { content: ""; position: absolute; left: 16px; top: 22px; width: 14px; height: 8px; border-left: 3px solid var(--terre); border-bottom: 3px solid var(--terre); transform: rotate(-45deg); }
@media (max-width: 620px) { .signes { grid-template-columns: 1fr; } }
.etapes-liste { counter-reset: s; list-style: none; padding: 0; }
.etapes-liste li { counter-increment: s; padding-left: 56px; position: relative; margin-bottom: 18px; }
.etapes-liste li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--ardoise); color: var(--liteau); font-family: var(--f-titre); font-weight: 800; font-size: 1.3rem; border-radius: var(--r); }
.liens-services { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); list-style: none; padding: 0; }
.liens-services a { display: block; padding: 16px 18px; border: 1px solid var(--zinc-clair); border-radius: var(--r); text-decoration: none; font-weight: 700; }
.liens-services a:hover { border-color: var(--ardoise); background: var(--brume); }
.encart { border-left: 4px solid var(--liteau); background: var(--brume); padding: 18px 22px; margin: 28px 0; }
.encart p:last-child { margin: 0; }

/* ---------- Pied de page ---------- */
.footer { background: #141d25; color: var(--zinc-clair); padding: 72px 0 110px; font-size: .95rem; }
.footer .grille { display: grid; gap: 40px; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.footer h2 { font-size: 1.5rem; color: var(--blanc); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { color: var(--zinc-clair); text-decoration: none; }
.footer a:hover { color: var(--blanc); text-decoration: underline; }
.footer .logo { color: var(--blanc); margin-bottom: 16px; }
.footer .logo small { color: var(--zinc-clair); }
.footer .bas { border-top: 1px solid #2c3a46; margin-top: 48px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; }
@media (max-width: 900px) { .footer .grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .grille { grid-template-columns: 1fr; } }
@media (min-width: 1021px) { .footer { padding-bottom: 48px; } }

/* ---------- Barre d'action mobile ---------- */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(20,29,37,.97); }
.barre-mobile .btn { flex: 1; min-height: 50px; padding: 0 12px; }
@media (max-width: 1020px) { .barre-mobile { display: flex; } }

.nowrap { white-space: nowrap; }

/* ---------- Garanties sous le héro ---------- */
.garanties { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #dfe5ea; font-size: .95rem; }
.garanties li { display: inline-flex; align-items: center; gap: 8px; }
.garanties li + li::before { content: ""; width: 6px; height: 6px; background: var(--liteau); transform: rotate(45deg); margin-right: 6px; }
.garanties a { color: inherit; text-decoration: none; }
.garanties a:hover { text-decoration: underline; }
.garanties b { color: var(--blanc); }

/* ---------- Méthode ---------- */
.methode { display: grid; gap: 32px 56px; grid-template-columns: .9fr 1.1fr; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.methode .ph { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.methode .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
@media (max-width: 900px) { .methode { grid-template-columns: 1fr; } }

/* ---------- Urgence ---------- */
.urgence { background: var(--liteau); color: var(--ardoise); padding: 36px 0; }
.urgence .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.urgence h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 6px; }
.urgence p { margin: 0; max-width: 56ch; font-weight: 600; }
.urgence .btn { min-height: 58px; font-size: 1.1rem; }
.avis-source { margin: 28px 0 0; max-width: 72ch; font-size: .9rem; color: var(--zinc-clair); }

/* ---------- Effets 3D ---------- */
/* 1. Cartes et tuiles qui s'inclinent sous le pointeur (souris uniquement) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rangs, .tuiles { perspective: 1100px; }
  .js .svc, .js .tuile { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; will-change: transform; }
  .js .svc.incline, .js .tuile.incline { transition-duration: .08s; }
  .js .svc:hover { box-shadow: 0 30px 50px -30px rgba(28,39,49,.45); }
  .js .svc .ph { transform: translateZ(30px); }
  .js .svc h3 { transform: translateZ(18px); }
  .js .tuile b { transform: translateZ(24px); }
}
/* 2. Pose des rangs : les étapes et avis basculent en place comme des tuiles posées, une seule fois */
@media (prefers-reduced-motion: no-preference) {
  .js .pose3d { perspective: 1000px; }
  .js .pose3d > * { transform-origin: 50% 0; transform: rotateX(-75deg) translateY(-12px); opacity: 0; transition: transform .8s cubic-bezier(.2,.75,.25,1), opacity .5s ease; }
  .js .pose3d.vu > * { transform: none; opacity: 1; }
  .js .pose3d.vu > *:nth-child(2) { transition-delay: .12s; }
  .js .pose3d.vu > *:nth-child(3) { transition-delay: .24s; }
  .js .pose3d.vu > *:nth-child(4) { transition-delay: .36s; }
  .js .pose3d.vu > *:nth-child(5) { transition-delay: .48s; }
  .js .pose3d.vu > *:nth-child(6) { transition-delay: .6s; }
}
/* 3. Héro : le titre se redresse au chargement */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: leve .9s cubic-bezier(.2,.75,.25,1) both; }
  .hero p, .hero-cta, .garanties { animation: leve .9s .15s cubic-bezier(.2,.75,.25,1) both; }
  @keyframes leve { from { opacity: 0; transform: perspective(900px) rotateX(35deg) translateY(30px); transform-origin: 50% 100%; } }
}

/* ---------- Scène 3D : la toiture montée couche par couche ---------- */
.chantier3d { --p: 1; background: linear-gradient(180deg, #eef1f3 0%, #dfe5ea 100%); position: relative; }
.js .chantier3d { height: 420vh; --p: 0; }
.c3d-colle { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 96px 0 48px; }
.c3d-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.c3d-etapes { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 6px; counter-reset: c; }
.c3d-etapes li { counter-increment: c; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 10px 12px; border-radius: var(--r); opacity: .38; transition: opacity .3s, background-color .3s; }
.c3d-etapes li::before { content: attr(data-n); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ardoise); color: var(--liteau); font: 800 1.1rem var(--f-titre); border-radius: var(--r); }
.c3d-etapes b { font-size: 1.05rem; }
.c3d-etapes span { color: var(--texte-doux); font-size: .95rem; }
.c3d-etapes li.actif { opacity: 1; background: rgba(255,255,255,.75); }
.c3d-etapes li.fait { opacity: .8; }
.js .c3d-etapes li:not(.actif) span { display: none; }
.c3d-etapes li:not(.actif)::before { grid-row: auto; }
.c3d-texte h2 { font-size: clamp(2rem, 4vw, 3.4rem); }

.c3d-scene { perspective: 1500px; perspective-origin: 50% 30%; height: 520px; display: grid; place-items: center; }
.c3d-maison { --W: 380px; --D: 190px; --H: 150px; position: relative; width: var(--W); height: 1px; transform-style: preserve-3d;
  transform: translateY(-110px) rotateX(calc(-24deg + var(--p) * 6deg)) rotateY(calc(-48deg + var(--p) * 78deg)); }
.c3d-toit { position: absolute; inset: 0; transform-style: preserve-3d; }
.c3d-pan { position: absolute; left: 0; top: 0; width: var(--W); height: var(--D); transform-origin: 50% 0; transform-style: preserve-3d; }
.c3d-avant { transform: rotateX(52deg); }
.c3d-arriere { transform: rotateY(180deg) rotateX(52deg); }
.c3d-pan > div { position: absolute; inset: 0; transform-style: preserve-3d; }
.c3d-chevrons { background: repeating-linear-gradient(90deg, transparent 0 34px, #a8743f 34px 46px); }
.c3d-ecran { background: #22272b; transform: translateZ(2px); opacity: calc((var(--p) - .16) * 8); }
.c3d-liteaux { background: repeating-linear-gradient(180deg, transparent 0 17px, var(--liteau) 17px 22px); transform: translateZ(4px); opacity: calc((var(--p) - .34) * 8); }
.c3d-tuiles { transform: translateZ(6px); }
.c3d-tuiles i { position: absolute; left: -4px; right: -4px; height: calc(var(--D) / 8 + 6px); top: calc((7 - var(--r)) * var(--D) / 8 - 3px);
  background: linear-gradient(180deg, #cf6a40 0%, #b8472a 55%, #8e3219 100%), #b8472a;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 24px, rgba(0,0,0,.82) 24px 26px); mask: repeating-linear-gradient(90deg, #000 0 24px, rgba(0,0,0,.82) 24px 26px);
  box-shadow: 0 -3px 0 rgba(0,0,0,.18) inset;
  --t: clamp(0, calc((var(--p) - .5 - var(--r) * .035) * 12), 1);
  opacity: var(--t); transform: translateZ(calc((1 - var(--t)) * 70px)) translateY(calc((1 - var(--t)) * -26px)); }
.c3d-faitage { position: absolute; left: -6px; top: -7px; width: calc(var(--W) + 12px); height: 14px; background: #8e3219; border-radius: 7px;
  transform: rotateX(90deg); opacity: calc((var(--p) - .84) * 10); }
.c3d-gouttiere { position: absolute; left: -8px; width: calc(var(--W) + 16px); height: 12px; background: linear-gradient(#b9c3cb, #7e8c97); border-radius: 0 0 8px 8px;
  top: calc(var(--D) * .616); opacity: calc((var(--p) - .88) * 10); }
.c3d-g-avant { transform: translateZ(calc(var(--D) * .788 + 6px)); }
.c3d-g-arriere { transform: translateZ(calc(var(--D) * -.788 - 6px)); }
.c3d-mur { position: absolute; left: 0; width: var(--W); height: var(--H); top: calc(var(--D) * .616);
  background: linear-gradient(180deg, #ece6da, #d9d1c2); }
.c3d-mur::after { content: ""; position: absolute; left: 14%; top: 26%; width: 18%; height: 42%; background: #2a3640; box-shadow: calc(var(--W) * .34) 0 0 #2a3640, calc(var(--W) * .5) 0 0 #2a3640; border: 4px solid #f4f1ea; }
.c3d-m-avant { transform: translateZ(calc(var(--D) * .788)); }
.c3d-m-arriere { transform: translateZ(calc(var(--D) * -.788)) rotateY(180deg); }
.c3d-pignon { position: absolute; top: 0; width: calc(var(--D) * 1.576); left: calc(var(--D) * -.788); height: calc(var(--D) * .616 + var(--H));
  background: linear-gradient(180deg, #e3dccd, #cfc6b4);
  clip-path: polygon(50% 0, 100% calc(var(--D) * .616), 100% 100%, 0 100%, 0 calc(var(--D) * .616)); }
.c3d-p-gauche { transform: rotateY(90deg); }
.c3d-p-droit { left: calc(var(--W) - var(--D) * .788); transform: rotateY(90deg); filter: brightness(.86); }
.c3d-sol { position: absolute; left: -40%; top: calc(var(--D) * .616 + var(--H)); width: 180%; height: 600px; transform: rotateX(90deg); transform-origin: 50% 0;
  background: radial-gradient(closest-side, rgba(28,39,49,.28), transparent); }

@media (max-width: 900px) {
  .js .chantier3d { height: 380vh; }
  .c3d-colle { padding: 72px 0 24px; align-items: flex-start; }
  .c3d-grille { grid-template-columns: 1fr; gap: 0; }
  .c3d-texte .lead { display: none; }
  .c3d-etapes { margin-top: 12px; }
  .c3d-etapes li { display: none; }
  .c3d-etapes li.actif { display: grid; }
  .c3d-scene { height: 380px; order: 2; }
  .c3d-maison { --W: 250px; --D: 125px; --H: 100px; transform: translateY(-80px) rotateX(calc(-24deg + var(--p) * 6deg)) rotateY(calc(-48deg + var(--p) * 78deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .chantier3d { height: auto; --p: 1; }
  .c3d-colle { position: static; }
  .c3d-etapes li, .c3d-etapes li.actif { display: grid; opacity: 1; background: none; }
  .c3d-texte .lead { display: block; }
}

/* ---------- Profondeur du héro sous la souris ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-media { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) scale(1.06); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .hero .wrap { transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
}