/* ==========================================================================
   Alp'Solution — feuille de style v2 (refonte 2026)
   Évolution de l'identité existante : même logo, même bleu, même rouge,
   mêmes polices (Anton / Barlow Condensed / Barlow). Mobile first.

   Sommaire
   1. Design tokens          6. Univers Travaux (falaise, bâtiment)
   2. Base & typographie     7. Univers Événementiel & loisirs
   3. Boutons & liens        8. Réalisations, avis, clients
   4. En-tête & navigation   9. Contact, formulaire, pied de page
   5. Hero & en-têtes        10. Animations & accessibilité
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */
:root {
  color-scheme: light;
  /* Marque (inchangée) */
  --blue-950: #070F33;
  --blue-900: #0D1D5C;
  --blue-800: #132573;
  --blue-700: #1B2F8F;
  --blue-600: #1D3396;   /* bleu Alp'Solution */
  --blue-500: #2743B5;
  --blue-100: #DCE2F7;
  --blue-50:  #EEF1FB;
  --red-700:  #A81B21;
  --red-600:  #C81E25;
  --red-500:  #D7282F;   /* rouge Alp'Solution */

  /* Neutres — gris pierre légèrement chauds (roche, calcaire) */
  --ink:       #10131C;
  --ink-soft:  #3B4050;
  --muted:     #5E6474;
  --line:      #E3E1DC;
  --stone-50:  #F7F6F3;
  --stone-100: #EFEDE8;
  --white:     #FFFFFF;

  /* Univers Événementiel & loisirs : forêt + bois (même rouge pour l'action) */
  --forest-950: #143223;
  --forest-900: #1B3F2D;
  --forest-800: #234C37;
  --wood-400:   #C68D5A;
  --wood-500:   #9C6438;

  /* Sémantique */
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface: var(--white);
  --surface-alt: var(--stone-50);
  --surface-dark: var(--blue-950);
  --accent: var(--red-500);
  --accent-hover: var(--red-600);
  --focus: 0 0 0 3px rgba(39, 67, 181, .45);

  /* Typographie */
  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-hero: clamp(2.75rem, min(1.4rem + 5.6vw, 10.5vh), 6.5rem);
  --fs-h2: clamp(2.125rem, 1.5rem + 2.8vw, 4rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-lede: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1.0625rem;  /* 17px */
  --fs-small: .9375rem;  /* 15px */
  --fs-kicker: .875rem;  /* 14px */

  /* Espacements (échelle 4/8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 9vw, 136px);
  --gutter: clamp(20px, 4vw, 56px);
  --container: 1320px;
  --container-wide: 1600px;

  /* Formes */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(7, 15, 51, .06), 0 6px 18px rgba(7, 15, 51, .08);
  --shadow-2: 0 18px 50px rgba(7, 15, 51, .18);

  /* Mouvement */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 700ms;

  --header-h: 76px;
}

/* 2. BASE & TYPOGRAPHIE ==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--red-600); }
button { font: inherit; cursor: pointer; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.1; margin-bottom: var(--s-3); }
h4 {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--s-2);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-500);
  margin-bottom: var(--s-4);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.kicker.no-rule::before { display: none; }

.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.text-muted { color: var(--text-muted); }
.outline-title { -webkit-text-stroke: 2px currentColor; color: transparent; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.section { padding: var(--section-y) 0; position: relative; }
.section-alt { background: var(--surface-alt); }
.section-dark { background: var(--surface-dark); color: var(--white); }
.section-dark .lede, .section-dark p { color: rgba(255, 255, 255, .78); }
.section-head { max-width: 820px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .kicker { justify-content: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--white); color: var(--blue-900); padding: 10px 16px; border-radius: var(--radius-s);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 22px; height: 22px; flex: none; }

/* 3. BOUTONS & LIENS ======================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  font-family: var(--font-condensed); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  border: 2px solid transparent; border-radius: var(--radius-s);
  transition: background-color var(--t-base) var(--ease-std), color var(--t-base) var(--ease-std),
              border-color var(--t-base) var(--ease-std), transform var(--t-base) var(--ease-std),
              box-shadow var(--t-base) var(--ease-std);
  cursor: pointer; text-align: center;
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease-std); }
.btn:hover .icon-arrow { transform: translateX(4px); }
.btn-primary { background: var(--red-500); color: var(--white); box-shadow: 0 8px 24px rgba(215, 40, 47, .28); }
.btn-primary:hover { background: var(--red-600); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(215, 40, 47, .36); }
.btn-primary:active { transform: translateY(0); }
.btn-blue { background: var(--blue-600); color: var(--white); }
.btn-blue:hover { background: var(--blue-700); color: var(--white); transform: translateY(-2px); }
.btn-outline-light { border-color: rgba(255, 255, 255, .7); color: var(--white); background: rgba(255, 255, 255, .04); }
.btn-outline-light:hover { background: var(--white); color: var(--blue-900); border-color: var(--white); }
.btn-outline { border-color: var(--blue-600); color: var(--blue-600); }
.btn-outline:hover { background: var(--blue-600); color: var(--white); }
.btn-wood { background: var(--wood-400); color: var(--forest-950); }
.btn-wood:hover { background: #CE9668; color: var(--forest-950); transform: translateY(-2px); }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-condensed); font-weight: 700; font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600);
  padding: 6px 0; min-height: 44px;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease-std); }
.link-arrow:hover .icon { transform: translateX(5px); }
.section-dark .link-arrow, .universe-loisirs .link-arrow { color: var(--white); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

/* 4. EN-TÊTE & NAVIGATION ================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--header-h);
  transition: background-color var(--t-base) var(--ease-std), box-shadow var(--t-base) var(--ease-std), height var(--t-base) var(--ease-std);
}
.site-header::before { /* voile pour la lisibilité sur photo, avant défilement */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 15, 51, .62), rgba(7, 15, 51, 0));
  transition: opacity var(--t-base);
}
.site-header.is-solid, .site-header.is-open, .no-hero .site-header { background: var(--blue-900); box-shadow: 0 8px 30px rgba(7, 15, 51, .25); }
.site-header.is-solid::before, .no-hero .site-header::before { opacity: 0; }
.header-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); max-width: var(--container-wide); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); flex: none; }
.brand:hover { color: var(--white); }
.brand img { width: 34px; height: auto; }
/* Logo : pictogramme du dossier « LOGO FINAL » (LOGO TRANSPARENT) + « ALP SOLUTION » en blanc, partout */
.brand-name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .02em; line-height: 1; }
.brand-name span { color: var(--white); }

.main-nav { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .1); color: var(--white);
}
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.is-open .nav-toggle .icon-close { display: block; }
.is-open .nav-toggle .icon-menu { display: none; }
.header-phone { display: none; }

.lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--radius-s); border: 1px solid rgba(255, 255, 255, .3); color: var(--white); font-family: var(--font-condensed); font-weight: 700; letter-spacing: .1em; font-size: .9375rem; }
.lang-btn:hover { background: var(--white); color: var(--blue-900); }

/* Menu mobile plein écran */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 190;
  background: var(--blue-950); color: var(--white);
  padding: var(--s-6) var(--gutter) calc(var(--s-9) + env(safe-area-inset-bottom));
  overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease-std), transform var(--t-base) var(--ease-std), visibility var(--t-base);
}
.is-open + .mobile-menu, .mobile-menu.open { visibility: visible; opacity: 1; transform: none; }
.mobile-menu .mm-group { padding: var(--s-4) 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mobile-menu .mm-label { font-family: var(--font-condensed); font-weight: 600; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: var(--s-2); display: block; }
.mobile-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--white); font-family: var(--font-display); text-transform: uppercase; font-size: 1.75rem; letter-spacing: .01em; }
.mobile-menu a.sub { font-size: 1.375rem; }
.mobile-menu a[aria-current="page"] { color: var(--wood-400); }
.mobile-menu .mm-cta { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.mobile-menu .mm-cta a { font-family: var(--font-condensed); font-size: 1.0625rem; justify-content: center; }
body.menu-open { overflow: hidden; }

@media (min-width: 1100px) {
  .nav-toggle, .mobile-menu { display: none; }
  .main-nav { display: flex; align-items: center; gap: var(--s-2); }
  .main-nav > ul { display: flex; align-items: center; gap: 2px; }
  .main-nav > ul > li { position: relative; }
  .nav-link {
    display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
    font-family: var(--font-condensed); font-weight: 600; font-size: 1.0625rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--white); background: none; border: 0; border-radius: var(--radius-s);
    position: relative;
  }
  .nav-link::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--red-500);
    transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out);
  }
  .nav-link:hover, .nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: var(--white); }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link .chev { width: 14px; height: 14px; transition: transform var(--t-base); }
  .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .nav-drop {
    position: absolute; top: calc(100% + 10px); left: -8px; width: 380px; padding: var(--s-3);
    background: var(--white); border-radius: var(--radius-m); box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--t-base) var(--ease-std), transform var(--t-base) var(--ease-std), visibility var(--t-base);
  }
  .nav-drop.open { opacity: 1; visibility: visible; transform: none; }
  .nav-drop a { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3); border-radius: var(--radius-s); color: var(--ink); }
  .nav-drop a:hover { background: var(--stone-50); color: var(--ink); }
  .nav-drop img { width: 72px; height: 56px; object-fit: cover; border-radius: var(--radius-s); flex: none; }
  .nav-drop strong { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .04em; }
  .nav-drop span { display: block; font-size: .875rem; color: var(--muted); line-height: 1.4; }
  .nav-drop .tag { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-500); margin-bottom: 2px; }
  .header-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-3); }
  .header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-family: var(--font-condensed); font-weight: 600; font-size: 1.0625rem; letter-spacing: .04em; min-height: 44px; }
  .header-phone:hover { color: var(--white); opacity: .85; }
  .header-phone .icon { width: 18px; height: 18px; }
  .site-header .btn { min-height: 46px; padding: 12px 20px; font-size: 1rem; }
}
@media (min-width: 1100px) and (max-width: 1280px) { .header-phone span { display: none; } }

