/* ==========================================================================
   HAVS Renov's, Construction & rénovation, La Réunion
   Design system : brutalisme mécanique / signalétique BTP (Swiss Industrial
   Print). Palette : noir #141414, rouge #C8102E, orange #F26D0D (casque de
   chantier), fond clair #f4f2ef, gris #6b6b6b.
   Contrainte contraste (WCAG AA) : orange en texte uniquement sur fond noir
   (ratio ~5.9:1) ; sur fond orange, texte noir (jamais blanc, ratio insuffisant).
   Rouge en fond avec texte clair : ~5.9:1, valide AA.
   ========================================================================== */

:root {
  --noir: #141414;
  --rouge: #C8102E;
  --rouge-sombre: #9c0c22;
  --orange: #F26D0D;
  --clair: #f4f2ef;
  --blanc: #ffffff;
  --gris: #6b6b6b;
  --gris-clair: #d8d4cd;

  --font-display: "Anton", "Archivo Black", Impact, sans-serif;
  --font-body: "Archivo", "Arial", sans-serif;

  --rule: 4px;
  --rule-lg: 8px;

  --ease-mecanique: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-court: 180ms;
  --dur-moyen: 320ms;
  --dur-long: 560ms;

  --container: 1240px;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  margin: 0;
  background: var(--clair);
  color: var(--noir);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: grayscale;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

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

/* Grain analogique global : detail invisible qui casse le rendu trop propre
   du numerique, echo au vocabulaire "papier/plan" du site. Pseudo-element
   fixe, pointer-events:none (jamais sur un conteneur qui scrolle, jamais de
   repaint en boucle), data-URI SVG (zero requete reseau), opacite tres
   faible : jamais remarque consciemment. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Accessibilité ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--orange);
  color: var(--noir);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  transition: top var(--dur-court) var(--ease-mecanique);
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Layout utils ---------- */
.conteneur {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rouge);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--rouge);
  display: inline-block;
  flex-shrink: 0;
}
.sur-noir .eyebrow { color: var(--orange); }
.sur-noir .eyebrow::before { background: var(--orange); }

.titre-section {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 0.6rem;
}

/* ==========================================================================
   Motif technique recurrent : trame "papier calque".
   HAVS fait aussi les plans/metre/permis (geometre, architecte) : la trame
   de dessin technique est le fil rouge visuel du site, decline sobrement
   sur deux sections seulement plutot qu'empile partout. Opacite tres
   faible : detail invisible, jamais lu consciemment.
   ========================================================================== */
.trame-plan {
  position: relative;
}
.trame-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, 0.05) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, black, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black, black 70%, transparent 100%);
}
.trame-plan > .conteneur { position: relative; z-index: 1; }

/* Chevron : motif issu du toit du logo, séparateur de marque récurrent */
.chevron-diviseur {
  height: clamp(20px, 4vw, 34px);
  background: var(--noir);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  width: min(120px, 30vw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.chevron-diviseur.rouge { background: var(--rouge); }
.chevron-diviseur.orange { background: var(--orange); }

/* ==========================================================================
   Système de boutons unique : primaire / secondaire / whatsapp / lien.
   Coins droits (jamais de border-radius), :active scale(0.97), easings
   custom. Un seul vocabulaire d'interaction reutilise partout plutot que
   trois styles ad hoc (orange plein / contour blanc / lien souligne
   inconsistants dans la V1).
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 1rem 1.6rem;
  border: 3px solid transparent;
  -webkit-font-smoothing: grayscale;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: transform var(--dur-court) var(--ease-mecanique),
              background var(--dur-court) var(--ease-mecanique),
              color var(--dur-court) var(--ease-mecanique),
              border-color var(--dur-court) var(--ease-mecanique);
}
.bouton:active { transform: scale(0.97); }
.bouton svg { flex-shrink: 0; }

/* Primaire : seule surface orange pleine du site, reservee a l'action de
   conversion (devis). La bande "adhesif de chantier" (hachures noir/orange)
   se deroule sous le bouton au survol/focus : le seul effet de ce type sur
   toute la page, echo direct au casque orange du client. */
.bouton--primaire {
  position: relative;
  background: var(--orange);
  color: var(--noir);
  border-color: var(--noir);
}
.bouton--primaire::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -11px;
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--noir) 0 8px,
    var(--orange) 8px 16px
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-moyen) var(--ease-mecanique);
}
@media (hover: hover) and (pointer: fine) {
  .bouton--primaire:hover { transform: translateY(-3px); }
  .bouton--primaire:hover::after { transform: scaleX(1); }
}
.bouton--primaire:focus-visible { transform: translateY(-3px); }
.bouton--primaire:focus-visible::after { transform: scaleX(1); }

