/* ==================================================================
   Terrassier Dijon — feuille de style du site (famille « Vitrine »)
   Direction : magazine premium, terre de Bourgogne. Encre chaude
   presque noire + blanc cassé, un seul accent ocre #c0872e. Police
   Sora variable (contraste 200 / 800), hero photo plein écran,
   grilles asymétriques, filets fins, chiffres géants en marge.
   Nommage propre au site : préfixe .dj- (hyphené). Écrit from scratch.
   ================================================================== */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --encre: #17130d;
  --nuit: #100c07;
  --brun: #4a4238;
  --gres: #857b6d;
  --creme: #f5f1e8;
  --sable: #efe8da;
  --filet: #e4dccd;
  --filet-sombre: #322c22;
  --ocre: #c0872e;
  --ocre-fonce: #9a681e;
  --blanc: #fffdf8;
  --vert: #4d6a3a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 400 16.5px/1.72 "Sora", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--brun);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ocre-fonce); }
[id] { scroll-margin-top: 96px; }
main { display: flex; flex-direction: column; }
.dj-seo { order: 99; }

/* ---------- Ossature ---------- */
.dj-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 34px; }
.dj-band { padding: 104px 0; }
.dj-band-tight { padding: 66px 0; }
.dj-band-creme { background: var(--creme); }
.dj-band-sable { background: var(--sable); }
.dj-band-nuit { background: var(--nuit); color: #cbc2b3; }

/* ---------- Typographie éditoriale ---------- */
.dj-eyebrow {
  display: inline-flex; align-items: center; gap: 15px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ocre-fonce);
}
.dj-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--ocre); }
.dj-band-nuit .dj-eyebrow { color: var(--ocre); }
.dj-h2 {
  font-size: clamp(1.95rem, 4.3vw, 3.3rem); font-weight: 200; line-height: 1.09;
  letter-spacing: -0.02em; color: var(--encre); margin: 18px 0 0;
}
.dj-h2 strong { font-weight: 800; }
.dj-band-nuit .dj-h2 { color: #fdfaf4; }
.dj-section-intro { max-width: 60ch; margin-top: 22px; color: var(--gres); font-size: 1.02rem; }
.dj-band-nuit .dj-section-intro { color: #b3a998; }

/* ---------- Boutons ---------- */
.dj-btn, .dj-btn-clair, .dj-btn-ocre, .dj-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 40px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; text-decoration: none; border: none; cursor: pointer;
  font-family: inherit; transition: background 0.2s, color 0.2s, letter-spacing 0.25s, border-color 0.2s;
}
.dj-btn { background: var(--encre); color: #fff; }
.dj-btn:hover { background: var(--ocre); letter-spacing: 0.28em; }
.dj-btn-ocre { background: var(--ocre); color: #fff; }
.dj-btn-ocre:hover { background: var(--encre); letter-spacing: 0.28em; }
.dj-btn-clair { background: #fff; color: var(--encre); }
.dj-btn-clair:hover { background: var(--ocre); color: #fff; letter-spacing: 0.28em; }
.dj-btn-ghost { background: transparent; color: var(--encre); border: 1px solid var(--filet); }
.dj-btn-ghost:hover { border-color: var(--encre); background: var(--encre); color: #fff; }
.dj-appel {
  display: inline-flex; align-items: center; gap: 11px; color: inherit;
  text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
}
.dj-appel svg { width: 1em; height: 1em; color: var(--ocre); flex-shrink: 0; }
.dj-appel small {
  display: block; font-weight: 400; font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gres);
}
.dj-champ-web { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Header transparent → plein ---------- */
.dj-tete { position: fixed; top: 0; left: 0; right: 0; z-index: 400; transition: background 0.3s, box-shadow 0.3s; }
.dj-tete-rang {
  max-width: 1320px; margin: 0 auto; padding: 20px 38px; display: flex; align-items: center; gap: 38px;
  border-bottom: 1px solid rgba(255,255,255,0.16); transition: padding 0.3s, border-color 0.3s;
}
.dj-logo { text-decoration: none; color: #fff; line-height: 1.15; display: inline-flex; align-items: center; gap: 12px; transition: color 0.3s; }
.dj-logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.dj-logo b { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; display: block; }
.dj-logo span { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ocre); }
.dj-menu { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.dj-menu > a, .dj-nav-groupe > button {
  color: rgba(255,255,255,0.86); background: transparent; border: none; cursor: pointer; font-family: inherit;
  text-decoration: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; display: inline-flex; align-items: center; gap: 7px;
}
.dj-menu > a:hover, .dj-nav-groupe > button:hover { color: #fff; border-bottom-color: var(--ocre); }
.dj-nav-groupe { position: relative; }
.dj-nav-tiroir {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--blanc); min-width: 260px; padding: 12px; box-shadow: 0 24px 60px -30px rgba(23,19,13,0.55);
  border: 1px solid var(--filet); opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s; z-index: 20;
  columns: 1; display: grid; grid-template-columns: 1fr;
}
.dj-nav-tiroir.large { min-width: 460px; grid-template-columns: 1fr 1fr; }
.dj-nav-groupe:hover .dj-nav-tiroir, .dj-nav-groupe:focus-within .dj-nav-tiroir { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }
.dj-nav-tiroir a {
  display: block; padding: 9px 12px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: none; color: var(--encre); text-decoration: none; border-bottom: none;
}
.dj-nav-tiroir a:hover { background: var(--creme); color: var(--ocre-fonce); }
.dj-tel-tete { color: #fff; text-decoration: none; font-weight: 800; font-size: 1rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s; }
.dj-tel-tete svg { width: 0.95em; height: 0.95em; color: var(--ocre); }
.dj-tel-tete:hover { color: var(--ocre); }
.dj-cta-tete {
  border: 1px solid rgba(255,255,255,0.5); color: #fff; background: transparent; padding: 12px 24px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
  font-family: inherit; white-space: nowrap; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dj-cta-tete:hover { background: var(--ocre); border-color: var(--ocre); }
.dj-burger { display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 6px; width: 46px; height: 44px; padding: 0 11px; background: transparent; border: 1px solid rgba(255,255,255,0.5); cursor: pointer; }
.dj-burger i { display: block; height: 1.5px; background: #fff; transition: transform 0.25s, opacity 0.25s, background 0.3s; }
.dj-tete.pleine { background: rgba(255,253,248,0.97); backdrop-filter: blur(9px); box-shadow: 0 14px 34px -26px rgba(23,19,13,0.45); }
.dj-tete.pleine .dj-tete-rang { padding-top: 13px; padding-bottom: 13px; border-bottom-color: var(--filet); }
.dj-tete.pleine .dj-logo { color: var(--encre); }
.dj-tete.pleine .dj-menu > a, .dj-tete.pleine .dj-nav-groupe > button { color: var(--brun); }
.dj-tete.pleine .dj-menu > a:hover, .dj-tete.pleine .dj-nav-groupe > button:hover { color: var(--encre); border-bottom-color: var(--ocre); }
.dj-tete.pleine .dj-tel-tete { color: var(--encre); }
.dj-tete.pleine .dj-tel-tete:hover { color: var(--ocre-fonce); }
.dj-tete.pleine .dj-cta-tete { background: var(--encre); border-color: var(--encre); }
.dj-tete.pleine .dj-cta-tete:hover { background: var(--ocre); border-color: var(--ocre); }
.dj-tete.pleine .dj-burger { border-color: var(--encre); }
.dj-tete.pleine .dj-burger i { background: var(--encre); }
/* Header opaque d'emblée pour les pages à hero clair */
.dj-tete.fixe { position: sticky; background: rgba(255,253,248,0.98); backdrop-filter: blur(9px); border-bottom: 1px solid var(--filet); }
.dj-tete.fixe .dj-tete-rang { border-bottom: none; }
.dj-tete.fixe .dj-logo { color: var(--encre); }
.dj-tete.fixe .dj-menu > a, .dj-tete.fixe .dj-nav-groupe > button { color: var(--brun); }
.dj-tete.fixe .dj-menu > a:hover, .dj-tete.fixe .dj-nav-groupe > button:hover { color: var(--encre); border-bottom-color: var(--ocre); }
.dj-tete.fixe .dj-tel-tete { color: var(--encre); }
.dj-tete.fixe .dj-cta-tete { background: var(--encre); border-color: var(--encre); color: #fff; }
.dj-tete.fixe .dj-cta-tete:hover { background: var(--ocre); border-color: var(--ocre); }
.dj-tete.fixe .dj-burger { border-color: var(--encre); }
.dj-tete.fixe .dj-burger i { background: var(--encre); }
/* Menu mobile plein écran */
body.nav-ouverte { overflow: hidden; }
body.nav-ouverte .dj-menu {
  display: flex; position: fixed; inset: 0; z-index: 380; flex-direction: column; justify-content: center;
  align-items: center; gap: 26px; background: rgba(16,12,7,0.98); margin: 0; padding: 40px; overflow-y: auto;
}
body.nav-ouverte .dj-menu > a, body.nav-ouverte .dj-nav-groupe > button { color: #fff; font-size: 0.92rem; letter-spacing: 0.26em; }
body.nav-ouverte .dj-nav-tiroir { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; border: none; box-shadow: none; padding: 4px 0 0; min-width: 0; grid-template-columns: 1fr; text-align: center; }
body.nav-ouverte .dj-nav-tiroir.large { min-width: 0; grid-template-columns: 1fr; }
body.nav-ouverte .dj-nav-tiroir a { color: rgba(255,255,255,0.72); padding: 6px; }
body.nav-ouverte .dj-tel-tete { color: #fff; font-size: 1.25rem; }
body.nav-ouverte .dj-burger { position: fixed; top: 22px; right: 24px; z-index: 390; border-color: rgba(255,255,255,0.6); }
body.nav-ouverte .dj-burger i { background: #fff; }
body.nav-ouverte .dj-burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-ouverte .dj-burger i:nth-child(2) { opacity: 0; }
body.nav-ouverte .dj-burger i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero accueil : photo plein écran ---------- */
.dj-panorama {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background:
    linear-gradient(to bottom, rgba(15,11,6,0.58) 0%, rgba(15,11,6,0.14) 42%, rgba(15,11,6,0.74) 100%),
    linear-gradient(100deg, rgba(15,11,6,0.5) 0%, rgba(15,11,6,0.08) 60%),
    url("/images/hero-terrassement-dijon.webp") center / cover no-repeat;
  color: #fff; padding: 168px 0 0;
}
.dj-panorama-corps { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 34px 78px; }
.dj-panorama .dj-eyebrow { color: var(--ocre); }
.dj-panorama h1 {
  font-size: clamp(2.5rem, 6.8vw, 5.1rem); font-weight: 200; line-height: 1.03; letter-spacing: -0.03em;
  max-width: 16ch; margin: 24px 0 26px; color: #fff;
}
.dj-panorama h1 strong { font-weight: 800; }
.dj-panorama .dj-sous-titre { font-size: 1.1rem; font-weight: 300; color: rgba(255,255,255,0.86); max-width: 54ch; margin-bottom: 38px; }
.dj-panorama-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.dj-panorama-actions .dj-appel { color: #fff; }
.dj-panorama-pied { border-top: 1px solid rgba(255,255,255,0.2); }
.dj-panorama-pied-rang {
  max-width: 1180px; margin: 0 auto; padding: 20px 34px; display: flex; align-items: center; gap: 38px; flex-wrap: wrap;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.64);
}
.dj-panorama-pied-rang b { color: #fff; font-weight: 800; font-size: 1.12rem; letter-spacing: 0; margin-right: 9px; }
.dj-panorama-pied-rang .dj-etoiles { color: var(--ocre); letter-spacing: 3px; font-size: 0.92rem; margin-right: 8px; }

/* ---------- Hero pages villes (clair, centré, sans formulaire) ---------- */
.dj-hero-ville { background: linear-gradient(180deg, var(--creme) 0%, var(--blanc) 100%); padding: 150px 0 82px; text-align: center; }
.dj-hero-ville .dj-eyebrow { justify-content: center; }
.dj-hero-ville h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 200; letter-spacing: -0.025em; line-height: 1.08; color: var(--encre); margin: 20px auto 0; max-width: 20ch; }
.dj-hero-ville h1 strong { font-weight: 800; }
.dj-hero-ville .dj-hero-intro { max-width: 62ch; margin: 24px auto 32px; font-size: 1.06rem; color: var(--brun); }
.dj-hero-ville-actions { display: inline-flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.dj-hero-badges { display: flex; gap: 12px 22px; flex-wrap: wrap; justify-content: center; margin-top: 34px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gres); }
.dj-hero-badges span { display: inline-flex; align-items: center; gap: 8px; }
.dj-hero-badges span::before { content: "◆"; color: var(--ocre); font-size: 0.7em; }

/* ---------- Hero pages prestations (sombre, 2 colonnes + visuel) ---------- */
.dj-hero-presta { background: linear-gradient(120deg, var(--nuit) 0%, #241c12 100%); color: #e9e1d3; padding: 152px 0 78px; }
.dj-hero-presta-grille { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }
.dj-hero-presta .dj-eyebrow { color: var(--ocre); }
.dj-hero-presta h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 200; letter-spacing: -0.025em; line-height: 1.08; color: #fff; margin: 20px 0 0; }
.dj-hero-presta h1 strong { font-weight: 800; }
.dj-hero-presta .dj-hero-intro { max-width: 54ch; margin: 22px 0 30px; color: rgba(255,255,255,0.82); font-weight: 300; }
.dj-hero-presta-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.dj-hero-presta-actions .dj-appel { color: #fff; }
.dj-hero-presta-visuel { position: relative; border: 1px solid var(--filet-sombre); background: rgba(255,255,255,0.04); padding: 14px; }
.dj-hero-presta-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Bande de réassurance (villes / prestations) ---------- */
.dj-reassure { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.dj-reassure-rang { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; padding: 26px 0; }
.dj-reassure-item { display: flex; flex-direction: column; gap: 3px; }
.dj-reassure-item b { font-size: 1.55rem; font-weight: 200; color: var(--encre); letter-spacing: -0.02em; }
.dj-reassure-item b em { font-style: normal; font-weight: 800; color: var(--ocre-fonce); }
.dj-reassure-item span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gres); }

/* ---------- Intro éditoriale : chiffres géants en marge ---------- */
.dj-intro-grille { display: grid; grid-template-columns: 0.85fr 1.65fr; gap: 76px; align-items: start; }
.dj-marge-chiffres { border-right: 1px solid var(--filet); padding-right: 52px; }
.dj-chiffre { padding: 28px 0; }
.dj-chiffre + .dj-chiffre { border-top: 1px solid var(--filet); }
.dj-chiffre b { display: block; font-size: clamp(3.2rem, 5.6vw, 4.9rem); font-weight: 200; line-height: 0.95; letter-spacing: -0.04em; color: var(--encre); }
.dj-chiffre b em { font-style: normal; font-weight: 800; color: var(--ocre); }
.dj-chiffre span { display: block; margin-top: 9px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gres); }
.dj-chiffre:first-child { margin-left: -30px; padding-top: 0; }   /* rupture de symétrie n°1 */
.dj-edito { max-width: 60ch; }
.dj-grand-paragraphe { font-size: clamp(1.22rem, 2.1vw, 1.62rem); font-weight: 300; line-height: 1.5; color: var(--encre); margin: 24px 0 26px; }
.dj-grand-paragraphe strong { font-weight: 700; color: var(--ocre-fonce); }
.dj-edito p:not(.dj-grand-paragraphe) { color: var(--gres); margin-bottom: 1.15rem; font-size: 0.99rem; }
.dj-signature { margin-top: 32px; display: flex; align-items: center; gap: 17px; }
.dj-signature img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; filter: grayscale(22%); }
.dj-signature strong { display: block; color: var(--encre); font-weight: 700; font-size: 0.94rem; }
.dj-signature span { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gres); }

/* ---------- Prestations : grille de cartes avec checklist ---------- */
.dj-services-tete { max-width: 640px; margin-bottom: 56px; }
.dj-services-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 34px; }
.dj-geste { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); }
.dj-band-creme .dj-geste { background: #fff; }
.dj-geste-visuel { position: relative; overflow: hidden; }
.dj-geste-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.dj-geste:hover .dj-geste-visuel img { transform: scale(1.04); }
.dj-geste-prix { position: absolute; left: 0; bottom: 0; background: var(--encre); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 16px; }
.dj-geste-prix b { color: var(--ocre); font-weight: 800; }
.dj-geste-corps { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; text-align: left; }
.dj-geste-corps h3 { font-size: 1.24rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.dj-geste-corps h3 a { color: var(--encre); text-decoration: none; transition: color 0.2s; }
.dj-geste-corps h3 a:hover { color: var(--ocre-fonce); }
.dj-geste-corps p { font-size: 0.93rem; color: var(--gres); margin-top: 10px; }
.dj-incl { list-style: none; margin-top: 16px; border-top: 1px solid var(--filet); padding-top: 14px; }
.dj-incl li { position: relative; padding-left: 24px; font-size: 0.86rem; color: var(--brun); margin-top: 8px; }
.dj-incl li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--ocre); border-bottom: 2px solid var(--ocre); transform: rotate(-45deg); }

/* ---------- Pourquoi nous choisir ---------- */
.dj-pourquoi-grille { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px; align-items: stretch; margin-top: 48px; }
.dj-atout { padding: 26px 0; border-top: 1px solid var(--filet); display: grid; grid-template-columns: auto 1fr; gap: 22px; text-align: left; }
.dj-atout:first-child { border-top: none; padding-top: 0; }
.dj-atout-ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ocre); color: var(--ocre-fonce); }
.dj-atout-ico svg { width: 24px; height: 24px; }
.dj-atout h3 { font-size: 1.08rem; font-weight: 800; color: var(--encre); letter-spacing: -0.01em; }
.dj-atout p { font-size: 0.93rem; color: var(--gres); margin-top: 6px; }
.dj-carre { background: linear-gradient(150deg, var(--encre) 0%, #2a2115 100%); color: #efe7d8; padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.dj-carre-ligne { padding: 18px 0; border-bottom: 1px solid var(--filet-sombre); }
.dj-carre-ligne:first-child { padding-top: 0; }
.dj-carre-ligne b { display: block; font-size: 2.1rem; font-weight: 200; letter-spacing: -0.03em; color: #fff; }
.dj-carre-ligne b em { font-style: normal; font-weight: 800; color: var(--ocre); }
.dj-carre-ligne span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #b3a998; }
.dj-carre .dj-etoiles { color: var(--ocre); letter-spacing: 2px; }
.dj-carre .dj-btn-ocre { margin-top: 26px; width: 100%; }

/* ---------- Avis : carrousel horizontal ---------- */
.dj-avis-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 46px; }
.dj-avis-note { display: flex; align-items: baseline; gap: 15px; margin-top: 16px; }
.dj-avis-note b { font-size: clamp(2.8rem, 4.8vw, 4.1rem); font-weight: 200; letter-spacing: -0.04em; color: var(--encre); line-height: 1; }
.dj-avis-note b em { font-style: normal; font-weight: 800; }
.dj-avis-detail { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gres); line-height: 1.8; }
.dj-avis-detail .dj-etoiles { color: var(--ocre); letter-spacing: 3px; display: block; font-size: 0.95rem; }
.dj-fleches { display: flex; gap: 10px; }
.dj-fleches button { width: 52px; height: 52px; background: transparent; border: 1px solid var(--filet); color: var(--encre); font-size: 1.1rem; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.dj-fleches button:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.dj-ruban { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 6px; }
.dj-ruban::-webkit-scrollbar { display: none; }
.dj-temoin { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; border-top: 2px solid var(--encre); padding-top: 26px; display: flex; flex-direction: column; text-align: left; }
.dj-temoin .dj-etoiles { color: var(--ocre); letter-spacing: 3px; font-size: 0.88rem; margin-bottom: 14px; }
.dj-temoin blockquote { font-size: 1rem; font-weight: 300; line-height: 1.62; color: var(--encre); flex: 1; }
.dj-temoin blockquote strong { font-weight: 600; }
.dj-temoin figcaption { margin-top: 20px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gres); }
.dj-temoin figcaption strong { color: var(--encre); font-weight: 700; letter-spacing: 0.12em; }

/* ---------- Prix : liste épurée entre filets ---------- */
.dj-prix-grille { display: grid; grid-template-columns: 1fr 1.7fr; gap: 76px; align-items: start; }
.dj-prix-intro { position: sticky; top: 118px; }
.dj-prix-intro .dj-btn { margin-top: 28px; }
.dj-tarifs { list-style: none; }
.dj-tarifs > li { border-bottom: 1px solid var(--filet); padding: 24px 0; display: grid; grid-template-columns: 1fr auto; gap: 5px 40px; align-items: baseline; }
.dj-tarifs > li:first-child { border-top: 1px solid var(--filet); }
.dj-tarifs h3 { font-size: 1.06rem; font-weight: 700; color: var(--encre); letter-spacing: -0.01em; }
.dj-tarifs .dj-montant { font-size: 1.12rem; font-weight: 200; color: var(--encre); white-space: nowrap; text-align: right; }
.dj-tarifs .dj-montant b { font-weight: 800; color: var(--ocre-fonce); }
.dj-tarifs p { grid-column: 1 / 2; font-size: 0.88rem; color: var(--gres); margin-top: 2px; }
.dj-mention { margin-top: 20px; font-size: 0.78rem; color: var(--gres); }

/* Tableau de prix (pages prestations + blog) */
.dj-tableau { width: 100%; border-collapse: collapse; margin: 26px 0 10px; font-size: 0.94rem; }
.dj-tableau caption { text-align: left; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gres); padding-bottom: 12px; }
.dj-tableau th, .dj-tableau td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--filet); }
.dj-tableau thead th { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gres); font-weight: 600; }
.dj-tableau td:last-child, .dj-tableau th:last-child { text-align: right; white-space: nowrap; }
.dj-tableau tbody tr:hover { background: var(--creme); }
.dj-tableau td b { color: var(--ocre-fonce); }

/* ---------- Simulateur (bloc sombre) ---------- */
.dj-sim-grille { display: grid; grid-template-columns: 1fr 1.5fr; gap: 84px; align-items: start; margin-top: 52px; }
.dj-sim-champs label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #b7ac9c; margin: 26px 0 4px; }
.dj-sim-champs label:first-child { margin-top: 0; }
.dj-sim-champs select, .dj-sim-champs input {
  width: 100%; padding: 11px 2px; background: transparent; border: none; border-bottom: 1px solid var(--filet-sombre);
  color: #fdfaf4; font-size: 1.02rem; font-family: inherit; border-radius: 0; transition: border-color 0.2s;
}
.dj-sim-champs select { cursor: pointer; }
.dj-sim-champs select option { color: var(--encre); background: #fff; }
.dj-sim-champs select:focus, .dj-sim-champs input:focus { outline: none; border-bottom-color: var(--ocre); box-shadow: 0 1px 0 var(--ocre); }
.dj-sim-verdict { border-left: 1px solid var(--filet-sombre); padding-left: 60px; }
.dj-sim-etiquette { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #b7ac9c; }
.dj-sim-somme { font-size: clamp(2.2rem, 4.6vw, 3.7rem); font-weight: 200; letter-spacing: -0.035em; line-height: 1.08; color: #fdfaf4; margin: 16px 0 12px; }
.dj-sim-somme b { font-weight: 800; color: var(--ocre); }
.dj-sim-precision { font-size: 0.82rem; color: #9c9184; max-width: 42ch; margin-bottom: 28px; }

/* ---------- Réalisations : grand format décalé ---------- */
.dj-galerie-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 62px; }
.dj-galerie-tete p { max-width: 44ch; color: var(--gres); font-size: 0.98rem; }
.dj-oeuvre { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; margin-bottom: 96px; }
.dj-oeuvre:last-child { margin-bottom: 0; }
.dj-oeuvre-visuel { grid-column: 1 / 9; grid-row: 1; position: relative; }
.dj-oeuvre-visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dj-oeuvre--large .dj-oeuvre-visuel { margin-left: calc(-1 * ((100vw - 100%) / 2 - 110px)); }   /* rupture de symétrie n°2 */
.dj-oeuvre-fiche { grid-column: 8 / 13; grid-row: 1; position: relative; z-index: 2; background: var(--blanc); padding: 36px 0 0 44px; margin-bottom: -1px; text-align: left; }
.dj-band-creme .dj-oeuvre-fiche { background: var(--creme); }
.dj-oeuvre--inverse .dj-oeuvre-visuel { grid-column: 5 / 13; }
.dj-oeuvre--inverse .dj-oeuvre-fiche { grid-column: 1 / 6; padding: 36px 44px 0 0; }
.dj-oeuvre-index { position: absolute; top: -20px; left: 44px; transform: translateY(-100%); font-size: clamp(3.6rem, 7vw, 6.4rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.05em; color: #ddd4c4; pointer-events: none; }
.dj-oeuvre--inverse .dj-oeuvre-index { left: 0; }
.dj-oeuvre-fiche h3 { font-size: 1.44rem; font-weight: 800; letter-spacing: -0.02em; color: var(--encre); line-height: 1.22; margin: 12px 0 12px; }
.dj-oeuvre-fiche p { font-size: 0.94rem; color: var(--gres); margin-bottom: 16px; }
.dj-oeuvre-donnees { list-style: none; border-top: 1px solid var(--filet); }
.dj-oeuvre-donnees li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 0.82rem; }
.dj-oeuvre-donnees li span { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.66rem; font-weight: 600; color: var(--gres); padding-top: 3px; }
.dj-oeuvre-donnees li b { color: var(--encre); font-weight: 700; text-align: right; }

/* ---------- Étude de cas (pages villes / prestations) ---------- */
.dj-cas { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.dj-cas-visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dj-cas-corps { text-align: left; }
.dj-cas-corps h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--encre); line-height: 1.2; margin: 12px 0 8px; }
.dj-cas-loc { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocre-fonce); }
.dj-cas-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 18px; }
.dj-cas-meta span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--encre); background: var(--creme); border: 1px solid var(--filet); padding: 7px 13px; }
.dj-cas-corps p { font-size: 0.95rem; color: var(--brun); margin-bottom: 0.9rem; }

/* ---------- Méthode / étapes ---------- */
.dj-etapes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 84px; margin-top: 38px; }
.dj-etape { display: grid; grid-template-columns: auto 1fr; gap: 30px; padding: 40px 0; border-top: 1px solid var(--filet); text-align: left; }
.dj-etape i { font-style: normal; font-size: clamp(2.4rem, 3.8vw, 3.6rem); font-weight: 200; letter-spacing: -0.04em; line-height: 0.9; color: var(--ocre); }
.dj-etape h3 { font-size: 1.1rem; font-weight: 800; color: var(--encre); letter-spacing: -0.01em; margin-bottom: 7px; }
.dj-etape p { font-size: 0.92rem; color: var(--gres); }

/* ---------- Équipe : portraits larges décalés ---------- */
.dj-visages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 62px; }
.dj-visage:nth-child(2) { margin-top: 58px; }   /* rupture de symétrie n°3 */
.dj-visage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(16%); transition: filter 0.4s; }
.dj-visage:hover img { filter: grayscale(0%); }
.dj-visage figcaption { padding-top: 18px; border-top: 1px solid var(--filet); margin-top: 20px; text-align: left; }
.dj-visage figcaption strong { display: block; font-size: 1.12rem; font-weight: 800; color: var(--encre); letter-spacing: -0.01em; }
.dj-visage figcaption span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre-fonce); }
.dj-visage p { font-size: 0.89rem; color: var(--gres); margin-top: 9px; }