/* 5. HERO & EN-TÊTES DE PAGE =============================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: var(--white); background: var(--blue-950); overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.06); animation: hero-in 2.4s var(--ease-out) forwards; }
@keyframes hero-in { to { transform: scale(1); } }
.hero::after { /* dégradé : lisibilité du texte, sans éteindre la photo */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 15, 51, .86) 0%, rgba(7, 15, 51, .55) 45%, rgba(7, 15, 51, .1) 75%),
    linear-gradient(0deg, rgba(7, 15, 51, .9) 0%, rgba(7, 15, 51, 0) 45%);
}
.hero-inner { width: 100%; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(32px, 5vw, 64px); max-width: var(--container-wide); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); color: rgba(255, 255, 255, .9); margin-bottom: var(--s-4);
}
.hero-eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--red-500); }
.hero h1 { font-size: var(--fs-hero); max-width: 11.5em; margin-bottom: var(--s-5); line-height: .98; }
.hero h1 .stroke { -webkit-text-stroke: 2px var(--white); color: transparent; display: block; }
.hero .lede { color: rgba(255, 255, 255, .86); max-width: 56ch; margin-bottom: var(--s-6); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  margin-top: clamp(28px, 5vh, 64px); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .22);
  max-width: 760px;
}
.hero-proof strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); line-height: 1; }
.hero-proof span { display: block; font-size: .875rem; line-height: 1.35; color: rgba(255, 255, 255, .72); margin-top: 6px; }
.hero-proof .stars { color: #FFC83D; letter-spacing: 1px; font-size: .9em; }
.hero-caption { position: absolute; right: var(--gutter); bottom: 20px; font-size: .75rem; color: rgba(255, 255, 255, .6); display: none; }
@media (min-width: 900px) { .hero-caption { display: block; } }
@media (max-width: 560px) {
  .hero-ctas .btn { width: 100%; }
  .hero-proof { gap: var(--s-3); }
}

/* En-tête de page intérieure */
.page-hero {
  position: relative; color: var(--white); background: var(--blue-950); overflow: hidden; isolation: isolate;
  min-height: clamp(460px, 72svh, 720px); display: flex; align-items: flex-end;
}
.page-hero .hero-media img { object-position: center; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(7, 15, 51, .92) 0%, rgba(7, 15, 51, .45) 55%, rgba(7, 15, 51, .35) 100%);
}
.page-hero .container { padding-top: calc(var(--header-h) + 56px); padding-bottom: clamp(40px, 6vw, 80px); max-width: var(--container-wide); }
.page-hero h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem); max-width: 16ch; }
.page-hero .lede { color: rgba(255, 255, 255, .85); }
.page-hero-compact { min-height: 0; background: var(--blue-900); }
.page-hero-compact::after { display: none; }
.page-hero-compact h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); }
.page-hero-compact p { color: rgba(255, 255, 255, .8); max-width: 62ch; }
.breadcrumb { font-size: .875rem; color: rgba(255, 255, 255, .7); margin-bottom: var(--s-5); }
.breadcrumb a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--white); }
.universe-loisirs.page-hero, .page-hero.universe-loisirs::after { background-color: var(--forest-950); }
.page-hero.universe-loisirs::after { background: linear-gradient(0deg, rgba(20, 50, 35, .94) 0%, rgba(20, 50, 35, .45) 55%, rgba(20, 50, 35, .3) 100%); }

/* Bande de chiffres / preuves sous un en-tête */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.facts > div { background: var(--white); padding: var(--s-5); }
.facts strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; color: var(--blue-600); }
.facts span { display: block; margin-top: 8px; font-size: .9375rem; color: var(--muted); line-height: 1.4; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 6. UNIVERS TRAVAUX ======================================================= */
.universe-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-5);
  font-family: var(--font-condensed); font-weight: 700; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700);
}
.universe-tag b { font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: .04em; }
.section-dark .universe-tag { background: rgba(255, 255, 255, .1); color: var(--white); }
.universe-loisirs .universe-tag { background: rgba(198, 141, 90, .16); color: var(--wood-400); }

/* Bloc expertise principale : grande photo + texte */
.feature { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature-media { position: relative; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--blue-900); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media .badge-float {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  background: rgba(7, 15, 51, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--white); border-radius: var(--radius-s); padding: 14px 16px; font-size: .9375rem; line-height: 1.4;
}
.feature-media .badge-float strong { display: block; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: var(--wood-400); margin-bottom: 2px; }
@media (min-width: 980px) {
  .feature { grid-template-columns: 1.05fr 1fr; }
  .feature.reverse .feature-media { order: 2; }
  .feature-media { aspect-ratio: 4 / 5; }
}

.check-list { display: grid; gap: 10px; margin: var(--s-5) 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.check-list li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--red-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section-dark .check-list li { color: rgba(255, 255, 255, .86); }
.universe-loisirs .check-list li::before { background-color: var(--wood-500); }

/* Trois piliers (dispositifs) */
.pillars { display: grid; gap: var(--s-4); }
.pillar {
  position: relative; padding: var(--s-6) var(--s-5); border-radius: var(--radius-m);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color var(--t-base), background-color var(--t-base), transform var(--t-base) var(--ease-std);
}
.pillar:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .07); transform: translateY(-3px); }
.pillar .num { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--red-500); display: block; margin-bottom: var(--s-4); }
.pillar h3 { color: var(--white); }
.pillar p { font-size: var(--fs-small); }
.pillar ul { margin-top: var(--s-4); display: grid; gap: 6px; font-size: var(--fs-small); color: rgba(255, 255, 255, .78); }
.pillar ul li { padding-left: 16px; position: relative; }
.pillar ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--red-500); }
@media (min-width: 860px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Solutions techniques : cartes photo */
.solutions { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.solution {
  position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-m);
  overflow: hidden; box-shadow: var(--shadow-1); color: var(--ink);
  transition: transform var(--t-base) var(--ease-std), box-shadow var(--t-base) var(--ease-std);
}
a.solution:hover { color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.solution figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-100); }
.solution figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.solution:hover figure img { transform: scale(1.05); }
.solution-body { padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.solution .place { font-family: var(--font-condensed); font-weight: 600; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red-500); }
.solution h3 { font-size: 1.375rem; margin-bottom: 4px; }
.solution p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.solution ul { margin-top: var(--s-3); display: grid; gap: 4px; font-size: .875rem; color: var(--ink-soft); }
.solution ul li { padding-left: 14px; position: relative; }
.solution ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--blue-600); }