/* Secondaire : contour, pour les actions non prioritaires sur fond noir. */
.bouton--secondaire {
  background: transparent;
  color: var(--clair);
  border-color: var(--clair);
}
@media (hover: hover) and (pointer: fine) {
  .bouton--secondaire:hover { background: var(--clair); color: var(--noir); }
}
.bouton--secondaire:focus-visible { background: var(--clair); color: var(--noir); }

/* WhatsApp : plein rouge, role d'action secondaire "reelle" (pas un contour
   vide). Rouge deja utilise pour les accents de marque, contraste ~5.9:1. */
.bouton--whatsapp {
  background: var(--rouge);
  color: var(--clair);
  border-color: var(--rouge);
}
@media (hover: hover) and (pointer: fine) {
  .bouton--whatsapp:hover { background: var(--rouge-sombre); border-color: var(--rouge-sombre); }
}
.bouton--whatsapp:focus-visible { background: var(--rouge-sombre); border-color: var(--rouge-sombre); }

/* Petit gabarit pour les CTA logés dans l'entete (moins de padding). */
.bouton--petit { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

/* Lien : texte souligne, pour les actions tertiaires (appel rapide, liens
   de pied de page, retour). Rouge -> orange au survol/focus, meme logique
   chromatique que le reste du systeme. */
.lien {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  border-bottom: 2px solid var(--rouge);
  padding-bottom: 0.2rem;
  transition: color var(--dur-court) var(--ease-mecanique),
              border-color var(--dur-court) var(--ease-mecanique);
}
@media (hover: hover) and (pointer: fine) {
  .lien:hover { color: var(--orange); border-color: var(--orange); }
}
.lien:focus-visible { color: var(--orange); border-color: var(--orange); }
.lien .picto { flex-shrink: 0; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.entete {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--noir);
  border-bottom: var(--rule) solid var(--rouge);
  transition: box-shadow var(--dur-court) var(--ease-mecanique);
}
.entete--scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.entete__logo { height: 40px; width: auto; }
.entete__logo img { height: 100%; width: auto; }

.entete__nav {
  display: none;
}
.entete__nav ul {
  display: flex;
  gap: clamp(1rem, 2vw, 2.2rem);
  align-items: center;
}
.entete__nav a {
  color: var(--clair);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-court) var(--ease-mecanique),
              color var(--dur-court) var(--ease-mecanique);
}
@media (hover: hover) and (pointer: fine) {
  .entete__nav a:hover { border-color: var(--orange); color: var(--orange); }
}
.entete__nav a:focus-visible,
.entete__nav a[aria-current="true"] {
  border-color: var(--orange);
  color: var(--orange);
}

