/* ==== POLICES HEBERGEES EN LOCAL ============================================
   Outfit et Sora etaient chargees depuis fonts.googleapis.com, ce qui
   transmettait l'adresse IP de chaque visiteur a Google avant toute action de
   sa part. Les fichiers sont desormais servis par le site : plus de transfert
   vers un tiers, deux connexions externes economisees, et une CSP plus courte.
   Declarations reprises telles quelles du CSS de Google (graisses,
   sous-ensembles et unicode-range inclus) — ne pas les reecrire a la main.
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --container: 1140px;
  --header-height: 82px;
}

:root.theme-trin-light-artisan,
:root[data-theme="trin-light-artisan"] {
  /* Fonds */
  --color-bg-main: #F8F5F0;
  --color-bg-alt: #EEE8DE;
  --color-surface: #F2EDE6;

  /* Textes */
  --color-text-primary: #1A1E2E;
  --color-text-secondary: #4A5168;
  /* Assombri depuis #6B738A, qui echouait AA partout sauf sur blanc — mesure
     faite sur le rendu local : 3,88:1 sur le fond des sections --soft
     (#EEE8DE), 4,34:1 sur le fond principal (#F8F5F0), 4,72:1 sur blanc, la
     ou 4,5:1 sont exiges. Ce token colore tout le texte secondaire du site
     (sous-titres de section, eyebrows, descriptions de prestations) : 21
     elements en echec sur la seule page d'accueil. La nouvelle valeur donne
     4,62:1 sur #EEE8DE, 5,18:1 sur #F8F5F0 et 5,63:1 sur blanc. Meme teinte,
     10% plus sombre. */
  --color-text-muted: #60677C;

  /* Primaire (bleu logo) */
  --color-primary: #3D509E;
  --color-primary-hover: #2E3D80;
  --color-on-primary: #FFFFFF;

  /* Accent vert (réassurance) */
  --color-accent-green: #51B583;
  /* Variante lisible du vert, reservee au texte de petite taille. Le vert
     d'origine reste inchange partout ou il sert d'aplat ou de bordure. */
  --color-accent-green-text: #2E7D53;
  --color-accent-green-soft: rgba(81, 181, 131, 0.12);
  --color-accent-green-soft-strong: rgba(81, 181, 131, 0.28);

  /* Jaune chaleur */
  --color-accent-yellow: #FAB72B;

  /* Rouge erreur */
  --color-accent-red: #DB4F3A;

  /* Bleu clair liens */
  /* Assombri depuis #0077B3, qui ne donnait que 4,02:1 sur le fond du pied de
     page (#EEE8DE) — mesure faite sur le site en ligne — la que 4,5:1 sont
     exiges. Cette variable colore TOUS les liens du site (regle « a » plus
     bas), le numero de telephone du pied de page compris: c'est l'information
     la plus consultee de la page. La nouvelle valeur donne 5,1:1 sur ce fond,
     5,8:1 sur le fond principal et 6,3:1 sur les cartes blanches. */
  --blue-deep: #006699;

  /* Cards et surfaces */
  --color-card-bg: #FFFFFF;
  --color-card-text: #1A1E2E;
  /* Aligne sur --color-text-muted : les deux valaient #6B738A et doivent
     rester identiques. Les cartes ne sont pas toutes blanches (cf.
     --color-surface #F2EDE6), donc le 4,72:1 du fond blanc ne garantissait
     pas le reste. */
  --color-card-muted: #60677C;
  --color-card-border: #E2DBD0;

  /* Bouton ghost */
  --color-secondary-button-bg: #F2EDE6;
  --color-secondary-button-border: #C8BFB3;

  /* Bordures */
  --color-border-soft: rgba(0, 0, 0, 0.07);
  --color-border-soft-strong: rgba(0, 0, 0, 0.13);

  /* Ombres */
  --shadow-soft: 0 4px 20px rgba(61, 80, 158, 0.07);
  --shadow-hover: 0 8px 28px rgba(61, 80, 158, 0.13);

  /* Overlay lightbox */
  --color-overlay: rgba(26, 30, 46, 0.88);

  /* Aliases conservés pour compatibilité avec l'existant */
  --color-gold: var(--color-accent-green);
  --color-gold-soft: var(--color-accent-green-soft);
  --color-gold-soft-strong: var(--color-accent-green-soft-strong);
  --color-accent: var(--color-accent-green);
  --color-accent-hover: #3E9A6A;
  --color-on-accent: #FFFFFF;
  --blue-primary: var(--color-primary);
  --green-accent: var(--color-accent-green);
  --orange-accent: var(--color-accent-yellow);
  --red-accent: var(--color-accent-red);
  --ink-900: var(--color-text-primary);
  --ink-700: var(--color-text-secondary);
  --ink-500: var(--color-text-muted);
  --surface-0: var(--color-bg-main);
  --surface-1: var(--color-card-bg);
  --surface-2: #FFFFFF;
  --surface-100: var(--color-bg-alt);
  --surface-200: var(--color-surface);
  --line: var(--color-border-soft);
  --line-strong: var(--color-border-soft-strong);

  /* Status */
  --status-info-bg: rgba(61, 80, 158, 0.06);
  --status-info-border: rgba(61, 80, 158, 0.16);
  --status-success-bg: rgba(81, 181, 131, 0.10);
  --status-success-border: rgba(81, 181, 131, 0.24);
  --status-error-bg: rgba(219, 79, 58, 0.08);
  --status-error-border: rgba(219, 79, 58, 0.20);

  /* Grid line — désactivé en thème clair */
  --color-grid-line: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--ink-900);
  font-family: "Outfit", "Futura PT", "Century Gothic", "Segoe UI", sans-serif;
  line-height: 1.6;
  background: var(--color-bg-main);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue-deep);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Indicateur de focus clavier.
   L'ancienne valeur, rgba(61, 80, 158, 0.36), mesurait 1,8:1 contre les fonds
   reels du site — pour un minimum exige de 3:1 (WCAG 1.4.11). Elle etait
   pratiquement invisible, et elle s'appliquait a presque tous les liens et
   boutons: quelqu'un qui navigue au clavier ne savait pas ou il se trouvait.
   Le bleu opaque monte a 7,4:1 sur les fonds clairs. Le halo blanc pose entre
   l'element et le trait garantit le contraste meme quand le focus tombe sur un
   bouton bleu plein, ou le contour se confondrait avec le fond. */
/* Message affiche uniquement quand JavaScript est indisponible. Le formulaire
   fonctionne desormais dans ce cas (contact.php accepte une soumission HTML
   classique), mais autant offrir le telephone plutot que d'imposer un
   aller-retour a quelqu'un qui a deja un navigateur contrarie. */
.noscript-note {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  font-size: 0.92rem;
}

/* Banniere de mode degrade, posee par app.js quand le chargement des donnees
   echoue. Volontairement sobre et en haut de page: elle doit informer sans
   ressembler a une alerte de securite. */