/* Rail horizontal (mobile) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 760px) { .rail { grid-auto-columns: minmax(44%, 1fr); } }
@media (min-width: 1100px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } }

/* Méthode en étapes */
.steps { display: grid; gap: var(--s-4); counter-reset: step; }
.step { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); border-top: 3px solid var(--blue-600); background: var(--white); border-radius: 0 0 var(--radius-m) var(--radius-m); box-shadow: var(--shadow-1); }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--blue-100); position: absolute; right: var(--s-5); top: var(--s-5); }
.step h3 { font-size: 1.375rem; max-width: 18ch; }
.step ul { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--ink-soft); }
.step ul li { padding-left: 14px; position: relative; }
.step ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--red-500); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Bandeau CTA contextuel */
.cta-strip {
  display: grid; gap: var(--s-5); align-items: center; margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-m);
  background: var(--blue-600); color: var(--white); position: relative; overflow: hidden;
}
.cta-strip::after { /* rappel graphique de la corde du logo */
  content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 320px;
  border-right: 3px solid rgba(255, 255, 255, .12); transform: rotate(18deg);
}
.cta-strip h3 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); margin: 0 0 6px; }
.cta-strip p { color: rgba(255, 255, 255, .82); margin: 0; }
.cta-strip .btn { position: relative; z-index: 1; }
.cta-strip.light { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.cta-strip.light p { color: var(--ink-soft); }
.cta-strip.light::after { border-color: rgba(29, 51, 150, .08); }
.cta-strip.wood { background: var(--wood-400); color: var(--forest-950); }
.cta-strip.wood p { color: rgba(20, 50, 35, .78); }
.cta-strip.wood::after { border-color: rgba(20, 50, 35, .12); }
/* Bouton de l'encadré cuir : vert forêt (comme le fond de la section) au lieu du rouge */
.cta-strip.wood .btn-primary { background: var(--forest-950); color: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.cta-strip.wood .btn-primary:hover { background: var(--forest-800); color: var(--white); box-shadow: 0 10px 22px -10px rgba(20, 50, 35, .7); }
.cta-strip-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 900px) { .cta-strip { grid-template-columns: 1fr auto; } }

/* Section bâtiment : mosaïque photo + cartes */
.duo { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .duo { grid-template-columns: 1fr 1fr; } }
.photo-stack { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: var(--s-3); }
.photo-stack figure { margin: 0; overflow: hidden; border-radius: var(--radius-m); background: var(--stone-100); }
.photo-stack figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.photo-stack figure:hover img { transform: scale(1.04); }
.photo-stack .tall { grid-row: span 2; aspect-ratio: 3 / 4.6; }
.photo-stack .wide { aspect-ratio: 4 / 3.2; }

.domain-list { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); }
.domain { background: var(--white); padding: var(--s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.domain .icon-wrap { width: 48px; height: 48px; border-radius: var(--radius-s); background: var(--blue-50); color: var(--blue-600); display: grid; place-items: center; }
.domain h3 { font-size: 1.25rem; margin-bottom: 6px; }
.domain p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.domain .place { font-family: var(--font-condensed); font-weight: 600; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-500); display: block; margin-bottom: 4px; }

.alt-banner {
  display: grid; gap: var(--s-2); margin-top: var(--s-5); padding: var(--s-5);
  border-left: 4px solid var(--red-500); background: var(--white); border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.alt-banner strong { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.125rem; }
.alt-banner p { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }

/* Lignes de prestations détaillées (pages intérieures) */
.service-rows { display: grid; gap: clamp(48px, 7vw, 104px); }
.service-row { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.service-row figure { margin: 0; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone-100); position: relative; }
.service-row figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.service-row figure:hover img { transform: scale(1.04); }
.service-row figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(7, 15, 51, .8); color: var(--white); font-size: .8125rem; padding: 6px 10px; border-radius: var(--radius-s); }
.service-row h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
@media (min-width: 960px) {
  .service-row { grid-template-columns: 1fr 1fr; }
  .service-row:nth-child(even) figure { order: 2; }
}

/* 7. UNIVERS ÉVÉNEMENTIEL & LOISIRS ======================================= */
.universe-loisirs { background: var(--forest-950); color: var(--white); }
.universe-loisirs .kicker { color: var(--wood-400); }
.universe-loisirs .lede, .universe-loisirs p { color: rgba(255, 255, 255, .8); }
.universe-loisirs h2, .universe-loisirs h3 { color: var(--white); }

.transition-banner {
  position: relative; min-height: clamp(520px, 92svh, 860px); display: flex; align-items: center;
  color: var(--white); overflow: hidden; isolation: isolate; background: var(--forest-950);
}
.transition-banner .hero-media img { object-position: center 40%; }
.transition-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 50, 35, .9) 0%, rgba(20, 50, 35, .35) 40%, rgba(20, 50, 35, .55) 70%, var(--forest-950) 100%);
}
.transition-banner .container { text-align: center; }
.transition-banner .universe-tag { background: rgba(198, 141, 90, .18); color: var(--wood-400); }
.transition-banner h2 { font-size: clamp(2.75rem, 1.6rem + 5vw, 6.5rem); max-width: 15ch; margin: 0 auto var(--s-5); }
.transition-banner p { max-width: 60ch; margin: 0 auto var(--s-6); color: rgba(255, 255, 255, .86); font-size: var(--fs-lede); }

.offer-cards { display: grid; gap: var(--s-4); }
.offer-card {
  position: relative; min-height: 460px; border-radius: var(--radius-l); overflow: hidden; display: flex; align-items: flex-end;
  color: var(--white); isolation: isolate;
}
.offer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1100ms var(--ease-out); }
.offer-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 50, 35, .95) 0%, rgba(20, 50, 35, .2) 60%, rgba(20, 50, 35, 0) 100%); }
.offer-card:hover img { transform: scale(1.06); }
.offer-card .body { padding: var(--s-6) var(--s-5); }
.offer-card h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.offer-card p { font-size: var(--fs-small); color: rgba(255, 255, 255, .82); }
.offer-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }
.offer-card ul li { font-size: .8125rem; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
@media (min-width: 900px) { .offer-cards { grid-template-columns: 1.25fr 1fr 1fr; } .offer-card { min-height: 560px; } }

.atelier-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.atelier { border-radius: var(--radius-m); overflow: hidden; background: var(--forest-900); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; }
.atelier figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.atelier figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.atelier:hover figure img { transform: scale(1.05); }
.atelier .body { padding: var(--s-5); }
.atelier .place { font-family: var(--font-condensed); font-weight: 600; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wood-400); display: block; margin-bottom: 4px; }
.atelier h3 { font-size: 1.375rem; }
.atelier p { font-size: var(--fs-small); }
.atelier ul { display: grid; gap: 4px; margin-top: var(--s-3); font-size: .875rem; color: rgba(255, 255, 255, .72); }
.atelier ul li { padding-left: 14px; position: relative; }
.atelier ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--wood-400); }

.audience { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.audience li { font-family: var(--font-condensed); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .875rem; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(198, 141, 90, .5); color: var(--wood-400); }

/* Mosaïque immersive (loisirs) */
.mosaic { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
.mosaic figure { margin: 0; overflow: hidden; border-radius: var(--radius-m); position: relative; background: var(--forest-900); }
.mosaic figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); cursor: zoom-in; }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: .8125rem; color: var(--white); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); pointer-events: none; }
.mosaic .m-big { grid-column: span 2; grid-row: span 2; }
.mosaic .m-tall { grid-row: span 2; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .mosaic .m-wide { grid-column: span 2; }
}

