/* =============================================================
   Ferrari Construction — site vitrine
   Design system V2 — avril 2026
   Alignement sur la plaquette créée par Maria (graphiste).
   Palette : vert anis + noir + beige + blanc.
   Typo    : Montserrat (titres Black + corps Regular).
   Motif   : courbes topographiques SVG en vert anis.
   ============================================================= */

:root {
  /* ===== Palette Maria ===== */
  --c-green:       #A8C86A;        /* vert anis signature */
  --c-green-dark:  #7DA43D;        /* vert anis foncé (hover) */
  --c-green-soft:  #E4EFCC;        /* vert anis très clair (fonds) */
  --c-black:       #0F1410;        /* noir profond */
  --c-graphite:    #2B2F2A;        /* texte courant */
  --c-muted:       #6B6E68;        /* texte secondaire */
  --c-sand:        #F4F1E8;        /* beige doux */
  --c-sand-deep:   #E8E3D3;        /* beige appuyé */
  --c-bg:          #FDFDF9;        /* fond général, off-white tirant vers le sable */
  --c-white:       #FFFFFF;
  --c-rule:        #CFC9B6;        /* trait décoratif discret */

  /* ===== Typographie ===== */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-body:    clamp(1rem, 0.98rem + 0.1vw, 1.075rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-h3:      clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --fs-h2:      clamp(1.625rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-hero:    clamp(2.5rem, 1.6rem + 4vw, 5rem);

  /* ===== Espacements ===== */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6rem;

  --radius:    4px;
  --radius-lg: 10px;

  /* ===== Layout ===== */
  --max-w:      1280px;
  --max-w-text: 68ch;

  /* ===== Ombres ===== */
  --shadow-sm: 0 1px 3px rgba(15, 20, 16, 0.06);
  --shadow-md: 0 6px 22px rgba(15, 20, 16, 0.09);
  --shadow-lg: 0 14px 44px rgba(15, 20, 16, 0.15);
}

/* =============================================================
   Reset
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-graphite);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-black); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--c-green-dark); }
button { cursor: pointer; font: inherit; }

/* =============================================================
   Typography
============================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--c-black);
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }
h4 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

p  { margin: 0 0 var(--s-3); max-width: var(--max-w-text); }
.lead {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--c-graphite);
  max-width: 62ch;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin: 0 0 var(--s-2);
}

/* Trait décoratif vert — souvent utilisé sous les titres de plaquette Maria */
.rule {
  border: 0;
  height: 3px;
  background: var(--c-green);
  width: 64px;
  margin: var(--s-2) 0 var(--s-3);
}

.text-center { text-align: center; }

/* Crochet décoratif vert autour d'un titre (repris de la plaquette) */
.bracket {
  position: relative;
  display: inline-block;
  padding-right: 18px;
}
.bracket::after {
  content: "";
  position: absolute;
  top: -6px;
  right: 0;
  width: 14px;
  height: 14px;
  border-top: 3px solid var(--c-green);
  border-right: 3px solid var(--c-green);
}

/* =============================================================
   Layout helpers
============================================================= */
.container        { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-4); }
.container-narrow { max-width: 880px;        margin: 0 auto; padding: 0 var(--s-4); }

section           { padding: var(--s-7) 0; }
section.tight     { padding: var(--s-5) 0; }

.sand             { background: var(--c-sand); }
.sand-deep        { background: var(--c-sand-deep); }
.green-soft       { background: var(--c-green-soft); }
.black            { background: var(--c-black); color: rgba(255,255,255,0.88); }
.black h1, .black h2, .black h3, .black h4 { color: var(--c-white); }
.black .eyebrow   { color: var(--c-green); }
.black a          { color: var(--c-green); }
.black a:hover    { color: var(--c-white); }

/* =============================================================
   Boutons
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: all 0.22s ease;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--c-green);
  color: var(--c-black);
  border-color: var(--c-green);
}
.btn-primary:hover {
  background: var(--c-green-dark);
  border-color: var(--c-green-dark);
  color: var(--c-white);
}

/* Effet "pulse" : halo doux qui se propage autour du bouton pour attirer l'œil
   sans agresser. Cycle ~2,5 s. S'applique à tout bouton avec class="btn-pulse".
   Respecte prefers-reduced-motion pour les utilisateurs sensibles. */
.btn-pulse {
  position: relative;
  animation: btn-pulse-anim 2.4s ease-in-out infinite;
}
@keyframes btn-pulse-anim {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(154, 205, 50, 0.7);
  }
  60% {
    box-shadow: 0 0 0 14px rgba(154, 205, 50, 0);
  }
}
.btn-pulse:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse { animation: none; }
}