.data-error {
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: var(--color-accent-yellow);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  text-align: center;
}

.data-error a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Lien d'evitement. Sans lui, quelqu'un qui navigue au clavier ou au lecteur
   d'ecran doit traverser tout l'en-tete et le menu a chaque page avant
   d'atteindre le contenu. Deux pages portaient deja un id="main-content"
   inutilise: la mecanique avait ete commencee puis abandonnee. */
.skip-link {
  position: absolute;
  top: -4rem;
  left: 0.75rem;
  z-index: 2000;
  padding: 0.7rem 1.1rem;
  border-radius: 0.45rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-out;
}

.skip-link:focus {
  top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-on-primary);
}

h1,
h2,
h3,
h4 {
  margin-top: 0;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(var(--container), calc(100% - 2.4rem));
  margin: 0 auto;
}

.section {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.section--compact {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Contact — bloc appel prioritaire */
.call-first {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
  padding: 2rem 0;
}

.call-first__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.call-first__question {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin: 0;
}

.call-first__number {
  display: block;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: clamp(2.4rem, 8vw, 3.5rem);
  font-weight: 800;
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.call-first__number:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}

.call-first__hours {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

.call-first__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.contact-section-heading {
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
}

/* Contact — réduire l'espace entre hero et process */
.contact-process {
  padding-top: 1rem;
}

@media (max-width: 480px) {
  .call-first {
    padding: 1.5rem 0;
  }
  .call-first__cta {
    width: 100%;
    justify-content: center;
  }
}

.section--soft {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
}

.section-head {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.section-head .hero-text {
  margin-top: 0;
}

.section-head--between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.carousel-controls {
  display: flex;
  gap: 0.5rem;
}

.carousel-btn {
  min-width: 44px;
  padding: 0.6rem 0.85rem;
}

.carousel-controls.is-hidden {
  display: none;
}

.section-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  font-weight: 700;
}

.page-hero {
  padding: 1.25rem 0 1.25rem;
}

.page-hero h1 {
  margin: 0.25rem 0 0;
}

.page-hero-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
}

.hero-text {
  margin-top: 1rem;
  color: var(--ink-700);
  max-width: 62ch;
}

.inline-list {
  margin-top: 1.3rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.95rem;
}

.dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  display: inline-block;
  margin-right: 0.4rem;
}

.dot--blue {
  background: var(--blue-primary);
}

.dot--green {
  background: var(--green-accent);
}

.dot--orange {
  background: var(--orange-accent);
}

.dot--red {
  background: var(--red-accent);
}

.metric-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  color: var(--color-card-text);
  padding: 1.4rem;
}

.eyebrow {
  margin-bottom: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-card-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.metric-card__value {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.metric-card__label {
  color: var(--color-card-muted);
  font-weight: 600;
}

.metric-card__small {
  margin-top: 0.9rem;
  color: var(--color-card-muted);
}

.artisan-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  color: var(--color-card-text);
}

.artisan-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}

.artisan-card__body {
  padding: 1rem 1.2rem;
}

.artisan-card__name {
  font-family: "Sora", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.artisan-card__role {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.artisan-card__years {
  margin-top: 0.7rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* =====================
   HERO SPLIT
   ===================== */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
}

/* Colonne gauche — photo */
.hero-split__visual {
  position: relative;
  overflow: hidden;
}

.hero-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Colonne droite — contenu */
.hero-split__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 2.5rem 1.25rem 3rem;
  background: var(--color-bg-main);
}

/* ── Identité ── */
.hero-split__name {
  margin: 0 0 0.2rem;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
}

.hero-split__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--blue-primary);
}

.hero-split__title {
  margin: 0 0 0.35rem;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2.4rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
}

.hero-split__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-500);
  line-height: 1.5;
}

/* ── CTA ── */
.hero-split__cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--color-card-border);
  padding-top: 0.625rem;
}

/* Réassurance décennale — sous les CTA du hero */
.hero-split__guarantee {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  /* Pas --color-accent-green (#51B583): a 12 px, il ne donne que 2,33:1 sur le
     fond clair, pour 4,5:1 exiges. C'est le seul endroit ou ce vert servait de
     couleur de texte; ailleurs il reste un aplat, ou le seuil ne s'applique
     pas de la meme facon. Le vert fonce monte a 4,6:1 sans changer la teinte. */
  color: var(--color-accent-green-text);
  letter-spacing: 0.01em;
}

/* Taille hero des boutons */
.btn--hero {
  padding: 0.55rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ── Prestations en colonne ── */
.hero-split__prestations {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--color-card-border);
  padding-top: 0.625rem;
}

.hero-split__presta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.hero-split__presta-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.hero-split__presta-item:hover .hero-split__presta-icon {
  background: var(--blue-primary);
  color: #fff;
}

.hero-split__presta-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 0.15rem;
}

.hero-split__presta-desc {
  font-size: 0.8125rem;
  color: var(--ink-500);
  line-height: 1.45;
}

/* ── Stats en grille 2×2 ── */
.hero-split .hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.5rem;
  column-gap: 0.5rem;
  padding-top: 0.625rem;
  margin-top: 0;
  border-top: 1px solid var(--color-card-border);
}

.hero-split .hero-stat {
  padding: 0.45rem 0.75rem;
  border-left: none;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-top: 3px solid var(--blue-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
}

.hero-split .hero-stat__number {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.hero-split .hero-stat__unit {
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
}

.hero-split .hero-stat__icon svg {
  width: 22px;
  height: 22px;
}

/* Couleurs par stat — cohérentes avec la palette logo */
.hero-split .hero-stat:nth-child(1) { border-top-color: var(--blue-primary); }
.hero-split .hero-stat:nth-child(2) { border-top-color: var(--orange-accent); }
.hero-split .hero-stat:nth-child(3) { border-top-color: var(--green-accent); }
.hero-split .hero-stat:nth-child(4) { border-top-color: var(--green-accent); }

/* =====================
   RESPONSIVE HERO SPLIT
   ===================== */

@media (max-width: 1060px) {
  .hero-split__content {
    padding: 1.75rem 1.75rem 1.75rem 2rem;
    gap: 0.875rem;
  }

  .hero-split__title {
    font-size: clamp(1.3rem, 2.2vw, 2.1rem);
  }
}

@media (max-width: 780px) {
  .hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-split__visual {
    height: 55vw;
    min-height: 240px;
    max-height: 380px;
  }

  .hero-split__content {
    padding: 2rem 1.25rem;
    gap: 1.25rem;
  }

  .hero-split .hero-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .hero-split .hero-stats {
    grid-template-columns: 1fr;
  }
}

/* =====================
   PROCESS NUMBERED
   (contact page — étapes numérotées)
   ===================== */

.process-numbered {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}

/* Ligne de connexion entre les cercles (desktop uniquement) */
.process-numbered::before {
  content: '';
  position: absolute;
  top: 26px; /* centre du cercle 52px → 26px - 1px mi-épaisseur ligne — valide de 781px à 1440px (cercles fixes 52px, grille 3 colonnes) */
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(61, 80, 158, 0.25) 10%,
    rgba(61, 80, 158, 0.25) 90%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* Cercle numéroté */
.process-step__num {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-primary);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(61, 80, 158, 0.35),
              0 2px 6px rgba(61, 80, 158, 0.2);
  position: relative;
  z-index: 1;
}

.process-step__title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 0.4rem;
}

.process-step__desc {
  font-size: 0.9rem;
  color: var(--ink-500);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 780px) {
  .process-numbered {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Masquer la ligne de connexion sur mobile */
  .process-numbered::before {
    display: none;
  }

  /* Sur mobile : disposition horizontale numéro + texte */
  .process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }
}

/* =====================
   PRESTATIONS SPLIT
   ===================== */

.prestations-split {
  overflow: hidden;
}

.prestations-split__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  align-items: stretch;
  width: min(var(--container), calc(100% - 2.4rem));
  margin-inline: auto;
}