/* 8. RÉALISATIONS, AVIS, CLIENTS ========================================= */
.cases { display: grid; gap: var(--s-5); }
.case { display: grid; background: var(--white); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-1); }
.case figure { margin: 0; aspect-ratio: 16 / 11; overflow: hidden; position: relative; background: var(--stone-100); }
.case figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); cursor: zoom-in; }
.case:hover figure img { transform: scale(1.04); }
.case .cat { position: absolute; left: 12px; top: 12px; font-family: var(--font-condensed); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-s); background: var(--blue-600); color: var(--white); }
.case .cat.cat-bat { background: var(--ink); }
.case .cat.cat-loisirs { background: var(--wood-500); color: var(--white); }
.case-body { padding: var(--s-5); }
.case-body .place { display: flex; align-items: center; gap: 6px; font-family: var(--font-condensed); font-weight: 600; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-500); margin-bottom: 6px; }
.case-body .place .icon { width: 16px; height: 16px; }
.case-body h3 { font-size: 1.5rem; }
.case-body dl { display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; }
.case-body dt { font-family: var(--font-condensed); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case-body dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
@media (min-width: 760px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cases .case-lead { grid-column: span 2; grid-template-columns: 1.3fr 1fr; }
  .cases .case-lead figure { aspect-ratio: auto; height: 100%; min-height: 420px; }
}

/* Galerie filtrable (page Réalisations) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-6); }
.filters button {
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white);
  font-family: var(--font-condensed); font-weight: 700; font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  transition: color var(--t-base) var(--ease-std), background-color var(--t-base) var(--ease-std), border-color var(--t-base) var(--ease-std);
}
.filters button:hover { border-color: var(--blue-600); color: var(--blue-600); }
.filters button[aria-pressed="true"] { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.gallery { columns: 2 220px; column-gap: var(--s-3); }
.gallery figure { margin: 0 0 var(--s-3); break-inside: avoid; border-radius: var(--radius-m); overflow: hidden; position: relative; background: var(--stone-100); }
.gallery figure img { width: 100%; cursor: zoom-in; transition: transform 900ms var(--ease-out); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 28px 12px 10px; font-size: .8125rem; color: var(--white); background: linear-gradient(0deg, rgba(7, 15, 51, .82), rgba(7, 15, 51, 0)); }
.gallery figure[hidden] { display: none; }
@media (min-width: 900px) { .gallery { columns: 3; } }
@media (min-width: 1300px) { .gallery { columns: 4; } }

/* Avis Google */
.reviews-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.rating-badge { display: inline-flex; align-items: center; gap: var(--s-4); padding: 14px 20px; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.rating-badge:hover { color: var(--ink); border-color: var(--blue-600); }
.rating-badge svg { width: 32px; height: 32px; }
.rating-badge strong { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1; }
.rating-badge .stars { color: #F5A400; letter-spacing: 2px; }
.rating-badge small { display: block; font-size: .875rem; color: var(--muted); }
.reviews { display: grid; gap: var(--s-4); }
.review { background: var(--white); border-radius: var(--radius-m); padding: var(--s-6) var(--s-5) var(--s-5); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-4); position: relative; }
.review::before { content: "“"; position: absolute; right: 20px; top: 0; font-family: Georgia, serif; font-size: 6rem; line-height: 1; color: var(--blue-50); }
.review .stars { color: #F5A400; letter-spacing: 2px; font-size: 1rem; }
.review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); position: relative; }
.review footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.review .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--white); background: var(--blue-600); flex: none; }
.review .who strong { display: block; }
.review .who span { color: var(--muted); font-size: .8125rem; }
.review .topic { display: inline-block; font-family: var(--font-condensed); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red-500); }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review-inline { max-width: 760px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; }
.review-inline blockquote { margin: 0 0 var(--s-4); font-family: var(--font-body); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.45; font-weight: 500; }
.review-inline .stars { color: #F5A400; letter-spacing: 3px; margin-bottom: var(--s-4); display: block; }
.review-inline cite { font-style: normal; font-size: .9375rem; opacity: .75; }

/* Logos clients */
.clients { padding: clamp(48px, 6vw, 80px) 0; background: var(--white); border-bottom: 1px solid var(--line); overflow: hidden; }
.clients-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.clients-head p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 52ch; }
.clients-head .kicker { margin: 0; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: var(--s-5); }
.marquee-track { display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); width: max-content; animation: marquee 60s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 54s; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee img { height: 64px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--t-base), opacity var(--t-base); }
.marquee img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-toggle { margin-top: var(--s-4); background: none; border: 0; color: var(--muted); font-size: .8125rem; text-decoration: underline; min-height: 44px; padding: 0; }

/* À propos — bloc équipe */
.about-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.about-photos figure { margin: 0; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 3 / 4; background: var(--stone-100); }
.about-photos figure:first-child { margin-top: var(--s-8); }
.about-photos img { width: 100%; height: 100%; object-fit: cover; }
.signature { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; color: var(--blue-600); margin: var(--s-6) 0; }
.signature span { color: var(--red-500); }
@media (min-width: 980px) { .about-split { grid-template-columns: 1fr 1fr; } }

/* 9. CONTACT, FORMULAIRE, PIED DE PAGE ==================================== */
.contact-final { background: var(--blue-950); color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
.contact-final .bg { position: absolute; inset: 0; z-index: -2; opacity: .28; }
.contact-final .bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--blue-950) 30%, rgba(7, 15, 51, .7)); }
.contact-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.contact-final h2 { font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); }
.contact-final p { color: rgba(255, 255, 255, .82); }
.contact-direct { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.contact-direct a { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-size: 1.125rem; min-height: 44px; }
.contact-direct a:hover { color: var(--wood-400); }
.contact-direct .icon { color: var(--red-500); }
.choice-list { display: grid; gap: var(--s-3); }
.choice {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border-radius: var(--radius-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--white);
  transition: background-color var(--t-base), border-color var(--t-base), transform var(--t-base) var(--ease-std);
}
.choice:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: var(--white); transform: translateX(4px); }
.choice .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--red-500); width: 36px; }
.choice strong { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; }
.choice span { font-size: .9375rem; color: rgba(255, 255, 255, .7); }
.choice.loisirs .n { color: var(--wood-400); }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1.1fr 1fr; } }

.form-layout { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 1000px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.form-card { background: var(--white); border-radius: var(--radius-l); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-2); }
.form-card h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.field { display: grid; gap: 6px; margin-bottom: var(--s-5); }
.field label, .field legend { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.field .req { color: var(--red-500); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  border: 1.5px solid #CFCCC5; border-radius: var(--radius-s); background: var(--white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--focus); }
.field .hint { font-size: .8125rem; color: var(--muted); }
.field-row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.option-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); margin-top: 6px; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-s);
  border: 1.5px solid #CFCCC5; font-size: .9375rem; font-weight: 500; line-height: 1.3; transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.option span::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #A8A59E; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.option input:checked + span { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-800); }
.option input:checked + span::before { border: 5px solid var(--blue-600); }
.option input:focus-visible + span { box-shadow: var(--focus); }
.option.main span { font-weight: 700; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .8125rem; color: var(--muted); margin-top: var(--s-4); }
.form-error { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--radius-s); background: #FDF0F0; color: var(--red-700); font-size: .9375rem; }
.form-success { display: none; text-align: center; padding: var(--s-7) var(--s-4); }
.form-success.show { display: block; }
.form-success .icon { width: 56px; height: 56px; color: #1E8E3E; margin: 0 auto var(--s-4); }
.aside-card { background: var(--blue-950); color: var(--white); border-radius: var(--radius-l); padding: clamp(24px, 3vw, 40px); }
.aside-card h2, .aside-card h3 { color: var(--white); }
.aside-card dl { display: grid; gap: var(--s-4); margin: var(--s-5) 0 0; }
.aside-card dt { font-family: var(--font-condensed); font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.aside-card dd { margin: 2px 0 0; font-size: 1.0625rem; }
.aside-card a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.aside-card a:hover { color: var(--wood-400); }

.zones { display: grid; gap: var(--s-4); }
.zone { padding: var(--s-5); border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); }
.zone h3 { font-size: 1.25rem; }
.zone p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
@media (min-width: 900px) { .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Pied de page */
.site-footer { background: #050B26; color: rgba(255, 255, 255, .72); padding: clamp(56px, 7vw, 96px) 0 calc(var(--s-6) + 76px); font-size: .9375rem; }
.footer-grid { display: grid; gap: var(--s-6); }
.footer-brand .brand { margin-bottom: var(--s-4); }
.footer-brand p { max-width: 38ch; }
.footer-col h2 { font-family: var(--font-condensed); font-weight: 700; font-size: .875rem; letter-spacing: .16em; color: var(--white); margin-bottom: var(--s-4); }
.footer-col ul { display: grid; gap: 4px; }
.footer-col a { color: rgba(255, 255, 255, .72); display: inline-flex; align-items: center; min-height: 36px; }
.footer-col a:hover { color: var(--white); }
.footer-social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.footer-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: var(--white); }
.footer-social a:hover { background: var(--white); color: var(--blue-900); }
.footer-social .icon { width: 18px; height: 18px; }
.footer-bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: .8125rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-bottom a { color: rgba(255, 255, 255, .7); }
.footer-bottom a:hover { color: var(--white); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .site-footer { padding-bottom: var(--s-6); } }

/* Barre d'action mobile (toujours accessible) */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(7, 15, 51, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(110%); transition: transform var(--t-base) var(--ease-out);
}
.mobile-cta.show { transform: none; }
.mobile-cta .btn { min-height: 50px; padding: 10px 12px; font-size: .9375rem; }
.mobile-cta .btn-call { background: rgba(255, 255, 255, .1); color: var(--white); border-color: rgba(255, 255, 255, .25); }
.mobile-cta .btn .icon { width: 18px; height: 18px; }
@media (min-width: 1100px) { .mobile-cta { display: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(5, 11, 38, .94); display: none; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: var(--radius-s); }
.lightbox figcaption { color: rgba(255, 255, 255, .85); text-align: center; margin-top: var(--s-3); font-size: .9375rem; }
.lightbox-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: var(--white); display: grid; place-items: center; }
.lightbox-close .icon { width: 24px; height: 24px; }

/* Pages légales (générées par tools/build_legal_pages.py) */
.legal-content { max-width: 780px; }
.legal-content h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-top: var(--s-7); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content ul, .legal-list { list-style: disc; padding-left: 1.2em; margin-bottom: var(--s-4); display: grid; gap: 4px; }
.legal-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Page 404 */
.not-found { min-height: 70svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 48px) var(--gutter) var(--s-9); }

/* 11. REFONTE CIBLÉE — PARTIE TRAVAUX (classes dédiées : l'univers
   Événementiel & loisirs, validé, n'utilise aucune de ces classes) ======= */

/* Hero d'accueil : plus sobre, titre proportionné, peu de texte */
/* Photo « Entretien du mur végétal » affichée EN ENTIER (aucun recadrage, aucun zoom) :
   le bloc prend toute la largeur et la hauteur suit les proportions de la photo (4:3). */
.hero-v2 { min-height: auto; aspect-ratio: 1600 / 1199; } /* grandit si le texte dépasse */
.hero-v2 .hero-media img { object-fit: cover; object-position: 50% 50%; transform: none; animation: none; }
.hero-v2::after {
  background:
    linear-gradient(90deg, rgba(7, 15, 51, .85) 0%, rgba(7, 15, 51, .5) 38%, rgba(7, 15, 51, 0) 66%),
    linear-gradient(0deg, rgba(7, 15, 51, .8) 0%, rgba(7, 15, 51, 0) 45%),
    linear-gradient(180deg, rgba(7, 15, 51, .45) 0%, rgba(7, 15, 51, 0) 14%);
}
/* Téléphone : photo entière sur toute la largeur, texte juste en dessous */
@media (max-width: 760px) {
  .hero-v2 { display: block; aspect-ratio: auto; }
  .hero-v2 .hero-media { position: relative; inset: auto; aspect-ratio: 1600 / 1199; }
  .hero-v2::after { inset: 0 0 auto 0; aspect-ratio: 1600 / 1199; height: auto; background: linear-gradient(180deg, rgba(7, 15, 51, .5) 0%, rgba(7, 15, 51, 0) 28%, rgba(7, 15, 51, 0) 80%, var(--blue-950) 100%); }
  .hero-v2 .hero-inner { position: relative; padding-top: var(--s-5); }
}
.hero-v2 .hero-inner { padding-bottom: clamp(36px, 6vh, 72px); }
.hero-v2 h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); max-width: 13em; line-height: 1.02; margin-bottom: var(--s-4); }
.hero-v2 h1 .stroke { -webkit-text-stroke-width: 1.5px; }
.hero-v2 .lede { max-width: 44ch; margin-bottom: var(--s-6); }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: clamp(28px, 5vh, 48px); font-size: .9375rem; color: rgba(255, 255, 255, .78); }
.hero-facts strong { font-family: var(--font-condensed); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; color: var(--white); margin-right: 4px; }