/* ---------- Zone d'intervention ---------- */
.dj-zone-grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.dj-zone-texte { text-align: left; }
.dj-zone-texte p { margin-top: 20px; color: var(--gres); font-size: 0.97rem; }
.dj-zone-texte p strong { color: var(--encre); }
.dj-communes { list-style: none; columns: 2; column-gap: 40px; margin-top: 22px; }
.dj-communes li { break-inside: avoid; border-bottom: 1px solid var(--filet); }
.dj-communes a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 2px; text-decoration: none; color: var(--encre); font-size: 0.92rem; font-weight: 500; transition: color 0.2s, padding-left 0.2s; }
.dj-communes a small { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gres); }
.dj-communes a:hover { color: var(--ocre-fonce); padding-left: 7px; }
.dj-carte { border: 1px solid var(--filet); }
.dj-carte iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* ---------- FAQ ---------- */
.dj-faq { max-width: 820px; margin-top: 46px; }
.dj-faq details { border-top: 1px solid var(--filet); }
.dj-faq details:last-child { border-bottom: 1px solid var(--filet); }
.dj-faq summary { cursor: pointer; list-style: none; padding: 22px 56px 22px 0; position: relative; font-weight: 700; color: var(--encre); font-size: 1.01rem; letter-spacing: -0.01em; }
.dj-faq summary::-webkit-details-marker { display: none; }
.dj-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 200; color: var(--ocre); transition: transform 0.25s; }
.dj-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dj-faq details p { padding: 0 0 24px; color: var(--gres); font-size: 0.95rem; max-width: 68ch; }