/* Colonne gauche — contenu */
.prestations-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 3rem 2rem 0;
}

/* Header */
.prestations-split__title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.prestations-split__intro {
  font-size: 1rem;
  color: var(--ink-500);
  line-height: 1.6;
  max-width: 44ch;
}

/* Liste prestations */
.prestations-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.prestations-split__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.prestations-split__item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.prestations-split__item:hover .prestations-split__item-icon {
  background: var(--blue-primary);
  color: #fff;
}

.prestations-split__item-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 0.2rem;
}

.prestations-split__item-desc {
  font-size: 0.875rem;
  color: var(--ink-500);
  line-height: 1.5;
}

/* Colonne droite — photo */
.prestations-split__visual {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.prestations-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.prestations-split__visual:hover .prestations-split__img {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 1060px) {
  .prestations-split__content {
    padding: 1.5rem 1.5rem 1.5rem 0;
    gap: 1.25rem;
  }
}

@media (max-width: 780px) {
  .prestations-split__inner {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .prestations-split__visual {
    min-height: 260px;
    order: 1;
  }

  .prestations-split__content {
    padding: 2.5rem 1.25rem;
    order: 0;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-card-border);
  box-shadow: 0 1px 0 rgba(61, 80, 158, 0.06);
}

.nav-shell {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-width: max-content;
}

.brand img {
  width: 118px;
  height: 46px;
  object-fit: contain;
}

.brand-copy {
  display: grid;
}

.brand-copy strong {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  color: var(--blue-deep);
  font-size: 1.06rem;
}

.brand-copy small {
  color: var(--ink-500);
  font-size: 0.75rem;
  font-weight: 600;
}

.site-nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.site-nav a {
  color: var(--ink-700);
  font-weight: 700;
  font-size: 0.93rem;
  padding: 0.52rem 0.86rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 12px;
  width: calc(100% - 24px);
  height: 2px;
  background: var(--blue-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav a:hover {
  color: var(--ink-900);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
}

.site-nav a.is-active {
  border-color: var(--color-card-border);
  background: rgba(61, 80, 158, 0.07);
  color: var(--ink-900);
}

.site-nav .nav-call {
  margin-left: 0.6rem;
  color: var(--color-on-primary);
}

.site-nav .nav-call:hover {
  color: var(--color-primary);
}

/* Bascule libelle / numero des boutons d'appel.
   Sur ordinateur, "Appeler" ne sert a rien : on affiche le numero, qu'on peut
   lire et composer. Sur mobile, le lien tel: est utile, on affiche le bouton.
   .call-label / .call-number sont la version generique, utilisable sur
   n'importe quel bouton d'appel (hero, panneau CTA, encarts). */
.nav-call__label,
.call-label { display: none; }

@media (max-width: 780px) {
  .nav-call__label,
  .call-label { display: inline; }
  .nav-call__number,
  .call-number { display: none; }
}

/* Seuil a 900 px : en dessous, le menu horizontal complet ne tient pas si le
   bouton affiche le numero en entier, et la page debordait sur le cote
   (tablettes en paysage, petits portables). */
@media (max-width: 900px) {
  .nav-call__label,
  .call-label { display: inline; }
  .nav-call__number,
  .call-number { display: none; }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  background: var(--color-secondary-button-bg);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-900);
  margin: 4px auto;
}

.cards-grid {
  display: grid;
  gap: 1rem;
}

.cards-grid > article {
  height: 100%;
}

.cards-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.testimonial-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
  color: var(--color-card-text);
  padding: 1.15rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.testimonial-card:active {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  transition-duration: 0.1s;
}

.testimonial-quote {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-gold);
  font-weight: 700;
}

.testimonial-text {
  color: var(--color-card-text);
}

.testimonial-signature {
  font-weight: 700;
  color: var(--color-card-text);
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.testimonial-service {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--color-gold-soft-strong);
  background: var(--color-gold-soft);
  color: var(--color-gold);
  padding: 0.24rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.testimonial-date {
  color: var(--color-card-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Avis placeholder */
.avis-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-card-border);
  background: var(--color-card-bg);
  text-align: center;
}

.avis-placeholder[hidden] { display: none; }

.avis-placeholder__icon {
  font-size: 2.2rem;
  line-height: 1;
}

.avis-placeholder__title {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.avis-placeholder__text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 36ch;
}

.info-card,
.feature-card,
.proof-card,
.project-card,
.process-card,
.service-column,
.placeholder-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
  color: var(--color-card-text);
  display: flex;
  flex-direction: column;
}

.info-card,
.feature-card,
.proof-card,
.project-card,
.process-card,
.service-column,
.placeholder-card {
  padding: 1.15rem;
}

.proof-card h3,
.feature-card h3,
.project-card h3,
.service-column h2,
.gallery-card h3,
.before-after-card h3 {
  margin-bottom: 0.45rem;
  font-size: 1.1rem;
}

.proof-card p,
.feature-card p,
.project-card p,
.service-column li,
.before-after-card p,
.gallery-card p,
.placeholder-card p {
  color: var(--color-card-muted);
}

.metric-card a:not(.btn),
.info-card a:not(.btn),
.feature-card a:not(.btn),
.proof-card a:not(.btn),
.project-card a:not(.btn),
.process-card a:not(.btn),
.service-column a:not(.btn),
.placeholder-card a:not(.btn),
.gallery-card a:not(.btn),
.before-after-card a:not(.btn),
.contact-form a:not(.btn),
.not-found-card a:not(.btn),
.lightbox-content a:not(.btn) {
  color: var(--color-card-text);
}

.proof-card--blue {
  border-left: 4px solid var(--blue-primary);
}

.proof-card--green {
  border-left: 4px solid var(--green-accent);
}

.proof-card--orange {
  border-left: 4px solid var(--orange-accent);
}

.project-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-grid-unified {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-grid-unified .before-after-card {
  grid-column: span 2;
}

@media (max-width: 1060px) {
  .gallery-grid-unified {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .gallery-grid-unified {
    grid-template-columns: 1fr;
  }

  .gallery-grid-unified .before-after-card {
    grid-column: span 1;
  }
}

.project-card,
.gallery-card {
  display: grid;
  gap: 0.7rem;
}

.project-card img,
.gallery-card img,
.before-after-card img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-card-border);
  object-fit: cover;
}

.project-card img,
.gallery-card img {
  aspect-ratio: 4 / 3;
}

.project-card .label {
  width: fit-content;
  font-size: 0.76rem;
  padding: 0.35rem 0.58rem;
  border-radius: 999px;
  border: 1px solid var(--color-gold-soft-strong);
  background: var(--color-gold-soft);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.page-home #homeGalleryPreview {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0.25rem 0 0.85rem;
  scrollbar-width: thin;
}

.page-home #homeGalleryPreview::-webkit-scrollbar {
  height: 10px;
}

.page-home #homeGalleryPreview::-webkit-scrollbar-thumb {
  background: rgba(61, 80, 158, 0.2);
  border-radius: 999px;
}

