/* === Val d'Oise Paysage - Accueil === */

:root {
  --green: #95c11f;
  --green-dark: #7ba315;
  --green-soft: #f2f7e6;
  --slate: #5b6066;
  --slate-light: #8a8f95;
  --brown: #2e1e1a;
  --yellow: #ffc715;
  --white: #ffffff;
  --cream: #fafaf7;
  --border: #e6e6e2;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 64px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* FSE template wrapper reset : neutralise les padding/gap injectés par .wp-site-blocks. */
.wp-site-blocks {
  padding: 0 !important;
}
.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--brown);
  background: var(--white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- HEADER ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 32px;
}

.logo {
  height: 44px;
  flex-shrink: 0;
}
.logo img {
  height: 100%;
  width: auto;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 2px;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.cta-button:hover {
  background: var(--green-dark);
}
.cta-button.ghost {
  background: transparent;
  color: var(--brown);
  border: 1.5px solid var(--brown);
}
.cta-button.ghost:hover {
  background: var(--brown);
  color: var(--white);
}
.cta-button.white {
  background: var(--white);
  color: var(--brown);
}
.cta-button.white:hover {
  background: var(--cream);
}

.cta-button .arrow {
  width: 16px;
  height: 16px;
  position: relative;
}
.cta-button .arrow::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 400;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  background: var(--brown);
  color: var(--white);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(46, 30, 26, 0.78) 0%, rgba(46, 30, 26, 0.42) 55%, rgba(46, 30, 26, 0.18) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 120px 0 140px;
  width: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  transform: rotate(45deg);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 28px 0 28px;
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--green);
}

.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.hero-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  margin-bottom: 40px;
  max-width: 56ch;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-ctas .cta-button.ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}
.hero-ctas .cta-button.ghost:hover {
  background: var(--white);
  color: var(--brown);
}

/* baseline floating bottom-right */
.hero-baseline {
  position: absolute;
  right: var(--pad);
  bottom: 36px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-baseline .bar {
  width: 40px;
  height: 1px;
  background: var(--green);
}
.hero-baseline-logo {
  display: block;
  width: auto;
  height: 26px;
}

/* scroll cue */
.hero-locator {
  position: absolute;
  left: var(--pad);
  bottom: 36px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.hero-locator .pin {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(149, 193, 31, 0.25);
}

/* ---------- ZONE STRIP (under hero) ---------- */
.zone-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

/* Rangée haute : 3 chiffres clés avec pictos */
.zone-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.zone-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 28px;
  border-right: 1px solid var(--border);
}
.zone-stat:last-child { border-right: none; }
.zone-stat .ico {
  width: 30px;
  height: 30px;
  color: var(--green-dark);
  flex-shrink: 0;
}
.zone-stat .k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--brown);
}
.zone-stat .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: var(--slate);
}

/* Reset des marges entre les deux rangées dans le conteneur */
.zone-strip .container > * + * {
  margin-block-start: 0;
}

/* Rangée basse : zone d'intervention (départements) */
.zone-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 22px 0;
}
.zone-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.zone-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.zone-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--brown);
}
.zone-item .num {
  font-size: 11px;
  color: var(--green-dark);
  background: var(--green-soft);
  padding: 3px 7px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .zone-stats { grid-template-columns: 1fr; }
  .zone-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .zone-stat:last-child { border-bottom: none; }
}

/* ---------- SECTION GENERICS ---------- */
section {
  padding: clamp(72px, 9vw, 128px) 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  margin-bottom: 60px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brown);
  text-wrap: balance;
}
.section-head p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 62ch;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 60px;
}
.section-head-row .section-head {
  margin-bottom: 0;
}
.section-head-row .link-arrow {
  flex-shrink: 0;
  white-space: nowrap;
  padding-bottom: 8px;
}

.link-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--green);
  padding-bottom: 4px;
  transition:
    color 0.15s,
    gap 0.15s;
}
.link-arrow:hover {
  gap: 14px;
  color: var(--green-dark);
}

/* ---------- SERVICES ---------- */
.services {
  background: var(--cream);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.service-card {
  background: var(--white);
  padding: 36px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  text-align: left;
  min-height: 320px;
}
.service-card:hover {
  background: var(--green-soft);
}
.service-card:hover .service-img-wrap {
  transform: translateY(-2px);
}
.service-card:hover .service-arrow {
  background: var(--green);
  color: var(--white);
  transform: translate(2px, -2px);
}

.service-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--green-dark);
}

.service-img-wrap {
  width: 100px;
  height: 100px;
  background: var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.service-img-wrap svg {
  width: 60px;
  height: 60px;
}

.service-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brown);
}
.service-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  flex-grow: 1;
}

.service-arrow {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--brown);
  transition: all 0.2s ease;
}

/* ---------- EXPERTISE / NUMBERS ---------- */
.expertise {
  background: var(--brown);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.expertise-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

.expertise-left h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 24px 0 28px;
}
.expertise-left h2 .accent {
  color: var(--green);
}
.expertise-left p {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 40px;
  max-width: 56ch;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 36px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green);
}
.kpi .num .unit {
  font-size: 0.5em;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 4px;
}
.kpi .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.expertise-right {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1f1310;
}
.expertise-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.expertise-right .badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--green);
  color: var(--brown);
  padding: 14px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  max-width: 220px;
  line-height: 1.3;
}
.expertise-right .badge .year {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(46, 30, 26, 0.6);
  margin-bottom: 4px;
}

/* ---------- REALISATIONS ---------- */
.realisations {
  background: var(--white);
}

.real-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Query Loop : neutralise le <li> intermédiaire pour que .real-card devienne enfant direct de la grille. */
.real-grid > li {
  display: contents;
}
.real-card {
  aspect-ratio: 4 / 3;
}
.real-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--cream);
}
.real-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.real-card:hover img {
  transform: scale(1.04);
}
.real-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 30, 26, 0.78) 0%, rgba(46, 30, 26, 0) 55%);
  pointer-events: none;
}
.real-meta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  color: var(--white);
}
.real-meta .place {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.real-meta .place .dot {
  width: 5px;
  height: 5px;
  background: var(--green);
  transform: rotate(45deg);
}
.real-meta h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.real-meta .tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* Equal grid - Gutenberg Query Loop compatible */

/* ---------- TRUST ---------- */
.trust {
  background: var(--cream);
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: flex-start;
}
.trust-left h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 20px 0 24px;
}
.trust-left p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate);
}
.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.client-card {
  display: flex;
  gap: 18px;
  padding: 22px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.client-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.client-card .icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
}
.client-card h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--brown);
  margin-bottom: 4px;
}
.client-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}

/* ---------- FINAL CTA ---------- */
.final-cta {
  background: var(--green);
  color: var(--brown);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.final-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.final-cta .lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(46, 30, 26, 0.78);
  margin-top: 20px;
  max-width: 50ch;
}
.final-cta .actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.final-cta .actions .cta-button.brown {
  background: var(--brown);
  color: var(--white);
}
.final-cta .actions .cta-button.brown:hover {
  background: #000;
}
.final-cta .actions .small {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: rgba(46, 30, 26, 0.7);
}
.final-cta .actions .small strong {
  color: var(--brown);
}