.entete__burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.6rem;
}
.entete__burger span {
  width: 26px;
  height: 3px;
  background: var(--clair);
  transition: transform var(--dur-court) var(--ease-mecanique),
              opacity var(--dur-court) var(--ease-mecanique);
}
.entete__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.entete__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-mobile {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--noir);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-moyen) var(--ease-mecanique),
              transform var(--dur-moyen) var(--ease-mecanique),
              visibility 0s linear var(--dur-moyen);
  padding: 2rem var(--gouttiere);
  overflow-y: auto;
}
.nav-mobile.est-ouvert {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.nav-mobile ul { display: flex; flex-direction: column; gap: 1.6rem; }
.nav-mobile a {
  color: var(--clair);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}
@media (hover: hover) and (pointer: fine) {
  .nav-mobile a:hover { color: var(--orange); }
}
.nav-mobile a:focus-visible { color: var(--orange); }
.nav-mobile__cta { display: inline-flex; margin-top: 1.6rem; }

@media (min-width: 768px) {
  .entete__burger { display: none; }
  .nav-mobile { display: none; }
  .entete__nav { display: block; }
}
@media (min-width: 1024px) {
  .entete__cta { display: inline-flex; }
}
@media (max-width: 1023px) {
  .entete__cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block-start: calc(72px + clamp(3.5rem, 10vw, 7rem));
  padding-block-end: clamp(4rem, 10vw, 8rem);
  background: var(--noir);
  color: var(--clair);
  overflow: hidden;
  min-height: clamp(560px, 92vh, 920px);
  display: flex;
  align-items: center;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo picture,
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Voile : degrade CONTINU (aucun palier plat suivi d'une chute brutale),
   calibre pour garantir l'AA du texte dans le pire cas (ciel clair heure
   doree derriere une lettre orange). Deux couches : une verticale (respire
   en haut, se remet a foncer en bas ou vit le CTA) et une horizontale (le
   texte, cale a gauche et large de ~44rem max, reste toujours sur la zone
   la plus sombre ; la photo s'ouvre progressivement vers la droite, sans
   jamais de couture visible). Mobile : voile quasi uniforme, la hauteur de
   la zone de texte varie avec le contenu (retour a la ligne), un degrade
   y serait fragile. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.8) 0%,
    rgba(20, 20, 20, 0.9) 45%,
    rgba(20, 20, 20, 0.96) 100%
  );
}
/* Desktop : la photo v2 est nativement sombre sur sa moitie gauche
   (feuillage en contre-jour, zone du titre) et claire a droite (la case) :
   le voile n'a plus besoin de "faire tout le travail" comme sur l'ancienne
   photo, il ajoute juste une marge de securite AA continue (aucun palier),
   plus legere qu'avant pour laisser la photo respirer. */
@media (min-width: 900px) {
  .hero__voile {
    background:
      linear-gradient(
        180deg,
        rgba(20, 20, 20, 0.32) 0%,
        rgba(20, 20, 20, 0.12) 24%,
        rgba(20, 20, 20, 0.28) 58%,
        rgba(20, 20, 20, 0.46) 100%
      ),
      linear-gradient(
        90deg,
        rgba(20, 20, 20, 0.74) 0%,
        rgba(20, 20, 20, 0.66) 28%,
        rgba(20, 20, 20, 0.48) 44%,
        rgba(20, 20, 20, 0.26) 58%,
        rgba(20, 20, 20, 0.12) 72%,
        rgba(20, 20, 20, 0.04) 100%
      );
  }
}

.hero__contenu {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  /* Annule le margin:0 auto herite de .conteneur : dans le parent flex
     .hero (align-items:center), un margin auto serait honore comme
     centrage horizontal et collerait le texte au milieu de la photo au
     lieu de le laisser cale a gauche, sur la zone la plus sombre. */
  margin-inline: 0;
}
.hero__meta {
  display: block;
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.3rem, 7.4vw, 5.1rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.hero h1 .hero__ligne { display: block; overflow: hidden; padding-top: 0.14em; margin-top: -0.14em; }
.hero h1 .hero__ligne > span { display: block; }
.hero h1 .accent { color: var(--orange); }
.hero__lead {
  margin-top: 1.7rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--gris-clair);
}
.hero__lead--section {
  margin-top: 1.2rem;
}
.mentions__email-img {
  height: 1.3em;
  width: auto;
  vertical-align: -0.28em;
}
.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.hero__actions .lien { color: var(--clair); }

/* Sequence de chargement orchestree, UNE seule fois, au premier affichage.
   Gate derriere .js (progressive enhancement : sans JS, tout est visible
   immediatement) et derriere prefers-reduced-motion via le garde-fou
   global en tete de fichier (animation-duration forcee a 0.001ms). La
   photo elle-meme n'est JAMAIS dans ce systeme : le LCP peint sans
   attendre aucune animation. */
@keyframes hero-ligne-in {
  from { transform: translateY(115%); }
  to { transform: translateY(0); }
}
@keyframes hero-fondu-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.js .hero h1 .hero__ligne > span {
  animation: hero-ligne-in 760ms var(--ease-mecanique) both;
}
.js .hero h1 .hero__ligne:nth-child(1) > span { animation-delay: 60ms; }
.js .hero h1 .hero__ligne:nth-child(2) > span { animation-delay: 160ms; }
.js .hero__meta,
.js .hero__lead,
.js .hero__actions {
  animation: hero-fondu-in 620ms var(--ease-mecanique) both;
}
.js .hero__meta { animation-delay: 0ms; }
.js .hero__lead { animation-delay: 420ms; }
.js .hero__actions { animation-delay: 520ms; }