.page-home #homeGalleryPreview::-webkit-scrollbar-track {
  background: transparent;
}

.page-home #homeGalleryPreview .project-card {
  position: relative;
  flex: 0 0 min(420px, 36vw);
  scroll-snap-align: start;
  display: block;
}

.page-home #homeGalleryPreview .project-card h3,
.page-home #homeGalleryPreview .project-card p {
  display: none;
}

.page-home #homeGalleryPreview .project-card .label {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  margin: 0;
  background: rgba(18, 22, 30, 0.55);
  border: 1px solid var(--color-gold-soft-strong);
  color: #fff;
  backdrop-filter: blur(6px);
}

.page-home #homeGalleryPreview .gallery-media {
  display: block;
}

.page-home #homeGalleryPreview .project-card img {
  border-radius: var(--radius-sm);
}

.process-grid {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.process-card {
  position: relative;
}

.process-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}

.process-card h3 {
  margin-top: 0.9rem;
}

.list-clean {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.list-clean li {
  position: relative;
  padding-left: 1.1rem;
}

.list-clean li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--blue-primary);
}

.service-columns .service-column:nth-child(2) li::before {
  background: var(--green-accent);
}

.service-columns .service-column:nth-child(3) li::before {
  background: var(--orange-accent);
}

/* .service-context servait aux reperes de duree, retires le 3 aout 2026
   (voir prestations.html). Les regles sont conservees : elles resserviront si
   des reperes non chiffres reviennent un jour dans les colonnes. */
.service-context {
  list-style: none;
  padding: 0;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-card-border);
  display: grid;
  gap: 0.3rem;
}

.service-context li {
  font-size: 0.78rem;
  color: var(--color-card-muted);
  padding-left: 1rem;
  position: relative;
}

.service-context li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--color-card-muted);
  font-size: 0.7rem;
  line-height: 1.6;
}

.service-column__note {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-card-border);
  font-size: 0.82rem;
  color: var(--color-card-muted);
}

/* Preuves : les chantiers de la categorie, sous la liste des prestations.
   Le bloc est vide et sans marge quand la categorie n'a aucun chantier. */
.service-column__proof:empty {
  display: none;
}

.service-column__proof {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-card-border);
}

.service-proof__label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-card-muted);
  margin-bottom: 0.6rem;
}

.service-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.6rem;
}

.service-proof__card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

.service-proof__card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  transition: transform 0.25s ease;
}

.service-proof__card:hover img,
.service-proof__card:focus-visible img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .service-proof__card img {
    transition: none;
  }
  .service-proof__card:hover img,
  .service-proof__card:focus-visible img {
    transform: none;
  }
}

.service-proof__title {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-card-text);
}

.service-proof__card:hover .service-proof__title {
  text-decoration: underline;
}

.service-column__cta {
  display: block;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
}

.split-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cta-section {
  padding-top: 2.2rem;
}

.cta-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary-hover);
  background:
    radial-gradient(circle at 88% 18%, rgba(61, 80, 158, 0.08), transparent 44%),
    var(--color-primary);
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cta-panel h2,
.cta-panel p,
.cta-panel .section-kicker {
  color: rgba(255, 255, 255, 0.92);
}

.cta-panel .btn--primary {
  background-image: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}