/* Sections travaux : plus d'air, grandes images, peu de texte */
.t-section { padding: clamp(88px, 11vw, 168px) 0; }
.t-feature { display: grid; gap: clamp(32px, 5vw, 96px); align-items: center; }
.t-feature-media { margin: 0; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--blue-900); }
.t-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.t-feature-media:hover img { transform: scale(1.03); }
.t-feature-text { max-width: 560px; }
.t-feature-text .lede { margin-bottom: var(--s-5); }
.t-feature-text > p:not(.lede) { color: var(--muted); font-size: var(--fs-small); }
.section-dark .t-feature-text > p:not(.lede) { color: rgba(255, 255, 255, .6); }
.t-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-6); }
.t-tags li { font-family: var(--font-condensed); font-weight: 600; font-size: .9375rem; letter-spacing: .04em; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-soft); }
.section-dark .t-tags li { border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .88); }
@media (min-width: 980px) {
  .t-feature { grid-template-columns: 1.35fr 1fr; }
  .t-feature.reverse { grid-template-columns: 1fr 1.35fr; }
  .t-feature.reverse .t-feature-media { order: 2; }
  .t-feature-media { aspect-ratio: 5 / 4; }
}
.t-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: clamp(36px, 4vw, 56px); }
.t-head h2 { margin: 0; }

/* Avis : actions (note + bouton « Laisser un avis Google ») */
.reviews-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.reviews-actions .btn .icon { width: 18px; height: 18px; }

/* Carte des zones d'intervention */
.zones-section { background: var(--stone-50); }
.zones-grid { display: grid; gap: clamp(32px, 5vw, 88px); align-items: center; }
@media (min-width: 980px) { .zones-grid { grid-template-columns: 1.3fr 1fr; } }
.zones-map { width: 100%; height: auto; display: block; overflow: hidden; }
.zones-map .neighbours path { fill: #EFECE6; stroke: #FFFFFF; stroke-width: 1.2; }
.zones-map .dep { fill: var(--blue-600); stroke: #FFFFFF; stroke-width: 1.6; stroke-linejoin: round; transition: fill var(--t-base) var(--ease-std); cursor: default; }
.zones-map .dep:nth-child(even) { fill: var(--blue-700); }
.zones-map .dep.is-hl, .zones-map .dep:hover { fill: var(--red-500); }
.zones-map .dep-code { font-family: var(--font-display); font-size: 26px; fill: rgba(255, 255, 255, .92); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.zones-map .cities circle { fill: var(--white); stroke: var(--blue-900); stroke-width: 1.5; }
.zones-map .cities text { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--blue-900); stroke: rgba(255, 255, 255, .9); stroke-width: 3px; paint-order: stroke; pointer-events: none; }
.zones-map .monaco circle { fill: var(--white); stroke: var(--red-500); stroke-width: 3; }
.zones-map .monaco text { font-family: var(--font-condensed); font-weight: 700; font-size: 15px; letter-spacing: .06em; fill: var(--blue-900); text-transform: uppercase; }
.zones-map .base circle { fill: var(--red-500); stroke: var(--white); stroke-width: 2.5; }
.zones-map .base .pulse { fill: rgba(215, 40, 47, .35); stroke: none; transform-box: fill-box; transform-origin: center; animation: zone-pulse 2.4s var(--ease-out) infinite; }
@keyframes zone-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.zones-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: var(--s-5) 0; }
.zones-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .9375rem; border-bottom: 1px solid var(--line); cursor: default; outline: none; }
.zones-list li b { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; color: var(--blue-600); width: 30px; }
.zones-list li.is-hl b, .zones-list li:hover b, .zones-list li:focus-visible b { color: var(--red-500); }
.zones-list li:focus-visible { box-shadow: var(--focus); border-radius: var(--radius-s); }
.zones-list li.mc b { color: var(--red-500); }
.zones-legend { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); }
.zones-legend .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 3px rgba(215, 40, 47, .2); }
@media (max-width: 560px) { .zones-map .cities text { font-size: 16px; } .zones-map .dep-code { font-size: 30px; } }

/* 10. ANIMATIONS & ACCESSIBILITÉ ========================================= */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-media img { transform: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track [aria-hidden="true"] { display: none; }
}

/* 12. PASSE DE PERFECTIONNEMENT (UI/UX Pro Max) ==========================
   Règles : tokens fluides (clamp/min/max), une seule échelle d'élévation,
   cartes et boutons homogènes. L'univers Événementiel & loisirs, validé,
   est gelé : voir le bloc « GEL » en fin de section. */
:root {
  --header-h: clamp(64px, 2vw + 48px, 80px);
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.6vw, 3.5rem);
  --safe-l: max(var(--gutter), env(safe-area-inset-left));
  --safe-r: max(var(--gutter), env(safe-area-inset-right));
  --elev-0: 0 0 0 1px var(--line);
  --elev-1: 0 1px 2px rgba(7, 15, 51, .05), 0 8px 24px -8px rgba(7, 15, 51, .14);
  --elev-2: 0 2px 4px rgba(7, 15, 51, .06), 0 20px 44px -12px rgba(7, 15, 51, .24);
}
.container { padding-left: var(--safe-l); padding-right: var(--safe-r); }