/* Repere de scroll : icone seule (le mot "Decouvrir" retire, un chrome de
   moins), invite discrete a poursuivre sur un premier viewport tres haut. */
.hero__scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2.2rem);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(244, 242, 239, 0.35);
  color: var(--gris-clair);
  transition: opacity var(--dur-court) var(--ease-mecanique),
              border-color var(--dur-court) var(--ease-mecanique),
              color var(--dur-court) var(--ease-mecanique);
}
@media (hover: hover) and (pointer: fine) {
  .hero__scroll-cue:hover { color: var(--orange); border-color: var(--orange); }
}
.hero__scroll-cue:focus-visible { color: var(--orange); border-color: var(--orange); }
.hero__scroll-cue svg {
  width: 16px;
  height: 16px;
  animation: scroll-cue-rebond 1.8s var(--ease-mecanique) infinite;
}
@keyframes scroll-cue-rebond {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (min-width: 700px) {
  .hero__scroll-cue { display: flex; }
}

/* ==========================================================================
   Rythme des sections : macro-whitespace, respire davantage qu'une V1
   compacte pour laisser chaque bloc exister seul.
   ========================================================================== */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--clair { background: var(--clair); }
.section--noir { background: var(--noir); color: var(--clair); position: relative; }
.section__entete { max-width: 62ch; }

/* ==========================================================================
   Ce qu'on fait : split asymetrique, titre en colonne fixe (sticky en
   desktop), les 3 metiers en liste verticale a droite. Volontairement
   different de la grille a 3 boites de "Comment on travaille" : les metiers
   ne sont PAS une sequence (pas de 01/02/03), la methode l'est (garde ses
   numeros).
   ========================================================================== */
.savoirfaire__intro { max-width: 46ch; }
.savoirfaire__texte { margin-top: 1.1rem; color: var(--gris); max-width: 40ch; }

/* Vignette d'ambiance (materiaux/plan/outils de chantier) : illustration
   generee, jamais presentee comme une realisation HAVS (pas de legende
   "nos chantiers"). Format portrait, contenue dans la colonne sticky. */
.savoirfaire__vignette {
  position: relative;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  max-width: 220px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.savoirfaire__vignette img { width: 100%; height: 100%; object-fit: cover; }
.savoirfaire__vignette-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: var(--orange);
  color: var(--noir);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}

.savoirfaire__liste {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: var(--rule) solid var(--noir);
}
.metier {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding-block: clamp(1.7rem, 3.6vw, 2.4rem);
  border-bottom: var(--rule) solid var(--noir);
  border-left: 4px solid transparent;
  transition: border-left-color var(--dur-court) var(--ease-mecanique),
              padding-inline-start var(--dur-court) var(--ease-mecanique);
}
@media (hover: hover) and (pointer: fine) {
  .metier:hover { border-left-color: var(--rouge); padding-inline-start: 0.6rem; }
}
.metier:focus-within { border-left-color: var(--rouge); padding-inline-start: 0.6rem; }
.metier__icone { flex-shrink: 0; color: var(--rouge); }
.metier__icone svg { width: 34px; height: 34px; }
.metier__corps { display: grid; align-content: start; gap: 0.7rem; }
.metier__corps h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.005em;
}
.metier__corps p { color: var(--gris); max-width: 52ch; }
.metier__tags {
  margin-top: 0.2rem;
  display: grid;
  gap: 0.4rem;
}
.metier__tags li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--gris);
  font-size: 0.92rem;
}
.metier__tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--rouge);
}