.cta-panel .btn--primary:hover {
  /* 0.16 (et non 0.22) : composite plus sombre => texte blanc a ~5:1 sur ce fond
     bleu, au-dessus du seuil WCAG AA 4.5:1 (16px/700 = texte normal). Le retour
     visuel du survol passe par la bordure eclaircie. */
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.cta-panel .btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.cta-panel .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.filter-panel {
  display: grid;
  gap: 0.75rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.filter-btn {
  border: 1px solid var(--color-secondary-button-border);
  background: var(--color-secondary-button-bg);
  color: var(--ink-900);
  border-radius: 999px;
  padding: 0.52rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.filter-btn.is-active,
.filter-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.gallery-title {
  margin-bottom: 1rem;
}

.gallery-subtitle {
  margin: 1.6rem 0 0.9rem;
  font-size: 1.2rem;
  color: var(--blue-deep);
}

.gallery-card,
.before-after-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  background: var(--color-card-bg);
  color: var(--color-card-text);
  box-shadow: var(--shadow-soft);
  padding: 0.9rem;
}

.gallery-media {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.gallery-media:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.before-after-card__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.before-after-thumb {
  position: relative;
}

.before-after-thumb span {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  padding: 0.2rem 0.46rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(26, 30, 46, 0.82);
  color: #ffffff;
}

.empty-state {
  text-align: center;
  color: var(--ink-700);
  font-weight: 600;
}

.empty-mini {
  color: var(--ink-500);
  font-size: 0.9rem;
}

.center {
  text-align: center;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-overlay);
  display: grid;
  place-items: center;
  padding: 1rem;
  touch-action: none;
}


.lightbox[hidden] {
  display: none;
}

.lightbox-content {
  max-width: min(1000px, 96vw);
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  color: var(--color-card-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.lightbox-content img {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  background: var(--color-card-bg);
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-content figcaption {
  padding: 1rem;
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

/* =====================
   LIGHTBOX NAVIGATION
   ===================== */

.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 51;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-50%) scale(1.08);
}

.lightbox__nav:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: translateY(-50%);
  pointer-events: none;
}

.lightbox__nav:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.lightbox__counter {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
  z-index: 51;
}

@media (max-width: 640px) {
  .lightbox__nav--prev { left: 0.35rem; }
  .lightbox__nav--next { right: 0.35rem; }
  .lightbox__nav { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__nav { transition: none; }
}

.contact-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: start;
}

.contact-form {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  background: var(--surface-1);
  color: var(--color-card-text);
  box-shadow: var(--shadow-soft);
  padding: 1.2rem;
}

#reviewForm {
  width: min(760px, 100%);
  margin-inline: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 0.38rem;
  font-weight: 700;
  color: var(--color-card-text);
}

/* Les cases a cocher sont exclues: cette regle leur appliquait width: 100% et
   un padding de champ texte, ce qui donnait une case rendue a 537 px de large
   dans la carte de devis — mesure faite dans le navigateur. La zone cliquable
   couvrait donc toute la ligne, sans que rien ne le laisse deviner.
   Le defaut touchait les deux formulaires du site, pas seulement celui-ci. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--color-card-text);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(61, 80, 158, 0.2);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--red-accent);
  box-shadow: 0 0 0 4px rgba(208, 80, 48, 0.14);
}

.field-row {
  margin-top: 0.34rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}

.hint {
  font-size: 0.79rem;
  color: var(--color-card-muted);
}

.error {
  margin-top: 0.32rem;
  min-height: 1rem;
  color: #a1250d;
  font-weight: 700;
  font-size: 0.78rem;
}

.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid rgba(61, 80, 158, 0.28);
  border-radius: 12px;
  padding: 0.72rem;
  background: rgba(61, 80, 158, 0.08);
}

.checkbox-line input {
  margin-top: 0.15rem;
}

.form-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.form-status {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0.45rem 0.75rem;
}

.form-status:empty {
  display: none;
}

.form-status.info {
  color: var(--color-card-muted);
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
}

.form-status.success {
  color: #0e5a3b;
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

.form-status.error {
  color: #a1250d;
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 0.64rem 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-height: 44px;
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.btn--primary {
  color: #fff;
  background-image: linear-gradient(
    to right,
    #fff 50%,
    var(--color-primary) 50%
  );
  background-size: 200% 100%;
  background-position: right center;
  border-color: var(--color-primary);
  box-shadow: 0 10px 22px rgba(61, 80, 158, 0.24);
  transition:
    background-position 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.btn--primary:hover {
  background-position: left center;
  color: var(--color-primary);
  box-shadow: 0 14px 30px rgba(61, 80, 158, 0.20);
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn--primary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.btn--ghost {
  color: var(--ink-900);
  background: var(--color-secondary-button-bg);
  border-color: var(--color-secondary-button-border);
}

.btn--ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-secondary-button-border);
}

.btn--outline {
  color: var(--color-primary);
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    var(--color-primary) 50%,
    transparent 50%
  );
  background-size: 200% 100%;
  background-position: right center;
  border-color: var(--color-primary);
  transition:
    background-position 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s ease 0.12s,
    transform 0.16s ease;
}

.btn--outline:hover {
  background-position: left center;
  color: #fff;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(248, 251, 255, 0.46);
  border-top-color: var(--color-on-primary);
  display: none;
  animation: spin 0.8s linear infinite;
}

.btn.is-loading .btn-spinner {
  display: inline-block;
}

.site-footer {
  border-top: 1px solid var(--color-card-border);
  background: var(--color-bg-alt);
  padding: 2.1rem 0;
}

.footer-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
}

.footer-brand {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  color: var(--blue-deep);
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
}

.footer-grid h3 {
  font-size: 0.95rem;
  margin-bottom: 0.46rem;
  color: var(--blue-deep);
}

.footer-grid p {
  color: var(--ink-700);
  font-size: 0.92rem;
}

.not-found {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.not-found-card {
  width: min(520px, 100%);
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  background: var(--color-card-bg);
  color: var(--color-card-text);
  box-shadow: var(--shadow-soft);
}

.mt-sm {
  margin-top: 0.8rem;
}

.is-hidden {
  display: none !important;
}

body.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================
   STAGGERED REVEAL
   ===================== */

/* Cartes pre-rendues de /realisations : masquees des le premier affichage, sinon
   celles deja a l'ecran s'eteignent a l'arrivee du JS. Sans JS, la <noscript> de
   la page les montre ; si le bundle n'arrive pas, ce repli les montre apres 4 s. */
body:not(.js) .chantiers-grid > * {
  opacity: 0;
  animation: chantiers-repli 0.3s ease 4s forwards;
}

@keyframes chantiers-repli {
  to { opacity: 1; }
}

/* Grid children start invisible and slide up with per-item delay */
body.js .chantiers-grid > *,
body.js .process-grid > *,
body.js .prestations-split__list > *,
body.js .hero-split__prestations > li {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease var(--stagger-delay, 0ms),
    transform 0.4s ease var(--stagger-delay, 0ms);
}

/* hero prestations : animation légèrement plus courte (au-dessus du fold) */
body.js .hero-split__prestations > li {
  transform: translateY(16px);
  transition:
    opacity 0.35s ease var(--stagger-delay, 0ms),
    transform 0.35s ease var(--stagger-delay, 0ms);
}

/* Parent section becoming visible triggers all children */
body.js [data-reveal].is-visible .chantiers-grid > *,
body.js [data-reveal].is-visible .process-grid > *,
body.js [data-reveal].is-visible .prestations-split__list > *,
body.js [data-reveal].is-visible .hero-split__prestations > li {
  opacity: 1;
  transform: translateY(0);
}

/* Override: the section itself should not also fade (children handle it) */
body.js [data-reveal]:has(.chantiers-grid),
body.js [data-reveal]:has(.process-grid),
body.js [data-reveal]:has(.prestations-split__list),
body.js [data-reveal]:has(.hero-split__prestations) {
  opacity: 1;
  transform: none;
}

/* =====================
   IMAGE ZOOM — harmonized
   ===================== */

.chantier-card__img-wrap img,
.home-chantier-item__visual img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.chantier-card:hover .chantier-card__img-wrap img,
.home-chantier-item:hover .home-chantier-item__visual img {
  transform: scale(1.04);
}

/* =====================
   PRESTATIONS ICON — feedback
   ===================== */

.prestations-split__item-icon svg {
  transition: transform 0.2s ease;
}

.prestations-split__item:hover .prestations-split__item-icon svg {
  transform: scale(1.15) rotate(-5deg);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1060px) {
  .page-hero-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-grid--3,
  .project-grid,
  .gallery-grid,
  .before-after-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Menu deroulant : seuil a 900 px et non 780 px.
   Le menu horizontal complet reclame environ 856 px de large. Entre 781 et
   855 px il etait donc affiche sans tenir, et la page debordait sur le cote.
   Ces regles etaient auparavant dans le bloc 780 px ci-dessous, melees a des
   regles de mise en page qui, elles, doivent rester a 780 px. */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    position: absolute;
    top: calc(var(--header-height) - 0.3rem);
    left: 1rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.8rem;
    border-radius: 16px;
    border: 1px solid var(--color-card-border);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-soft);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    width: 100%;
    text-align: left;
    min-height: 44px;
  }

  .site-nav.is-open .nav-call {
    display: inline-flex;
    justify-content: center;
    text-align: center;
    margin-top: 0.35rem;
  }
}