/* ---------- Aides financières ---------- */
.dj-aides-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.dj-aide { border: 1px solid var(--filet); padding: 28px 26px; background: var(--blanc); text-align: left; }
.dj-band-creme .dj-aide { background: #fff; }
.dj-aide-ico { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--ocre-fonce); border: 1px solid var(--ocre); margin-bottom: 16px; }
.dj-aide-ico svg { width: 22px; height: 22px; }
.dj-aide-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocre-fonce); background: var(--sable); padding: 5px 10px; margin-bottom: 12px; }
.dj-aide h3 { font-size: 1.04rem; font-weight: 800; color: var(--encre); }
.dj-aide p { font-size: 0.9rem; color: var(--gres); margin-top: 8px; }

/* ---------- Bande CTA finale (photo + texte) ---------- */
.dj-final { background: linear-gradient(to right, rgba(14,10,6,0.86) 0%, rgba(14,10,6,0.52) 100%), url("/images/realisation-terrassement-maison-dijon.webp") center / cover no-repeat; color: #fff; padding: 122px 0; }
.dj-final .dj-eyebrow { color: var(--ocre); }
.dj-final h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); font-weight: 200; letter-spacing: -0.025em; line-height: 1.09; max-width: 20ch; margin-top: 18px; }
.dj-final h2 strong { font-weight: 800; }
.dj-final p { margin: 22px 0 36px; color: rgba(255,255,255,0.84); max-width: 52ch; font-weight: 300; }
.dj-final-actions { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.dj-final-actions .dj-appel { color: #fff; font-size: 1.18rem; }
.dj-final-actions .dj-appel small { color: rgba(255,255,255,0.6); }

/* ---------- Volet latéral de devis ---------- */
.dj-languette { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 350; writing-mode: vertical-rl; background: var(--ocre); color: #fff; border: none; font-family: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; padding: 24px 12px; cursor: pointer; transition: background 0.2s, padding 0.2s; }
.dj-languette:hover { background: var(--encre); padding-right: 18px; }
.dj-voile-volet { position: fixed; inset: 0; background: rgba(16,12,7,0.55); backdrop-filter: blur(2px); z-index: 440; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.dj-volet { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%); background: var(--blanc); z-index: 450; transform: translateX(102%); transition: transform 0.35s cubic-bezier(0.22,0.9,0.3,1); overflow-y: auto; padding: 40px 36px 44px; border-left: 1px solid var(--filet); }
body.volet-ouvert .dj-volet { transform: translateX(0); }
body.volet-ouvert .dj-voile-volet { opacity: 1; pointer-events: auto; }
body.volet-ouvert { overflow: hidden; }
.dj-volet-fermer { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; background: transparent; border: 1px solid var(--filet); font-size: 1.2rem; color: var(--gres); cursor: pointer; line-height: 1; transition: border-color 0.2s, color 0.2s; }
.dj-volet-fermer:hover { border-color: var(--encre); color: var(--encre); }
.dj-volet h2 { font-size: 1.6rem; font-weight: 200; letter-spacing: -0.02em; color: var(--encre); line-height: 1.15; margin: 16px 0 6px; }
.dj-volet h2 strong { font-weight: 800; }
.dj-volet-note { font-size: 0.84rem; color: var(--gres); margin-bottom: 6px; }

/* ---------- Formulaire (volet + contact) ---------- */
.dj-form { text-align: left; }
.dj-form label { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre); margin: 20px 0 3px; }
.dj-form input, .dj-form select, .dj-form textarea { width: 100%; padding: 10px 2px; border: none; border-bottom: 1px solid var(--filet); background: transparent; font-size: 0.98rem; font-family: inherit; color: var(--encre); border-radius: 0; transition: border-color 0.2s; }
.dj-form select { cursor: pointer; }
.dj-form input:focus, .dj-form select:focus, .dj-form textarea:focus { outline: none; border-bottom-color: var(--ocre); box-shadow: 0 1px 0 var(--ocre); }
.dj-form button[type="submit"] { width: 100%; margin-top: 28px; }
.dj-rgpd { font-size: 0.72rem; color: var(--gres); margin-top: 13px; line-height: 1.55; }
.dj-volet .dj-appel-volet { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--filet); color: var(--encre); }

/* ---------- Contact ---------- */
.dj-contact-grille { display: grid; grid-template-columns: 1fr 1.6fr; gap: 84px; align-items: start; }
.dj-coordonnees { list-style: none; margin-top: 30px; text-align: left; }
.dj-coordonnees li { border-top: 1px solid var(--filet); padding: 17px 0; display: grid; gap: 3px; }
.dj-coordonnees li:last-child { border-bottom: 1px solid var(--filet); }
.dj-coordonnees span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gres); }
.dj-coordonnees b, .dj-coordonnees a { font-size: 1.01rem; font-weight: 700; color: var(--encre); text-decoration: none; }
.dj-coordonnees a:hover { color: var(--ocre-fonce); }
.dj-form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.dj-form--contact button[type="submit"] { width: auto; padding-left: 54px; padding-right: 54px; }