@media (min-width: 1024px) {
  .savoirfaire {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .savoirfaire__intro {
    position: sticky;
    top: calc(72px + 2.5rem);
  }
  .savoirfaire__liste { margin-top: 0; }
}

/* ==========================================================================
   Comment on travaille : frise/chronologie. C'est une VRAIE sequence
   (4 etapes ordonnees), elle garde ses numeros. Desktop : rail horizontal
   continu derriere les noeuds numerotes. Mobile : ligne simplifiee, chaque
   etape en rangee icone + contenu.
   ========================================================================== */
.methode__entete { max-width: 62ch; }
.methode__vignette {
  position: relative;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  max-width: 220px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.methode__vignette img { width: 100%; height: 100%; object-fit: cover; }
.methode__vignette-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: var(--orange);
  color: var(--noir);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}
@media (min-width: 1024px) {
  .methode__layout {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .methode__entete { max-width: 62ch; }
  .methode__vignette { margin-top: 0; flex-shrink: 0; }
}

.etapes {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.etape {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-block: 1.2rem;
  border-bottom: 2px solid rgba(20, 20, 20, 0.12);
}
.etape__noeud {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rouge);
  color: var(--clair);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.etape__corps { display: grid; align-content: start; gap: 0.5rem; }
.etape__corps h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: -0.005em;
}
.etape__corps p { color: var(--gris); max-width: 40ch; }

@media (min-width: 900px) {
  .etapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  .etapes__rail {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 21px;
    height: 3px;
    background: rgba(20, 20, 20, 0.15);
    z-index: 0;
  }
  .etape {
    display: block;
    border-bottom: 0;
    padding-block: 0;
    position: relative;
    z-index: 1;
  }
  .etape__noeud { position: relative; margin-bottom: 1.2rem; }
  .etape__corps { gap: 0.6rem; }
}
@media (max-width: 899px) {
  .etapes__rail { display: none; }
}

/* ==========================================================================
   Zone d'intervention : L'UNIQUE moment de novelty de la page. Schema en
   ligne technique (releve de geometre / plan de transport stylise, PAS une
   carte geographique precise). Desktop : ligne SVG en tracé brisé avec
   noeuds. Mobile : rail vertical simplifie. Les 7 communes sont une VRAIE
   sequence geographique (ordre de la route), numerotees legitimement.
   Aucune commune n'est marquee "siege" ici (le fait vit uniquement en FAQ).
   ========================================================================== */
#zone {
  position: relative;
  background: var(--noir);
}
#zone .conteneur { position: relative; z-index: 2; }
.zone__texte { max-width: 58ch; }

.zone__schema {
  margin-top: clamp(3rem, 7vw, 5rem);
}
.zone__svg { display: none; }
.zone__trace {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zone__noeud {
  fill: var(--rouge);
  stroke: var(--clair);
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-moyen) var(--ease-mecanique),
              transform var(--dur-moyen) var(--ease-mecanique);
}
.zone__schema--actif .zone__noeud { opacity: 1; transform: scale(1); }
.zone__schema--actif .zone__noeud:nth-of-type(2) { transition-delay: 120ms; }
.zone__schema--actif .zone__noeud:nth-of-type(3) { transition-delay: 190ms; }
.zone__schema--actif .zone__noeud:nth-of-type(4) { transition-delay: 260ms; }
.zone__schema--actif .zone__noeud:nth-of-type(5) { transition-delay: 330ms; }
.zone__schema--actif .zone__noeud:nth-of-type(6) { transition-delay: 400ms; }
.zone__schema--actif .zone__noeud:nth-of-type(7) { transition-delay: 470ms; }
.zone__trace { transition: stroke-dashoffset 1500ms var(--ease-in-out); }
.zone__schema--actif .zone__trace { stroke-dashoffset: 0 !important; }

.zone__stations {
  position: relative;
  display: flex;
  flex-direction: column;
}
.zone__stations::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--orange) 0 9px, transparent 9px 17px);
}
.zone__station {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.4rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--dur-moyen) var(--ease-mecanique),
              transform var(--dur-moyen) var(--ease-mecanique);
}
.zone__schema--actif .zone__station { opacity: 1; transform: translateX(0); }
.zone__schema--actif .zone__station:nth-child(1) { transition-delay: 40ms; }
.zone__schema--actif .zone__station:nth-child(2) { transition-delay: 100ms; }
.zone__schema--actif .zone__station:nth-child(3) { transition-delay: 160ms; }
.zone__schema--actif .zone__station:nth-child(4) { transition-delay: 220ms; }
.zone__schema--actif .zone__station:nth-child(5) { transition-delay: 280ms; }
.zone__schema--actif .zone__station:nth-child(6) { transition-delay: 340ms; }
.zone__schema--actif .zone__station:nth-child(7) { transition-delay: 400ms; }
.zone__station::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--rouge);
  border: 3px solid var(--clair);
}
.zone__station--terminus::before { width: 22px; height: 22px; left: 1px; }
.zone__station-num {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 0.15rem;
}
.zone__station-nom {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: -0.005em;
  color: var(--clair);
}
.zone__station-sous {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gris-clair);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