@media (max-width: 780px) {
  .section-head--between {
    display: grid;
    gap: 1rem;
    align-items: start;
  }

  .page-home #homeGalleryPreview .project-card {
    flex-basis: 84vw;
  }

  .cta-panel {
    display: grid;
    justify-items: start;
  }

  .cta-panel__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .cta-panel__actions .btn {
    width: 100%;
  }

  .section {
    padding: 2.4rem 0;
  }

  .section--compact {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .split-layout,
  .form-grid,
  .cards-grid--3,
  .project-grid,
  .gallery-grid,
  .before-after-grid,
  .process-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .before-after-card__images {
    gap: 0.35rem;
  }

  .before-after-card__images img {
    aspect-ratio: 1 / 1;
  }
}

/* Social links */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* L'icone fait 20x20 : trop petit pour le tactile. On agrandit la boite
     cliquable a 44x44, l'icone restant centree a sa taille d'origine. Pas de
     pseudo-element ici : .footer-social a un gap de 12px, que des zones
     etendues en negatif se mettraient a chevaucher si un second reseau
     etait ajoute. */
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
  text-decoration: none;
}

.social-link:hover,
.social-link:focus-visible {
  text-decoration: none;
}

.social-link--facebook:hover,
.social-link--facebook:focus-visible {
  color: #1877F2;
}

.nav-social {
  padding: 0.3rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  /* Compense le centrage de l'icone dans sa boite tactile de 44px : sans ce
     retrait, l'icone de 20px tombe 12px a droite ((44-20)/2) et ne s'aligne
     plus sur la colonne de texte du pied de page. */
  margin-left: -12px;
}

/* Telephone et e-mail du pied de page : ce sont les deux liens les plus utiles
   du site, et ils ne faisaient que 18px de haut.
   Surtout pas de pseudo-element ici : ces deux liens sont jointifs (le bas de
   l'un est le haut de l'autre), donc toute zone etendue en negatif se
   chevauche, et c'est le dernier dans le DOM — l'e-mail — qui capte les clics
   destines au numero de telephone. On passe donc par un vrai padding : en
   inline-block, il compte dans la hauteur de la ligne et ecarte reellement les
   deux liens au lieu de les superposer. 24 + 2x10 = 44px. */
/* Liens secondaires du pied de page (Google Maps, mentions legales,
   confidentialite) : 18px de haut, sous le minimum AA de 24px. On les porte a
   32px — au-dessus du seuil avec de la marge, sans pousser jusqu'aux 44px
   AAA qui auraient ajoute ~80px de hauteur au pied de page pour trois liens
   peu sollicites. .social-link est exclu : il est en inline-flex et gere deja
   sa propre boite de 44x44. */
.site-footer a:not(.social-link) {
  display: inline-block;
  padding: 7px 0;
}

.site-footer a[href^='tel:'],
.site-footer a[href^='mailto:'] {
  padding: 10px 0;
}

/* Google review CTA */
.review-google-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

.review-google-cta p {
  flex: 1;
  min-width: 180px;
  font-weight: 500;
  margin: 0;
}

/* Review actions (double bouton témoignages) */
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
}

/* =====================================================
   Avant / Après — slider interactif
   ===================================================== */

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 640px) {
  .before-after-grid {
    grid-template-columns: 1fr;
  }
}

/* Card wrapper */
.ba-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.ba-card h3 {
  padding: 0.8rem 1rem 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.ba-card p {
  padding: 0 1rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* Slider container */
.ba-slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: col-resize;
  user-select: none;
  touch-action: pan-y;
}

/* Pastille "Glissez" — tous les sliders, disparaît au premier drag */
.ba-slider::after {
  content: '⟺ Glissez';
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 30, 46, 0.78);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.ba-slider.is-touched::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ba-slider::after {
    transition: none;
  }
}

/* Both images fill the container */
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Before image sits on top, clipped to show left portion up to handle */
.ba-img--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--ba-split, 50%)) 0 0);
}

.ba-img--after {
  z-index: 1;
}

/* Handle — vertical line spanning full height */
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-split, 50%);
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 4;
}

/* Circular drag knob centered on the handle */
.ba-handle__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
}

/* AVANT / APRÈS labels always visible */
.ba-label {
  position: absolute;
  top: 0.5rem;
  padding: 0.2rem 0.55rem;
  background: rgba(26, 30, 46, 0.68);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ba-label--before {
  left: 0.5rem;
}

.ba-label--after {
  right: 0.5rem;
}

/* Invisible range — spans the full slider, accessible by keyboard */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: col-resize;
  z-index: 5;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
}

/* ============================================================
   DEVIS SECTION — section de conversion principale (accueil)
   ============================================================ */

/* Respiration reduite par rapport aux autres sections: celle-ci doit tenir
   dans une fenetre, y compris sur un portable a 720 px de haut. */
.devis-section {
  padding-top: 2.4rem;
  padding-bottom: 2.6rem;
}

.devis-section__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 1.4rem;
}

.devis-section__subtitle {
  font-size: 1.05rem;
  color: var(--ink-700);
  margin-top: 0.5rem;
}

/* Carte elargie et posee plus franchement.
   A 640 px dans un conteneur de 1140, elle laissait 250 px de vide de chaque
   cote, avec une ombre a 7 % d'opacite quasi invisible: le bloc flottait au
   lieu de s'imposer. 720 px reste sous la limite de confort de lecture d'un
   formulaire, et l'ombre plus marquee le detache du fond. */
.devis-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  padding: 2.2rem 2.6rem;
  box-shadow: 0 6px 28px rgba(61, 80, 158, 0.14);
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .devis-card {
    padding: 1.25rem;
  }
}

/* ============================================================
   FOOTER GRID — variante slim (3 colonnes, sans formulaire)
   ============================================================ */

.footer-grid--slim {
  grid-template-columns: 1.3fr 1fr 1fr;
}