/* Formulaire court Gravity à la place du bouton (bandeaux CTA : .final-cta et .srv-cta) */
@media (min-width: 1025px) {
  .wp-block-group.final-cta-inner:has(.cta-form),
  .wp-block-group.srv-cta-inner:has(.cta-form) {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.final-cta .actions:has(.cta-form),
.srv-cta .actions:has(.cta-form) {
  width: 100%;
}
.final-cta .actions .cta-form,
.srv-cta .actions .cta-form {
  width: 100%;
}
.final-cta .actions .cta-form .gform_wrapper,
.srv-cta .actions .cta-form .gform_wrapper {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
/* Pas de labels visibles : les placeholders suffisent (labels gardés pour les lecteurs d'écran) */
.final-cta .cta-form .gform_wrapper .gfield_label,
.srv-cta .cta-form .gform_wrapper .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.final-cta .cta-form .gform_wrapper .gform_fields,
.srv-cta .cta-form .gform_wrapper .gform_fields {
  gap: 14px 16px;
}
/* Prénom/nom + e-mail côte à côte sur desktop (les deux autres champs restent pleine largeur) */
@media (min-width: 600px) {
  .final-cta .cta-form .gform_wrapper #field_3_1,
  .final-cta .cta-form .gform_wrapper #field_3_2,
  .srv-cta .cta-form .gform_wrapper #field_3_1,
  .srv-cta .cta-form .gform_wrapper #field_3_2 {
    grid-column: span 1;
  }
}
/* Champs : hauteur cohérente pour ne pas couper le texte du select */
.final-cta .cta-form .gform_wrapper .ginput_container input,
.final-cta .cta-form .gform_wrapper .ginput_container select,
.srv-cta .cta-form .gform_wrapper .ginput_container input,
.srv-cta .cta-form .gform_wrapper .ginput_container select {
  line-height: 1.4;
  height: auto;
  min-height: 52px;
}
/* Bouton aux couleurs de la charte (le thème orbital de Gravity impose sinon son bleu) */
.final-cta .cta-form .gform_wrapper .gform_button,
.srv-cta .cta-form .gform_wrapper .gform_button {
  background: var(--brown) !important;
  color: var(--white) !important;
}
.final-cta .cta-form .gform_wrapper .gform_button:hover,
.srv-cta .cta-form .gform_wrapper .gform_button:hover {
  background: #000 !important;
  color: var(--white) !important;
}
.final-cta .actions .cta-form .cta-form-consent,
.srv-cta .actions .cta-form .cta-form-consent {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(46, 30, 26, 0.65);
  max-width: 52ch;
}

/* yellow diamond accent - discreet */
.final-cta::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  background: var(--yellow);
  transform: rotate(45deg);
  opacity: 0.6;
}
.final-cta::after {
  content: "";
  position: absolute;
  right: 80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  background: rgba(46, 30, 26, 0.08);
  transform: rotate(45deg);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--brown);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer .logo-block .logo {
  height: 50px;
  filter: brightness(0) invert(1);
  margin: 0 0 20px;
}
.footer .logo-block .logo img {
  height: 100%;
  width: auto;
  max-width: none;
}
.footer .logo-block .green-letter {
  filter: none;
}
.footer .baseline {
  margin: 0 0 18px;
}
.footer .baseline img {
  height: 22px;
  width: auto;
  max-width: none;
}
.footer .group {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 40ch;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 22px;
}
.footer-col ul,
.footer-col .wp-block-navigation__container {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col ul a,
.footer-col .wp-block-navigation-item__content {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s;
}
.footer-col ul a:hover,
.footer-col .wp-block-navigation-item__content:hover {
  color: var(--green);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-info .item {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  align-items: flex-start;
}
.contact-info .item .ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  line-height: 0;
}
.contact-info .item .ico img {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-info .item p {
  margin: 0;
}
.contact-info .item strong {
  display: block;
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.sub-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
}
.sub-footer p {
  margin: 0;
}
.sub-footer .legal,
.sub-footer .legal .wp-block-navigation__container {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.sub-footer a,
.sub-footer .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s;
}
.sub-footer a:hover,
.sub-footer .wp-block-navigation-item__content:hover {
  color: var(--green);
}

/* =====================================================
   PAGE - QUI SOMMES-NOUS
   ===================================================== */

/* ---------- ABOUT HERO ---------- */
.about-hero {
  position: relative;
  padding: 120px 0 100px;
  background: var(--cream);
  overflow: hidden;
}
.about-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.about-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--brown);
  margin: 28px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.about-hero h1 .accent {
  color: var(--green);
}
.about-hero .lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 56ch;
}
.about-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-hero-meta .row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border-right: 1px solid var(--border);
}
.about-hero-meta .row:last-child {
  border-right: none;
}
.about-hero-meta .row .k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.about-hero-meta .row .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--brown);
}

.about-hero-photo {
  margin-top: 16px;
  height: 520px;
  overflow: hidden;
}
.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- STORY (section 1) ---------- */
.story {
  background: var(--white);
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: flex-start;
}
.story-grid .map-side {
  /* sticky removed for Gutenberg compatibility */
}
.story-grid .body-side h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 16px 0 24px;
}
.story-grid .body-side p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 18px;
}
.story-grid .body-side p strong {
  color: var(--brown);
  font-weight: 600;
}

/* Map - simple stylised SVG of IDF area */
/* Zone d'intervention - panel typographique */
.zone-panel {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 32px 32px 28px;
}
.zone-panel-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 22px;
  margin-bottom: 6px;
}
.zone-panel-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-dark);
  display: inline-block;
  margin: 0 0 12px;
}
.zone-panel-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 0;
}

.zone-list-big {
  margin: 0;
  padding: 0;
}
.zone-list-big .dept {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.zone-list-big .dept:last-child {
  border-bottom: none;
}
.zone-list-big .dept-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--slate-light);
  text-align: left;
  margin: 0;
}
.zone-list-big .dept-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zone-list-big .dept-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--brown);
  margin: 0;
}
.zone-list-big .dept-detail {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate);
  margin: 0;
}
.zone-list-big .dept.primary {
  background: var(--green-soft);
  margin: 0 -32px;
  padding: 22px 32px;
  border-bottom-color: transparent;
}
.zone-list-big .dept.primary + .dept {
  border-top: 1px solid var(--border);
}
.zone-list-big .dept.primary .dept-code {
  color: var(--green-dark);
  font-size: 40px;
}
.zone-list-big .dept.primary .dept-name {
  font-size: 18px;
}
.zone-list-big .dept.primary .dept-detail {
  color: var(--green-dark);
  font-weight: 700;
}
.zone-list-big .dept.primary::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--green);
  transform: rotate(45deg);
  justify-self: end;
}

.zone-panel-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--slate);
}
.zone-panel-foot::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237BA315' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22S4 14 4 10A8 8 0 0 1 20 10C20 14 12 22 12 22Z'/><circle cx='12' cy='10' r='3'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.zone-panel-foot p {
  margin: 0;
}

/* Zone d'intervention - panel typographique (end) */
.zone-map {
  background: var(--cream);
  padding: 36px;
  border: 1px solid var(--border);
}
.zone-map h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 24px;
}
.zone-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.zone-map .zone-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.zone-map .zone-legend .row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--brown);
}
.zone-map .zone-legend .row .swatch {
  width: 10px;
  height: 10px;
  background: var(--green);
  transform: rotate(45deg);
}
.zone-map .zone-legend .row .code {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 12px;
}

/* ---------- TIMELINE (section 2) ---------- */
.history {
  background: var(--cream);
}
.history .section-head {
  margin-bottom: 80px;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 76px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}
/* Note: pour Gutenberg, si le nombre d'étapes change, ajuster les % via .timeline[data-steps="X"] */
.tl-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-step .year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: -0.02em;
  color: var(--brown);
  margin-bottom: 32px;
}
.tl-step .marker {
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 2px solid var(--green);
  transform: rotate(45deg);
  position: relative;
  margin-bottom: 32px;
  z-index: 2;
}
.tl-step.active .marker {
  background: var(--green);
}
.tl-step h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--brown);
  margin-bottom: 8px;
}
.tl-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 26ch;
  margin: 0 auto;
}

.history-summary {
  margin-top: 80px;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.history-summary h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brown);
}
.history-summary p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate);
}

/* ---------- TEAMS (section 3) ---------- */
.teams {
  background: var(--white);
}
.teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.teams-photo {
  min-height: 540px;
  overflow: hidden;
}
.teams-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.teams-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.teams-content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 20px 0 24px;
}
.teams-content > p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 36px;
}

.team-blocks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
}
.team-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.team-block .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-dark);
  padding-top: 4px;
  min-width: 110px;
}
.team-block h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--brown);
  margin-bottom: 10px;
}
.team-block p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}

.fleet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.fleet .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--green-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--brown);
}
.fleet .tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
}

/* ---------- VALUES (section 4) ---------- */
.values {
  background: var(--brown);
  color: var(--white);
}
.values .section-head h2 {
  color: var(--white);
}
.values .section-head p {
  color: rgba(255, 255, 255, 0.75);
}
/* Colonnes d'intro (sous le H2) : espacement entre les deux blocs de texte */
.values > .container > .wp-block-columns {
  gap: clamp(32px, 4vw, 64px);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.value {
  background: var(--brown);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  transition: background 0.2s ease;
}
.value:hover {
  background: #1f1310;
}
.value .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--green);
}
.value h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--white);
  flex-grow: 1;
}
.value .arrow {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--green);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.values-conclude {
  margin-top: 60px;
  text-align: center;
  padding: 40px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-block-group.values-conclude p {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--white);
  max-width: 36ch;
  margin: 0 auto;
}
.values-conclude p strong {
  color: var(--green);
  font-style: normal;
  font-weight: 700;
}

