/* ==========================================================================
   Futur Bat - Composants V2
   Theme charbon/pierre. Animations cinematographiques.
   prefers-reduced-motion neutralise en fin de fichier.
   ========================================================================== */

/* Curseur custom retire en V2.2 : gadget ecarte par l'audit design senior. */

/* ==========================================================================
   Etats d'animation au scroll (gates sur scripting actif)
   ========================================================================== */
@media (scripting: enabled) {
  [data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
  }
  [data-animate].is-visible { opacity: 1; transform: none; }
  [data-animate]:nth-child(2) { transition-delay: 90ms; }
  [data-animate]:nth-child(3) { transition-delay: 180ms; }
  [data-animate]:nth-child(4) { transition-delay: 270ms; }

  .reveal-img {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
  }
  .reveal-img.is-visible { opacity: 1; transform: none; }

  /* Mask reveal cinematographique des sections */
  [data-reveal] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--duration-cinematic) var(--ease-emphasized);
    will-change: clip-path;
  }
  [data-reveal].is-visible { clip-path: inset(0); }
  figure:has(img[data-parallax]) { overflow: hidden; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.site-header.scrolled {
  background-color: rgba(26, 25, 23, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--nav-height);
}
.nav-logo {
  margin-right: auto;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-strong);
  text-decoration: none;
}
.nav-main { display: none; }
.nav-cta { display: none; }
.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
}
.nav-burger-bar {
  display: block;
  width: 24px;
  height: 1px;
  margin-inline: auto;
  background-color: var(--text);
  transition: transform var(--duration-base) var(--ease-out);
}

@media (min-width: 1024px) {
  .nav-burger { display: none; }
  .nav-cta { display: inline-flex; }
  .nav-main { position: relative; display: flex; align-items: center; }
  .nav-links { display: flex; gap: var(--sp-6); }
  .nav-link {
    position: relative;
    display: block;
    padding: var(--sp-2) 0;
    color: var(--muted);
    font-size: var(--fs-tag);
    font-weight: 300;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-out);
  }
  .nav-link:hover { color: var(--text-strong); }
  .nav-link[aria-current="page"] { color: var(--text-strong); }
  .nav-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background-color: var(--accent);
    transition: transform var(--duration-base) var(--ease-out),
                width var(--duration-base) var(--ease-out);
    pointer-events: none;
  }
}

