/* ==========================================================================
   Polices auto-hebergees
   Le <link> vers fonts.googleapis.com bloquait le rendu : PageSpeed mesurait
   1 640 ms perdus a attendre une feuille de style tierce (DNS + TLS + requete)
   avant le premier affichage. Les quatre fichiers woff2 (34 Ko au total, subset
   latin, uniquement les graisses reellement utilisees) sont servis depuis le
   meme domaine, derriere le meme certificat, et caches un an.
   `swap` affiche immediatement le texte avec la police de repli.
   ========================================================================== */

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/orbitron-800.8da1eaff.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/rajdhani-500.4745b75b.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/rajdhani-600.35f7e628.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/rajdhani-700.7597c31a.woff2") format("woff2");
}

/* ==========================================================================
   TDX — mise en page du site
   Écrit mobile d'abord : les styles de base visent le téléphone, les media
   queries n'ajoutent que ce qu'un écran plus large permet.
   Le design system (tdx-design-system.css) fournit les tokens et les
   composants (boutons, cartes, logo, en-tête, pied de page).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --page-gutter: 16px;
  --block-gap: 12px;
  --block-radius: 18px;
  --max-width: 1240px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tdx-navy);
  font-family: var(--tdx-font-body);
  color: var(--tdx-text-primary);
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

/* Une regle `display` dans une classe l'emporte sur le [hidden] du navigateur :
   sans ce garde-fou, .modal et .flip__back (en display:flex) resteraient
   visibles alors qu'ils sont masques. */
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--tdx-font-display); font-weight: 800; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--tdx-green);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--tdx-green);
  color: var(--tdx-navy);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Conteneurs
   -------------------------------------------------------------------------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--block-gap) var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.band {
  background: var(--tdx-bg-primary);
  border-radius: var(--block-radius);
  padding: 28px 20px;
}

/* L'en-tete est collant : sans cette marge, un lien du menu amene la cible
   juste dessous et son titre se retrouve masque. */
main [id] { scroll-margin-top: 88px; }

.section-title {
  margin: 8px 0 16px;
  font-size: clamp(21px, 5vw, 28px);
  line-height: 1.25;
  color: var(--tdx-navy);
}

.section-lead {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--tdx-text-secondary);
  max-width: 60ch;
}

/* Le design system colore le kicker en --tdx-text-muted (#999), soit 2,7:1 sur
   le fond clair : sous le minimum WCAG AA de 4,5:1 pour du texte de cette
   taille. #666 conserve l'effet discret en passant a 5,5:1. */
.tdx-kicker { color: var(--tdx-neutral-600); }

.kicker-light {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tdx-tracking-kicker);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 10px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.actions .tdx-btn { text-align: center; }
.actions--center { justify-content: center; }

/* Le bouton tertiaire du design system est pensé sur fond clair. */
.tdx-btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, .5); }
.tdx-btn--on-dark:hover:not(:disabled) { background: #fff; color: var(--tdx-navy); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--tdx-green);
  padding: 0 0 2px;
  font: 700 14px var(--tdx-font-body);
  color: var(--tdx-navy);
  cursor: pointer;
}
.link-arrow__chev { display: inline-block; transition: transform .4s cubic-bezier(.22, 1, .36, 1); transform: rotate(90deg); font-size: 13px; }
[aria-expanded="true"] .link-arrow__chev { transform: rotate(-90deg); }

.icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--tdx-border);
  background: transparent;
  color: var(--tdx-navy);
  font-size: 15px;
  cursor: pointer;
}
.icon-btn--on-dark { border-color: rgba(255, 255, 255, .4); color: #fff; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--tdx-z-header);
  background: var(--tdx-bg-primary);
  box-shadow: 0 4px 20px rgba(11, 28, 61, .1);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-logo { text-decoration: none; color: var(--tdx-navy); gap: 10px; }
.site-logo .tdx-logo__wordmark { font-size: 24px; }
.site-logo .tdx-logo__tagline { font-size: 8.5px; letter-spacing: .2em; color: var(--tdx-green-dark); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid var(--tdx-border);
  border-radius: 999px;
  padding: 8px 16px;
  font: 700 13px var(--tdx-font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tdx-navy);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 16px; height: 2px; background: currentColor; }

.site-nav { display: none; width: 100%; }
.site-nav.is-open { display: block; }
.site-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px 0;
  border-top: 1px solid var(--tdx-border);
}
.site-nav__list li { border-bottom: 1px solid var(--tdx-neutral-100); }
.site-nav__list .tdx-header__nav-link {
  display: block;
  padding: 13px 2px;
  font-size: 15px;
}
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { display: flex; flex-direction: column; gap: 24px; }