/* ---------- ABOUT CTA (uses .final-cta variant) ---------- */
.about-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-hero-photo {
    height: 380px;
    margin-top: 8px;
  }
  .about-hero-meta {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-hero-meta .row {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .about-hero-meta .row:nth-child(2) {
    border-right: 1px solid var(--border);
  }
  .about-hero-meta .row:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .story-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .story-grid .map-side {
    position: static;
  }
  .timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
  .timeline::before {
    display: none;
  }
  .history-summary {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px;
  }
  .teams-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .teams-photo {
    min-height: 380px;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .zone-map .zone-legend {
    grid-template-columns: 1fr;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .nav {
    display: none;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .expertise-grid,
  .trust-grid,
  .final-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .real-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 68px;
  }
  .logo {
    height: 48px;
  }
  .hero-inner {
    padding: 80px 0 100px;
  }
  .hero {
    min-height: 600px;
  }
  .hero-baseline,
  .hero-locator {
    display: none;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .kpi-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .client-grid {
    grid-template-columns: 1fr;
  }
  .real-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================
   WORDPRESS BLOCK THEME OVERRIDES
   Normalise les wrappers ajoutés par le rendu WP.
   ===================================================== */

/* Le wrapper template-part ne doit pas casser les sections en flex/sticky */
.wp-block-template-part {
  display: block;
}

/* Sticky header - neutraliser le wrapper template-part qui sinon devient
   le bloc contenant du header sticky (même hauteur → sticky inopérant). */
.wp-site-blocks,
.wp-site-blocks > .wp-block-template-part:first-child {
  contain: none;
}
.wp-site-blocks > .wp-block-template-part:first-child {
  display: contents;
}

/* Pas de gap par défaut entre blocs successifs au niveau racine */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* =====================================================
   OVERRIDES BLOCS NATIFS GUTENBERG
   Neutralise les styles par défaut pour qu'ils ne
   parasitent pas le design system.
   ===================================================== */

/* core/group - reset prudent : ne pas neutraliser padding/margin globalement
   car ça écrase .container { margin: 0 auto } par cascade.
   Les conteneurs spécifiques (.hero, .services, etc.) gèrent leur propre padding. */

/* core/heading - laisser la typographie venir des élements h1..h4 */
.wp-block-heading {
  margin: 0;
}

/* core/paragraph - neutralise les marges injectées par WP */
main p,
main .wp-block-paragraph {
  margin: 0;
}

/* Restaurer les <strong> dans les paragraphes (parfois écrasés) */
main p strong {
  font-weight: inherit;
}
.story-grid .body-side p strong {
  color: var(--brown);
  font-weight: 600;
}
.values-conclude p strong {
  color: var(--green);
  font-style: normal;
  font-weight: 700;
}
.history-summary p strong {
  color: var(--brown);
  font-weight: 600;
}

/* Bullet/dot eyebrow restent verts */
.eyebrow .dot {
  background: var(--green);
}

/* =====================================================
   ÉDITION NATIVE - Ré-implémentation des éléments custom
   via blocs Gutenberg natifs.
   ===================================================== */

/* --- EYEBROW : dot via ::before, plus de span nested --- */
.eyebrow,
p.eyebrow,
.wp-block-paragraph.eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.eyebrow .dot {
  display: none;
} /* rétrocompat: cache l'éventuel dot inline */

/* --- BOUTONS core/button stylés comme .cta-button --- */
.wp-block-button .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 2px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
  border: 0;
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--green-dark);
}
/* Flèche : ajoutée par défaut via ::after */
.wp-block-button:not(.is-style-ghost):not(.is-style-no-arrow) .wp-block-button__link::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 400;
}

/* Variant : ghost (outline brun) */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--brown);
  border: 1.5px solid var(--brown);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--brown);
  color: var(--white);
}
/* Ghost sur fond sombre (hero) - bordure blanche */
.hero .wp-block-button.is-style-ghost .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}
.hero .wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--white);
  color: var(--brown);
}

/* Variant : brown (CTA final principal) */
.wp-block-button.is-style-brown .wp-block-button__link {
  background: var(--brown);
  color: var(--white);
}
.wp-block-button.is-style-brown .wp-block-button__link:hover {
  background: #000;
}

/* Variant : white (sur fond vert) */
.wp-block-button.is-style-white .wp-block-button__link {
  background: var(--white);
  color: var(--brown);
}
.wp-block-button.is-style-white .wp-block-button__link:hover {
  background: var(--cream);
}

/* Groupe de boutons sans gap injecté */
.wp-block-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
.wp-block-buttons > .wp-block-button {
  margin: 0;
}

/* --- IMAGES core/image transparentes dans wrappers --- */
.hero-bg .wp-block-image,
.expertise-right .wp-block-image,
.about-hero-photo .wp-block-image,
.teams-photo .wp-block-image,
.real-card .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-bg .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.expertise-right .wp-block-image,
.expertise-right .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-hero-photo .wp-block-image,
.about-hero-photo .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teams-photo .wp-block-image,
.teams-photo .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-card .wp-block-image {
  position: absolute;
  inset: 0;
}
.real-card .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.real-card:hover .wp-block-image img {
  transform: scale(1.04);
}

/* --- SERVICE CARD : flèche ::after au lieu de span .service-arrow --- */
.service-card {
  position: relative;
}
.service-card::after {
  content: "→";
  position: absolute;
  top: 30px;
  right: 30px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--brown);
  transition: all 0.2s ease;
  pointer-events: none;
}
.service-card:hover::after {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  transform: translate(2px, -2px);
}
/* Lien stretched via h3 a */
.service-card h3 {
  position: relative;
}
.service-card h3 a {
  color: inherit;
  text-decoration: none;
}
.service-card h3 a::before {
  content: "";
  position: absolute;
  inset: -36px -30px;
  z-index: 1;
}
/* service-num devient core/paragraph */
.service-card p.service-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--green-dark);
  margin: 0;
}
/* Override : la carte n'est plus un <a> donc on neutralise les styles de lien hérités */
.service-card {
  color: inherit;
}

/* --- VALUE CARD : neutralise span .arrow --- */
.value {
  position: relative;
}
.value .arrow {
  display: none;
}
/* num devient core/paragraph */
.value p.value-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--green);
  margin: 0;
}

/* --- REAL CARD : stretched link via h4 a --- */
.real-card h4 a {
  color: inherit;
  text-decoration: none;
}
.real-card h4 a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- TIMELINE STEP : marker via ::before, plus de div .marker --- */
.tl-step {
  position: relative;
}
.tl-step::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 2px solid var(--green);
  transform: rotate(45deg);
  margin: 0 auto 32px;
  display: block;
  z-index: 2;
  position: relative;
}
.tl-step.is-style-active::before {
  background: var(--green);
}
.tl-step .marker {
  display: none;
}
/* year devient core/heading h3 */
.tl-step h3.tl-year,
.tl-step .year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 0 0 32px;
  text-align: center;
}

/* --- KPI : number editable as heading, unit absorbed into number text --- */
.kpi h3.kpi-num,
.kpi .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green);
  margin: 0;
}
.kpi p.kpi-label,
.kpi .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin: 0;
}

/* --- ZONE-STRIP, ZONE-PANEL : items éditables --- */
/* zone-item en core/paragraph avec className "zone-item" : le num devient inline-styled */

/* --- LINK-ARROW devient core/paragraph natif --- */
p.link-arrow,
.wp-block-paragraph.link-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--green);
  padding-bottom: 4px;
  transition:
    color 0.15s,
    gap 0.15s;
  margin: 0;
}
.link-arrow:hover {
  gap: 14px;
  color: var(--green-dark);
}
.link-arrow a {
  color: inherit;
  text-decoration: none;
}

/* --- BADGE expertise : year en paragraph, texte en paragraph --- */
.expertise-right .badge p.badge-year,
.expertise-right .badge .year {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(46, 30, 26, 0.6);
  margin: 0 0 4px;
}
.expertise-right .badge p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
  color: var(--brown);
}

/* --- TEAM-BLOCK : label en paragraph, h4 + p natifs, fleet tags séparés --- */
.team-block p.team-label,
.team-block .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-dark);
  padding-top: 4px;
  min-width: 110px;
  margin: 0;
}

/* --- CLIENT CARD : icon SVG locked, h5+p natifs --- */
/* h5 + p déjà OK avec le CSS existant */

/* --- ZONE STRIP : items au format core/paragraph compact --- */
.zone-item p {
  display: inline;
  margin: 0;
}

/* --- TIMELINE p : marges normalisées --- */
.tl-step p,
.tl-step h4 {
  margin: 0;
}
.tl-step h4 {
  margin-bottom: 8px;
}

/* --- HERO LOCATOR + BASELINE : pin/bar via ::before --- */
.hero-locator,
p.hero-locator {
  margin: 0;
}
.hero-baseline,
p.hero-baseline {
  margin: 0;
}

/* --- KPI ROW alignment for core/group children --- */
.kpi-row .kpi {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}

/* --- PLACE (real-card lieu) : dot via ::before, p natif --- */
.real-meta .place,
.real-meta p.place {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 4px;
}
.real-meta .place::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.real-meta .place .dot {
  display: none;
}
.real-meta p.tag,
.real-meta .tag {
  display: inline-block;
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}
.real-meta h4 {
  margin: 0;
}

/* --- ABOUT-HERO META : rows en core/group, k+v en paragraphs --- */
.about-hero-meta .row {
  padding: 22px 24px;
}
.about-hero-meta .row .k,
.about-hero-meta .row p.k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 0 0 6px;
}
.about-hero-meta .row .v,
.about-hero-meta .row p.v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--brown);
  margin: 0;
}

/* --- FLEET tags : p natifs avec ::before --- */
.fleet p.tag,
.fleet .tag {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--green-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--brown);
  margin: 0;
}
.fleet p.tag::before,
.fleet .tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --- BADGE expertise : p natifs --- */
.expertise-right .badge {
  line-height: 1.3;
}
.expertise-right .badge p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brown);
}
.expertise-right .badge p.badge-year {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(46, 30, 26, 0.6);
  margin-bottom: 4px;
}

/* --- HERO LOCATOR + BASELINE : restent en HTML mais on neutralise wp-block-group s'ils sont wrappés --- */
.hero-locator,
.hero-baseline {
  margin: 0;
}

/* --- TIMELINE marker fix : on garde la ligne décorative entre les steps --- */
.timeline {
  position: relative;
  isolation: isolate;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 76px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border);
  z-index: 0;
  pointer-events: none;
}

/* --- KPI : group bg sombre (.expertise) doit garder le contraste --- */
.expertise .kpi h3.kpi-num {
  color: var(--green);
}
.expertise .kpi p.kpi-label {
  color: rgba(255, 255, 255, 0.7);
}

/* --- CLIENT CARD : icon en HTML, h5 + p natifs --- */
.client-card .wp-block-group.client-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.client-card h5 {
  margin: 0 0 4px;
}
.client-card p {
  margin: 0;
}

/* --- service-num en core/paragraph --- */
.service-card p.service-num {
  margin: 0;
}