/* ----- Menu deroulant (desktop) ----- */
.nav-item { position: relative; }
.nav-link.is-section { color: var(--text-strong); }
.nav-has-menu > .nav-link { display: inline-flex; align-items: center; gap: 0.45em; }
.nav-has-menu > .nav-link::after {
  content: "";
  width: 0.34em;
  height: 0.34em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.nav-has-menu:hover > .nav-link::after,
.nav-has-menu:focus-within > .nav-link::after {
  transform: translateY(0.05em) rotate(-135deg);
}
.nav-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 50%;
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) 0;
  background-color: var(--bg-deep);
  border: 1px solid var(--border-strong);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
  z-index: var(--z-nav);
}
.nav-has-menu:hover > .nav-menu,
.nav-has-menu:focus-within > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s;
}
.nav-has-menu.nav-menu-dismissed > .nav-menu {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
}
.nav-menu-list { display: flex; flex-direction: column; }
.nav-menu-link {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 300;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.nav-menu-link:hover,
.nav-menu-link:focus-visible {
  color: var(--text-strong);
  background-color: var(--bg-alt);
  transform: translateX(4px);
}
.nav-menu-link[aria-current="page"] { color: var(--accent); }

/* ----- Menu mobile ----- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  background-color: var(--bg-deep);
  color: var(--text);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { animation: menuIn var(--duration-base) var(--ease-out); }
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
}
.mobile-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
}
.mobile-nav { margin-top: var(--sp-6); }
.mobile-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.mobile-links a {
  display: block;
  padding: var(--sp-3) 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  color: var(--text-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mobile-links a[aria-current="page"] { color: var(--accent); }
.mobile-links .mobile-sub a {
  padding-left: var(--sp-6);
  font-size: var(--fs-h4);
  font-weight: 300;
  color: var(--muted);
}
.mobile-links .mobile-sub a:hover { color: var(--text-strong); }
.mobile-links .mobile-sub a[aria-current="page"] { color: var(--accent); }
.mobile-group-label {
  margin-top: var(--sp-4);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-soft);
}
.mobile-cta { margin-top: var(--sp-6); align-self: flex-start; }
.mobile-footer {
  margin-top: auto;
  padding-top: var(--sp-6);
  color: var(--muted);
  font-size: var(--fs-small);
}
.mobile-footer p + p { margin-top: var(--sp-1); }

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.breadcrumb {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter) 0;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--muted);
}
.breadcrumb-list li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb-list li + li::before { content: "\00b7"; color: var(--muted-soft); }
.breadcrumb-list a { color: var(--muted); text-decoration: none; }
.breadcrumb-list a:hover { color: var(--accent); }
.breadcrumb-list [aria-current="page"] { color: var(--text); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { display: flex; flex-direction: column; }
.hero-inner-wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
}
.hero-home .hero-inner-wrap { padding-block: var(--sp-8) var(--sp-7); }
.hero-bare .hero-inner-wrap { padding-block: var(--sp-7) var(--sp-5); }

.hero-tag {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.hero-title { max-width: 20ch; color: var(--text-strong); }
.hero-home .hero-title {
  font-size: var(--fs-hero);
  font-weight: 250;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.hero-inner .hero-title { font-size: var(--fs-h1); font-weight: 300; max-width: 24ch; }
.hero-title em { font-style: italic; font-weight: 250; color: var(--accent-light); }

.hero-sub {
  max-width: 48ch;
  margin-top: var(--sp-5);
  color: var(--muted);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-body);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-media { position: relative; width: 100%; }
.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26, 25, 23, 0.55) 100%);
  pointer-events: none;
}

/* Hero reveal cinematographique : mot par mot */
.hero-title[data-word-reveal] .word {
  display: inline-block;
  animation: wordReveal 800ms var(--ease-out) backwards;
}
.hero-title[data-word-reveal] .word:nth-child(1) { animation-delay: 100ms; }
.hero-title[data-word-reveal] .word:nth-child(2) { animation-delay: 160ms; }
.hero-title[data-word-reveal] .word:nth-child(3) { animation-delay: 220ms; }
.hero-title[data-word-reveal] .word:nth-child(4) { animation-delay: 280ms; }
.hero-title[data-word-reveal] .word:nth-child(5) { animation-delay: 340ms; }
.hero-title[data-word-reveal] .word:nth-child(6) { animation-delay: 400ms; }
.hero-title[data-word-reveal] .word:nth-child(7) { animation-delay: 460ms; }
.hero-title[data-word-reveal] .word:nth-child(8) { animation-delay: 520ms; }
.hero-title[data-word-reveal] em { animation: emSpacing var(--duration-cinematic) var(--ease-out) backwards; }
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes emSpacing {
  from { letter-spacing: 0.05em; }
  to { letter-spacing: 0; }
}
.hero-inner .hero-title { animation: fadeUp var(--duration-slow) var(--ease-out) 120ms backwards; }
.hero-tag { animation: fadeRight 600ms var(--ease-out) 100ms backwards; }
.hero-sub { animation: fadeUp var(--duration-slow) var(--ease-out) 400ms backwards; }
.hero-actions { animation: fadeUp var(--duration-slow) var(--ease-out) 550ms backwards; }
.hero-inner .hero-sub { animation-delay: 280ms; }
.hero-inner .hero-actions { animation-delay: 400ms; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 1rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.btn-primary {
  color: var(--text-strong);
  background-color: transparent;
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--bg);
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary {
  color: var(--text);
  background-color: transparent;
  border-color: var(--border-strong);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--text-strong);
  border-color: var(--text);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:hover,
.btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ----- Lien de carte (CTA tertiaire) ----- */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  color: var(--accent);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  background-image: linear-gradient(var(--accent-light), var(--accent-light));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.card-link::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.card-link:hover,
.card-link:focus-visible {
  color: var(--accent-light);
  background-size: calc(100% - 1.25em) 1px;
}
.card-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ----- Lien en prose (souligne, accessible) ----- */
.link {
  color: var(--accent);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--duration-base) var(--ease-out),
              text-decoration-color var(--duration-base) var(--ease-out),
              text-decoration-thickness var(--duration-fast) var(--ease-out);
}
.link:hover,
.link:focus-visible {
  color: var(--accent-light);
  text-decoration-color: var(--accent-light);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Section chiffres
   ========================================================================== */
.section-stats { background-color: var(--bg-alt); }
.stats-head { margin-bottom: var(--sp-6); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-4);
}
.stat { display: flex; flex-direction: column; gap: var(--sp-2); }
.stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(3.25rem, 6vw, 5rem);
  line-height: 1;
  color: var(--accent-light);
}
.stat-label {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  line-height: var(--lh-tight);
}
.stats-aside { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 1024px) {
  .stats-aside { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--sp-7); }
}
.stats-media { overflow: hidden; }
.stats-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.stats-note { font-size: var(--fs-h4); line-height: var(--lh-body); color: var(--text); }