/* ---------- Footer ---------- */
.dj-socle { background: var(--nuit); color: #9c9184; padding: 66px 0 30px; font-size: 0.88rem; }
.dj-socle-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding-bottom: 42px; border-bottom: 1px solid var(--filet-sombre); text-align: left; }
.dj-socle .dj-logo { color: #fdfaf4; margin-bottom: 16px; }
.dj-socle-marque p { color: #9c9184; max-width: 34ch; margin-bottom: 16px; font-size: 0.9rem; }
.dj-socle-marque a { color: #fdfaf4; text-decoration: none; font-weight: 700; display: block; margin-top: 5px; }
.dj-socle-marque a:hover { color: var(--ocre); }
.dj-socle-col h4 { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocre); margin-bottom: 16px; }
.dj-socle-col ul { list-style: none; }
.dj-socle-col li { margin-bottom: 9px; }
.dj-socle-col a { color: #b3a998; text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
.dj-socle-col a:hover { color: #fdfaf4; }
.dj-socle-bas { padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.76rem; }
.dj-socle-bas nav { display: flex; gap: 20px; flex-wrap: wrap; }
.dj-socle-bas a { color: #9c9184; text-decoration: none; }
.dj-socle-bas a:hover { color: var(--ocre); }

/* ---------- Callbar mobile ---------- */
.dj-callbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 360; background: rgba(255,253,248,0.98); backdrop-filter: blur(8px); border-top: 1px solid var(--filet); padding: 10px 14px; gap: 10px; }
.dj-callbar a, .dj-callbar button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; font-family: inherit; border: none; cursor: pointer; }
.dj-callbar-tel { background: var(--encre); color: #fff; }
.dj-callbar-tel svg { width: 1em; height: 1em; color: var(--ocre); }
.dj-callbar-devis { background: var(--ocre); color: #fff; }

/* ---------- Popup exit-intent ---------- */
.dj-voile-popup { position: fixed; inset: 0; background: rgba(16,12,7,0.66); backdrop-filter: blur(3px); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 22px; }
.dj-voile-popup[hidden] { display: none; }
.dj-popup { background: var(--blanc); max-width: 460px; width: 100%; padding: 48px 44px 40px; position: relative; border-top: 3px solid var(--ocre); box-shadow: 0 40px 90px rgba(0,0,0,0.45); text-align: left; }
.dj-popup-fermer { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: transparent; border: 1px solid var(--filet); font-size: 1.15rem; color: var(--gres); cursor: pointer; line-height: 1; transition: border-color 0.2s, color 0.2s; }
.dj-popup-fermer:hover { border-color: var(--encre); color: var(--encre); }
.dj-popup h3 { font-size: 1.7rem; font-weight: 200; letter-spacing: -0.02em; color: var(--encre); line-height: 1.15; margin: 12px 0 12px; }
.dj-popup h3 strong { font-weight: 800; }
.dj-popup p { font-size: 0.93rem; color: var(--gres); margin-bottom: 26px; }
.dj-popup-actions { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.dj-popup-actions .dj-appel { color: var(--encre); }

/* ---------- Fil d'ariane (prestations + blog) ---------- */
.dj-fil { padding: 108px 0 0; font-size: 0.76rem; }
.dj-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: var(--gres); }
.dj-fil li { display: flex; align-items: center; gap: 8px; }
.dj-fil li + li::before { content: "/"; color: var(--filet); }
.dj-fil a { color: var(--gres); text-decoration: none; }
.dj-fil a:hover { color: var(--ocre-fonce); }
.dj-fil li[aria-current] { color: var(--encre); font-weight: 600; }

/* ---------- Maillage prestations (bloc réutilisé) ---------- */
.dj-inline-cta { border: 1px solid var(--filet); border-left: 3px solid var(--ocre); background: var(--creme); padding: 26px 30px; margin: 34px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dj-inline-cta p { font-size: 1rem; color: var(--encre); font-weight: 600; max-width: 46ch; }
.dj-inline-cta .dj-btn-ocre { flex-shrink: 0; }

/* ---------- Articles de blog ---------- */
.dj-article-tete { background: linear-gradient(180deg, var(--creme) 0%, var(--blanc) 100%); padding: 20px 0 40px; }
.dj-article-tete h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 200; letter-spacing: -0.025em; line-height: 1.1; color: var(--encre); margin: 12px 0 16px; max-width: 24ch; }
.dj-article-tete h1 strong { font-weight: 800; }
.dj-article-meta { display: flex; align-items: center; gap: 18px; font-size: 0.78rem; color: var(--gres); flex-wrap: wrap; }
.dj-article-meta strong { color: var(--encre); }
.dj-article-visuel { margin: 0 0 8px; }
.dj-article-visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dj-article-body { max-width: 820px; margin: 0 auto; padding: 54px 34px 20px; text-align: left; }
.dj-article-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--encre); margin: 44px 0 16px; line-height: 1.2; }
.dj-article-body h3 { font-size: 1.2rem; font-weight: 800; color: var(--encre); margin: 30px 0 12px; }
.dj-article-body p { margin-bottom: 1.15rem; color: var(--brun); }
.dj-article-body p strong { color: var(--encre); font-weight: 700; }
.dj-article-body ul, .dj-article-body ol { margin: 0 0 1.2rem 1.2rem; }
.dj-article-body li { margin-bottom: 0.5rem; color: var(--brun); }
.dj-article-lead { font-size: 1.16rem; font-weight: 300; line-height: 1.6; color: var(--encre); margin-bottom: 1.6rem; }
.dj-sommaire { background: var(--creme); border: 1px solid var(--filet); padding: 22px 26px; margin-bottom: 34px; }
.dj-sommaire strong { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gres); display: block; margin-bottom: 10px; }
.dj-sommaire ol { margin: 0 0 0 1.1rem; }
.dj-sommaire a { color: var(--encre); text-decoration: none; }
.dj-sommaire a:hover { color: var(--ocre-fonce); }
.dj-source { font-size: 0.86rem; color: var(--gres); }
.dj-author { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 24px 0; margin: 40px 0; }
.dj-author img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; flex-shrink: 0; filter: grayscale(18%); }
.dj-author strong { display: block; color: var(--encre); font-size: 1rem; }
.dj-author-role { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocre-fonce); margin: 3px 0 8px; }
.dj-author p { font-size: 0.9rem; color: var(--gres); margin: 0; }