.hero__media { position: relative; }

/* Le liseré vert décalé du design : masqué sous 640px, où il se marche dessus. */
.hero__frame { display: none; }

.hero__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--tdx-navy);
  aspect-ratio: 4 / 3;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La source est desormais pre-recadree au format 7/6 affiche : plus de
     rognage vertical a compenser, un simple centrage suffit. */
  object-position: 50% 45%;
  filter: saturate(1.02) contrast(1.04);
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 28, 61, .9) 0%, rgba(11, 28, 61, .45) 26%, rgba(11, 28, 61, 0) 58%);
}
.hero__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hero__caption-rule { width: 36px; height: 3px; background: var(--tdx-green); }
.hero__caption-name { font: 800 18px/1.2 var(--tdx-font-display); color: #fff; }
.hero__caption-role {
  font: 600 11px/1.4 var(--tdx-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tdx-green);
}

.hero__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero__title {
  margin: 0;
  font-size: clamp(26px, 7vw, 42px);
  line-height: 1.15;
  color: var(--tdx-navy);
  text-wrap: balance;
}
.hero__lead {
  margin: 0;
  font: 500 clamp(16px, 2.4vw, 19px)/1.5 var(--tdx-font-body);
  color: var(--tdx-text-secondary);
  max-width: 60ch;
}

.trust {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font: 600 14px var(--tdx-font-body);
  color: var(--tdx-navy);
}
.trust li::before { content: "✓ "; color: var(--tdx-green-dark); font-weight: 700; }

/* --------------------------------------------------------------------------
   Bandeau garanties / promesse / zone
   -------------------------------------------------------------------------- */

.bento { display: grid; gap: var(--block-gap); }

.bento__card {
  border-radius: var(--block-radius);
  padding: 24px 20px;
}
.bento__card--dark {
  background: var(--tdx-navy);
  border: 1px solid rgba(255, 255, 255, .14);
}
.bento__card--zone {
  position: relative;
  overflow: hidden;
  background: var(--tdx-neutral-800);
}
.bento__radar { position: absolute; right: -40px; bottom: -60px; width: 200px; opacity: .35; }
.bento__big { margin: 0; font: 800 clamp(40px, 12vw, 56px)/1 var(--tdx-font-display); color: #fff; }
.bento__text { margin: 8px 0 0; font: 500 15px/1.4 var(--tdx-font-body); color: rgba(255, 255, 255, .75); }

.guarantees { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.guarantees li { display: flex; gap: 12px; align-items: flex-start; }
.guarantees svg { flex: none; margin-top: 1px; }
.guarantees span { font: 500 15px/1.45 var(--tdx-font-body); color: rgba(255, 255, 255, .8); }
.guarantees b { color: #fff; font-weight: 700; }

.bento__flip { background: #fff; display: flex; flex-direction: column; }
.flip__front { display: flex; flex-direction: column; gap: 14px; }
.flip__title { margin: 0; font: 800 clamp(19px, 4.6vw, 24px)/1.35 var(--tdx-font-display); color: var(--tdx-navy); }
.flip__text { margin: 0; font: 500 15px/1.5 var(--tdx-font-body); color: var(--tdx-text-secondary); }

.flip__back {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: -24px -20px;
  padding: 24px 20px;
  background: var(--tdx-navy);
  border-radius: var(--block-radius);
}
.flip__back-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.flip__back-title { margin: 0; font-size: clamp(17px, 4vw, 20px); line-height: 1.3; color: #fff; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1.5px solid rgba(57, 255, 20, .4); }
.steps__num { font: 800 22px/1 var(--tdx-font-display); color: var(--tdx-green); }
.steps__title { font: 700 15px var(--tdx-font-body); color: #fff; }
.steps p { margin: 0; font: 500 14px/1.4 var(--tdx-font-body); color: rgba(255, 255, 255, .72); }

.flip__back-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; }
.flip__back-foot span { font: 500 14px var(--tdx-font-body); color: rgba(255, 255, 255, .7); }

/* --------------------------------------------------------------------------
   Bande urgence
   -------------------------------------------------------------------------- */

.urgence {
  background: #fff;
  border-radius: var(--block-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.urgence__text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 16px var(--tdx-font-body);
  color: var(--tdx-navy);
}
.urgence__text svg { flex: none; color: var(--tdx-green-dark); }

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.services { display: grid; gap: 14px; }

.service { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; scroll-margin-top: 90px; }
.service__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.service__title svg { flex: none; }
.service .tdx-card__body { flex: 1; }

.service__details ul { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 9px; }
.service__details li {
  position: relative;
  padding-left: 16px;
  font: 500 14px/1.45 var(--tdx-font-body);
  color: var(--tdx-text-secondary);
  text-wrap: pretty;
}
.service__details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tdx-green);
}

.service-cta {
  background: var(--tdx-navy);
  border-radius: var(--tdx-radius-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.service-cta__title { margin: 0; font-size: 16px; color: var(--tdx-green); }
.service-cta p { margin: 0; font: 500 15px/1.5 var(--tdx-font-body); color: rgba(255, 255, 255, .8); }
.service-cta .tdx-btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Zone d'intervention
   -------------------------------------------------------------------------- */

.zone { display: grid; gap: 28px; align-items: center; }
.zone__body { display: flex; flex-direction: column; gap: 14px; }
.zone__text { margin: 0; font: 500 16px/1.5 var(--tdx-font-body); color: var(--tdx-text-secondary); }

.communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.communes li {
  background: var(--tdx-neutral-100);
  color: var(--tdx-navy);
  border-radius: 999px;
  padding: 6px 14px;
  font: 600 13px var(--tdx-font-body);
}

.zone__map { width: 100%; border-radius: var(--tdx-radius-card); background: #fff; }

/* --------------------------------------------------------------------------
   Avis
   -------------------------------------------------------------------------- */

.avis__text { margin: 0 0 20px; font: 500 16px/1.55 var(--tdx-font-body); color: var(--tdx-text-secondary); max-width: 62ch; }
.avis__actions .tdx-btn { display: inline-flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------
   Réalisations
   -------------------------------------------------------------------------- */

.realisations { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

/* Les visuels sont des cartes verticales, titre incruste : format portrait. */
.realisation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.realisation img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  background: var(--tdx-neutral-100);
  box-shadow: 0 8px 24px rgba(11, 28, 61, .1);
}
.realisation__caption {
  font: 600 13px var(--tdx-font-body);
  color: var(--tdx-text-secondary);
}

.realisation.is-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  border: 1.5px dashed var(--tdx-neutral-300);
  background: repeating-linear-gradient(45deg, #f7f7f5, #f7f7f5 10px, #f2f2ef 10px, #f2f2ef 20px);
}
.realisation.is-empty span {
  font: 600 13px var(--tdx-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tdx-neutral-500);
  text-align: center;
  padding: 0 10px;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { background: var(--tdx-navy); text-align: center; padding: 40px 20px; }
.contact .kicker-light { color: var(--tdx-green); }
.contact__title { margin: 0 0 12px; font-size: clamp(24px, 6vw, 32px); line-height: 1.2; color: #fff; }
.contact__text { margin: 0 auto 22px; max-width: 46ch; font: 500 16px/1.55 var(--tdx-font-body); color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer { border-radius: var(--block-radius) var(--block-radius) 0 0; padding: 36px var(--page-gutter); }
.site-footer__inner { max-width: var(--max-width); margin: 0 auto; }
.site-footer .tdx-logo__wordmark { font-size: 26px; color: #fff; }
.site-footer .tdx-logo__tagline { font-size: 9px; color: var(--tdx-green); }

.tdx-footer__columns { gap: 28px; }
.tdx-footer__columns > div { min-width: 160px; }

.footer-communes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }

/* Réseaux sociaux, dans la colonne TDX du pied de page */
.reseaux {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.reseaux__lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 11px de padding vertical : la pastille atteint 45px de haut, au-dessus
     du minimum de 44px recommande pour une cible tactile. */
  padding: 11px 18px 11px 15px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font: 600 13px var(--tdx-font-body);
  transition: border-color var(--tdx-duration-base) var(--tdx-ease),
              color var(--tdx-duration-base) var(--tdx-ease);
}
.reseaux__lien:hover {
  border-color: var(--tdx-green);
  color: var(--tdx-green);
}
.reseaux__lien svg { flex: none; }

.tdx-footer__link.as-button {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: 500 14px var(--tdx-font-body);
}
.tdx-footer__link.is-static { opacity: .65; }

.site-footer__legal {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font: 500 13px var(--tdx-font-body);
  color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: var(--tdx-z-modal); display: flex; align-items: center; justify-content: center; padding: 0; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(11, 28, 61, .72); }

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--tdx-bg-primary);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--tdx-border);
}
.modal__head .tdx-kicker { margin-bottom: 6px; }
.modal__title { margin: 0; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.3; color: var(--tdx-navy); }
.modal__sub { margin: 6px 0 0; font: 500 14px var(--tdx-font-body); color: var(--tdx-text-secondary); }

.modal__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal__body iframe { width: 100%; height: 1400px; border: 0; display: block; }

.modal__body--prose { padding: 20px; }
.modal__body--prose h3 { margin: 22px 0 6px; font-size: 15px; color: var(--tdx-navy); }
.modal__body--prose h3:first-child { margin-top: 0; }
.modal__body--prose p { margin: 0; font: 500 15px/1.6 var(--tdx-font-body); color: var(--tdx-text-secondary); }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Révélation du numéro (desktop uniquement — voir main.js)
   -------------------------------------------------------------------------- */

.phone-reveal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--tdx-navy);
  border-radius: 999px;
  padding: 7px 8px 7px 20px;
}
.phone-reveal__number { font: 800 20px var(--tdx-font-display); color: #fff; white-space: nowrap; }
.phone-reveal__call {
  font: 700 13px var(--tdx-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tdx-navy);
  background: var(--tdx-green);
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
}
.phone-reveal__close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* ==========================================================================
   À partir de 640 px — tablette
   ========================================================================== */

@media (min-width: 640px) {
  :root { --page-gutter: 20px; --block-gap: 14px; --block-radius: var(--tdx-radius-card); }

  .band { padding: 34px 28px; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realisations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-communes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .urgence { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 28px; }
  .urgence__text { font-size: 17px; }

  .modal { padding: 24px; }
  .modal__panel { height: auto; max-height: calc(100vh - 48px); border-radius: var(--tdx-radius-card); max-width: 720px; }
  .modal__head { padding: 24px 28px; }
  .modal__body--prose { padding: 24px 28px; }
}

/* ==========================================================================
   À partir de 900 px — hero et zone sur deux colonnes
   ========================================================================== */

@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 44px; align-items: center; padding: 34px 32px 40px; }

  .hero__media { padding: 2px 26px 26px 0; }
  .hero__photo { aspect-ratio: 7 / 6; border-radius: 0; }
  .hero__frame {
    display: block;
    position: absolute;
    left: 26px;
    top: 14px;
    right: 0;
    bottom: 0;
    border: 2px solid var(--tdx-green);
    opacity: .55;
  }

  .zone { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }

  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .bento__card { padding: 26px 24px; }
}

/* ==========================================================================
   À partir de 1024 px — navigation horizontale, grilles complètes
   ========================================================================== */

@media (min-width: 1024px) {
  :root { --page-gutter: 24px; }

  .nav-toggle { display: none; }

  .site-nav {
    display: flex !important;
    align-items: center;
    gap: 28px;
    width: auto;
  }
  .site-nav__list { flex-direction: row; gap: 26px; padding: 0; border: 0; }
  .site-nav__list li { border: 0; }
  .site-nav__list .tdx-header__nav-link { padding: 0; font-size: 14px; }
  .site-nav__cta { margin: 0; }

  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .realisations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-communes { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .band { padding: 40px 36px; }
  .hero { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; }
}

/* ==========================================================================
   Préférences utilisateur
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body { background: #fff; }
  .site-header, .nav-toggle, .modal, .urgence, .avis__actions { display: none !important; }
  .band, .contact { background: #fff !important; color: #000 !important; border: 1px solid #ddd; }
}