/* ==========================================================================
   Cartes service (accueil)
   ========================================================================== */
.services-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
.card-service {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out),
              filter var(--duration-slow) var(--ease-out);
}
.card-media::after {
  content: "";
  position: absolute;
  inset: var(--sp-2);
  border: 1px solid transparent;
  transition: border-color var(--duration-slow) var(--ease-out);
  pointer-events: none;
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}
.card-index {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--accent-deep);
  transition: color var(--duration-base) var(--ease-out);
}
.card-title { font-size: var(--fs-h3); }
.card-text { color: var(--muted); flex-grow: 1; }
.card-service:hover,
.card-service:focus-within { transform: translateY(-4px); border-top-color: var(--accent); }
.card-service:hover .card-media img,
.card-service:focus-within .card-media img {
  transform: scale(1.04);
  filter: contrast(1.05) saturate(1.12);
}
.card-service:hover .card-media::after,
.card-service:focus-within .card-media::after { border-color: var(--accent); }
.card-service:hover .card-index,
.card-service:focus-within .card-index { color: var(--accent); }
.section-action { margin-top: var(--sp-6); }

/* ==========================================================================
   Lignes service (page hub)
   ========================================================================== */
.service-rows { display: flex; flex-direction: column; }
.service-row {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
}
.service-row:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 768px) {
  .service-row { grid-template-columns: 7rem 1fr; gap: var(--sp-6); }
}
.service-row-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-h1);
  color: var(--accent-deep);
  line-height: 1;
}
.service-row-body { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.service-row-kicker {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-tag);
  font-weight: 500;
  color: var(--accent);
}
.service-row-title { font-size: var(--fs-h3); }
.service-row-text { color: var(--muted); max-width: 60ch; }

/* ==========================================================================
   Raisons / differences (listes a 3)
   ========================================================================== */
.reasons-list { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .reasons-list { grid-template-columns: repeat(3, 1fr); } }
.reason {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--accent);
}
.reason-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-h2);
  color: var(--accent);
  line-height: 1;
}
.reason-title { font-size: var(--fs-h3); }
.reason-text { color: var(--muted); }

/* ==========================================================================
   Methode (etapes)
   ========================================================================== */
.method-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.method-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-h4);
  color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
}
.step-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.step-title { font-size: var(--fs-h4); }
.step-text { color: var(--muted); }
.method-list-wide .method-step { align-items: center; }
.method-media { overflow: hidden; }
.method-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ==========================================================================
   Familles de renovation
   ========================================================================== */