@media (max-width: 780px) {
  .footer-grid--slim {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ============================================================
   DEVIS FORM — formulaire dans .devis-card (section #devis)
   ============================================================ */

.devis-form {
  display: grid;
  gap: 0.7rem;
}

/* Deux colonnes des 720 px, pour que le bloc tienne dans une fenetre.
   Mesure avant: 944 px de haut pour une fenetre de 720, donc coupe.
   Les trois champs courts s'empilent a gauche, le message occupe toute la
   hauteur a droite. La case a cocher et le bouton reprennent la largeur.

   La selection passe par :has() plutot que par des classes, ce qui evite
   d'ajouter un attribut dans cinq fichiers HTML dupliques — et donc d'en
   oublier un, comme cela s'est deja produit sur ce projet. Un navigateur qui
   ignore :has() garde simplement la colonne unique: plus haut, mais intact. */
@media (min-width: 720px) {
  .devis-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.15rem;
  }

  .devis-form .field:not(:has(textarea)):not(:has(input[type="checkbox"])) {
    grid-column: 1;
  }

  .devis-form .field:has(textarea) {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
  }

  /* Le champ s'etire pour epouser la hauteur des trois champs voisins. */
  .devis-form .field:has(textarea) textarea {
    flex: 1;
    min-height: 8rem;
    resize: vertical;
  }

  .devis-form .field:has(input[type="checkbox"]),
  .devis-form .form-status,
  .devis-form__btn {
    grid-column: 1 / -1;
  }
}

/* Les reductions de taille de police ont ete retirees.
   Ce formulaire et celui de la page Contact partagent le meme code, mais
   celui-ci affichait ses champs a 13 px la ou l'autre est a 16 px — mesure
   faite dans le navigateur. Deux consequences: il se lisait comme un
   composant secondaire alors qu'il est l'appel a l'action principal, repete
   sur quatre pages ; et sous 16 px, Safari sur iPhone zoome automatiquement
   des qu'on touche un champ, ce qui decale la page en pleine saisie.
   Les labels gardent une nuance de taille, sans descendre aussi bas. */
.devis-form .field label {
  font-size: 0.95rem;
}

.devis-form__btn {
  width: 100%;
  margin-top: 0.25rem;
}

.devis-form__success {
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: #0e5a3b;
  font-weight: 700;
  text-align: center;
}

/* ============================================================
   FAB BAR — barre d'actions flottante mobile
   ============================================================ */

.fab-bar {
  display: none;
}

/* 900 px, et non plus 779.
   Le menu bascule en tiroir des 900 px: le bouton d'appel de l'en-tete part
   alors dans le tiroir ferme, donc invisible. La barre flottante, elle, ne
   reapparaissait qu'a 779 px. Entre les deux subsistait une bande de 120 px
   ou AUCUN appel a l'action n'etait visible en haut de page — mesure faite
   sur Prestations, Realisations et A propos, ou le premier bouton
   n'apparaissait qu'a 742 px du haut dans une fenetre de 900.
   Les deux seuils sont desormais alignes: des que le bouton de l'en-tete
   disparait, la barre prend le relais. */
@media (max-width: 900px) {
  .fab-bar {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 200;
    background: var(--color-card-bg);
    box-shadow: 0 -4px 24px rgba(26, 30, 46, 0.13);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transition: transform 0.25s ease;
  }

  .fab-bar--hidden {
    transform: translateY(100%);
  }

  /* Reserve la hauteur de la barre flottante pour qu'elle ne recouvre jamais
     le contenu. Cette reserve etait posee sur body : etant SOUS le pied de
     page, elle etait peinte avec le fond du body (--color-bg-main) au lieu de
     celui du pied de page (--color-bg-alt). On ne le voyait pas tant que la
     barre etait affichee — elle la recouvrait — mais la barre se masque
     justement en bas de page, laissant apparaitre une bande claire de 64px
     sous le pied de page. En posant la reserve sur le pied de page lui-meme,
     dernier element en flux, la meme hauteur est reservee mais elle est
     peinte a la bonne couleur. */
  .site-footer {
    padding-bottom: calc(2.1rem + 64px);
  }

  .fab-bar__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    text-decoration: none;
    color: var(--color-text-muted);
    font-family: var(--font-body, inherit);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .fab-bar__action--primary {
    flex: 1.6;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: 12px 0 0 0;
  }

  .fab-bar__action--primary:hover,
  .fab-bar__action--primary:active {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
  }

  .fab-bar__action--secondary:hover,
  .fab-bar__action--secondary:active {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }

  .fab-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }

  .fab-bar__icon svg {
    display: block;
  }

  .fab-bar__label {
    white-space: nowrap;
  }

  .fab-bar__divider {
    width: 1px;
    background: var(--color-card-border);
    align-self: center;
    height: 36px;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-bar {
    transition: none;
  }
}

/* ─── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  width: min(var(--container), calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 0.6rem 0;
}

/* ─── Hero Stats ─────────────────────────────────────────── */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
}

.hero-stat {
  padding: 0 1.25rem;
}

.hero-stat:first-child {
  padding-left: 0;
}

.hero-stat + .hero-stat {
  border-left: 2px solid var(--line-strong);
}

body.js .hero-stat[data-reveal] {
  transition-delay: calc(var(--stat-index, 0) * 100ms);
}

.hero-stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.hero-stat__number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-heading, "Sora", sans-serif);
  font-weight: 700;
  color: var(--blue-primary);
  line-height: 1;
}

.hero-stat__unit {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-family: var(--font-heading, "Sora", sans-serif);
  font-weight: 500;
  color: var(--blue-primary);
  line-height: 1;
}

.hero-stat__label {
  font-size: 0.85rem;
  color: var(--ink-700);
  margin-top: 2px;
}

.hero-stat__icon {
  color: var(--green-accent);
  display: flex;
  align-items: center;
  line-height: 1;
}

@media (max-width: 779px) {
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .hero-stat {
    padding: 0.75rem 1rem;
  }

  .hero-stat:first-child {
    padding-left: 1rem;
  }

  .hero-stat + .hero-stat {
    border-left: none;
  }

  .hero-stat:nth-child(1),
  .hero-stat:nth-child(2) {
    border-bottom: 1px solid var(--line-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body.js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  /* Stagger grid children — show immediately */
  body.js .chantiers-grid > *,
  body.js .process-grid > *,
  body.js .prestations-split__list > *,
  body.js .hero-split__prestations > li {
    opacity: 1;
    transform: none;
  }
}

/* ── Page chantier ───────────────────────────────────────────────────────── */

/* Titre de la fiche. La page n'en avait aucun: le nom du chantier n'existait
   que dans l'onglet du navigateur et dans le fil d'ariane. */
.chantier-title {
  margin: 0.4rem 0 1.1rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
}

/* Hero chantier
 *
 * Le format par defaut etait 16/9 plafonne a 600px. Deux consequences, mesurees
 * le 3 aout 2026 :
 *   - d'une photo verticale, seuls 40 % de la hauteur restaient visibles ;
 *   - le .ba-slider gardait son propre aspect-ratio 4/3 et calculait 854px de
 *     haut dans un cadre de 600 : overflow:hidden en masquait 254, soit 30 %.
 *     Personne n'a jamais vu le bas d'un avant/apres depuis la mise en ligne.
 *
 * Le cadre est donc aligne sur le 4/3 du curseur : le debordement disparait
 * sans autre changement, et une photo verticale passe de 40 % a 56 % visible.
 * Le positionnement absolu du curseur garantit l'alignement quel que soit le
 * format retenu — c'est lui qui rend le reglage `focusPoint` honnete.
 *
 * Le format se choisit par chantier via `heroRatio` dans data/gallery.json,
 * pose en data-ratio par renderChantierHero(). Regle : c'est la photo la plus
 * verticale de la paire qui commande. Le 3/2 ne sert qu'aux paires dont une
 * vue est panoramique, ou le 4/3 rognerait trop sur les cotes.
 */
.chantier-hero {
  width: 100%;
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 900px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.chantier-hero[data-ratio='3-2'] {
  aspect-ratio: 3 / 2;
  max-height: 800px;
}

.chantier-hero[data-ratio='16-9'] {
  aspect-ratio: 16 / 9;
  max-height: 600px;
}

.chantier-hero img,
.chantier-hero .ba-slider {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chantier-hero .ba-slider {
  aspect-ratio: unset;
  position: absolute;
  inset: 0;
}

/* Méta */
.chantier-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
  align-items: center;
}

.chantier-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--badge-color, var(--blue-primary));
}

.chantier-ville {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Galerie */
.chantier-gallery {
  margin-top: 2.5rem;
}

.chantier-gallery h2 {
  margin-bottom: 1rem;
}

.chantier-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Item wrapper (button) */
.chantier-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.chantier-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.chantier-gallery__item:active {
  transform: translateY(-1px);
  transition-duration: 0.1s;
}

.chantier-gallery__item:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Image inside item */
.chantier-gallery__item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: var(--radius-md);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.chantier-gallery__item:hover img {
  transform: scale(1.05);
}

/* Overlay on hover */
.chantier-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: rgba(26, 30, 46, 0);
  transition: background 0.22s ease;
  pointer-events: none;
}

.chantier-gallery__item:hover::after {
  background: rgba(26, 30, 46, 0.28);
}

/* Loupe icon */
.chantier-gallery__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='white' stroke-width='2'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: 1;
}