@media (min-width: 1100px) {
  .zone__svg {
    display: block;
    width: 100%;
    height: clamp(90px, 12vw, 140px);
    overflow: visible;
  }
  /* Chaque commune est centree sous son noeud : abscisses du SVG
     (viewBox -10..1210, noeuds tous les 200) ramenees en pourcentage. */
  .zone__stations {
    display: block;
    height: 5.2rem;
    margin-top: 1.6rem;
  }
  .zone__stations::before { display: none; }
  .zone__station {
    position: absolute;
    top: 0;
    padding: 0;
    text-align: center;
    translate: -50% 0;
  }
  .zone__station:nth-child(1) { left: 0.82%; translate: -0.82% 0; text-align: left; }
  .zone__station:nth-child(2) { left: 17.21%; }
  .zone__station:nth-child(3) { left: 33.61%; }
  .zone__station:nth-child(4) { left: 50%; }
  .zone__station:nth-child(5) { left: 66.39%; }
  .zone__station:nth-child(6) { left: 82.79%; }
  .zone__station:nth-child(7) { left: auto; right: 0; translate: none; text-align: right; }
  .zone__station-nom { white-space: nowrap; }
  .zone__station::before { display: none; }
}

/* ==========================================================================
   Réalisations : etat d'attente sobre (3 tuiles desktop / 2 mobile) quand
   aucune photo n'existe encore, remplace dynamiquement par main.js des que
   PHOTOS_CHANTIERS contient des entrees (jusqu'a 9 desktop / 8 mobile,
   tirage aleatoire a chaque visite).
   ========================================================================== */
.galerie {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rule);
}
.galerie__tuile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--noir);
  overflow: hidden;
  isolation: isolate;
}
.galerie__tuile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--noir) 0 16px,
    #1f1f1f 16px 32px
  );
}
.galerie__tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(242, 109, 13, 0.35);
}
.galerie__tuile img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galerie__tuile--attente {
  display: flex;
  align-items: center;
  justify-content: center;
}
.galerie__tuile--attente svg {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  color: rgba(242, 109, 13, 0.5);
}
.galerie__note {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--gris);
}

.galerie--attente .galerie__tuile:nth-child(3) { display: none; }

@media (min-width: 700px) {
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .galerie--attente .galerie__tuile:nth-child(3) { display: flex; }
}

/* ==========================================================================
   FAQ : deux colonnes (titre a gauche, accordeon a droite). Disclosure
   native details/summary, accessible sans JS (clavier, lecteur d'ecran,
   etat ouvert/ferme natif). Icones +/- en SVG (jamais un glyphe de police,
   trop petit selon la fonte) : toujours >= 16px, nettes a n'importe quelle
   taille.
   ========================================================================== */
.faq__intro { max-width: 40ch; }