.families-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .families-grid { grid-template-columns: repeat(3, 1fr); } }
.family {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background-color: var(--bg-alt);
  border-top: 1px solid var(--border-strong);
}
.family-kicker {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-tag);
  font-weight: 500;
  color: var(--accent);
}
.family-title { font-size: var(--fs-h3); }
.family-text { color: var(--muted); }

/* ==========================================================================
   Listes inclus / non inclus
   ========================================================================== */
.check-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.check-list li,
.cross-list li { position: relative; padding-left: 1.875rem; line-height: var(--lh-body); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.2em;
  width: 0.5rem;
  height: 0.85rem;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}
.cross-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.cross-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.85rem;
  height: 1px;
  background-color: var(--muted-soft);
}
@media (min-width: 768px) {
  .check-list-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3) var(--sp-6);
  }
}

/* ----- Perimetre inclus / non inclus + media ----- */
.scope-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
  .scope-layout { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); align-items: start; }
}
.scope-lists { display: grid; gap: var(--sp-6); }
@media (min-width: 640px) { .scope-lists { grid-template-columns: repeat(2, 1fr); } }
.scope-block-title {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  font-size: var(--fs-h4);
  border-bottom: 1px solid var(--border);
}
.scope-media { overflow: hidden; }
.scope-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.section-deliver .check-list { max-width: 60rem; }

/* ==========================================================================
   Zone d'intervention
   ========================================================================== */
.zone-media img,
.zone-media svg { width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.zone-cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0 var(--sp-5);
}

/* ==========================================================================
   Section Matiere (V2)
   ========================================================================== */
.matiere {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(86vh, 760px);
  padding: var(--sp-9) var(--gutter);
  overflow: hidden;
}
.matiere-image { position: absolute; inset: 0; }
.matiere-image img { width: 100%; height: 100%; object-fit: cover; }
.matiere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 25, 23, 0.82) 0%, rgba(26, 25, 23, 0.66) 100%);
  pointer-events: none;
}
.matiere-text {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  text-align: center;
}
.matiere-text .hero-tag { color: var(--accent-light); border-bottom-color: var(--accent-deep); }
.matiere-quote {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.matiere-quote em { font-style: italic; font-weight: 300; color: var(--accent-light); }

/* ==========================================================================
   FAQ (details/summary natifs)
   ========================================================================== */
.faq-list { max-width: 58rem; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h4);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--accent); }
.faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding-bottom: var(--sp-4); max-width: 64ch; }
.faq-answer p { color: var(--muted); }
.faq-item[open] .faq-answer { animation: faqSlide var(--duration-base) var(--ease-out); }
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Bande villa pleine page (respiration avant le CTA)
   ========================================================================== */
.band-villa {
  position: relative;
  width: 100%;
  height: clamp(20rem, 54vh, 34rem);
  overflow: hidden;
}
.band-villa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Bande CTA
   ========================================================================== */