/* --- expertise-left structure stays the same --- */
.expertise-left .wp-block-group.kpi-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 36px;
}

/* --- value-num typography --- */
.value p.value-num,
.value .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--green);
  margin: 0;
}
.value h4 {
  margin: 0;
  flex-grow: 1;
}

/* --- timeline ligne pointillée : éviter override du wp-block-group --- */
.tl-step .wp-block-heading.tl-year,
.tl-step h3.tl-year {
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .timeline::before {
    display: none;
  }
}

/* =====================================================
   NEUTRALISER is-layout-flow injecté par Gutenberg
   sur les conteneurs qui utilisent flex/grid + gap.
   ===================================================== */

/* Tous les conteneurs custom à layout : reset des marges entre enfants */
.wp-block-group.hero > * + *,
.wp-block-group.hero-bg > * + *,
.wp-block-group.hero-inner > * + *,
.wp-block-group.zone-strip > * + *,
.wp-block-group.zone-strip-inner > * + *,
.wp-block-group.zone-list > * + *,
.wp-block-group.section-head-row > * + *,
.wp-block-group.section-head > * + *,
.wp-block-group.service-grid > * + *,
.wp-block-group.service-card > * + *,
.wp-block-group.expertise > * + *,
.wp-block-group.expertise-grid > * + *,
.wp-block-group.expertise-left > * + *,
.wp-block-group.expertise-right > * + *,
.wp-block-group.kpi-row > * + *,
.wp-block-group.kpi > * + *,
.wp-block-group.badge > * + *,
.wp-block-group.real-grid > * + *,
.wp-block-group.real-card > * + *,
.wp-block-group.real-meta > * + *,
.wp-block-group.trust-grid > * + *,
.wp-block-group.trust-left > * + *,
.wp-block-group.client-grid > * + *,
.wp-block-group.client-card > * + *,
.wp-block-group.client-card-body > * + *,
.wp-block-group.final-cta > * + *,
.wp-block-group.final-cta-inner > * + *,
.wp-block-group.actions > * + *,
.wp-block-group.about-hero > * + *,
.wp-block-group.about-hero-inner > * + *,
.wp-block-group.about-hero-meta > * + *,
.wp-block-group.about-hero-photo > * + *,
.wp-block-group.about-hero-meta .wp-block-group.row > * + *,
.wp-block-group.story > * + *,
.wp-block-group.story-grid > * + *,
.wp-block-group.map-side > * + *,
.wp-block-group.body-side > * + *,
.wp-block-group.history > * + *,
.wp-block-group.timeline > * + *,
.wp-block-group.tl-step > * + *,
.wp-block-group.history-summary > * + *,
.wp-block-group.teams > * + *,
.wp-block-group.teams-grid > * + *,
.wp-block-group.teams-photo > * + *,
.wp-block-group.teams-content > * + *,
.wp-block-group.team-blocks > * + *,
.wp-block-group.team-block > * + *,
.wp-block-group.fleet > * + *,
.wp-block-group.values > * + *,
.wp-block-group.values-grid > * + *,
.wp-block-group.value > * + *,
.wp-block-group.values-conclude > * + * {
  margin-block-start: 0;
}

/* Forcer flex/grid pour les conteneurs cibles */
.wp-block-group.hero {
  display: flex;
  align-items: center;
}
.wp-block-group.zone-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 22px 0;
}
.wp-block-group.zone-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.wp-block-group.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.wp-block-group.section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  margin-bottom: 60px;
}
.wp-block-group.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.wp-block-group.service-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--white);
  padding: 36px 30px 32px;
  min-height: 320px;
  transition: background 0.2s ease;
}
.wp-block-group.service-card:hover {
  background: var(--green-soft);
}
.wp-block-group.expertise-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.wp-block-group.expertise-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.wp-block-group.expertise-right {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1f1310;
}
.wp-block-group.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 36px;
  margin-top: 12px;
}
.wp-block-group.kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wp-block-group.real-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wp-block-group.real-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream);
}
.wp-block-group.real-meta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wp-block-group.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: flex-start;
}
.wp-block-group.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.wp-block-group.client-card {
  display: flex;
  gap: 18px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.wp-block-group.client-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.wp-block-group.client-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wp-block-group.final-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.wp-block-group.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.wp-block-group.about-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.wp-block-group.about-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wp-block-group.about-hero-meta .wp-block-group.row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border-right: 1px solid var(--border);
}
.wp-block-group.about-hero-meta .wp-block-group.row:last-child {
  border-right: none;
}
.wp-block-group.about-hero-photo {
  margin-top: 16px;
  height: 520px;
  overflow: hidden;
}
.wp-block-group.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: flex-start;
}
.wp-block-group.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.wp-block-group.tl-step {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wp-block-group.history-summary {
  margin-top: 80px;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.wp-block-group.teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.wp-block-group.teams-photo {
  min-height: 540px;
  overflow: hidden;
}
.wp-block-group.teams-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.wp-block-group.team-blocks {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.wp-block-group.team-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.wp-block-group.fleet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.wp-block-group.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-block-group.value {
  background: var(--brown);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  transition: background 0.2s ease;
  position: relative;
}
.wp-block-group.value:hover {
  background: #1f1310;
}
.wp-block-group.values-conclude {
  margin-top: 60px;
  text-align: center;
  padding: 40px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-block-group.history {
  background: var(--cream);
}
.wp-block-group.values {
  background: var(--brown);
  color: var(--white);
}
.wp-block-group.expertise {
  background: var(--brown);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.wp-block-group.realisations {
  background: var(--white);
}
.wp-block-group.services {
  background: var(--cream);
}
.wp-block-group.trust {
  background: var(--cream);
}
.wp-block-group.final-cta {
  background: var(--green);
  color: var(--brown);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.wp-block-group.story {
  background: var(--white);
}
.wp-block-group.teams {
  background: var(--white);
}
.wp-block-group.about-hero {
  position: relative;
  padding: 120px 0 100px;
  background: var(--cream);
  overflow: hidden;
}

/* Hero-bg comme overlay absolu */
.wp-block-group.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.wp-block-group.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(46, 30, 26, 0.78) 0%, rgba(46, 30, 26, 0.42) 55%, rgba(46, 30, 26, 0.18) 100%);
  z-index: 2;
}

/* hero-inner reste z-index plus haut */
.wp-block-group.hero-inner {
  position: relative;
  z-index: 3;
  padding: 120px 0 140px;
  width: 100%;
}

/* sections - padding standard */
.wp-block-group.services,
.wp-block-group.expertise,
.wp-block-group.realisations,
.wp-block-group.trust,
.wp-block-group.story,
.wp-block-group.history,
.wp-block-group.teams,
.wp-block-group.values {
  padding: clamp(72px, 9vw, 128px) 0;
}

/* Hero ne reçoit pas le padding section */
.wp-block-group.hero {
  padding: 0;
  min-height: 720px;
  background: var(--brown);
  color: var(--white);
  overflow: hidden;
  position: relative;
}

/* Gradient overlay sur final-cta - restaurer les losanges décoratifs */
.wp-block-group.final-cta::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  background: var(--yellow);
  transform: rotate(45deg);
  opacity: 0.6;
}
.wp-block-group.final-cta::after {
  content: "";
  position: absolute;
  right: 80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  background: rgba(46, 30, 26, 0.08);
  transform: rotate(45deg);
}

/* Responsive */
@media (max-width: 1024px) {
  .wp-block-group.service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-group.expertise-grid,
  .wp-block-group.trust-grid,
  .wp-block-group.final-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .wp-block-group.real-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-group.timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
  .wp-block-group.history-summary {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px;
  }
  .wp-block-group.teams-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wp-block-group.values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-group.about-hero-inner {
    gap: 48px;
  }
  .wp-block-group.about-hero-meta {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-group.about-hero-meta .wp-block-group.row {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .wp-block-group.about-hero-meta .wp-block-group.row:nth-child(2) {
    border-right: 1px solid var(--border);
  }
  .wp-block-group.story-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .wp-block-group.service-grid {
    grid-template-columns: 1fr;
  }
  .wp-block-group.kpi-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .wp-block-group.client-grid {
    grid-template-columns: 1fr;
  }
  .wp-block-group.real-grid {
    grid-template-columns: 1fr;
  }
  .wp-block-group.timeline {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wp-block-group.values-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   BLOCK STYLES TYPOGRAPHIQUES (Rule 4)
   Sélecteurs .is-style-* - préférés aux className en dur.
   Les anciens sélecteurs (.eyebrow, .lead, .tag, etc.)
   restent ci-dessus pour rétrocompatibilité.
   ===================================================== */

/* is-style-eyebrow - caps tracked + losange */
.is-style-eyebrow,
p.is-style-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}
.is-style-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* Eyebrow taille réduite dans real-meta (ex .place) */
.real-meta .is-style-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  gap: 8px;
  margin-bottom: 4px;
}
.real-meta .is-style-eyebrow::before {
  width: 5px;
  height: 5px;
}

/* is-style-caps - caps tracked sans losange, couleur contextuelle */
.is-style-caps,
p.is-style-caps {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0;
}
/* Contextes spécifiques */
.expertise .is-style-caps,
.values .is-style-caps,
.kpi .is-style-caps {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.kpi .is-style-caps {
  font-family: var(--font-display);
}
.about-hero-meta .is-style-caps {
  color: var(--slate-light);
}
.expertise-right .badge .is-style-caps {
  color: rgba(46, 30, 26, 0.6);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}
.zone-strip .is-style-caps {
  color: var(--slate);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.team-block .is-style-caps {
  color: var(--green-dark);
  font-size: 12px;
  letter-spacing: 0.16em;
  padding-top: 4px;
  min-width: 110px;
}
.service-card .is-style-caps {
  color: var(--green-dark);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.value .is-style-caps {
  color: var(--green);
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* is-style-intro-light - même corps, sur fond sombre (cf. .values .section-head p) */
.is-style-intro-light,
p.is-style-intro-light {
  color: rgba(255, 255, 255, 0.75);
}

/* is-style-lead - corps grande taille */
.is-style-lead,
p.is-style-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 56ch;
  margin: 0;
}
.hero .is-style-lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
  margin-bottom: 12px;
}
.final-cta .is-style-lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(46, 30, 26, 0.78);
  margin-top: 20px;
  max-width: 50ch;
}

/* is-style-emphasis - display bold accent */
.is-style-emphasis,
p.is-style-emphasis {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  margin: 0 0 40px;
  max-width: 56ch;
}
.hero .is-style-emphasis {
  color: var(--white);
}

/* is-style-meta - petit texte secondaire */
.is-style-meta,
p.is-style-meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: rgba(46, 30, 26, 0.7);
  margin: 0;
}
.real-meta .is-style-meta {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}
.final-cta .actions .is-style-meta,
.srv-cta .actions .is-style-meta {
  font-size: 17px;
}
.final-cta .actions .is-style-meta strong,
.srv-cta .actions .is-style-meta strong {
  color: var(--brown);
}
.final-cta .actions .is-style-meta a,
.srv-cta .actions .is-style-meta a {
  font-size: 19px;
}

/* is-style-badge - pill vert anis avec losange */
.is-style-badge,
p.is-style-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--green-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--brown);
  margin: 0;
}
.is-style-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* is-style-data - valeur méta en bold */
.is-style-data,
p.is-style-data {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--brown);
  margin: 0;
}

/* is-style-link-arrow - lien souligné avec flèche */
.is-style-link-arrow,
p.is-style-link-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--green);
  padding-bottom: 4px;
  transition:
    color 0.15s,
    gap 0.15s;
  margin: 0;
}
.is-style-link-arrow:hover {
  gap: 14px;
  color: var(--green-dark);
}
.is-style-link-arrow a {
  color: inherit;
  text-decoration: none;
}