/* Comparatif artisans (article ②) */
.dj-artisan { border: 1px solid var(--filet); padding: 26px 28px; margin: 22px 0; background: var(--blanc); }
.dj-artisan-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dj-artisan-tete h3 { font-size: 1.2rem; font-weight: 800; color: var(--encre); margin: 0; }
.dj-artisan-note { font-size: 0.78rem; font-weight: 700; color: var(--ocre-fonce); white-space: nowrap; }
.dj-artisan-coord { list-style: none; margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.dj-artisan-coord li { font-size: 0.86rem; color: var(--brun); }
.dj-artisan-coord span { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gres); display: block; }
.dj-artisan-distinction { border-left: 3px solid var(--ocre); background: var(--creme); padding: 12px 18px; font-size: 0.92rem; color: var(--encre); }
.dj-artisan-distinction strong { font-weight: 700; }

/* Outil de diagnostic (article ③) */
.dj-diag-verdict { border: 1px solid var(--ocre); background: var(--sable); padding: 26px 28px; margin-top: 24px; }
.dj-diag-verdict .dj-diag-titre { font-size: 1.3rem; font-weight: 800; color: var(--encre); margin-bottom: 8px; }
.dj-diag-verdict p { margin-bottom: 16px; }

/* ---------- Index blog « Nos conseils » ---------- */
.dj-conseils-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 50px; }
.dj-conseil { border: 1px solid var(--filet); background: var(--blanc); display: flex; flex-direction: column; text-align: left; }
.dj-conseil img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dj-conseil-corps { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.dj-conseil-corps h2 { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.dj-conseil-corps h2 a { color: var(--encre); text-decoration: none; }
.dj-conseil-corps h2 a:hover { color: var(--ocre-fonce); }
.dj-conseil-corps p { font-size: 0.9rem; color: var(--gres); margin-top: 10px; }

/* ---------- Réalisations page (grille) ---------- */
.dj-refs-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 50px; }
.dj-ref { border: 1px solid var(--filet); background: var(--blanc); text-align: left; }
.dj-ref img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dj-ref-corps { padding: 22px 24px 26px; }
.dj-ref-loc { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ocre-fonce); }
.dj-ref-corps h3 { font-size: 1.12rem; font-weight: 800; color: var(--encre); margin: 8px 0 8px; letter-spacing: -0.01em; }
.dj-ref-corps p { font-size: 0.9rem; color: var(--gres); }