.cta-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--gutter);
  text-align: center;
  background-color: var(--bg-deep);
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -2.5rem;
  bottom: -7rem;
  width: 19rem;
  height: 23.9rem;
  background-image: url('/assets/images/logo-futurbat-monumental.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-title { color: var(--text-strong); }
.cta-text { max-width: 52ch; color: var(--muted); font-size: var(--fs-h4); }
.cta-band .btn { margin-top: var(--sp-2); }

/* ==========================================================================
   Liens connexes
   ========================================================================== */
.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Cartes realisation (structure phase 2)
   ========================================================================== */
.projects-grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
@media (min-width: 640px) { .projects-grid:not(:empty) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .projects-grid:not(:empty) { grid-template-columns: repeat(3, 1fr); } }
.projects-grid:empty { display: none; }
.card-realisation {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.card-realisation .card-media { aspect-ratio: 3 / 2; }
.card-realisation:hover,
.card-realisation:focus-within { transform: translateY(-4px); border-top-color: var(--accent); }
.card-realisation:hover .card-media img,
.card-realisation:focus-within .card-media img {
  transform: scale(1.04);
  filter: contrast(1.05) saturate(1.12);
}
.card-realisation:hover .card-media::after,
.card-realisation:focus-within .card-media::after { border-color: var(--accent); }
.card-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.card-tag {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-tag);
  font-weight: 500;
  color: var(--muted);
}

/* ----- Barre de filtres ----- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filter-tab {
  padding: 0.5rem 1.125rem;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  background-color: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-none);
  transition: color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.filter-tab:hover { color: var(--text-strong); border-color: var(--text); }
.filter-tab[aria-pressed="true"] {
  color: var(--bg);
  background-color: var(--accent);
  border-color: var(--accent);
}

/* ----- Etat vide realisations ----- */
.projects-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 48rem;
  padding: var(--sp-6);
  background-color: var(--bg-alt);
  border-top: 1px solid var(--border-strong);
}
.projects-empty[hidden] { display: none; }
.projects-empty-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}
.projects-empty-text { color: var(--muted); }
.projects-empty .btn { margin-top: var(--sp-2); }

/* ==========================================================================
   Formulaire de contact
   ========================================================================== */
.form-shell { max-width: 56rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.contact-form[hidden] { display: none; }
.form-block { border: 0; padding: 0; margin: 0; }
.form-legend {
  padding: 0;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h4);
  color: var(--text-strong);
}
.form-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.field .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.625rem 0.125rem;
  font-size: var(--fs-body);
  color: var(--text);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: var(--radius-none);
  transition: border-color var(--duration-base) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-soft); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-bottom-color: var(--accent);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-bottom-color: var(--muted); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--error); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.field-error { font-size: var(--fs-small); color: var(--error); font-weight: 500; }
.field-hint { font-size: var(--fs-small); color: var(--muted); }

.field-consent { margin-top: var(--sp-1); }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-body);
  cursor: pointer;
}
.checkbox-label input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}
.form-submit { align-self: flex-start; position: relative; }
.form-submit-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(201, 185, 152, 0.35);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 700ms linear infinite;
}
.contact-form.is-loading .form-submit-spinner { display: block; }
.contact-form.is-loading .form-submit { pointer-events: none; opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { font-size: var(--fs-small); color: var(--muted); }

.form-error-global {
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  color: var(--text);
  background-color: rgba(182, 117, 104, 0.12);
  border-left: 3px solid var(--error);
}
.form-error-global[hidden] { display: none; }
.form-error-global a { color: var(--accent-light); }

.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background-color: var(--bg-alt);
  border-left: 3px solid var(--accent);
}
.form-success[hidden] { display: none; }
.form-success-title { font-size: var(--fs-h3); }
.form-success-text { color: var(--muted); max-width: 52ch; }

/* ==========================================================================
   Contact - echange direct, adresse, carte
   ========================================================================== */
.direct-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .direct-grid { grid-template-columns: repeat(3, 1fr); } }
.direct-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background-color: var(--bg-alt);
  border-top: 1px solid var(--border-strong);
}
.direct-label {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-tag);
  font-weight: 500;
  color: var(--muted);
}
.direct-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h4);
  color: var(--text-strong);
  text-decoration: none;
}
a.direct-value:hover { color: var(--accent); }

.address-block { font-style: normal; line-height: var(--lh-loose); }
.address-block strong { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h4); }
.address-siret { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-small); }
.address-map { margin: 0; }
.contact-map {
  width: 100%;
  min-height: 22rem;
  background-color: var(--bg-alt);
  overflow: hidden;
}
.contact-map .leaflet-tile { filter: brightness(0.82) contrast(1.08) saturate(0.7); }
.contact-map .leaflet-container { background: var(--bg-alt); }
.map-fallback { padding: var(--sp-5); color: var(--muted); font-size: var(--fs-small); }