/* is-style-stat - heading chiffre XXL */
h1.is-style-stat,
h2.is-style-stat,
h3.is-style-stat,
h4.is-style-stat,
.is-style-stat.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--green);
}
/* Contextes */
.tl-step .is-style-stat {
  font-size: clamp(28px, 2.8vw, 38px);
  color: var(--brown);
  margin-bottom: 32px;
}
.expertise .is-style-stat {
  color: var(--green);
}

/* =====================================================
   CORE/NAVIGATION (Rule 5)
   Style le block natif pour ressembler à l'ancien .nav
   ===================================================== */

/* Wrapper header (group).
   NB : pas de `backdrop-filter` / `filter` / `transform` directement sur .header,
   sinon il devient bloc contenant des descendants `position: fixed` (le panel
   mobile resterait piégé dans le header). Le blur est appliqué via ::before. */
.wp-block-group.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
  padding: 0;
  transition:
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.wp-block-group.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.wp-block-group.header.is-stuck {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 16px -8px rgba(46, 30, 26, 0.18);
}

.wp-block-group.header-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 32px;
}
.wp-block-group.header-inner > * + * {
  margin-block-start: 0;
}

/* Reset margins WP block layout sur les groupes du footer */
.wp-block-group.container > * + *,
.wp-block-group.footer-grid > *,
.wp-block-group.logo-block > *,
.wp-block-group.footer-col > *,
.wp-block-group.contact-info > *,
.wp-block-group.item > * {
  margin-block-start: 0;
}

/* Logo dans header (wp:image block) */
.header .logo {
  height: 60px;
  flex-shrink: 0;
  display: inline-flex;
  margin: 0;
}
.header .logo a {
  display: inline-flex;
  height: 100%;
  transition: transform 0.2s ease;
  transform-origin: left center;
}
.header .logo a:hover {
  transform: scale(0.95);
}
.header .logo img {
  height: 100%;
  width: auto;
  max-width: none;
}

/* Navigation block - restyle pour matcher le design */
.header .wp-block-navigation {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--brown);
  margin-left: auto;
  justify-content: flex-end;
}
.header .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header .wp-block-navigation-item {
  position: relative;
}
.header .wp-block-navigation-item__content {
  color: var(--brown);
  padding: 6px 0;
  transition: color 0.15s ease;
  text-decoration: none;
}
.header .wp-block-navigation-item__content:hover,
.header .wp-block-navigation-item__content:focus {
  color: var(--green-dark);
}
.header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.header .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.header .wp-block-navigation-submenu.current-menu-parent > .wp-block-navigation-item__content,
.header .wp-block-navigation-submenu.current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--green-dark);
}
.header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.header .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content::after,
.header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after,
.header .wp-block-navigation-submenu.current-menu-parent > .wp-block-navigation-item__content::after,
.header .wp-block-navigation-submenu.current-menu-ancestor > .wp-block-navigation-item__content::after,
.header .wp-block-navigation-item .active > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--green);
}
/* Sous-menu : item actif (dropdown Services) — pas d'underline, fond vert clair + texte vert */
.header .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 600;
}
.header .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
  display: none;
}

/* Submenu (Services dropdown) */
.header .wp-block-navigation-submenu {
  position: relative;
}
.header .wp-block-navigation__submenu-container {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 24px 48px -16px rgba(46, 30, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
}
.header .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.header .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) {
  .header .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
    min-width: 280px;
  }
}
.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brown);
}
.header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--green-soft);
  color: var(--brown);
}

/* Caret icon (chevron natif Gutenberg) */
.header .wp-block-navigation__submenu-icon {
  color: var(--brown);
}
.header .wp-block-navigation__submenu-icon svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: currentColor;
}

/* Header CTA button */
.header .wp-block-buttons.header-cta {
  margin: 0;
  flex-shrink: 0;
}
.header .wp-block-buttons.header-cta .wp-block-button__link {
  padding: 13px 22px;
  font-size: 14px;
}

/* Mobile : nav cachée sous 1024px (hamburger natif Gutenberg) */
@media (max-width: 1024px) {
  .header .wp-block-navigation__container {
    display: none;
  }

  /* Bouton burger : agrandi et plus visible.
     display:flex !important écrase la règle core Gutenberg
     (@media min-width:600px → display:none) qui, en overlayMenu "mobile",
     masque le burger entre 600px et 1024px (zone morte sans nav ni burger). */
  .header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: var(--brown);
    border-radius: 4px;
  }
  .header .wp-block-navigation__responsive-container-open:hover {
    background: var(--green-soft);
  }

  /* Le bloc navigation core (overlayMenu "mobile", breakpoint 600px) affiche
     le panneau responsive EN FLUX (display:block) entre 600px et 1024px : la
     liste de liens ET la CTA déplacée par le JS s'afficheraient inline à côté
     du burger. On force le conteneur fermé en display:none pour ne garder que
     le burger ; il repasse en overlay quand .is-menu-open est ajouté au clic. */
  .header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  /* La CTA "Nous contacter" du header est déplacée dans le panel en JS,
     donc on la masque dans le header-inner sur mobile. */
  .header .header-inner > .header-cta {
    display: none;
  }

  /* Overlay : conteneur fullscreen = backdrop sombre */
  .header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    /* !important : le core pose background-color:#fff via une règle à
       spécificité 0,5,0 (.wp-block-navigation:not(.has-background) …
       .is-menu-open:not(.disable-default-overlay)) qui bat le sélecteur du
       thème (0,3,0). Sans ça, le voile passe en blanc plein écran. */
    background: rgba(46, 30, 26, 0.45) !important;
    z-index: 100000;
    padding: 0;
    animation: vdop-fade-in 0.2s ease-out;
  }

  /* La zone "close" couvre tout l'écran (catch click-outside-to-close natif) */
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* Dialog = panel à droite */
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    margin: 0;
    padding: 80px 28px 28px;
    background: var(--white);
    box-shadow: -16px 0 40px -8px rgba(46, 30, 26, 0.18);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: vdop-panel-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Bouton fermer */
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    padding: 8px;
    color: var(--brown);
    border-radius: 4px;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
    background: var(--green-soft);
  }

  /* Container content : prend toute la hauteur pour pousser la CTA en bas */
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
    min-width: 0;
  }

  /* Liste verticale */
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--brown);
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
    width: 100%;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    margin-left: auto;
  }

  /* Sous-menu Services : inline, indenté */
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0 8px 16px;
    min-width: 0;
    width: 100%;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 15px;
    font-weight: 500;
    color: var(--slate);
    padding: 10px 0;
    border-bottom: none;
  }

  /* CTA "Nous contacter" déplacée dans le panel par header.js : full width, en bas */
  .header .wp-block-navigation__responsive-container.is-menu-open .header-cta {
    margin-top: auto;
    width: 100%;
    display: flex;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .header-cta .wp-block-button {
    width: 100%;
  }
  .header .wp-block-navigation__responsive-container.is-menu-open .header-cta .wp-block-button__link {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    font-size: 15px;
  }
}