.faq {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: var(--rule) solid var(--noir);
}
.faq__item {
  border-bottom: var(--rule) solid var(--noir);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  letter-spacing: -0.005em;
  transition: color var(--dur-court) var(--ease-mecanique);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover { color: var(--rouge); }
}
.faq__item summary:focus-visible { color: var(--rouge); }
.faq__icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rouge);
  color: var(--blanc);
  transition: transform var(--dur-court) var(--ease-mecanique);
}
.faq__icone svg { width: 18px; height: 18px; display: block; }
.faq__item[open] .faq__icone { transform: rotate(45deg); }
.faq__reponse {
  padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--gris);
  max-width: 60ch;
}
@keyframes faq-apparition {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq__item[open] .faq__reponse {
  animation: faq-apparition 220ms var(--ease-mecanique);
}

@media (min-width: 1024px) {
  .faq__layout {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .faq__intro { position: sticky; top: calc(72px + 2.5rem); }
  .faq { margin-top: 0; }
}

/* ==========================================================================
   Contact : le telephone est l'element roi (numero enorme en Anton, lien
   tel: sur toute la carte). WhatsApp = bouton reel plein (systeme
   .bouton--whatsapp). Email = image, dimensionnee et alignee correctement
   (jamais du texte, jamais un mailto).
   ========================================================================== */
#contact {
  position: relative;
  background: var(--noir);
}
#contact .conteneur { position: relative; z-index: 2; }
.contact__texte { max-width: 56ch; }

/* Photo d'ambiance plein cadre, commune a #zone et #contact : meme doctrine
   que le hero (photo z0, voile opaque z1, contenu z2). Voile fort et
   uniforme (0.93) : ce sont des images d'illustration generees, jamais des
   chantiers HAVS reels, le voile les fait lire comme un decor discret et
   garantit l'AA du texte quel que soit le detail de la photo en dessous. */
.section-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.section-photo__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(20, 20, 20, 0.75), rgba(20, 20, 20, 0) 55%),
    linear-gradient(90deg, rgba(20, 20, 20, 0.93) 0%, rgba(20, 20, 20, 0.8) 45%, rgba(20, 20, 20, 0.58) 100%);
}

.contact__grille {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.2rem;
}
.contact__telephone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--clair);
  color: var(--noir);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  padding-right: clamp(4rem, 8vw, 6rem);
  border-left: var(--rule-lg) solid var(--rouge);
  transition: transform var(--dur-court) var(--ease-mecanique);
}
@media (hover: hover) and (pointer: fine) {
  .contact__telephone:hover { transform: translateX(6px); }
}
.contact__telephone:focus-visible { transform: translateX(6px); }
.contact__telephone-label {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}
.contact__telephone-num {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
}
.contact__telephone-icone {
  position: absolute;
  top: clamp(1.8rem, 4vw, 2.8rem);
  right: clamp(1.8rem, 4vw, 2.8rem);
  width: 28px;
  height: 28px;
  color: var(--rouge);
}

.contact__secondaires {
  display: grid;
  gap: 1.2rem;
}
.contact__email {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6rem;
  border: 2px solid rgba(244, 242, 239, 0.25);
  padding: 1.2rem 1.6rem;
}
.contact__email-label {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-clair);
}
.contact__email img { height: 1.7rem; width: auto; }

@media (min-width: 640px) {
  .contact__secondaires { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .contact__email { justify-content: center; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pied {
  position: relative;
  background: var(--noir);
  color: var(--gris-clair);
  border-top: var(--rule) solid var(--rouge);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
}
.pied .conteneur {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
}
.pied__logo { height: 32px; }
.pied__marque {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--gris-clair);
}
.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.85rem;
}
.pied__liens .lien { border-bottom-color: rgba(244, 242, 239, 0.35); color: var(--gris-clair); }
@media (hover: hover) and (pointer: fine) {
  .pied__liens .lien:hover { color: var(--orange); border-color: var(--orange); }
}
.pied__liens .lien:focus-visible { color: var(--orange); border-color: var(--orange); }

@media (min-width: 700px) {
  .pied .conteneur {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.retour-haut {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rouge);
  color: var(--clair);
  border: 2px solid var(--noir);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-moyen) var(--ease-mecanique),
              transform var(--dur-moyen) var(--ease-mecanique),
              visibility 0s linear var(--dur-moyen),
              background var(--dur-court) var(--ease-mecanique);
}
.retour-haut.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .retour-haut:hover { background: var(--orange); color: var(--noir); }
}
.retour-haut:focus-visible { background: var(--orange); color: var(--noir); }
.retour-haut:active { transform: translateY(0) scale(0.94); }
.retour-haut svg { width: 22px; height: 22px; }

/* ==========================================================================
   Page mentions légales (page secondaire minimale)
   ========================================================================== */
.mentions {
  padding-block-start: calc(72px + clamp(2.5rem, 6vw, 4rem));
  padding-block-end: clamp(3rem, 6vw, 5rem);
  min-height: 60vh;
}
.mentions h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-top: 0.6rem;
}
.mentions h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  margin-top: 2.4rem;
  color: var(--rouge);
}
.mentions p, .mentions li {
  color: var(--gris);
  max-width: 68ch;
}
.mentions .retour-lien { display: inline-flex; margin-top: 2.4rem; }