/* ---------- Plan de site / pages légales ---------- */
.dj-plan-groupe { margin-bottom: 40px; }
.dj-plan-groupe h2 { font-size: 1.2rem; font-weight: 800; color: var(--encre); margin-bottom: 16px; }
.dj-plan-liste { list-style: none; columns: 2; column-gap: 40px; }
.dj-plan-liste li { break-inside: avoid; border-bottom: 1px solid var(--filet); }
.dj-plan-liste a { display: block; padding: 10px 2px; color: var(--encre); text-decoration: none; font-size: 0.94rem; }
.dj-plan-liste a:hover { color: var(--ocre-fonce); }
.dj-legal { max-width: 800px; margin: 0 auto; text-align: left; }
.dj-legal h2 { font-size: 1.3rem; font-weight: 800; color: var(--encre); margin: 34px 0 12px; }
.dj-legal h3 { font-size: 1.05rem; font-weight: 700; color: var(--encre); margin: 22px 0 8px; }
.dj-legal p, .dj-legal li { color: var(--brun); margin-bottom: 0.9rem; font-size: 0.96rem; }
.dj-legal ul { margin-left: 1.2rem; }
.dj-legal a { color: var(--ocre-fonce); }

/* Page merci */
.dj-merci { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 150px 24px 80px; }
.dj-merci h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 200; color: var(--encre); letter-spacing: -0.02em; }
.dj-merci h1 strong { font-weight: 800; }
.dj-merci p { color: var(--gres); margin: 20px auto 30px; max-width: 46ch; }
.dj-merci .dj-check { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--ocre); color: var(--ocre-fonce); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; font-size: 2rem; }