@keyframes vdop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes vdop-panel-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* =====================================================
   CORE/COVER hero (Rule 8)
   Restore the original hero look with our gradient overlay
   ===================================================== */

.wp-block-cover.hero {
  background: var(--brown);
  color: var(--white);
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0;
}
.wp-block-cover.hero .wp-block-cover__background {
  background: linear-gradient(105deg, rgba(46, 30, 26, 0.78) 0%, rgba(46, 30, 26, 0.42) 55%, rgba(46, 30, 26, 0.18) 100%) !important;
  opacity: 1 !important;
}
.wp-block-cover.hero .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center;
}
.wp-block-cover.hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* hero-inner padding restored */
.wp-block-cover.hero .container.hero-inner {
  padding-top: 120px;
  padding-bottom: 140px;
  position: relative;
  z-index: 3;
}
/* hero text color on dark */
.wp-block-cover.hero .wp-block-heading {
  color: var(--white);
}
.wp-block-cover.hero h1 .accent {
  color: var(--green);
}
.wp-block-cover.hero .is-style-lead {
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
}
.wp-block-cover.hero .is-style-emphasis {
  color: var(--white);
}

/* =====================================================
   SVG médiathèque -> core/image
   .service-img-wrap et .client-card .icon contiennent
   maintenant des wp:image au lieu de SVG inline.
   ===================================================== */

.service-img-wrap .wp-block-image,
.service-img-wrap figure {
  margin: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-img-wrap .wp-block-image img,
.service-img-wrap img {
  width: 70px;
  height: 70px;
  display: block;
}

/* Client-card icon */
.client-card .icon .wp-block-image,
.client-card .icon figure {
  margin: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-card .icon .wp-block-image img,
.client-card .icon img {
  width: 32px;
  height: 32px;
  display: block;
}
/* Reset wp-block-group .icon to flex-shrink + size */
.client-card .wp-block-group.icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================
   CONTAINER FIX — Spécificité renforcée pour battre
   les overrides .wp-block-group génériques.
   ===================================================== */

.wp-block-group.container,
div.wp-block-group.container {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Variantes avec classes combinées (container hero-inner, container final-cta-inner, etc.) */
.wp-block-group.container.hero-inner,
.wp-block-group.container.final-cta-inner,
.wp-block-group.container.zone-strip-inner {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* =====================================================
   ICÔNES DROPDOWN SERVICES (CSS-driven, navigation native)
   Ciblage par URL : le client peut renommer les items dans
   l'éditeur, les icônes restent attachées à l'URL.
   ===================================================== */

/* Layout des liens du sous-menu : icône + label alignés */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}

/* Icône via ::before, taille fixe 20px */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: "";
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.15s ease;
}

/* Pas d'icône par défaut si l'URL n'est pas reconnue */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:not([href*="amenagements-paysagers"]):not([href*="espaces-ludiques"]):not([href*="plantations"]):not([href*="clotures"]):not([href*="voirie-et-reseaux"]):not([href*="entretien-d-espaces"])::before {
  display: none;
}

/* 6 icônes mappées par URL — règles background-image injectées via wp_add_inline_style
   (cf. functions.php) pour construire l'URL avec wp_upload_dir() et rester correct
   quel que soit le chemin d'installation (racine, sous-dossier, autre domaine). */

/* =====================================================
   PAGE-HERO (Services + Contact)
   Hero court : eyebrow + H1 + lead + bandeau 4 cellules
   ===================================================== */

.wp-block-group.page-hero {
  background: var(--cream);
  padding: 100px 0 0;
  position: relative;
}
.wp-block-group.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 80px;
}
.wp-block-group.page-hero-inner > * + * {
  margin-block-start: 0;
}
.wp-block-group.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--brown);
  margin: 24px 0 0;
  text-wrap: balance;
}
.wp-block-group.page-hero h1 .accent {
  color: var(--green);
}
.wp-block-group.page-hero .is-style-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 64ch;
  margin: 0;
}

.wp-block-group.page-hero-rule {
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.wp-block-group.page-hero-rule > .wp-block-group.cell {
  padding: 22px 24px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wp-block-group.page-hero-rule > .wp-block-group.cell > * + * {
  margin-block-start: 0;
}
.wp-block-group.page-hero-rule > .wp-block-group.cell:last-child {
  border-right: none;
}
.wp-block-group.page-hero-rule p.k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 0;
}
.wp-block-group.page-hero-rule p.v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--brown);
  margin: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.page-hero-rule {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-group.page-hero-rule > .wp-block-group.cell:nth-child(2n) {
    border-right: none;
  }
  .wp-block-group.page-hero-rule > .wp-block-group.cell:not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 640px) {
  .wp-block-group.page-hero-rule {
    grid-template-columns: 1fr;
  }
  .wp-block-group.page-hero-rule > .wp-block-group.cell {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .wp-block-group.page-hero-rule > .wp-block-group.cell:last-child {
    border-bottom: none;
  }
}

/* =====================================================
   PAGE — SERVICES (liste alternée 6 services)
   ===================================================== */
.wp-block-group.services-list {
  background: var(--white);
  padding: clamp(72px, 9vw, 128px) 0;
}

.wp-block-group.srv-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.wp-block-group.srv-row > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-row:last-child {
  border-bottom: none;
}
.wp-block-group.srv-row.is-style-reverse .wp-block-group.srv-media {
  order: 2;
}
.wp-block-group.srv-row.is-style-reverse .wp-block-group.srv-content {
  order: 1;
}

.wp-block-group.srv-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.wp-block-group.srv-media .wp-block-image,
.wp-block-group.srv-media figure {
  margin: 0;
  width: 100%;
  height: 100%;
}
.wp-block-group.srv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.wp-block-group.srv-row:hover .wp-block-group.srv-media img {
  transform: scale(1.03);
}
.wp-block-group.srv-media p.srv-num {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--white);
  color: var(--brown);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  z-index: 2;
  margin: 0;
}
.wp-block-group.srv-media::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  background: var(--green);
  transform: rotate(45deg);
  opacity: 0.95;
  z-index: 2;
}

.wp-block-group.srv-content {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
.wp-block-group.srv-content > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-content p.srv-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.wp-block-group.srv-content p.srv-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.wp-block-group.srv-content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 18px 0 18px;
  text-wrap: balance;
}
.wp-block-group.srv-content p.srv-lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--slate);
  margin: 0 0 28px;
  max-width: 52ch;
}
.wp-block-group.srv-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 30px;
}
.wp-block-group.srv-tags > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-tags p.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--green-soft);
  color: var(--brown);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  margin: 0;
}
.wp-block-group.srv-tags p.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.srv-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0;
  }
  .wp-block-group.srv-row.is-style-reverse .wp-block-group.srv-media,
  .wp-block-group.srv-row.is-style-reverse .wp-block-group.srv-content {
    order: initial;
  }
}

/* =====================================================
   PAGE — CONTACT (liste typographique 4 colonnes)
   ===================================================== */
.wp-block-group.contact-info-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 40px;
  padding-top: 8px;
  padding-bottom: 80px;
}
.wp-block-group.contact-info-list > * + * {
  margin-block-start: 0;
}
.wp-block-group.contact-info-item {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.wp-block-group.contact-info-item > * + * {
  margin-block-start: 0;
}
.wp-block-group.contact-info-item p.contact-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 0;
}
.wp-block-group.contact-info-item p.contact-txt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--brown);
  letter-spacing: -0.005em;
  margin: 0;
}
.wp-block-group.contact-info-item p.contact-meta {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.contact-info-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .wp-block-group.contact-info-list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   FORM-SECTION (Contact + Recrutement)
   Grille 2 colonnes : info-side + formulaire Gravity Forms
   ===================================================== */
.wp-block-group.form-section {
  background: var(--white);
  padding: clamp(72px, 9vw, 120px) 0;
}
.wp-block-group.form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: flex-start;
}
.wp-block-group.form-grid > * + * {
  margin-block-start: 0;
}

.wp-block-group.info-side > * + * {
  margin-block-start: 0;
}
.wp-block-group.info-side h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 16px 0 24px;
  text-wrap: balance;
}
.wp-block-group.info-side p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0 0 18px;
}
.wp-block-group.info-side p strong {
  color: var(--brown);
  font-weight: 600;
}

.wp-block-group.info-list {
  border-top: 1px solid var(--border);
  margin-top: 32px !important;
  padding: 0;
  display: flex !important;
  flex-direction: column;
}
.wp-block-group.info-list > .wp-block-group.info-row {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.wp-block-group.info-list > .wp-block-group.info-row > * + * {
  margin-block-start: 0;
}
.wp-block-group.info-list p.info-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0;
}
.wp-block-group.info-list p.info-value {
  font-size: 14.5px;
  color: var(--slate);
  margin: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.form-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* =====================================================
   PAGE — RECRUTEMENT
   Hero brun + pillars + offers placeholder
   ===================================================== */
.wp-block-group.recrut-hero {
  background: var(--brown);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 110px 0 100px;
}
.wp-block-group.recrut-hero > .wp-block-group.container {
  position: relative;
  z-index: 2;
}
.wp-block-group.recrut-hero-inner > * + * {
  margin-block-start: 0;
}
.wp-block-group.recrut-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 24px 0 28px;
  text-wrap: balance;
  color: var(--white);
}
.wp-block-group.recrut-hero h1 .accent {
  color: var(--green);
}
.wp-block-group.recrut-hero .is-style-lead {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin: 0 0 16px;
}
.wp-block-group.recrut-hero .is-style-lead strong {
  color: var(--white);
  font-weight: 600;
}
.wp-block-group.recrut-hero p.recrut-call {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--green);
  margin: 24px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.wp-block-group.recrut-hero p.recrut-call::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--green);
}