.chantier-gallery__item:hover::before {
  opacity: 1;
}

/* Breadcrumb — HTML natif (ol/li) */
.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-500);
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 0.25rem;
  color: var(--ink-500);
  flex-shrink: 0;
}

.breadcrumb a {
  color: var(--blue-deep);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
  color: var(--ink-900);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* Retour */
.chantier-back {
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* ── Hero réalisations ──────────────────────────────────────────────────── */

.section__eyebrow {
  margin-bottom: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-card-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.realisations-hero {
  padding-bottom: 2rem;
}

.realisations-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.realisations-hero__title {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.realisations-hero__subtitle {
  font-size: 1rem;
  color: var(--ink-500);
  line-height: 1.6;
  max-width: 44ch;
}

.realisations-hero__stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.realisations-hero__stat {
  font-size: 0.88rem;
  color: var(--ink-500);
}

.realisations-hero__stat strong {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

.realisations-hero__cta {
  margin-top: 1.75rem;
  align-self: flex-start;
}

.realisations-hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-hover);
}

/* Supprimer les styles de card sur le ba-card injecté dans le hero */
.realisations-hero__visual .ba-card {
  border: none;
  box-shadow: none;
  border-radius: 0;
  height: 100%;
}

.realisations-hero__visual .ba-card h3,
.realisations-hero__visual .ba-card p {
  display: none;
}

.realisations-hero__visual .ba-slider {
  /*
   * Override aspect-ratio: 4/3 du .ba-slider de base.
   * La hauteur dépend du parent .realisations-hero__visual
   * qui porte lui-même aspect-ratio: 4/3.
   * Si la grille parente change de dimensions, vérifier ce slider.
   */
  aspect-ratio: unset;
  height: 100%;
}

.realisations-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 780px) {
  .realisations-hero__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .realisations-hero__visual {
    order: -1;
  }
}

/* ── Grille réalisations ────────────────────────────────────────────────── */

.section__header {
  margin-bottom: 1.5rem;
}

.section__subtitle {
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}

.section__footer {
  margin-top: 1.5rem;
  text-align: center;
}

.chantiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.chantier-card {
  display: block;
  text-decoration: none;
  max-width: 480px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.chantier-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.chantier-card:active {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  transition-duration: 0.1s;
}

.chantier-card__img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.chantier-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chantier-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background-color: var(--badge-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chantier-card__ba-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@supports not (backdrop-filter: blur(4px)) {
  .chantier-card__ba-badge {
    background: rgba(0, 0, 0, 0.75);
  }
}

.chantier-card__body {
  padding: 1rem;
}

.chantier-card__title {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.4rem;
}

.chantier-card__ville {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--ink-500);
  margin-bottom: 0.25rem;
}

.ville-dot {
  flex-shrink: 0;
}

.chantier-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-primary);
  margin-top: 0.5rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--blue-primary);
  transition: background 0.15s ease, color 0.15s ease;
}

.chantier-card:hover .chantier-card__cta {
  background: var(--blue-primary);
  color: #fff;
}

/* ── Carousel accueil ───────────────────────────────────────────────────── */

.home-chantier-carousel-wrap {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.home-chantier-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
}

.home-chantier-carousel::-webkit-scrollbar {
  display: none;
}

.home-chantier-item {
  flex: 0 0 min(460px, 72vw);
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.home-chantier-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.home-chantier-item:active {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  transition-duration: 0.1s;
}

.home-chantier-item__visual {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.home-chantier-item__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-chantier-item__body {
  padding: 0.875rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.home-chantier-item__title {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.home-chantier-item__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue-primary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--blue-primary);
  /* La pastille mesure 30px de haut, en deca des 44px recommandes pour une
     cible tactile (WCAG 2.1 AAA / consignes iOS et Android ; le minimum AA de
     WCAG 2.2 est de 24px, deja atteint). C'est le lien de conversion vers les
     chantiers : on etend la zone active de 7px en haut et en bas via un
     pseudo-element, sans toucher a l'apparence de la pastille. */
  position: relative;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.home-chantier-item__link::after {
  content: '';
  position: absolute;
  inset: -7px 0;
}

.home-chantier-item:hover .home-chantier-item__link {
  background: var(--blue-primary);
  color: #fff;
}

.home-chantier-item__link:focus-visible {
  outline: 3px solid var(--blue-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .home-chantier-item__link {
    transition: none;
  }
}

/* Badge catégorie en overlay */
.home-chantier-item__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--badge-color);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}

/* Boutons prev/next */
.home-chantier-carousel-wrap .carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.home-chantier-carousel-wrap .carousel-btn:hover {
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
}

.home-chantier-carousel-wrap .carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.home-chantier-carousel-wrap .carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink-700);
  stroke-width: 2;
}

/* Handle slider en contexte miniature carousel */
.home-chantier-item .ba-handle {
  width: 36px;
  height: 36px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}

.home-chantier-item .ba-line {
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

/* Knob mini (sans labels ni texte) */
.ba-handle__knob--mini {
  width: 24px;
  height: 24px;
}

@media (max-width: 780px) {
  .home-chantier-carousel-wrap {
    grid-template-columns: 1fr;
  }

  .home-chantier-carousel-wrap .carousel-btn {
    display: none;
  }

  .home-chantier-item {
    flex: 0 0 85vw;
  }
}