/* ---------- Règle de centrage (accueil + villes) ---------- */
.centered .dj-h2,
.centered .dj-services-tete,
.centered .dj-galerie-tete > div,
.centered .dj-section-intro,
.centered .dj-avis-note,
.centered .dj-cta-solo { text-align: center; }
.centered .dj-services-tete, .centered .dj-section-intro { margin-left: auto; margin-right: auto; }
.centered .dj-avis-tete { justify-content: center; text-align: center; }
.dj-cta-solo { text-align: center; margin-top: 40px; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .dj-intro-grille { gap: 46px; }
  .dj-marge-chiffres { padding-right: 32px; }
  .dj-chiffre:first-child { margin-left: 0; }
  .dj-oeuvre--large .dj-oeuvre-visuel { margin-left: 0; }
  .dj-sim-grille { gap: 50px; }
  .dj-sim-verdict { padding-left: 40px; }
  .dj-prix-grille, .dj-zone-grille, .dj-contact-grille { gap: 50px; }
  .dj-services-grille, .dj-aides-grille, .dj-conseils-grille, .dj-refs-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .dj-band { padding: 74px 0; }
  .dj-band-tight { padding: 52px 0; }
  .dj-burger { display: flex; }
  .dj-menu { display: none; }
  .dj-cta-tete { display: none; }
  .dj-intro-grille { grid-template-columns: 1fr; gap: 48px; }
  .dj-marge-chiffres { border-right: none; padding-right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--filet); }
  .dj-chiffre + .dj-chiffre { border-top: none; }
  .dj-chiffre, .dj-chiffre:first-child { border-bottom: 1px solid var(--filet); padding: 22px 0; }
  .dj-pourquoi-grille, .dj-hero-presta-grille, .dj-cas { grid-template-columns: 1fr; gap: 40px; }
  .dj-oeuvre { display: block; margin-bottom: 62px; }
  .dj-oeuvre--large .dj-oeuvre-visuel { margin-left: -34px; width: calc(100% + 68px); }
  .dj-oeuvre-fiche, .dj-oeuvre--inverse .dj-oeuvre-fiche { padding: 28px 0 0; }
  .dj-oeuvre-index { position: static; transform: none; font-size: 3.2rem; display: block; margin-bottom: 4px; }
  .dj-sim-grille { grid-template-columns: 1fr; }
  .dj-sim-verdict { border-left: none; border-top: 1px solid var(--filet-sombre); padding: 38px 0 0; }
  .dj-prix-grille, .dj-zone-grille, .dj-contact-grille { grid-template-columns: 1fr; }
  .dj-prix-intro { position: static; }
  .dj-visages { grid-template-columns: 1fr 1fr; gap: 34px; }
  .dj-visage:nth-child(2) { margin-top: 0; }
  .dj-etapes { grid-template-columns: 1fr; }
  .dj-languette { display: none; }
  .dj-callbar { display: flex; }
  body { padding-bottom: 72px; }
  .dj-socle-grille { grid-template-columns: 1fr 1fr; }
  .dj-carte iframe { min-height: 320px; }
}
@media (max-width: 680px) {
  .dj-shell { padding: 0 22px; }
  .dj-tete-rang { padding-left: 22px; padding-right: 22px; }
  .dj-panorama { padding-top: 128px; }
  .dj-panorama-corps { padding: 0 22px 54px; }
  .dj-panorama-pied-rang { padding: 16px 22px; gap: 16px 26px; }
  .dj-oeuvre--large .dj-oeuvre-visuel { margin-left: -22px; width: calc(100% + 44px); }
  .dj-services-grille, .dj-aides-grille, .dj-conseils-grille, .dj-refs-grille { grid-template-columns: 1fr; }
  .dj-visages { grid-template-columns: 1fr; }
  .dj-communes, .dj-plan-liste { columns: 1; }
  .dj-form-duo { grid-template-columns: 1fr; }
  .dj-form--contact button[type="submit"] { width: 100%; }
  .dj-socle-grille { grid-template-columns: 1fr; gap: 34px; }
  .dj-volet { padding: 34px 24px 40px; }
  .dj-popup { padding: 40px 26px 32px; }
  .dj-final-actions { flex-direction: column; align-items: stretch; }
  .dj-reassure-rang { gap: 18px 26px; }
  .dj-article-body { padding: 40px 22px 16px; }
}