/* Pourquoi nous rejoindre */
.wp-block-group.recrut-pillars {
  background: var(--white);
  padding: clamp(72px, 9vw, 120px) 0;
}
.wp-block-group.pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.wp-block-group.pillars-grid > * + * {
  margin-block-start: 0;
}
.wp-block-group.pillar {
  background: var(--white);
  padding: 36px 28px;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
}
.wp-block-group.pillar > * + * {
  margin-block-start: 0;
}
.wp-block-group.pillar p.pillar-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--green-dark);
  margin: 0;
}
.wp-block-group.pillar h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--brown);
  margin: 4px 0 0;
}
.wp-block-group.pillar p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
  flex-grow: 1;
  margin: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .wp-block-group.pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* Offers placeholder */
.wp-block-group.recrut-offers {
  background: var(--cream);
  padding: clamp(72px, 9vw, 120px) 0;
}
.wp-block-group.recrut-offers-row {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: flex-start;
}
.wp-block-group.recrut-offers-row > * + * {
  margin-block-start: 0;
}
.wp-block-group.recrut-offers-row > .wp-block-group > * + * {
  margin-block-start: 0;
}
.wp-block-group.recrut-offers h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 16px 0 24px;
}
.wp-block-group.recrut-offers p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
}
.wp-block-group.offers-empty {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 36px 36px;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
.wp-block-group.offers-empty > * + * {
  margin-block-start: 0;
}
.wp-block-group.offers-empty p.offers-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 0 0 2px;
}
.wp-block-group.offers-empty h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--brown);
  margin: 0 0 10px;
}
.wp-block-group.offers-empty p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.recrut-offers-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =====================================================
   GRAVITY FORMS — styling natif 2.5+ markup
   ===================================================== */
.gform_wrapper {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 40px 40px;
}
.gform_wrapper .gform_heading {
  margin-bottom: 28px;
}
.gform_wrapper .gform_title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 0 0 8px;
}
.gform_wrapper .gform_description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
}
.gform_wrapper .gform_required_legend {
  font-size: 12px;
  color: var(--slate);
  font-style: italic;
  margin-top: 8px;
  display: block;
}
.gform_wrapper .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.gform_wrapper .gfield.gfield--width-full,
.gform_wrapper .gfield--full,
.gform_wrapper .gfield_html,
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-select,
.gform_wrapper .gfield--type-fileupload,
.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield--input-type-file,
.gform_wrapper .gfield--input-type-checkbox {
  grid-column: 1 / -1;
}
.gform_wrapper .gfield_label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
  display: flex;
  align-items: center;
  gap: 6px;
}
.gform_wrapper .gfield_required {
  color: var(--green-dark);
  font-weight: 700;
}
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="file"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  width: 100%;
  font: 400 15px var(--font-body);
  color: var(--brown);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 13px 14px;
  border-radius: 0;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(149, 193, 31, 0.18);
}
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
  color: var(--slate-light);
}
.gform_wrapper .ginput_container textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-body);
}
.gform_wrapper .ginput_container select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%232E1E1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.gform_wrapper .ginput_container_fileupload input[type="file"] {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--slate);
  background: var(--white);
  cursor: pointer;
}
.gform_wrapper .gform_fileupload_rules,
.gform_wrapper .gfield_description {
  display: block;
  font-size: 12px;
  color: var(--slate-light);
  margin-top: 6px;
  font-style: italic;
}

/* Consent checkbox (RGPD) */
.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield--input-type-checkbox {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 16px 18px;
}
.gform_wrapper .gfield--type-consent .ginput_container_consent,
.gform_wrapper .gfield--input-type-checkbox .ginput_container_checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
}
.gform_wrapper .gfield--type-consent input[type="checkbox"],
.gform_wrapper .gfield--input-type-checkbox input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--brown);
  background: var(--white);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  margin: 1px 0 0;
  border-radius: 0;
}
.gform_wrapper .gfield--type-consent input[type="checkbox"]:checked,
.gform_wrapper .gfield--input-type-checkbox input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.gform_wrapper .gfield--type-consent input[type="checkbox"]:checked::after,
.gform_wrapper .gfield--input-type-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}
.gform_wrapper .gfield--type-consent label,
.gform_wrapper .gfield--input-type-checkbox label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  cursor: pointer;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  font-family: var(--font-body);
}
.gform_wrapper .gfield--type-consent label a,
.gform_wrapper .gfield--input-type-checkbox label a {
  color: var(--green-dark);
  text-decoration: underline;
}

/* Footer / submit */
.gform_wrapper .gform_footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
}
.gform_wrapper .gform_button {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--brown);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  text-transform: uppercase;
  border: none;
  width: auto;
}
.gform_wrapper .gform_button::after {
  content: "→";
  font-weight: 400;
  font-size: 16px;
}
.gform_wrapper .gform_button:hover {
  background: var(--green);
  color: var(--brown);
}

/* Validation errors */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: #c0392b;
}
.gform_wrapper .validation_message {
  color: #c0392b;
  font-size: 12px;
  margin-top: 4px;
}
.gform_wrapper .gform_validation_errors {
  background: #fdecea;
  border: 1px solid #c0392b;
  padding: 14px 18px;
  margin-bottom: 24px;
  color: #c0392b;
  font-size: 14px;
}
.gform_confirmation_message {
  background: var(--green-soft);
  border: 1px solid var(--green);
  padding: 20px 24px;
  color: var(--brown);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}

@media (max-width: 640px) {
  .gform_wrapper {
    padding: 28px 22px;
  }
  .gform_wrapper .gform_fields {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   PAGE — HERO AUTO depuis l'image à la une
   Le template page.html rend systématiquement un core/cover
   useFeaturedImage + post-title, et un post-title de repli ;
   on bascule l'un ou l'autre via la classe `has-post-thumbnail`
   automatiquement posée par WordPress sur <body>.
   ===================================================== */

body:not(.has-post-thumbnail) .wp-block-cover.page-hero {
  display: none;
}
body.has-post-thumbnail .page-title-no-hero {
  display: none;
}

/* Cadrage du titre de repli (pages sans image à la une) — le <main> est en
   layout default, donc le titre n'hérite pas du contentSize ; on lui applique
   un max-width et un padding cohérents avec `.container`. */
.page-title-no-hero {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.wp-block-cover.page-hero {
  position: relative;
  min-height: 310px;
  display: flex;
  align-items: flex-end;
  background: var(--brown);
  color: var(--white);
  overflow: hidden;
  padding: 0;
}
.wp-block-cover.page-hero .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(46, 30, 26, 0.35) 0%, rgba(46, 30, 26, 0.45) 50%, rgba(46, 30, 26, 0.88) 100%) !important;
  opacity: 1 !important;
}
.wp-block-cover.page-hero .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center;
}
.wp-block-cover.page-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  padding: 0;
}
.wp-block-cover.page-hero .wp-block-group.container {
  padding-top: 80px;
  padding-bottom: 60px;
  position: relative;
  z-index: 3;
}
.wp-block-cover.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
  color: var(--white);
}

/* =====================================================
   PAGE — SERVICE DETAIL (sous-pages)
   Hero plein écran + intro + Nous réalisons + engagement
   + galerie réalisations (Query Loop) + CTA + related
   ===================================================== */

/* --- Hero plein écran fond brun avec image overlay --- */
.wp-block-cover.srv-detail-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  background: var(--brown);
  color: var(--white);
  overflow: hidden;
  padding: 0;
}
.wp-block-cover.srv-detail-hero .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(46, 30, 26, 0.35) 0%, rgba(46, 30, 26, 0.45) 50%, rgba(46, 30, 26, 0.88) 100%) !important;
  opacity: 1 !important;
}
.wp-block-cover.srv-detail-hero .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center;
}
.wp-block-cover.srv-detail-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  padding: 0;
}
.wp-block-cover.srv-detail-hero .wp-block-group.container {
  padding-top: 80px;
  padding-bottom: 60px;
  position: relative;
  z-index: 3;
}
.wp-block-cover.srv-detail-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
  color: var(--white);
}

/* --- Breadcrumbs --- */
.wp-block-group.crumbs {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  flex-wrap: wrap;
}
.wp-block-group.crumbs > * + * {
  margin-block-start: 0;
}
.wp-block-group.crumbs p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.wp-block-group.crumbs p a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.wp-block-group.crumbs p a:hover {
  color: var(--green);
}
.wp-block-group.crumbs p.crumb-sep {
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
}
.wp-block-group.crumbs p.crumb-current {
  color: var(--white);
}