.btn-secondary {
  background: var(--c-black);
  color: var(--c-white);
  border-color: var(--c-black);
}
.btn-secondary:hover {
  background: transparent;
  color: var(--c-black);
}

.btn-ghost {
  background: transparent;
  color: var(--c-black);
  border-color: var(--c-black);
}
.btn-ghost:hover {
  background: var(--c-black);
  color: var(--c-white);
}

.btn-ghost-light {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.5);
}
.btn-ghost-light:hover {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}

.btn-group { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* =============================================================
   Header / Navigation
============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(15, 20, 16, 0.08);
}

.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-2) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.brand { display: flex; align-items: center; gap: 0.6rem; }
/* Logo complet (maison + textes) — fichier vectoriel livré par Alex */
.brand-lockup { height: 72px; width: auto; display: block; }
.brand-lockup-footer { height: 64px; }
@media (max-width: 560px) {
  .brand-lockup { height: 56px; }
  .brand-lockup-footer { height: 52px; }
}
/* Anciennes classes conservées pour rétro-compatibilité (favicon, contextes ponctuels) */
.brand-logo { width: 40px; height: 40px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .bt-main {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--c-black);
  text-transform: uppercase;
}
.brand-text .bt-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--c-graphite);
  text-transform: uppercase;
  padding: 0.5rem 0;
  position: relative;
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--c-black);
}
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: var(--c-green);
}
.nav-cta {
  color: var(--c-black) !important;
  background: var(--c-green);
  padding: 0.7rem 1.1rem !important;
  border-radius: var(--radius);
}
.nav-cta:hover { background: var(--c-green-dark); color: var(--c-white) !important; }

.burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
}
.burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--c-black);
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 26px; height: 2px;
  background: var(--c-black);
}
.burger span::before { top: -8px; }
.burger span::after  { top:  8px; }

@media (max-width: 960px) {
  .burger { display: block; position: relative; z-index: 110; }

  /* Burger animé en X quand le menu est ouvert */
  .burger.is-open span { background: transparent; }
  .burger.is-open span::before { top: 0; transform: rotate(45deg); }
  .burger.is-open span::after  { top: 0; transform: rotate(-45deg); }
  .burger span::before,
  .burger span::after { transition: transform 0.25s ease, top 0.25s ease; }

  /* ----- Menu mobile : dropdown compact qui descend du header ----- */
  .nav-links {
    position: absolute;
    top: 100%;                       /* juste sous le header */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(12px);
    z-index: 100;                    /* > site-header (50), > tout contenu de page */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) var(--s-4) var(--s-3);
    border-top: 1px solid rgba(15, 20, 16, 0.08);
    border-bottom: 1px solid rgba(15, 20, 16, 0.08);
    box-shadow: 0 12px 28px rgba(15, 20, 16, 0.10);
    /* Caché par défaut, sans bloquer le clic sur le contenu de la page */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    /* Sécurité : si jamais la liste est plus haute que l'écran */
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(15, 20, 16, 0.06);
  }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1rem;
  }
  /* CTA "Devis gratuit" : retrouve son look bouton vert dans le dropdown */
  .nav-links .nav-cta {
    display: block;
    text-align: center;
    margin-top: var(--s-2);
    padding: 0.85rem 1rem !important;
  }

  /* Pas de blocage du scroll : le menu fait juste sa hauteur */
  body.nav-open { overflow: auto; }

  /* La nav (parent du dropdown) doit être positionnée pour l'absolute */
  .nav { position: relative; }
}

/* =============================================================
   Hero
============================================================= */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--c-white);
  overflow: hidden;
  background: var(--c-black);
}
.hero.small { min-height: 48vh; }

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.85;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(130deg,
    rgba(15, 20, 16, 0.78) 0%,
    rgba(15, 20, 16, 0.45) 45%,
    rgba(15, 20, 16, 0.20) 100%);
}
/* Hero — volontairement sans motif décoratif (avril 2026).
   Le logo Ferrari (avec ses anneaux topo internes) et la photo
   portent à eux seuls la signature visuelle, sans surcharge. */