/* ---- En-tête : discret, proportionné, adapté à l'écran et à l'encoche ---- */
.site-header { height: calc(var(--header-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
.site-header.is-solid, .site-header.is-open, .no-hero .site-header {
  background: rgba(13, 29, 92, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -12px rgba(7, 15, 51, .5);
}
.brand { gap: clamp(8px, .6vw, 12px); }
.brand img.brand-picto { width: auto; height: clamp(34px, 1.2vw + 26px, 44px); }
.brand-name { font-size: clamp(1.25rem, .9rem + .7vw, 1.5rem); }
.mobile-menu { inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0 0; }
@media (min-width: 1100px) {
  .main-nav { gap: clamp(4px, 1vw, 16px); }
  .nav-link { font-size: clamp(.9375rem, .8rem + .2vw, 1rem); letter-spacing: .07em; padding: 0 clamp(8px, .7vw, 14px); height: 40px; }
  .nav-link::after { left: clamp(8px, .7vw, 14px); right: clamp(8px, .7vw, 14px); bottom: 4px; }
  .header-actions { gap: clamp(8px, 1vw, 16px); margin-left: clamp(4px, 1vw, 16px); }
  .site-header .btn { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
  .header-phone { font-size: 1rem; }
}
.lang-btn { min-width: 40px; min-height: 40px; padding: 0 8px; border-color: transparent; color: rgba(255, 255, 255, .78); font-size: .875rem; }
.lang-btn:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.mobile-menu .lang-btn { border-color: rgba(255, 255, 255, .25); justify-self: start; }

/* ---- Boutons : 3 niveaux cohérents (primaire / secondaire / tertiaire) ---- */
.btn { min-height: 3rem; padding: 0 1.5rem; font-size: 1rem; letter-spacing: .1em; gap: .625rem; border-radius: var(--radius-s); touch-action: manipulation; }
.btn-primary { box-shadow: 0 1px 2px rgba(120, 10, 16, .25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(215, 40, 47, .7); }
.btn-blue:hover, .btn-wood:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--blue-500); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .55); }
.link-arrow { gap: .5rem; letter-spacing: .1em; font-size: .9375rem; }

/* ---- Haut de page d'accueil : photo entière, texte toujours dans le 1er écran ---- */
.hero-v2 { display: block; aspect-ratio: auto; min-height: 74.94vw; } /* photo entière (4:3) ; grandit si le texte l'exige */
.hero-v2 .hero-inner {
  min-height: min(100svh, 74.94vw); display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(1.75rem, 5vh, 4rem);
}
.hero-v2 h1 { font-size: clamp(2.125rem, min(1.3rem + 2.7vw, 6.6vh), 4rem); }
.hero-v2 .hero-eyebrow { margin-bottom: clamp(.5rem, 1.6vh, 1rem); }
.hero-v2 .lede { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); margin-bottom: clamp(1.25rem, 3.5vh, 2rem); }
.hero-facts { margin-top: clamp(1.25rem, 3.5vh, 2.5rem); }
/* Écrans étroits, tablettes en hauteur et téléphones en paysage : photo entière puis texte */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  .hero-v2 { min-height: 0; }
  .hero-v2 .hero-media { position: relative; inset: auto; aspect-ratio: 1600 / 1199; }
  .hero-v2::after { inset: 0 0 auto 0; aspect-ratio: 1600 / 1199; height: auto; background: linear-gradient(180deg, rgba(7, 15, 51, .5) 0%, rgba(7, 15, 51, 0) 26%, rgba(7, 15, 51, 0) 78%, var(--blue-950) 100%); }
  .hero-v2 .hero-inner { min-height: 0; padding-top: clamp(1.25rem, 4vw, 2.5rem); padding-bottom: clamp(2.5rem, 8vw, 4rem); }
  .hero-v2 h1 { font-size: clamp(2rem, 1.35rem + 3.2vw, 3.25rem); }
}

/* ---- Sections Travaux : rythme vertical unique, titres proportionnés ---- */
.t-section { padding: var(--section-y) 0; }
.t-section h2, .t-head h2, .reviews-top h2, .zones-section h2 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.5rem); line-height: 1.02; }
.t-feature { gap: clamp(2rem, 1rem + 4vw, 6rem); }
.t-feature-text { max-width: 34rem; }
.t-feature-text .lede, .zones-section .lede { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); max-width: 52ch; }
.t-feature-media { border-radius: var(--radius-m); box-shadow: var(--elev-2); }
.section-dark .t-feature-media { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.t-tags li { font-size: .875rem; padding: 6px 12px; }
.t-head { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }

/* ---- Cartes : une seule famille (bordure fine, élévation au survol) ---- */
.solution, .case, .review { border-radius: var(--radius-m); box-shadow: var(--elev-0); border: 0; background: var(--white);
  transition: transform var(--t-base) var(--ease-std), box-shadow var(--t-base) var(--ease-std); }
@media (hover: hover) {
  .solution:hover, a.solution:hover, .case:hover, .review:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
}
.solution-body, .case-body { padding: clamp(1.125rem, .9rem + .6vw, 1.5rem); }
.solution h3 { font-size: clamp(1.1875rem, 1.05rem + .35vw, 1.375rem); }
.case-body h3 { font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); }
.solutions { --g: clamp(.75rem, .5rem + .8vw, 1.25rem); gap: var(--g);
  /* 4 colonnes au maximum (8 fiches = 2 rangées pleines), 1 à 3 selon la place disponible */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16.5rem, (100% - 3 * var(--g)) / 4)), 1fr)); }
.cases { gap: clamp(.75rem, .5rem + .8vw, 1.25rem); }
.case figure, .solution figure { aspect-ratio: 4 / 3; }
.review { padding: clamp(1.5rem, 1.2rem + .8vw, 2rem) clamp(1.25rem, 1rem + .6vw, 1.75rem) clamp(1.25rem, 1rem + .6vw, 1.5rem); }
.reviews { gap: clamp(.75rem, .5rem + .8vw, 1.25rem); }
.rating-badge { box-shadow: var(--elev-0); border: 0; }

/* ---- Bandeau CTA : moins massif ---- */
.t-section .cta-strip, .section .cta-strip:not(.wood) { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.cta-strip:not(.wood) h3 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); }

/* ---- Logos clients : taille régulière selon l'écran ---- */
.marquee img { height: clamp(44px, 2.5vw + 30px, 64px); max-width: clamp(110px, 8vw + 70px, 150px); }

/* ---- Pied de page : encoche et barre système ---- */
.brand { min-height: 44px; }
.footer-col a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col ul { gap: 0; }
.footer-bottom ul { gap: 0 var(--s-5); }
@media (pointer: fine) { .footer-col a { min-height: 34px; } .footer-bottom a { min-height: 28px; } .footer-col ul { gap: 2px; } }
@media (max-width: 1099px) { .mobile-menu .lang-btn { min-width: 44px; min-height: 44px; } }
.site-footer { padding-bottom: calc(var(--s-6) + 76px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) { .site-footer { padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); } }

/* ---- Très grands écrans : contenus contenus, textes plafonnés ---- */
@media (min-width: 2000px) {
  :root { --container-wide: 1680px; }
  body { font-size: 1.125rem; }
}

/* ---- GEL de l'univers Événementiel & loisirs (validé par Léonard) :
   les éléments ci-dessous reprennent exactement leurs valeurs d'origine. ---- */
.universe-loisirs .btn, .transition-banner .btn { min-height: 52px; padding: 14px 26px; font-size: 1.0625rem; letter-spacing: .08em; gap: 10px; }
.universe-loisirs .btn-primary, .transition-banner .btn-primary { box-shadow: 0 8px 24px rgba(215, 40, 47, .28); }
.universe-loisirs .btn-primary:hover, .transition-banner .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(215, 40, 47, .36); }
.universe-loisirs .btn-wood:hover, .transition-banner .btn-wood:hover { transform: translateY(-2px); }
.universe-loisirs .btn-outline-light, .transition-banner .btn-outline-light { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .7); }
.universe-loisirs .btn:active, .transition-banner .btn:active { transform: translateY(0); }
.universe-loisirs .btn:focus-visible, .transition-banner .btn:focus-visible { box-shadow: var(--focus); }
.universe-loisirs .link-arrow, .transition-banner .link-arrow { gap: 8px; letter-spacing: .08em; font-size: 1rem; }
.universe-loisirs, .transition-banner, .contact-final {
  --gutter: clamp(20px, 4vw, 56px); --safe-l: var(--gutter); --safe-r: var(--gutter);
  --section-y: clamp(72px, 9vw, 136px); --header-h: 76px; --container-wide: 1600px;
}
@media (min-width: 2000px) { .universe-loisirs, .transition-banner { font-size: var(--fs-body); } }

/* =========================================================================
   13. Photos supplémentaires d'une prestation ou d'un chantier (vignettes)
   Données : tools/data/prestations.json (« photos »). Un clic ouvre la visionneuse.
   ========================================================================= */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
.thumbs figure { margin: 0; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--stone-100); flex: none; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 300ms var(--ease-out), opacity 300ms; }
.thumbs figure:hover img { transform: scale(1.08); }
.thumbs img:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.solution-body .thumbs { margin-top: auto; padding-top: var(--s-4); }
@media (prefers-reduced-motion: reduce) { .thumbs img { transition: none; } }

/* Grille de prestations en 3 colonnes (évite une fiche seule sur la dernière ligne) */
@media (min-width: 1100px) { .solutions.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Cadrage des photos verticales dans les fiches (point d'intérêt) */
#nettoyage-facades figure img { object-position: 50% 33%; }
#travaux-speciaux figure img { object-position: 50% 18%; }
#etancheite figure img { object-position: 50% 22%; }

/* Fiche dont la photo doit rester entière (« cadrage »: « entier » dans prestations.json) :
   photo complète au centre, côtés comblés par la même photo floutée */
.solution figure.fit-whole { position: relative; isolation: isolate; }
.solution figure.fit-whole::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg) center / cover no-repeat; filter: blur(18px) brightness(.72) saturate(1.1); }
.solution figure.fit-whole img { object-fit: contain; }
/* Drapeau (photo verticale 3:4 dans un cadre 4:3) : agrandie d'un tiers et calée sur le drapeau ;
   bordures floutées réduites à ~12 % de chaque côté */