/* --- Grand numéro décoratif en bas à droite --- */
.wp-block-cover.srv-detail-hero p.srv-num-big {
  position: absolute;
  right: var(--pad);
  bottom: 60px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: -0.04em;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

/* --- Intro : eyebrow + h2 / paragraphes en 2 colonnes --- */
.wp-block-group.srv-intro {
  background: var(--white);
  padding: clamp(72px, 9vw, 120px) 0;
}
.wp-block-group.srv-intro-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: flex-start;
}
.wp-block-group.srv-intro-grid > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-intro-grid > .wp-block-group > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-intro h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brown);
  margin: 12px 0 0;
  text-wrap: balance;
}
.wp-block-group.intro-body > * + * {
  margin-block-start: 0;
}
.wp-block-group.intro-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0 0 18px;
}
.wp-block-group.intro-body p:last-child {
  margin-bottom: 0;
}
.wp-block-group.intro-body p strong {
  color: var(--brown);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .wp-block-group.srv-intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- "Nous réalisons" + Aside engagement --- */
.wp-block-group.srv-pres {
  background: var(--cream);
  padding: clamp(72px, 9vw, 120px) 0;
}
.wp-block-group.srv-pres-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: flex-start;
}
.wp-block-group.srv-pres-grid > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-pres-grid > .wp-block-group > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-pres-left h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 16px 0 32px;
}
.wp-block-group.srv-pres-left ul.srv-realise,
.wp-block-group.srv-pres-left .wp-block-list.srv-realise {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.wp-block-group.srv-pres-left ul.srv-realise li,
.wp-block-group.srv-pres-left .wp-block-list.srv-realise li {
  position: relative;
  padding: 18px 0 18px 50px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--brown);
}
.wp-block-group.srv-pres-left ul.srv-realise li::before,
.wp-block-group.srv-pres-left .wp-block-list.srv-realise li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background: var(--green);
  transform: rotate(45deg);
}

/* --- Aside engagement (fond brun) --- */
.wp-block-group.srv-engagement {
  background: var(--brown);
  color: var(--white);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.wp-block-group.srv-engagement > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-engagement p.srv-engagement-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 18px;
  display: block;
}
.wp-block-group.srv-engagement h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 18px;
}
.wp-block-group.srv-engagement p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
}
.wp-block-group.srv-engagement p:last-child {
  margin-bottom: 0;
}
.wp-block-group.srv-engagement::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 160px;
  height: 160px;
  background: var(--green);
  transform: rotate(45deg);
  opacity: 0.12;
  pointer-events: none;
}
.wp-block-group.srv-engagement ul.srv-sublist,
.wp-block-group.srv-engagement .wp-block-list.srv-sublist {
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wp-block-group.srv-engagement ul.srv-sublist li,
.wp-block-group.srv-engagement .wp-block-list.srv-sublist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
}
.wp-block-group.srv-engagement ul.srv-sublist li::before,
.wp-block-group.srv-engagement .wp-block-list.srv-sublist li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .wp-block-group.srv-pres-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Galerie réalisations (réutilise les styles .realisations) --- */
.wp-block-group.srv-gallery {
  background: var(--white);
  padding: clamp(72px, 9vw, 120px) 0;
}

/* --- CTA contextuel (variante de .final-cta) --- */
.wp-block-group.srv-cta {
  background: var(--green);
  color: var(--brown);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.wp-block-group.srv-cta-inner {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.wp-block-group.srv-cta-inner > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-cta-inner > .wp-block-group > * + * {
  margin-block-start: 0;
}
.wp-block-group.srv-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.wp-block-group.srv-cta .is-style-lead {
  color: rgba(46, 30, 26, 0.78);
  margin-top: 18px;
  max-width: 52ch;
}
.wp-block-group.srv-cta::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  background: var(--yellow);
  transform: rotate(45deg);
  opacity: 0.55;
  pointer-events: none;
}
.wp-block-group.srv-cta::after {
  content: "";
  position: absolute;
  right: 60px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  background: rgba(46, 30, 26, 0.08);
  transform: rotate(45deg);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .wp-block-group.srv-cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Related services (bottom nav) --- */
.wp-block-group.related-services {
  background: var(--cream);
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.wp-block-group.related-services .wp-block-group.section-head-row {
  margin-bottom: 28px;
}
.wp-block-group.related-services h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 0;
}
.wp-block-group.related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.wp-block-group.related-grid > * + * {
  margin-block-start: 0;
}
.wp-block-group.related-card {
  background: var(--white);
  padding: 24px 24px;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  transition: background 0.2s ease;
  position: relative;
}
.wp-block-group.related-card > * + * {
  margin-block-start: 0;
}
.wp-block-group.related-card:hover {
  background: var(--green-soft);
}
.wp-block-group.related-card p.related-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--green-dark);
  width: 40px;
  margin: 0;
  flex-shrink: 0;
}
.wp-block-group.related-card p.related-label {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--brown);
  margin: 0;
}
.wp-block-group.related-card p.related-label a {
  color: inherit;
  text-decoration: none;
}
.wp-block-group.related-card p.related-label a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wp-block-group.related-card::after {
  content: "→";
  color: var(--brown);
  font-size: 18px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.wp-block-group.related-card:hover::after {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .wp-block-group.related-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   VDOP/PRESTATION-FILTERS + PAGINATION (archives réalisations)
   ===================================================== */

/* --- Chips de filtre par prestation --- */
.vdop-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px auto 50px;
  padding: 0;
}
.vdop-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--cream);
  border: 1px solid rgba(46, 30, 26, 0.08);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--brown);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.vdop-filter::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.55;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}
.vdop-filter:hover {
  background: var(--green-soft);
  border-color: rgba(149, 193, 31, 0.35);
  color: var(--brown);
}
.vdop-filter:hover::before {
  opacity: 1;
}
.vdop-filter.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.vdop-filter.is-active::before {
  background: var(--white);
  opacity: 1;
}

/* --- Pagination de la Query Loop sur les archives réalisations --- */
.realisations .wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 64px;
}
.realisations .wp-block-query-pagination-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px;
}
.realisations .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--white);
  border: 1px solid rgba(46, 30, 26, 0.1);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--brown);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.realisations a.page-numbers:hover {
  background: var(--green-soft);
  border-color: rgba(149, 193, 31, 0.35);
  color: var(--brown);
}
.realisations .page-numbers.current,
.realisations span.page-numbers.current {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.realisations .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  color: var(--slate-light);
}

.realisations .wp-block-query-pagination-previous,
.realisations .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brown);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  transition:
    gap 0.15s ease,
    color 0.15s ease;
}
.realisations .wp-block-query-pagination-previous:hover,
.realisations .wp-block-query-pagination-next:hover {
  gap: 14px;
  color: var(--green-dark);
}

@media (max-width: 600px) {
  .vdop-filters {
    gap: 8px;
    margin-bottom: 36px;
  }
  .vdop-filter {
    padding: 7px 13px;
    font-size: 12.5px;
  }
  .realisations .wp-block-query-pagination {
    margin-top: 44px;
    gap: 4px;
  }
  .realisations .wp-block-query-pagination-numbers {
    margin: 0 4px;
    gap: 4px;
  }
  .realisations .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
    padding: 0 9px;
  }
  .realisations .wp-block-query-pagination-previous,
  .realisations .wp-block-query-pagination-next {
    font-size: 12px;
    padding: 8px 2px;
  }
}

/* =====================================================
   PAGES LÉGALES (Mentions légales, Politique de confidentialité)
   Texte long en gabarit étroit, typographie sobre.
   ===================================================== */
.wp-block-group.legal-page {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.wp-block-group.legal-content {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.legal-content h2.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin-top: clamp(40px, 4vw, 56px);
}
.legal-content > h2.wp-block-heading:first-child {
  margin-top: 0;
}
.legal-content h3.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.3;
  color: var(--brown);
  margin-top: 28px;
}
.legal-content h2 + h3.wp-block-heading {
  margin-top: 20px;
}
.legal-content p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate);
  margin-top: 14px !important;
}
.legal-content h2 + p,
.legal-content h3 + p {
  margin-top: 12px !important;
}
.legal-content p strong {
  color: var(--brown);
  font-weight: 600;
}
.legal-content p a,
.legal-content li a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-content p a:hover,
.legal-content li a:hover {
  color: var(--brown);
}
.legal-content ul.wp-block-list,
.wp-block-post-content ul.wp-block-list {
  margin-top: 14px;
  padding-left: 1.75em;
  list-style: disc;
}
.legal-content ul.wp-block-list li,
.wp-block-post-content ul.wp-block-list li {
  font-size: 15px;
  line-height: 1.6;
  color: inherit;
}
.legal-content ul.wp-block-list li + li,
.wp-block-post-content ul.wp-block-list li + li {
  margin-top: 6px;
}
.legal-content ul.wp-block-list li::marker,
.wp-block-post-content ul.wp-block-list li::marker {
  color: var(--green);
}

/* =========================================================================
   Reveal au défilement (fade + glissement léger)
   - Le masquage n'est actif que sous html.reveal-on (posée en <head> uniquement
     si IntersectionObserver dispo + pas de prefers-reduced-motion). Sans JS,
     aucun élément n'est caché : dégradation propre, pas de flash.
   - JS (assets/js/reveal.js) ajoute .is-visible quand l'élément entre à l'écran.
   ========================================================================= */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

/* Enfants de grille : glissement plus discret (la cascade fait le travail). */
.reveal-on .reveal.reveal--item {
  transform: translateY(16px);
}

.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respect de la préférence système : aucune animation, contenu toujours visible.
   (En théorie reveal-on n'est jamais posée dans ce cas, ceinture + bretelles.) */
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal,
  .reveal-on .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}