.hero-content {
  position: relative;
  z-index: 3;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-6) var(--s-4);
  width: 100%;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: var(--s-3);
  padding-left: 0;
}
.hero h1 {
  font-size: var(--fs-hero);
  color: var(--c-white);
  margin-bottom: var(--s-3);
  max-width: 18ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--c-green);
}
.hero p.lead {
  color: rgba(255, 255, 255, 0.86);
  max-width: 52ch;
  margin-bottom: var(--s-4);
}
.hero-cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.hero-credit {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-4);
  z-index: 3;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* =============================================================
   Cartouche valeurs (vert anis à coches)
   Reprise directe de la plaquette Maria.
============================================================= */
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--c-green);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.values > div {
  padding: var(--s-4) var(--s-3);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  border-right: 1px solid rgba(15, 20, 16, 0.08);
}
.values > div:last-child { border-right: 0; }
.values .check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--c-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-green-dark);
  font-weight: 900;
  font-size: 1rem;
  margin-top: 2px;
}
.values strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-black);
  line-height: 1.25;
}

@media (max-width: 900px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .values > div { border-right: 1px solid rgba(15, 20, 16, 0.08); border-bottom: 1px solid rgba(15, 20, 16, 0.08); }
  .values > div:nth-child(2n) { border-right: 0; }
  .values > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .values { grid-template-columns: 1fr; }
  .values > div { border-right: 0; border-bottom: 1px solid rgba(15, 20, 16, 0.08); }
  .values > div:last-child { border-bottom: 0; }
}

/* =============================================================
   Trois piliers / 3 colonnes
============================================================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.pillar {
  position: relative;
  padding-top: var(--s-4);
  border-top: 3px solid var(--c-green);
}
.pillar-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--c-green-dark);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.pillar h3 { margin-bottom: var(--s-2); }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* =============================================================
   Barre de chiffres (fond noir)
============================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  text-align: center;
  color: var(--c-white);
}
.stats.stats-3col {
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  margin: 0 auto;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--c-green);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}

/* =============================================================
   Galerie / Cartes
============================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}
.gallery.featured {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
}
.gallery.featured .card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 900px) {
  .gallery.featured {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
  .gallery.featured .card:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .gallery.featured { grid-template-columns: 1fr; }
  .gallery.featured .card:first-child { grid-column: span 1; }
}

.card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-black);
  color: var(--c-white);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  min-height: 260px;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--c-white); }
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}
.card:hover img { transform: scale(1.04); }
/* Swap d'image au survol — utilisé sur la carte rond-point d'Isola */
.card .swap-on-hover {
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 1;
}
.card:hover .swap-on-hover { opacity: 1; }

/* Bouton-livre Luc Fox (section "L'âme de notre entreprise")
   Sur mobile, la mise en page 2 colonnes (texte | livre) passe en pile verticale. */
@media (max-width: 600px) {
  .livre-cta {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: var(--s-2) !important;
  }
  .livre-cta p {
    text-align: center !important;
  }
  .livre-cta > a:last-child {
    margin: 0 auto;
  }
  .livre-cta img {
    width: 150px !important;
  }
}

/* Carte avec cycle d'images — utilisé sur la carte héliportage (Travaux spéciaux)
   3 photos qui se succèdent en boucle infinie avec un VRAI crossfade :
   chaque photo entrante apparaît PENDANT que la sortante disparaît, donc plus
   d'instant de noir entre les images. Cycle complet : 9s. */