#enseignes-panneaux figure.fit-whole img { position: absolute; width: 75%; height: auto; left: 12.5%; top: -4%; object-fit: unset; }
/* Chantier dont la photo doit rester presque entière (« cadrage »: « entier ») :
   agrandie d'environ 18 %, calée en haut, côtés comblés par la même photo floutée */
.case figure.fit-whole { isolation: isolate; }
.case figure.fit-whole::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg) center / cover no-repeat; filter: blur(18px) brightness(.72) saturate(1.1); }
.case figure.fit-whole img { position: absolute; inset: -3% 0 -15% 0; width: 100%; height: 118%; object-fit: contain; object-position: 50% 0; }

/* Galerie Réalisations : bouton « Tout afficher / Réduire », à droite de la ligne des filtres */
.filters .gallery-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.filters .gallery-toggle:hover { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); }
.filters .gallery-toggle[hidden] { display: none; }
.gallery-toggle .icon { width: 18px; height: 18px; transition: transform 300ms var(--ease-out); }
.gallery-toggle.is-less .icon { transform: rotate(180deg); }
@media (max-width: 760px) { .filters .gallery-toggle { margin-left: 0; } }

/* =========================================================================
   14. Bloc Instagram (page Réalisations) — téléphone dessiné en CSS
   ========================================================================= */
.insta { background: var(--blue-950); color: var(--white); overflow: hidden; }
.insta-inner { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .insta-inner { grid-template-columns: auto 1fr; } }
.insta .kicker { color: #F58FB0; }
.insta h2 { color: var(--white); margin-bottom: var(--s-4); }
.insta .lede { color: rgba(255, 255, 255, .8); max-width: 46ch; }
.insta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.insta-actions .ig-icon { width: 20px; height: 20px; }
.insta-handle { font-family: var(--font-condensed); font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.ig-icon { fill: none; stroke: currentColor; stroke-width: 2; }
.ig-icon .dot { fill: currentColor; stroke: none; }

.phone { --w: clamp(240px, 26vw, 300px); position: relative; display: block; width: var(--w); aspect-ratio: 9 / 19; margin-inline: auto;
  padding: calc(var(--w) * .035); border-radius: calc(var(--w) * .17); background: linear-gradient(145deg, #2a2d36, #0d0f14);
  box-shadow: 0 0 0 2px #3a3e4a, 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: rotate(-4deg); transition: transform 600ms var(--ease-out); color: #111; text-decoration: none; }
.phone:hover { transform: rotate(-2deg) translateY(-4px); }
.phone::before { content: ""; position: absolute; top: calc(var(--w) * .07); left: 50%; width: 32%; height: calc(var(--w) * .085);
  transform: translateX(-50%); border-radius: 99px; background: #000; z-index: 2; }
.phone-screen { display: flex; flex-direction: column; height: 100%; border-radius: calc(var(--w) * .14); overflow: hidden; background: #fff;
  padding-top: calc(var(--w) * .2); }
.ig-top { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 10px; font-size: .9rem; }
.ig-top .ig-icon { width: 18px; height: 18px; }
.ig-profile { display: flex; align-items: center; gap: 12px; padding: 0 14px 10px; }
.ig-avatar { flex: none; width: 58px; height: 58px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; padding: 8px; border: 2px solid #fff; }
.ig-name { display: flex; flex-direction: column; line-height: 1.25; font-size: .8rem; }
.ig-name small { color: #6b6f76; font-size: .7rem; }
.ig-follow { margin: 0 14px 12px; padding: 6px 0; border-radius: 8px; background: #0095f6; color: #fff; font-weight: 600; font-size: .78rem; text-align: center; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-grid span { aspect-ratio: 1; overflow: hidden; background: #eee; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .phone, .phone:hover { transform: rotate(-4deg); transition: none; } }

/* =========================================================================
   15. Page Contact : formulaire en étapes, groupes colorés, vérification, encadré contact
   ========================================================================= */
.form-card { border-top: 4px solid var(--blue-600); }
.form-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.form-head h2 { margin: 0; }
.form-head p { margin: 0; color: var(--muted); font-size: .9375rem; }
.form-step { margin-bottom: var(--s-6); }
.form-step > legend { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); }
.f-step { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-condensed); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.f-step b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-600); color: var(--white); font-family: var(--font-display); font-weight: 400; font-size: .9375rem; letter-spacing: 0; }

/* Groupes de services, avec la couleur de chaque univers */
.opt-group { --g: var(--blue-600); --g-bg: var(--blue-50); padding: 12px 14px 14px; border-radius: var(--radius-m); background: color-mix(in srgb, var(--g-bg) 55%, var(--white)); border-left: 3px solid var(--g); }
.opt-group + .opt-group { margin-top: 10px; }
.opt-group-title { display: block; margin-bottom: 2px; font-family: var(--font-condensed); font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g); }
.opt-group.g-falaise { --g: var(--red-600); --g-bg: #FBE9EA; }
.opt-group.g-loisirs { --g: var(--forest-800); --g-bg: #E6EFE9; }
.opt-group.g-autre { --g: var(--muted); --g-bg: var(--stone-100); }
.opt-group .option input:checked + span { border-color: var(--g); background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--g) inset; }
.opt-group .option input:checked + span::before { border-color: var(--g); }

/* Vérification anti-robot */
.verif { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 var(--s-5); padding: 14px 16px; border-radius: var(--radius-m); background: var(--blue-50); border: 1px solid var(--blue-100); }
.verif-ico .icon { width: 22px; height: 22px; color: var(--blue-600); display: block; }
.verif label { font-size: .9375rem; color: var(--ink-soft); }
.verif label strong { color: var(--ink); }
.verif input { width: 72px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-s); border: 1.5px solid #CFCCC5; font: inherit; font-weight: 700; text-align: center; background: var(--white); }
.verif input:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--focus); }

/* Encadré « Nous contacter directement » */
.contact-card { position: sticky; top: calc(var(--header-h) + 24px); }
.contact-card h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); margin-bottom: 6px; }
.contact-intro { color: rgba(255, 255, 255, .72); margin: 0 0 var(--s-5); }
.contact-card .btn .icon { width: 18px; height: 18px; }
.contact-card .btn { text-decoration: none; }
.c-list { display: grid; gap: 8px; margin: var(--s-5) 0; }
.contact-card .c-line { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: var(--white); text-decoration: none; transition: background-color var(--t-fast), border-color var(--t-fast); }
.contact-card a.c-line:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .2); color: var(--white); }
.c-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.c-ico .icon { width: 18px; height: 18px; }
.c-txt { display: grid; min-width: 0; }
.c-txt small { font-family: var(--font-condensed); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.c-txt strong { font-weight: 500; font-size: 1rem; overflow-wrap: anywhere; }
.contact-card .c-rating { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: var(--white); text-decoration: none; transition: background-color var(--t-fast), border-color var(--t-fast); }
.contact-card .c-rating:hover { color: var(--white); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .2); }
.c-rating-score { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-family: var(--font-display); font-size: 1.0625rem; line-height: 1; }
.c-rating .stars { color: #F4B400; letter-spacing: 2px; display: block; }
.c-rating small { color: rgba(255, 255, 255, .7); font-size: .875rem; }
.contact-zone { margin: var(--s-4) 0 0; font-size: .875rem; color: rgba(255, 255, 255, .6); }
@media (max-width: 999px) { .contact-card { position: static; } }

/* Formulaire de contact compact : choix en pastilles arrondies (17/10/2026) */
#quote-form .form-step { margin-bottom: var(--s-5); }
#quote-form .form-step > legend { margin-bottom: 10px; }
#quote-form .option-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
#quote-form .option span { min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: .875rem; gap: 0; background: var(--white); }
#quote-form .option span::before { display: none; }
#quote-form .option:hover span { border-color: var(--blue-500); }
#quote-form .option input:checked + span { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); box-shadow: none; }
/* Groupes de services : une ligne de titre colorée, sans encadré */
#quote-form .opt-group { padding: 0; background: none; border: 0; }
#quote-form .opt-group + .opt-group { margin-top: 12px; }
#quote-form .opt-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#quote-form .opt-group-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
#quote-form .opt-group .option input:checked + span { background: var(--g); border-color: var(--g); color: var(--white); box-shadow: none; }
#quote-form .field { margin-bottom: var(--s-4); }
#quote-form textarea { min-height: 110px; }
#quote-form .verif { margin-bottom: var(--s-4); padding: 10px 14px; }
.form-head { margin-bottom: var(--s-5); padding-bottom: var(--s-4); }
#quote-form .field-row .field { margin-bottom: var(--s-3); }
#quote-form .field input, #quote-form .field textarea { padding-top: 10px; padding-bottom: 10px; }
/* 4 grands choix de service : chaque pastille prend la couleur de son univers une fois choisie */
#quote-form .option.g-falaise { --g: var(--red-600); }
#quote-form .option.g-bat { --g: var(--blue-600); }
#quote-form .option.g-loisirs { --g: var(--forest-800); }
#quote-form .option.g-autre { --g: var(--muted); }
#quote-form .option[class*="g-"] input:checked + span { background: var(--g); border-color: var(--g); color: var(--white); }

/* Encadré « Nous contacter directement » — version épurée (17/10/2026) */
.contact-card .kicker { color: var(--red-500); }
.contact-card .kicker::before { background: var(--red-500); }
.contact-card h2 { margin-bottom: 8px; }
.contact-card .c-call { min-height: 54px; font-size: 1.0625rem; }
.contact-card .c-list { gap: 0; margin: var(--s-5) 0 var(--s-4); border-radius: var(--radius-m); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.contact-card .c-line { border: 0; border-radius: 0; background: none; padding: 14px 16px; }
.contact-card .c-line + .c-line { border-top: 1px solid rgba(255, 255, 255, .08); }
.contact-card a.c-line:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
.contact-card .c-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(39, 67, 181, .35); color: #C9D3F7; }
.c-txt strong { font-size: .9688rem; line-height: 1.35; }
.c-go { margin-left: auto; flex: none; color: rgba(255, 255, 255, .4); transition: transform var(--t-fast), color var(--t-fast); }
.c-go .icon { width: 16px; height: 16px; display: block; }
a.c-line:hover .c-go, .c-rating:hover .c-go { color: var(--white); transform: translateX(3px); }
.contact-card .c-rating { padding: 14px 16px; gap: 14px; }
.c-g { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--white); }
.c-g svg { width: 22px; height: 22px; display: block; }
.c-rating-txt { display: grid; gap: 2px; }
.c-rating-top { display: flex; align-items: center; gap: 8px; }
.c-rating-top strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1; }
.c-rating .stars { display: inline; letter-spacing: 1px; font-size: .9375rem; }
.c-rating small { font-size: .8125rem; }
.contact-zone { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-family: var(--font-condensed); font-weight: 600; letter-spacing: .06em; font-size: .8125rem; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.contact-zone .icon { width: 14px; height: 14px; }
@media (max-height: 820px) { .contact-card { position: static; } }

/* Haut de l'accueil (17/10/2026) : un peu plus haut que l'écran sur ordinateur (voulu par
   Léonard), photo cadrée plus haut pour montrer le ciel ; texte et boutons restent dans le 1er écran */
@media (min-width: 761px) and (min-height: 521px) and (min-aspect-ratio: 1/1) {
  .hero-v2 { min-height: 0; height: 112svh; }
  .hero-v2 .hero-inner { min-height: 100%; height: 100%; padding-bottom: calc(12svh + clamp(36px, 6vh, 72px)); }
  .hero-v2 .hero-media img { object-position: 50% 30%; }
}

/* ==========================================================================
   16. Sélecteur de langue (17/10/2026) — globe + langue active, menu Français / English
   ========================================================================== */
.lang-switch { position: relative; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radius-s); background: none;
  color: rgba(255, 255, 255, .82); font-family: var(--font-condensed); font-weight: 700;
  font-size: .9375rem; letter-spacing: .1em; cursor: pointer;
  transition: background var(--t-base) var(--ease-std), color var(--t-base) var(--ease-std);
}
.lang-switch-btn .icon { width: 17px; height: 17px; }
.lang-switch-btn .chev { width: 13px; height: 13px; opacity: .7; transition: transform var(--t-base); }
.lang-switch-btn:hover, .lang-switch-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: var(--white); }
.lang-switch-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-switch-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 168px; margin: 0; padding: 6px;
  list-style: none; background: var(--white); border-radius: var(--radius-m); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(6px); z-index: 210;
  transition: opacity var(--t-base) var(--ease-std), transform var(--t-base) var(--ease-std), visibility var(--t-base);
}
.lang-menu.open { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-s); color: var(--ink); font-weight: 500; font-size: .9375rem;
}
.lang-menu a b { font-family: var(--font-condensed); font-weight: 700; letter-spacing: .08em; font-size: .8125rem; color: var(--muted); min-width: 22px; }
.lang-menu a:hover { background: var(--stone-50); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--blue-900); font-weight: 700; }
.lang-menu a[aria-current="true"] b { color: var(--red-500); }
.lang-menu a[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--red-500); font-weight: 700; }