/* ==========================================================================
   Pages legales
   ========================================================================== */
.legal-content { max-width: 44rem; }
.legal-block + .legal-block { margin-top: var(--sp-6); }
.legal-title { margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
.legal-block p + p { margin-top: var(--sp-3); }
.legal-block p { color: var(--text); }
.legal-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-block: var(--sp-3); }
.legal-list li { position: relative; padding-left: 1.25rem; color: var(--text); }
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.35rem;
  height: 0.35rem;
  background-color: var(--accent);
}

/* ==========================================================================
   Pied de page monumental
   ========================================================================== */
.site-footer { background-color: var(--bg-deep); color: var(--text); }
.footer-logo-band {
  display: flex;
  justify-content: center;
  padding: var(--sp-9) var(--gutter) var(--sp-8);
}
.footer-logo-band img,
.footer-logo-band svg {
  width: auto;
  height: clamp(140px, 22vw, 240px);
}
.footer-inner {
  display: grid;
  gap: var(--sp-6);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-7); } }
.footer-logo {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-strong);
}
.footer-address { font-style: normal; line-height: var(--lh-loose); color: var(--muted); }
.footer-contact { margin-top: var(--sp-3); line-height: var(--lh-loose); }
.footer-phone { color: var(--muted); }
.footer-contact a { color: var(--muted); text-decoration: none; transition: color var(--duration-base) var(--ease-out); }
.footer-contact a:hover { color: var(--accent); }
.footer-title {
  font-family: var(--font-body);
  font-size: var(--fs-tag);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--muted-soft);
  margin-bottom: var(--sp-3);
}
.footer-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-list a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.footer-list a:hover,
.footer-list a:focus-visible { color: var(--text-strong); }
.footer-bottom {
  max-width: var(--max-width);
  margin: var(--sp-7) auto 0;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--muted-soft);
}

/* ==========================================================================
   Bouton retour en haut
   ========================================================================== */
.scroll-top {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--text);
  background-color: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.scroll-top[hidden] { display: none; }
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover {
  color: var(--bg);
  background-color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ==========================================================================
   Page 404
   ========================================================================== */
.error-page { display: flex; align-items: center; min-height: 70vh; padding-block: var(--sp-8); }
.error-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.error-code {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: 0.9;
  color: var(--muted-soft);
}
.error-title { font-size: var(--fs-h1); }
.error-text { max-width: 46ch; color: var(--muted); font-size: var(--fs-h4); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }

/* ==========================================================================
   Sections : alternance de fond
   ========================================================================== */
.section-faq { background-color: var(--bg-alt); }

/* ==========================================================================
   prefers-reduced-motion : neutralisation des micro-interactions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-title[data-word-reveal] .word,
  .hero-title[data-word-reveal] em,
  .hero-inner .hero-title,
  .hero-tag,
  .hero-sub,
  .hero-actions { animation: none; }
  [data-animate],
  .reveal-img { opacity: 1; transform: none; transition: none; }
  [data-reveal] { clip-path: inset(0); transition: none; }
  .card-service:hover,
  .card-service:focus-within,
  .card-realisation:hover,
  .card-realisation:focus-within,
  .scroll-top:hover { transform: none; }
  .card-service:hover .card-media img,
  .card-service:focus-within .card-media img,
  .card-realisation:hover .card-media img,
  .card-realisation:focus-within .card-media img { transform: none; }
  .card-link:hover::after { transform: rotate(45deg); }
  .nav-menu-link:hover,
  .nav-menu-link:focus-visible { transform: none; }
  .btn:hover,
  .btn:focus-visible,
  .btn:active { transform: none; }
  .faq-item[open] .faq-answer { animation: none; }
  .mobile-menu:not([hidden]) { animation: none; }
  .form-submit-spinner { animation: none; }
}