.cycle-card .cycle-img {
  opacity: 0;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.cycle-card .cycle-img--1 { animation-name: cycle-img-1; }
.cycle-card .cycle-img--2 { animation-name: cycle-img-2; }
.cycle-card .cycle-img--3 { animation-name: cycle-img-3; }
.cycle-card:hover .cycle-img { animation-play-state: paused; }

@keyframes cycle-img-1 {
  0%, 28%   { opacity: 1; }   /* visible au début du cycle */
  38%, 95%  { opacity: 0; }   /* disparue, laisse la place aux suivantes */
  100%      { opacity: 1; }   /* re-fade-in pour la boucle */
}
@keyframes cycle-img-2 {
  0%, 28%   { opacity: 0; }
  38%, 61%  { opacity: 1; }   /* visible au milieu du cycle */
  71%, 100% { opacity: 0; }
}
@keyframes cycle-img-3 {
  0%, 61%   { opacity: 0; }
  71%, 95%  { opacity: 1; }   /* visible à la fin du cycle */
  100%      { opacity: 0; }
}

/* === Cycle à 2 photos (carte 28 Dallage vitrail) — alternance simple === */
.cycle-card-2 .cycle-img {
  opacity: 0;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.cycle-card-2 .cycle-img--1 { animation-name: cycle-2-1; }
.cycle-card-2 .cycle-img--2 { animation-name: cycle-2-2; }
.cycle-card-2:hover .cycle-img { animation-play-state: paused; }
@keyframes cycle-2-1 {
  0%, 42%   { opacity: 1; }
  50%, 92%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes cycle-2-2 {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* === Cycle à 5 photos (carte 13 Aménagement de sentiers) === */
.cycle-card-5 .cycle-img {
  opacity: 0;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.cycle-card-5 .cycle-img--1 { animation-name: cycle-5-1; }
.cycle-card-5 .cycle-img--2 { animation-name: cycle-5-2; }
.cycle-card-5 .cycle-img--3 { animation-name: cycle-5-3; }
.cycle-card-5 .cycle-img--4 { animation-name: cycle-5-4; }
.cycle-card-5 .cycle-img--5 { animation-name: cycle-5-5; }
.cycle-card-5:hover .cycle-img { animation-play-state: paused; }
@keyframes cycle-5-1 {
  0%, 17%   { opacity: 1; }
  22%, 97%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes cycle-5-2 {
  0%, 17%   { opacity: 0; }
  22%, 37%  { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes cycle-5-3 {
  0%, 37%   { opacity: 0; }
  42%, 57%  { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@keyframes cycle-5-4 {
  0%, 57%   { opacity: 0; }
  62%, 77%  { opacity: 1; }
  82%, 100% { opacity: 0; }
}
@keyframes cycle-5-5 {
  0%, 77%   { opacity: 0; }
  82%, 97%  { opacity: 1; }
  100%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Pour les visiteurs qui ont coché "réduire les animations" dans leur OS,
     on fige sur la première image et on désactive le cycle. */
  .cycle-card .cycle-img,
  .cycle-card-2 .cycle-img,
  .cycle-card-5 .cycle-img { animation: none; opacity: 0; }
  .cycle-card .cycle-img--1,
  .cycle-card-2 .cycle-img--1,
  .cycle-card-5 .cycle-img--1 { opacity: 1; }
}

/* =============================================================
   GALERIE EN QUINCONCE (masonry) — utilisée sur /realisations/
   ----------------------------------------------------------------
   Pas de recadrage : chaque photo garde son ratio naturel.
   Pas de filtre : photo brute, sans overlay sombre.
   Titres en noir, posés sous la photo.
   Layout flexbox + JS qui distribue les cartes en round-robin
   pour respecter l'ordre de lecture gauche→droite, ligne par ligne.
============================================================= */
.gallery-masonry {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.masonry-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.masonry-card {
  break-inside: avoid;
  margin: 0 0 var(--s-3);
  display: block;
  background: var(--c-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  page-break-inside: avoid;        /* fallback */
  -webkit-column-break-inside: avoid;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.masonry-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.masonry-card .img-wrap {
  display: block;
  position: relative;
  line-height: 0;
  background: #f4f1e8;             /* fond sable au cas où l'image charge */
}
.masonry-card img {
  width: 100%;
  height: auto;
  display: block;
  /* Les attributs width/height sur la balise <img> permettent au navigateur
     de réserver la place (calcul automatique de l'aspect-ratio).
     Ça évite les "sauts" de mise en page pendant le scroll lazy. */
}
.masonry-card .caption {
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + 2px);
  color: var(--c-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  margin: 0;
  text-align: left;
}

/* Carte avec cycle d'images en quinconce :
   - 1ère image (cycle-img--1) reste TOUJOURS visible et définit la hauteur de la carte
     (elle est en flow naturel, pas animée)
   - Les autres images (2..N) sont absolument positionnées dessus et se relaient
     en fade-in/fade-out via les keyframes existantes. Quand aucune n'est visible,
     la 1ère réapparaît naturellement.
*/
.masonry-card.cycle-card .img-wrap,
.masonry-card.cycle-card-2 .img-wrap,
.masonry-card.cycle-card-5 .img-wrap { position: relative; }
.masonry-card.cycle-card .cycle-img--1,
.masonry-card.cycle-card-2 .cycle-img--1,
.masonry-card.cycle-card-5 .cycle-img--1 {
  /* La 1ère image n'est pas animée : elle sert de référence pour le ratio. */
  opacity: 1 !important;
  animation: none !important;
  position: relative;
  z-index: 0;
}
.masonry-card.cycle-card .img-wrap img:not(:first-child),
.masonry-card.cycle-card-2 .img-wrap img:not(:first-child),
.masonry-card.cycle-card-5 .img-wrap img:not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* superposition propre si ratios proches */
  z-index: 1;
}

/* Carte en pleine largeur : casse le flux des colonnes et s'étale sur tout. */
.masonry-card.feature-fullwidth {
  column-span: all;
  -webkit-column-span: all;
  width: 100%;
  margin: var(--s-2) 0 var(--s-3);
}
.masonry-card.feature-fullwidth .img-wrap {
  /* Limiter la hauteur visuelle pour qu'une image très large reste lisible */
  max-height: 60vh;
  overflow: hidden;
}
.masonry-card.feature-fullwidth img {
  width: 100%;
  height: auto;
}

/* Responsive : moins de colonnes sur les écrans étroits.
   Le nombre exact de colonnes est géré dynamiquement par JS,
   ce media-query sert juste de fallback avant que le JS tourne. */
@media (max-width: 900px) {
  .gallery-masonry { gap: var(--s-2); }
  .masonry-column { gap: var(--s-2); }
}

.card-tag {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 2;
  background: var(--c-green);
  color: var(--c-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
}
.card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: linear-gradient(to top, rgba(15,20,16,0.88), rgba(15,20,16,0.0));
  z-index: 2;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.08rem;
  color: var(--c-white);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  line-height: 1.2;
}
.card-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* =============================================================
   Split (témoignage / 2 colonnes)
============================================================= */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
}

.quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.45;
  color: var(--c-black);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 4px solid var(--c-green);
  margin: 0;
}
.quote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-muted);
  margin-top: var(--s-2);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* =============================================================
   CTA Banner (fond noir + motif topo)
============================================================= */
.cta-banner {
  position: relative;
  padding: var(--s-7) 0;
  background: var(--c-black);
  color: var(--c-white);
  text-align: center;
  overflow: hidden;
}
/* CTA banner — pattern stock dense (Adobe Stock 1910036148, recoloré #B8D48B)
   Plein cadre, opacité modérée pour rester en arrière-plan derrière le titre. */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern-topo-cta.svg") no-repeat center center / cover;
  opacity: 0.22;
  pointer-events: none;
}
.cta-banner h2 {
  color: var(--c-white);
  max-width: 20ch;
  margin: var(--s-2) auto var(--s-3);
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: 0 auto var(--s-4);
}
.cta-banner .eyebrow { color: var(--c-green); }
.cta-banner .btn-group { justify-content: center; }
.cta-banner > .container-narrow { position: relative; z-index: 1; }

/* =============================================================
   Breadcrumb / intros
============================================================= */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--c-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-3);
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-green-dark); }

.page-intro { padding: var(--s-6) 0 var(--s-4); }

/* =============================================================
   Project facts (grille de chiffres clés sur page de chantier)
============================================================= */
.project-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: var(--s-4) 0;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.project-facts > div {
  padding: var(--s-3);
  border-right: 1px solid var(--c-rule);
  text-align: center;
}
.project-facts > div:last-child { border-right: 0; }
.project-facts .fact-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--c-green-dark);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.project-facts .fact-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
@media (max-width: 700px) {
  .project-facts { grid-template-columns: repeat(2, 1fr); }
  .project-facts > div:nth-child(2) { border-right: 0; }
}

/* =============================================================
   Formulaires
============================================================= */
.form-field { margin-bottom: var(--s-3); }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-black);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--c-rule);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-graphite);
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 0;
  border-color: var(--c-green-dark);
}
.form-field textarea { min-height: 140px; resize: vertical; }

/* =============================================================
   Footer
============================================================= */
.site-footer {
  background: var(--c-black);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--s-6) 0 var(--s-4);
  position: relative;
  overflow: hidden;
}
/* Footer — sans motif décoratif (avril 2026).
   Logique cohérente avec le hero : le logo + le pattern dense du CTA juste
   au-dessus suffisent à porter l'identité topo, le footer reste sobre. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  position: relative;
  z-index: 1;
}
.footer-grid h4 {
  color: var(--c-white);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.45rem; font-size: 0.92rem; }
.footer-grid a { color: rgba(255,255,255,0.7); }
.footer-grid a:hover { color: var(--c-green); }
.footer-baseline {
  font-size: 0.92rem;
  max-width: 32ch;
  line-height: 1.55;
  margin-top: var(--s-2);
  color: rgba(255,255,255,0.7);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}