/* Menu mobile : deux boutons FR | EN côte à côte */
.lang-seg { display: inline-flex; justify-self: center; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); }
.mobile-menu .lang-seg a {
  min-height: 44px; min-width: 64px; padding: 0 18px; justify-content: center; border-radius: 999px;
  font-family: var(--font-condensed); font-weight: 700; font-size: 1rem; letter-spacing: .12em; color: rgba(255, 255, 255, .7);
}
.mobile-menu .lang-seg a[aria-current="true"] { background: var(--white); color: var(--blue-900); }

/* Pages de service : même hauteur de bandeau photo (17/10/2026). Le titre long de la page
   falaise s'étale sur 2 lignes, comme celui de la page bâtiment, au lieu de 3. */
@media (min-width: 761px) { .page-hero.hero-wide h1 { max-width: 26ch; } }

/* Ateliers (page Événementiel & loisirs, 19/10/2026) : 8 fiches → 4 + 4 sur grand écran,
   2 par ligne sur tablette, 1 sur téléphone (jamais de ligne incomplète) */
@media (min-width: 640px) { .atelier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .atelier-grid { grid-template-columns: repeat(4, 1fr); } }

/* Ateliers : cadrage du trampoline sur le filet ; emplacement vide quand la photo n'existe pas encore */
#trampoline figure img { object-position: 50% 14%; }
.atelier figure.photo-vide { background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* Chantiers commentés (19/10/2026) : titres alignés à la même hauteur sur une ligne de vignettes.
   La photo garde sa hauteur (le surplus de hauteur va au texte) et la ligne du lieu est
   toujours réservée, même quand le lieu n'est pas renseigné. */
.case { grid-template-rows: auto 1fr; align-content: start; }
.cases .case-lead { grid-template-rows: none; }
.case-body .place-vide { visibility: hidden; }

/* Audit 19/10/2026 — accessibilité (contrastes, liens repérables autrement que par la couleur) */
.contact-card .kicker, .page-hero .kicker { color: #ff7a80; }
.contact-card .kicker::before, .page-hero .kicker::before { background: #ff7a80; }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }

/* Audit 19/10/2026 — téléphone tenu à l'horizontale (écran bas) : la photo entière faisait
   plus d'un écran et repoussait titre et boutons hors de vue. Ici, le texte passe sur la
   photo (comme sur ordinateur) et tient dans le premier écran. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero-v2 .hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-v2::after {
    inset: 0; aspect-ratio: auto; height: auto;
    background: linear-gradient(90deg, rgba(7, 15, 51, .88) 0%, rgba(7, 15, 51, .6) 45%, rgba(7, 15, 51, .1) 75%),
                linear-gradient(0deg, rgba(7, 15, 51, .7) 0%, rgba(7, 15, 51, 0) 50%);
  }
  .hero-v2 .hero-inner { min-height: 100svh; padding-top: calc(var(--header-h) + 1rem); padding-bottom: 1.5rem; }
  .hero-v2 h1 { font-size: clamp(1.75rem, 8svh, 2.5rem); }
  .hero-v2 .hero-facts { display: none; }
}

/* =========================================================================
   17. Questions fréquentes (pages de travaux) et liens Réalisations → prestations (20/10/2026)
   ========================================================================= */
/* FAQ en accordéon discret : lignes fines, chevron à droite, réponses repliées (JS) ;
   sans JavaScript, toutes les réponses restent ouvertes. */
.faq-section { padding-top: 0; padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); } /* suit une section : pas de double espace */
.faq-layout { display: grid; gap: var(--s-5); }
@media (min-width: 980px) { .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s-8); align-items: start; } }
.faq-head h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.1; margin: 0; }
.faq-head .kicker { margin-bottom: var(--s-2); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 52px; padding: 14px 2px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body, inherit); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.faq-q:hover { color: var(--blue-700, var(--blue-900)); }
.faq-q:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }
.faq-chev { flex: none; width: 18px; height: 18px; color: var(--red-500); transition: transform var(--t-base) var(--ease-std); }
.faq-q[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 2px 16px; max-width: 72ch; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); }
.js .faq-a { grid-template-rows: 0fr; }
.js .faq-a.open { grid-template-rows: 1fr; }
.faq-list.anim .faq-a { transition: grid-template-rows var(--t-base) var(--ease-std); } /* animé au clic seulement, pas au chargement */
@media (prefers-reduced-motion: reduce) { .faq-list.anim .faq-a, .faq-chev { transition: none; } }
.real-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.real-links span { font-family: var(--font-condensed); font-weight: 700; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }