/* ==========================================================================
   Prisma Immobilier — Bâtisseur de confort
   Palette tirée des bâtiments livrés : revêtement charbon, bardage de cèdre,
   murs plâtre et le vert Prisma du logo.
   ========================================================================== */

/* Archivo (licence OFL, voir fonts/OFL.txt) : hébergée ici, aucune requête vers Google avant le consentement */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-variable.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs */
  --vert: #73a533;          /* vert Prisma (logo) — fonds, accents, texte sur charbon */
  --vert-texte: #4a7a1c;    /* vert lisible sur fond clair (5,1:1) */
  --charbon: #262b2a;       /* revêtement des bâtiments */
  --charbon-2: #323837;
  --cedre: #a9703f;         /* bardage de bois — accents décoratifs seulement */
  --platre: #f1f2ee;        /* murs intérieurs */
  --blanc: #ffffff;
  --texte: #262b2a;
  --texte-doux: #565d5a;    /* 6,4:1 sur blanc */
  --texte-inverse: #f1f2ee;
  --texte-inverse-doux: #b9bfbb;
  --ligne: #d8dbd4;
  --ligne-inverse: rgba(241, 242, 238, 0.16);
  --erreur: #b3261e;

  /* Typographie — Archivo, une seule famille, deux largeurs */
  --police: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-xxl: clamp(2.15rem, 1.2rem + min(4.4vw, 6.5vh), 5.25rem);

  /* Espacements (8 pt) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gouttiere: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --largeur: 78rem;

  /* Mouvement */
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --d-court: 180ms;
  --d-moyen: 420ms;
  --d-long: 1100ms;

  --z-header: 40;
  --z-menu: 50;
  --rayon: 3px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: 1.15; }
h4 { font-size: var(--t-md); line-height: 1.25; }

p { margin: 0 0 1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--vert-texte); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--vert-texte);
  outline-offset: 3px;
  border-radius: 2px;
}
.sur-fonce :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--vert); }

.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;
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--charbon);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--d-court) var(--ease-standard);
}
.skip-link:focus { top: var(--s-2); }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section); }
.section--platre { background: var(--platre); }
.sur-fonce { background: var(--charbon); color: var(--texte-inverse); }
.sur-fonce a:not(.bouton) { color: var(--vert); }

.intro-texte {
  font-size: var(--t-md);
  color: var(--texte-doux);
  line-height: 1.55;
}
.sur-fonce .intro-texte { color: var(--texte-inverse-doux); }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color 320ms var(--ease-standard),
    border-color 320ms var(--ease-standard),
    transform var(--d-court) var(--ease-standard);
}
/* Le remplissage monte comme un mur au survol, puis se retire vers le haut */
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--remplissage, var(--charbon));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 460ms var(--ease-sortie);
}
.bouton:active { transform: scale(0.97); }

.bouton--principal { background: var(--vert); color: var(--charbon); }
.bouton--contour { border-color: currentColor; color: var(--charbon); background: transparent; }
.sur-fonce .bouton--contour,
.hero .bouton--contour { color: var(--blanc); }
.sur-fonce .bouton,
.hero .bouton { --remplissage: var(--blanc); }

@media (hover: hover) {
  .bouton:hover::before { transform: scaleY(1); transform-origin: bottom; }
  .bouton--principal:hover,
  .bouton--contour:hover { color: var(--blanc); border-color: var(--charbon); }
  .sur-fonce .bouton--principal:hover,
  .hero .bouton--principal:hover,
  .sur-fonce .bouton--contour:hover,
  .hero .bouton--contour:hover { color: var(--charbon); border-color: var(--blanc); }
}

/* Verre dépoli — sur photo seulement (hero) */
.bouton--verre {
  color: var(--blanc);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bouton--verre {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}
.hero .bouton--verre { --remplissage: rgba(255, 255, 255, 0.16); }
.bouton--verre:hover { border-color: rgba(255, 255, 255, 0.55); }

.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  min-height: 2.75rem;
}
.lien-fleche svg { width: 1.1rem; height: 1.1rem; transition: transform var(--d-court) var(--ease-standard); }
.lien-fleche:hover svg { transform: translateX(4px); }
.lien-fleche:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--charbon);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--ligne);
  transition:
    transform var(--d-moyen) var(--ease-sortie),
    background-color var(--d-moyen) var(--ease-standard),
    color var(--d-moyen) var(--ease-standard),
    border-color var(--d-moyen) var(--ease-standard);
}
.site-header.est-cache { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }

/* Sur la page d'accueil, l'en-tête est transparent au-dessus de la photo */
.a-hero .site-header:not(.est-defile) {
  background: transparent;
  color: var(--blanc);
  border-color: transparent;
}

.site-header__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 5rem;
}

.logo { display: inline-flex; color: inherit; flex-shrink: 0; }
.logo svg { width: 9.5rem; height: auto; }
.logo .logo__lettres { fill: currentColor; }
.logo .logo__vert { fill: var(--vert); }

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  font-weight: 600;
  font-size: 0.975rem;
  text-decoration: none;
}
.nav-principale a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.45rem;
  height: 2px;
  background: var(--vert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-moyen) var(--ease-sortie);
}
.nav-principale a:not(.bouton):hover::after,
.nav-principale a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principale .bouton { min-height: 2.75rem; padding: 0.6rem 1.15rem; }

.menu-bouton {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.menu-bouton__icone { position: relative; width: 1.5rem; height: 0.9rem; }
.menu-bouton__icone span {
  position: absolute; left: 0; right: 0;
  height: 2px; background: currentColor;
  transition: transform var(--d-moyen) var(--ease-sortie), top var(--d-moyen) var(--ease-sortie);
}
.menu-bouton__icone span:first-child { top: 0; }
.menu-bouton__icone span:last-child { top: calc(100% - 2px); }
.menu-ouvert .menu-bouton__icone span:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-ouvert .menu-bouton__icone span:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (max-width: 63.99rem) {
  .menu-bouton { display: inline-flex; position: relative; z-index: 2; }
  .nav-principale {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--gouttiere) var(--s-5);
    background: var(--charbon);
    color: var(--blanc);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--d-moyen) var(--ease-standard), visibility 0s linear var(--d-moyen);
  }
  .menu-ouvert .nav-principale {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--d-moyen) var(--ease-standard), visibility 0s;
  }
  .nav-principale ul { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .nav-principale a:not(.bouton) {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 800;
    font-variation-settings: "wdth" 118;
  }
  .nav-principale a:not(.bouton)::after { bottom: 0.2rem; }
  .nav-principale li:last-child { margin-top: var(--s-3); }
  .nav-principale li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--d-moyen) var(--ease-sortie), transform var(--d-moyen) var(--ease-sortie);
  }
  .menu-ouvert .nav-principale li { opacity: 1; transform: none; }
  .menu-ouvert .nav-principale li:nth-child(2) { transition-delay: 40ms; }
  .menu-ouvert .nav-principale li:nth-child(3) { transition-delay: 80ms; }
  .menu-ouvert .nav-principale li:nth-child(4) { transition-delay: 120ms; }
  .menu-ouvert .nav-principale li:nth-child(5) { transition-delay: 160ms; }
  .menu-ouvert .nav-principale li:nth-child(6) { transition-delay: 200ms; }
  .menu-ouvert .site-header { color: var(--blanc); background: transparent; border-color: transparent; }
  .menu-ouvert .nav-principale .bouton { --remplissage: var(--blanc); }
  .menu-ouvert .nav-principale .bouton--principal:hover { color: var(--charbon); }
  .menu-ouvert { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Hero (accueil)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  /* Quelques pixels sous la pleine hauteur : Chrome ignore les images couvrant tout l'écran pour le LCP */
  min-height: calc(100vh - 2px);
  min-height: calc(100svh - 2px);
  padding-block: 8rem var(--s-6);
  color: var(--blanc);
  background: var(--charbon);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture { display: block; height: 100%; }
.hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 60%;
  will-change: transform;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Assombrissement uniforme, renforcé à peine sous le texte */
  background:
    linear-gradient(to top, rgba(22, 26, 25, 0.3) 0%, rgba(22, 26, 25, 0) 45%),
    rgba(22, 26, 25, 0.55);
}
/* Rideau charbon qui se lève à l'ouverture — la photo est déjà peinte en dessous */
.hero__rideau {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--charbon);
  transform-origin: top;
  pointer-events: none;
}
.hero__toit {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: min(42vw, 22rem);
  transform: translate(-50%, -62%);
  color: var(--vert);
}
.hero__toit path {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: square;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.hero__contenu { position: relative; z-index: 1; }
.hero__titre {
  max-width: 20ch;
  margin: 0;
  font-size: var(--t-xxl);
  font-weight: 800;
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__titre .ligne { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__titre .ligne > span { display: block; }
/* Le H1 de la page : il décrit l'entreprise, avec le style d'un paragraphe */
.hero__sous-titre {
  max-width: 44ch;
  margin-top: var(--s-3);
  font-size: var(--t-md);
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100;
  line-height: 1.6;
  letter-spacing: normal;
  text-wrap: wrap;
  color: rgba(255, 255, 255, 0.9);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.hero__annonce {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--blanc);
  text-decoration: none;
  max-width: 34rem;
}
.hero__annonce strong { display: inline-block; font-weight: 700; color: var(--blanc); }
.hero__annonce strong + span { display: block; }
.hero__annonce span { color: rgba(255, 255, 255, 0.82); font-size: var(--t-sm); }
.hero__annonce:hover strong { text-decoration: underline; text-decoration-color: var(--vert); }
.pastille {
  flex-shrink: 0;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  position: relative;
  background: var(--vert);
}
.pastille::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--vert);
  animation: pouls 2.8s var(--ease-sortie) infinite;
}
@keyframes pouls {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* Séquence d'ouverture : toit, rideau, menu qui descend, puis titre, texte
   et boutons un après l'autre */
.js .hero__rideau { transform: scaleY(1); }
.js .hero__titre .ligne > span { transform: translateY(105%); }
.js .hero__sous-titre,
.js .hero__annonce { opacity: 0; transform: translateY(20px); }
/* Les boutons montent avec « translate » pour garder « transform » libre (effet au clic) */
.js .hero .hero__actions .bouton { opacity: 0; translate: 0 20px; }
.js .hero__media img { transform: scale(1.08); }
html.js:not(.est-pret) .a-hero .site-header { opacity: 0; transform: translateY(-100%); }

.est-pret .hero__toit path { animation: tracer 700ms var(--ease-standard) forwards; }
.est-pret .hero__toit { animation: toit-sortie 450ms var(--ease-standard) 750ms forwards; }
.est-pret .hero__rideau { animation: rideau 900ms var(--ease-sortie) 700ms forwards; }
.est-pret .hero__media img { animation: zoom-sortie 1600ms var(--ease-sortie) 700ms forwards; }
/* « backwards » : le menu reprend ensuite son comportement normal (se cacher au défilement) */
.est-pret .a-hero .site-header { animation: entete-entree 800ms var(--ease-sortie) 900ms backwards; }
.est-pret .hero__titre .ligne > span { animation: monter 900ms var(--ease-sortie) forwards; }
.est-pret .hero__titre .ligne:nth-child(1) > span { animation-delay: 1000ms; }
.est-pret .hero__titre .ligne:nth-child(2) > span { animation-delay: 1100ms; }
.est-pret .hero__titre .ligne:nth-child(3) > span { animation-delay: 1200ms; }
.est-pret .hero__sous-titre { animation: apparaitre 650ms var(--ease-sortie) 1450ms forwards; }
.est-pret .hero .hero__actions .bouton:nth-child(1) { animation: apparaitre-bouton 650ms var(--ease-sortie) 1600ms forwards; }
.est-pret .hero .hero__actions .bouton:nth-child(2) { animation: apparaitre-bouton 650ms var(--ease-sortie) 1750ms forwards; }
.est-pret .hero__annonce { animation: apparaitre 650ms var(--ease-sortie) 1900ms forwards; }

@keyframes entete-entree { from { opacity: 0; transform: translateY(-100%); } }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes toit-sortie { to { opacity: 0; transform: translate(-50%, -80%); } }
@keyframes rideau { to { transform: scaleY(0); } }
@keyframes zoom-sortie { to { transform: scale(1); } }
@keyframes monter { to { transform: translateY(0); } }
@keyframes apparaitre { to { opacity: 1; transform: none; } }
@keyframes apparaitre-bouton { to { opacity: 1; translate: 0 0; } }

/* --------------------------------------------------------------------------
   En-tête de page (pages intérieures)
   -------------------------------------------------------------------------- */
.page-titre {
  padding-top: calc(5rem + var(--section) * 0.7);
  padding-bottom: var(--s-6);
}
.page-titre h1 { font-size: var(--t-xxl); max-width: 16ch; }
.page-titre .intro-texte { margin-top: var(--s-3); max-width: 52ch; }
.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.fil li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ligne); }
.fil a { color: inherit; }

.bandeau-photo {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--platre);
}
.bandeau-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .bandeau-photo { aspect-ratio: 4 / 3; } }
@media (max-width: 40rem) {
  .hero { padding-block: 6.5rem var(--s-4); }
  .hero__sous-titre { font-size: var(--t-base); }
  .hero__annonce { margin-top: var(--s-4); }
}

/* --------------------------------------------------------------------------
   Révélation des photos — un rideau qui se retire, transform uniquement
   -------------------------------------------------------------------------- */
.reveler { position: relative; overflow: hidden; background: var(--platre); }
.reveler img { width: 100%; height: 100%; object-fit: cover; }
.js .reveler::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rideau, var(--platre));
  transform-origin: bottom;
  transition: transform var(--d-long) var(--ease-sortie);
}
.js .reveler img { transform: scale(1.1); transition: transform 1600ms var(--ease-sortie); }
.js .reveler.est-visible::after { transform: scaleY(0); }
.js .reveler.est-visible img { transform: scale(1); }
.sur-fonce .reveler { --rideau: var(--charbon); background: var(--charbon-2); }
.section--platre .reveler { --rideau: var(--platre); }

/* --------------------------------------------------------------------------
   Accueil — Manifeste
   -------------------------------------------------------------------------- */
.manifeste {
  display: grid;
  gap: var(--s-5);
}
.manifeste__phrase {
  font-size: var(--t-xl);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0;
}
.manifeste__phrase em { font-style: normal; color: var(--vert-texte); }
.manifeste__details { display: grid; gap: var(--s-4); align-content: start; }
.territoire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.territoire li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
}
@media (min-width: 64rem) {
  .manifeste { grid-template-columns: 1.35fr 1fr; align-items: end; }
}

/* --------------------------------------------------------------------------
   Accueil — Deux services
   -------------------------------------------------------------------------- */
.services-duo { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.service-carte { display: grid; gap: var(--s-3); color: inherit; text-decoration: none; }
.service-carte .reveler { aspect-ratio: 4 / 5; }
.service-carte h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.service-carte p { color: var(--texte-doux); }
.service-carte__fleche {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 2px solid var(--charbon);
  border-radius: 50%;
  transition: background-color var(--d-court) var(--ease-standard), color var(--d-court) var(--ease-standard);
}
.service-carte__fleche svg { width: 1.1rem; height: 1.1rem; }

.service-carte img { transition: transform 1600ms var(--ease-sortie), scale 900ms var(--ease-sortie); }
.service-carte:hover img { scale: 1.03; }
/* Photo extérieure : cadrage sur l'enseigne et les deux tours de bois en format vertical */
.service-carte .photo-exterieur { object-position: 56% 50%; }
@media (min-width: 48rem) {
  .services-duo { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .service-carte:nth-child(2) { margin-top: var(--s-7); }
}

/* --------------------------------------------------------------------------
   Accueil — Projet vedette (charbon)
   -------------------------------------------------------------------------- */
.projet-vedette { display: grid; gap: var(--s-5); }
.projet-vedette__photos { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-2); align-items: end; }
.projet-vedette__photos .reveler:first-child { aspect-ratio: 16 / 10; }
.projet-vedette__photos .reveler:last-child { aspect-ratio: 3 / 4; }
.projet-vedette h2 { margin-bottom: var(--s-3); }
.statut {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-3);
  font-weight: 700;
  color: var(--vert);
}
.statut .pastille { width: 0.6rem; height: 0.6rem; }

.fiche {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem var(--s-3);
  margin: var(--s-4) 0;
  padding: var(--s-3) 0;
  border-block: 1px solid var(--ligne-inverse);
}
.fiche dt { color: var(--texte-inverse-doux); }
.fiche dd { margin: 0; font-weight: 600; }
.section:not(.sur-fonce) .fiche { border-color: var(--ligne); }
.section:not(.sur-fonce) .fiche dt { color: var(--texte-doux); }

.unites { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.unites li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ligne-inverse);
  border-radius: var(--rayon);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.section:not(.sur-fonce) .unites li { border-color: var(--ligne); }

@media (min-width: 64rem) {
  .projet-vedette { grid-template-columns: 1.25fr 1fr; gap: var(--s-6); align-items: center; }
}

/* --------------------------------------------------------------------------
   Pièce par pièce — défilement horizontal piloté par le défilement vertical
   -------------------------------------------------------------------------- */
.pieces__entete { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.pieces__piste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pieces__piste li { margin: 0; }
.pieces__piste .reveler { aspect-ratio: 3 / 4; }
.pieces__piste figcaption { margin-top: 0.6rem; font-weight: 600; font-size: 0.95rem; }

@media (min-width: 48rem) {
  .pieces__piste { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
}

/* Version épinglée : seulement grand écran, pointeur fin et mouvement permis */
@media (min-width: 64rem) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .pieces--epingle { position: relative; }
  .js .pieces--epingle .pieces__collant {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .js .pieces--epingle .pieces__entete { margin-bottom: var(--s-4); }
  .js .pieces--epingle .pieces__piste {
    display: flex;
    gap: var(--s-3);
    width: max-content;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
    will-change: transform;
  }
  .js .pieces--epingle .pieces__piste li { width: clamp(17rem, 24vw, 22rem); flex-shrink: 0; }
  .js .pieces--epingle .pieces__piste li:nth-child(even) { margin-top: var(--s-6); }
  .js .pieces--epingle .pieces__piste .reveler { max-height: 60vh; }
  .pieces__progression {
    height: 2px;
    margin-top: var(--s-4);
    background: var(--ligne);
    max-width: var(--largeur);
    margin-inline: auto;
  }
  .pieces__progression span {
    display: block;
    height: 100%;
    background: var(--vert);
    transform: scaleX(0);
    transform-origin: left;
  }
}
.pieces__progression-wrap { display: none; }
@media (min-width: 64rem) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .pieces--epingle .pieces__progression-wrap { display: block; padding-inline: var(--gouttiere); }
}

/* --------------------------------------------------------------------------
   Étapes — vraie séquence, donc numérotée
   -------------------------------------------------------------------------- */
.etapes {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etapes li {
  position: relative;
  padding-top: var(--s-3);
  border-top: 2px solid var(--charbon);
  counter-increment: etape;
}
.etapes li::before {
  content: counter(etape);
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  color: var(--vert-texte);
  font-variant-numeric: tabular-nums;
}
.etapes h3 { font-size: var(--t-md); margin-bottom: 0.5rem; }
.etapes p { color: var(--texte-doux); }
@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); } }
@media (min-width: 64rem) { .etapes { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Gages de confiance
   -------------------------------------------------------------------------- */
.gages { display: grid; gap: var(--s-4); }
.gage { display: grid; gap: 0.75rem; align-content: start; }
.gage svg { width: 2.25rem; height: 2.25rem; color: var(--vert-texte); }
.gage h3 { font-size: var(--t-md); }
.gage p { color: var(--texte-doux); }
@media (min-width: 48rem) { .gages { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

/* --------------------------------------------------------------------------
   Appel à l'action final
   -------------------------------------------------------------------------- */
.appel {
  position: relative;
  overflow: hidden;
}
.appel__grille { display: grid; gap: var(--s-4); align-items: end; }
.appel h2 { max-width: 14ch; }
.appel__coordonnees { display: grid; gap: var(--s-2); }
.appel__tel {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  color: var(--blanc) !important;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.appel__toit {
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: clamp(16rem, 34vw, 30rem);
  color: var(--charbon-2);
  pointer-events: none;
}
.appel__toit path { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: square; }
.appel .conteneur { position: relative; }
@media (min-width: 64rem) { .appel__grille { grid-template-columns: 1.4fr 1fr; } }

/* --------------------------------------------------------------------------
   Pages intérieures — blocs génériques
   -------------------------------------------------------------------------- */
.deux-colonnes { display: grid; gap: var(--s-5); }
@media (min-width: 64rem) {
  .deux-colonnes { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
  .deux-colonnes--centre { align-items: center; }
  .deux-colonnes--inverse > :first-child { order: 2; }
}
.deux-colonnes h2 { margin-bottom: var(--s-3); }
.deux-colonnes .reveler { aspect-ratio: 4 / 5; }
.deux-colonnes .reveler--large { aspect-ratio: 4 / 3; }

.liste-coches { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.liste-coches li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; }
.liste-coches svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--vert-texte); }
.sur-fonce .liste-coches svg { color: var(--vert); }

.clientele { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.clientele > div { padding-top: var(--s-3); border-top: 1px solid var(--ligne); }
.clientele h3 { font-size: var(--t-md); margin-bottom: 0.5rem; }
.clientele p { color: var(--texte-doux); }
@media (min-width: 48rem) { .clientele { grid-template-columns: repeat(3, 1fr); } }

.licence { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.licence h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.licence ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.licence li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ligne);
}
@media (min-width: 64rem) { .licence { grid-template-columns: 1fr 1.6fr; } }

.citation {
  margin: 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--vert);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
  max-width: 30ch;
}

/* Galerie projet */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}
.galerie li { margin: 0; }
.galerie .reveler { aspect-ratio: 3 / 4; }
.galerie .galerie__large { grid-column: span 2; }
.galerie .galerie__large .reveler { aspect-ratio: 16 / 9; }
.galerie figcaption { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--texte-doux); }
.sur-fonce .galerie figcaption { color: var(--texte-inverse-doux); }
@media (min-width: 64rem) {
  .galerie { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
  .galerie .galerie__large { grid-column: span 2; }
}
.galerie figure { margin: 0; }

.encart {
  padding: var(--s-4);
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--vert);
  background: var(--blanc);
}
.encart h3 { font-size: var(--t-md); margin-bottom: 0.5rem; }
.encart p { color: var(--texte-doux); }
.encart .bouton { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: var(--s-6); }
@media (min-width: 64rem) { .contact { grid-template-columns: 1.3fr 1fr; gap: var(--s-7); } }

.formulaire { display: grid; gap: var(--s-3); }
.champ { display: grid; gap: 0.4rem; }
.champ label { font-weight: 700; }
.champ .requis { color: var(--erreur); }
.champ .aide { font-size: var(--t-sm); color: var(--texte-doux); }
.champ input,
.champ textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid #8b928e;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--d-court) var(--ease-standard), box-shadow var(--d-court) var(--ease-standard);
}
.champ textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.champ input:hover, .champ textarea:hover { border-color: var(--charbon); }
.champ input:focus-visible, .champ textarea:focus-visible {
  outline: none;
  border-color: var(--vert-texte);
  box-shadow: 0 0 0 3px rgba(74, 122, 28, 0.3);
}
.champ.a-erreur input, .champ.a-erreur textarea { border-color: var(--erreur); }
.champ__erreur {
  display: none;
  align-items: center;
  gap: 0.4rem;
  color: var(--erreur);
  font-size: var(--t-sm);
  font-weight: 600;
}
.champ__erreur svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.champ.a-erreur .champ__erreur { display: flex; }
.champ-cache { position: absolute; left: -9999px; }

.resume-erreurs {
  padding: var(--s-3);
  border: 2px solid var(--erreur);
  border-radius: var(--rayon);
  background: #fdf3f2;
}
.resume-erreurs h2 { font-size: var(--t-md); font-variation-settings: "wdth" 100; margin-bottom: 0.5rem; }
.resume-erreurs ul { margin: 0; padding-left: 1.2rem; }
.resume-erreurs a { color: var(--erreur); font-weight: 600; }

.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chargement {
  width: 1.1rem; height: 1.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tourner 700ms linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

.confirmation {
  padding: var(--s-4);
  border-left: 4px solid var(--vert);
  background: var(--platre);
}
.confirmation h2 { font-size: var(--t-lg); margin-bottom: 0.5rem; }

.coordonnees { display: grid; gap: var(--s-4); align-content: start; }
.coordonnees h2 { font-size: var(--t-lg); }
.coordonnees dl { display: grid; gap: var(--s-3); margin: 0; }
.coordonnees dt { font-size: var(--t-sm); color: var(--texte-doux); margin-bottom: 0.2rem; }
.coordonnees dd { margin: 0; font-weight: 600; }
.coordonnees dd a { color: var(--texte); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--s-6) var(--s-4);
  background: #1e2221;
  color: var(--texte-inverse-doux);
  font-size: 0.95rem;
}
.site-footer.sur-fonce a:not(.bouton) { color: var(--texte-inverse); text-decoration: none; }
.site-footer.sur-fonce .logo { color: var(--blanc); }

.site-footer__grille { display: grid; gap: var(--s-5); }
.site-footer .logo { color: var(--blanc); }
.site-footer .logo svg { width: 11rem; }
.site-footer h2 {
  margin-bottom: var(--s-2);
  font-size: 1rem;
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  color: var(--blanc);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.site-footer ul a { display: inline-flex; min-height: 2rem; align-items: center; }
.site-footer address { font-style: normal; }
.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ligne-inverse);
  font-size: var(--t-sm);
}
.reseau { display: inline-flex; align-items: center; gap: 0.5rem; }
.reseau svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48rem) { .site-footer__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Micro-interactions — deux gestes seulement, répétés partout :
   des lignes qui se tracent (comme un plan) et des remplissages qui montent
   (comme un mur). Tout reste en transform / opacity / background-size.
   -------------------------------------------------------------------------- */

/* Liens : le trait se dessine de gauche à droite, repart vers la droite */
.site-footer.sur-fonce ul a,
.coordonnees dd a,
.gage a,
.fil a,
.appel__tel,
.hero__annonce strong {
  text-decoration: none;
  background-image:
    linear-gradient(var(--trait, currentColor), var(--trait, currentColor)),
    linear-gradient(var(--trait-repos, transparent), var(--trait-repos, transparent));
  background-repeat: no-repeat;
  background-size: 0 var(--epaisseur, 1px), 100% var(--epaisseur, 1px);
  background-position: 100% 100%, 0 100%;
  transition: background-size 520ms var(--ease-sortie);
}
.coordonnees dd a { --trait-repos: rgba(38, 43, 42, 0.28); }
.gage a { --trait-repos: rgba(74, 122, 28, 0.35); }
.appel__tel, .hero__annonce strong { --trait: var(--vert); --epaisseur: 2px; }
.hero__annonce:hover strong { text-decoration: none; }
@media (hover: hover) {
  .site-footer.sur-fonce ul a:hover,
  .coordonnees dd a:hover,
  .gage a:hover,
  .fil a:hover,
  .appel__tel:hover,
  .hero__annonce:hover strong {
    background-size: 100% var(--epaisseur, 1px), 100% var(--epaisseur, 1px);
    background-position: 0 100%, 0 100%;
  }
}
.reseau svg { transition: transform 420ms var(--ease-sortie); }
.reseau:hover svg { transform: translateY(-2px); }

/* Cartes de service : le cercle se remplit de vert, la flèche passe à travers */
.service-carte__fleche {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 420ms var(--ease-sortie);
}
.service-carte__fleche::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--vert);
  transform: scale(0);
  transition: transform 520ms var(--ease-sortie);
}
.service-carte__fleche svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: transform 520ms var(--ease-sortie);
}
.service-carte__fleche svg + svg { transform: translateX(-2.2rem); }
.souligne {
  background: linear-gradient(var(--vert), var(--vert)) no-repeat 100% 100% / 0 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.06em;
  transition: background-size 620ms var(--ease-sortie);
}
.service-carte img { transition: transform 1600ms var(--ease-sortie), scale 1200ms var(--ease-sortie); }
@media (hover: hover) {
  .service-carte:hover .service-carte__fleche { border-color: var(--vert); }
  .service-carte:hover .service-carte__fleche::before { transform: scale(1); }
  .service-carte:hover .service-carte__fleche svg:first-child { transform: translateX(2.2rem); }
  .service-carte:hover .service-carte__fleche svg + svg { transform: none; }
  .service-carte:hover .souligne { background-size: 100% 3px; background-position: 0 100%; }
}

/* Titres découpés en mots (JS) : chaque mot monte de derrière sa ligne */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.mot > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1000ms var(--ease-sortie);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.est-visible .mot > span { transform: none; }

/* Fiche projet : les deux filets se tracent, les formats arrivent un à un */
.js .fiche[data-trace] { position: relative; border-color: transparent !important; }
.js .fiche[data-trace]::before,
.js .fiche[data-trace]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ligne-inverse);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1300ms var(--ease-sortie);
}
.js .fiche[data-trace]::before { top: -1px; }
.js .fiche[data-trace]::after { bottom: -1px; transition-delay: 180ms; }
.js .section:not(.sur-fonce) .fiche[data-trace]::before,
.js .section:not(.sur-fonce) .fiche[data-trace]::after { background: var(--ligne); }
.js .fiche[data-trace].est-visible::before,
.js .fiche[data-trace].est-visible::after { transform: scaleX(1); }
.js .fiche[data-trace] .unites li {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 500ms var(--ease-standard), translate 700ms var(--ease-sortie);
}
.js .fiche[data-trace].est-visible .unites li { opacity: 1; translate: 0 0; }
.js .fiche[data-trace] .unites li:nth-child(1) { transition-delay: 420ms; }
.js .fiche[data-trace] .unites li:nth-child(2) { transition-delay: 500ms; }
.js .fiche[data-trace] .unites li:nth-child(3) { transition-delay: 580ms; }

/* Étapes : le filet de chaque étape se trace l'un après l'autre, amorcé en vert */
.etapes li::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--vert) 0 2.5rem, var(--charbon) 2.5rem);
}
.js .etapes[data-trace] li { border-top-color: transparent; }
.js .etapes[data-trace] li::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--ease-sortie);
}
.js .etapes[data-trace] li::before {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 600ms var(--ease-standard), translate 800ms var(--ease-sortie);
}
.js .etapes[data-trace].est-visible li::after { transform: scaleX(1); }
.js .etapes[data-trace].est-visible li::before { opacity: 1; translate: 0 0; }
.js .etapes[data-trace] li:nth-child(2)::after,
.js .etapes[data-trace] li:nth-child(2)::before { transition-delay: 160ms; }
.js .etapes[data-trace] li:nth-child(3)::after,
.js .etapes[data-trace] li:nth-child(3)::before { transition-delay: 320ms; }
.js .etapes[data-trace] li:nth-child(4)::after,
.js .etapes[data-trace] li:nth-child(4)::before { transition-delay: 480ms; }

/* Accréditations : les icônes se dessinent au trait */
.js .gages[data-trace] svg [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1500ms var(--ease-standard);
}
.js .gages[data-trace].est-visible svg [pathLength] { stroke-dashoffset: 0; }
.js .gages[data-trace] .gage:nth-child(2) svg [pathLength] { transition-delay: 220ms; }
.js .gages[data-trace] .gage:nth-child(3) svg [pathLength] { transition-delay: 440ms; }

/* Appel final : le toit en filigrane se trace à l'arrivée */
.js .appel[data-trace] .appel__toit path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 2000ms var(--ease-standard) 200ms;
}
.js .appel[data-trace].est-visible .appel__toit path { stroke-dashoffset: 0; }

/* Pièce par pièce : la photo glisse un peu moins vite que son cadre (effet fenêtre) */
@media (min-width: 64rem) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .pieces--epingle .reveler img { width: 118%; max-width: none; margin-left: -9%; }
}

/* Formulaire : l'étiquette prend la couleur du champ actif */
.champ label { transition: color var(--d-moyen) var(--ease-standard); }
.champ:focus-within label { color: var(--vert-texte); }

/* --------------------------------------------------------------------------
   Barre d'actions mobile — appeler ou demander une soumission, au pouce
   -------------------------------------------------------------------------- */
.barre-mobile { display: none; }
@media (max-width: 47.99rem) {
  .barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 0.5rem;
    padding: 0.625rem max(var(--gouttiere), env(safe-area-inset-left)) calc(0.625rem + env(safe-area-inset-bottom)) max(var(--gouttiere), env(safe-area-inset-right));
    background: rgba(30, 34, 33, 0.94);
    border-top: 1px solid var(--ligne-inverse);
    transform: translateY(110%);
    transition: transform 520ms var(--ease-sortie);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .barre-mobile {
      background: rgba(30, 34, 33, 0.82);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
    }
  }
  .barre-mobile.est-visible { transform: none; }
  .barre-mobile .bouton { min-height: 3rem; padding: 0.7rem 1rem; }
  .barre-mobile .bouton svg { width: 1.1rem; height: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Passe mobile — plus serré, plus court, rien d'utile en moins
   -------------------------------------------------------------------------- */
a, button, summary { -webkit-tap-highlight-color: transparent; }

/* Pièce par pièce : barre de progression aussi en carrousel */
.pieces__progression { height: 2px; background: var(--ligne); }
.pieces__progression span {
  display: block;
  height: 100%;
  background: var(--vert);
  transform: scaleX(0);
  transform-origin: left;
}

/* Licence : liste repliable (ouverte d'office sur grand écran par le JS) */
.licence__plus summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin-bottom: var(--s-2);
  list-style: none;
  cursor: pointer;
}
.licence__plus summary::-webkit-details-marker { display: none; }
.licence__plus summary h3 { margin: 0; }
.licence__compte { margin-left: auto; font-size: var(--t-sm); color: var(--texte-doux); white-space: nowrap; }
@media (max-width: 63.99rem) {
  .licence__plus { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
  .licence__plus summary { margin-bottom: 0; padding-block: 0.75rem; }
  .licence__plus[open] summary { margin-bottom: var(--s-1); }
  .licence__plus summary h3 { font-size: 1.0625rem; }
}
.licence__chevron { width: 1.25rem; height: 1.25rem; flex-shrink: 0; transition: transform var(--d-moyen) var(--ease-sortie); }
.licence__plus[open] .licence__chevron { transform: rotate(180deg); }
@media (min-width: 64rem) {
  .licence__plus summary { cursor: default; pointer-events: none; }
  .licence__compte, .licence__chevron { display: none; }
}

@media (max-width: 47.99rem) {
  :root { --section: 3.5rem; }

  /* Rien ne passe sous l'encoche en paysage */
  .conteneur {
    padding-left: max(var(--gouttiere), env(safe-area-inset-left));
    padding-right: max(var(--gouttiere), env(safe-area-inset-right));
  }

  /* En-tête plus bas, logo plus petit */
  .site-header__barre { height: 4.25rem; }
  .logo svg { width: 8.25rem; }
  html { scroll-padding-top: 5rem; }

  .intro-texte { font-size: 1.125rem; }

  /* Hero : le titre suit sa largeur au lieu de couper en cinq lignes */
  .hero { padding-block: 5.75rem var(--s-4); }
  /* Photo de jour recadrée en portrait ; pas de parallaxe, donc pas de marge à prévoir */
  .hero__media img { height: 100%; object-position: 58% 50%; }
  .hero__titre { font-size: clamp(2rem, 8.8vw, 2.5rem); font-variation-settings: "wdth" 110; max-width: none; }
  .hero__titre .ligne, .hero__titre .ligne > span { display: inline; }
  .js .hero__titre { opacity: 0; transform: translateY(20px); }
  .est-pret .hero__titre { animation: apparaitre 800ms var(--ease-sortie) 1000ms forwards; }
  .hero__sous-titre { margin-top: var(--s-2); }
  .hero__actions { flex-direction: column; gap: 0.75rem; margin-top: var(--s-3); }
  .hero__actions .bouton { width: 100%; }
  /* L'annonce de la phase 2 est reprise deux sections plus bas */
  .hero__annonce { display: none; }

  /* Manifeste */
  .manifeste { gap: var(--s-3); }

  /* Services : photos moins hautes */
  .services-duo { gap: var(--s-5); margin-top: var(--s-4); }
  .service-carte { gap: var(--s-2); }
  .service-carte .reveler { aspect-ratio: 4 / 3; }

  /* Projet vedette : une seule grande photo */
  .projet-vedette { gap: var(--s-4); }
  .projet-vedette__photos { grid-template-columns: 1fr; }
  .projet-vedette__photos .reveler:first-child { aspect-ratio: 4 / 3; }
  .projet-vedette__photos .reveler:last-child { display: none; }
  .fiche { margin: var(--s-3) 0; }
  .projet-vedette .hero__actions { flex-direction: row; }
  .projet-vedette .hero__actions .bouton { flex: 1; }

  /* Pièce par pièce : carrousel natif qui laisse voir la photo suivante */
  .pieces__entete { margin-bottom: var(--s-4); }
  .pieces__piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(74%, 18rem);
    grid-template-columns: none;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pieces__piste::-webkit-scrollbar { display: none; }
  .pieces__piste li { scroll-snap-align: start; }
  .pieces__piste .reveler { aspect-ratio: 4 / 5; }
  .pieces__progression-wrap { display: block; margin-top: var(--s-3); padding-inline: var(--gouttiere); }

  /* Étapes : le numéro passe à gauche au lieu d'occuper sa propre ligne */
  .etapes { gap: var(--s-3); margin-top: var(--s-4); }
  .etapes li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: var(--s-2);
    padding-top: var(--s-2);
  }
  .etapes li::before { grid-row: 1 / span 2; margin: 0; font-size: var(--t-md); line-height: 1.3; }
  .etapes h3 { margin-bottom: 0.25rem; }

  /* Accréditations : icône à gauche */
  .gages { gap: var(--s-3); }
  .gage { grid-template-columns: 2.25rem 1fr; column-gap: var(--s-2); row-gap: 0.25rem; }
  .gage svg { grid-row: 1 / span 2; width: 1.75rem; height: 1.75rem; }

  /* Appel final */
  .appel__grille { gap: var(--s-3); }
  .appel__toit { width: 12rem; right: -3rem; bottom: -4rem; }
  .appel__coordonnees .bouton { width: 100%; }

  /* Pied de page : sans la liste de pages (déjà dans le menu) ni la description */
  .site-footer { padding-block: var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .site-footer__grille { gap: var(--s-4); }
  .site-footer__grille > div:first-child p,
  .site-footer__grille > div:last-child { display: none; }
  .site-footer .logo svg { width: 9rem; }
  .site-footer__bas { margin-top: var(--s-4); }
  .site-footer a { overflow-wrap: anywhere; }

  /* Pages intérieures */
  .page-titre { padding-top: calc(4.25rem + var(--s-5)); padding-bottom: var(--s-4); }
  .page-titre .intro-texte { margin-top: var(--s-2); }
  .deux-colonnes { gap: var(--s-4); }
  .deux-colonnes .reveler,
  .deux-colonnes .reveler--large { aspect-ratio: 4 / 3; }
  .clientele { gap: var(--s-3); margin-top: var(--s-4); }
  .galerie { gap: 0.5rem; margin-top: var(--s-4); }
  .licence { gap: var(--s-4); margin-top: var(--s-4); }
  .contact { gap: var(--s-5); }
}

/* Petits téléphones (iPhone SE, 320 px) */
@media (max-width: 22.5rem) {
  .hero__titre { font-size: 1.9rem; }
  .barre-mobile { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Bannière de consentement aux témoins (Loi 25)
   Les deux choix ont exactement le même poids visuel.
   -------------------------------------------------------------------------- */
.temoins {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 0 max(var(--gouttiere), env(safe-area-inset-right)) calc(var(--gouttiere) + env(safe-area-inset-bottom)) max(var(--gouttiere), env(safe-area-inset-left));
  pointer-events: none;
}
.temoins[hidden] { display: none; }
.temoins__boite {
  pointer-events: auto;
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  padding: var(--s-3);
  background: var(--charbon);
  color: var(--texte-inverse);
  border: 1px solid var(--ligne-inverse);
  border-top: 3px solid var(--vert);
  border-radius: var(--rayon);
  box-shadow: 0 1.25rem 3rem rgba(20, 24, 23, 0.32);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 420ms var(--ease-standard), transform 640ms var(--ease-sortie);
}
.temoins.est-visible .temoins__boite { opacity: 1; transform: none; }
.temoins__titre {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  line-height: 1.15;
  color: var(--blanc);
}
.temoins__titre:focus { outline: none; }
.temoins__texte { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--texte-inverse-doux); max-width: none; }
.temoins__texte a { color: var(--blanc); text-decoration-color: var(--vert); text-decoration-thickness: 2px; }
.temoins__actuel { margin: 0; font-size: var(--t-sm); color: var(--texte-inverse-doux); }
.temoins__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.25rem; }
.temoins__bouton {
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--blanc);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 240ms var(--ease-standard), color 240ms var(--ease-standard), transform var(--d-court) var(--ease-standard);
}
.temoins__bouton:hover { background: var(--blanc); color: var(--charbon); }
.temoins__bouton:active { transform: scale(0.97); }
.temoins__bouton:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }
@media (min-width: 48rem) {
  .temoins__boite { grid-template-columns: 1fr auto; column-gap: var(--s-4); align-items: end; }
  .temoins__titre, .temoins__texte, .temoins__actuel { grid-column: 1; }
  .temoins__actions { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(2, minmax(8.5rem, auto)); margin: 0; }
}
/* La barre d'actions mobile cède sa place pendant que la bannière est ouverte */
.temoins-ouvert .barre-mobile { transform: translateY(110%); }

/* Pied de page : liens légaux */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; }
.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte-inverse);
  font: inherit;
  cursor: pointer;
  min-height: 2rem;
}
.site-footer__legal a,
.site-footer__legal .lien-bouton {
  color: var(--texte-inverse);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 100% 100%;
  transition: background-size 520ms var(--ease-sortie);
}
@media (hover: hover) {
  .site-footer__legal a:hover,
  .site-footer__legal .lien-bouton:hover { background-size: 100% 1px; background-position: 0 100%; }
}

/* Page de politique : texte long lisible */
.texte-legal { max-width: 68ch; }
.texte-legal h2 { font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-2); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 { font-size: var(--t-md); margin: var(--s-4) 0 var(--s-1); }
.texte-legal ul { padding-left: 1.2rem; margin: 0 0 1em; }
.texte-legal li { margin-bottom: 0.4rem; }
.texte-legal .encart { margin: var(--s-4) 0; }
.tableau-defilant { overflow-x: auto; margin: var(--s-3) 0; border: 1px solid var(--ligne); }
.tableau-defilant:focus-visible { outline: 3px solid var(--vert-texte); outline-offset: 3px; }
.tableau-temoins { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.95rem; }
.tableau-temoins caption { text-align: left; padding: 0.75rem 1rem; font-weight: 700; background: var(--platre); }
.tableau-temoins th, .tableau-temoins td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--ligne); }
.tableau-temoins thead th { font-size: var(--t-sm); color: var(--texte-doux); font-weight: 700; }
.tableau-temoins code { font-size: 0.9em; }
.maj { font-size: var(--t-sm); color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   Équipe (À propos) et partenaires (accueil)
   -------------------------------------------------------------------------- */
.equipe {
  display: grid;
  gap: var(--s-5) var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { .equipe { grid-template-columns: repeat(3, 1fr); } }
.membre { display: grid; gap: 0.35rem; align-content: start; }
.membre__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--s-2);
  background: var(--platre);
  overflow: hidden;
}
.membre__photo span {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  color: var(--vert-texte);
  letter-spacing: 0.02em;
}
.membre__photo small {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
/* Le toit du logo, en filigrane derrière les initiales */
.membre__photo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24%;
  width: 32%;
  aspect-ratio: 1;
  border-top: 3px solid rgba(74, 122, 28, 0.18);
  border-left: 3px solid rgba(74, 122, 28, 0.18);
  transform: translateX(-50%) rotate(45deg);
}
.membre h3 { font-size: var(--t-md); }
.membre__role { margin: 0; font-weight: 600; color: var(--vert-texte); }
.membre__a-venir { color: var(--texte-doux); }

.partenaires { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 48rem) { .partenaires { grid-template-columns: 1.4fr 1fr; gap: var(--s-6); } }
.partenaire {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  color: var(--texte);
  text-decoration: none;
}
.partenaire img {
  width: min(15rem, 100%);
  height: auto;
  border-radius: var(--rayon);
  transition: transform 700ms var(--ease-sortie);
}
.partenaire__lien {
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size 520ms var(--ease-sortie);
}
@media (hover: hover) {
  .partenaire:hover img { transform: translateY(-4px); }
  .partenaire:hover .partenaire__lien { background-image: linear-gradient(var(--vert), var(--vert)); background-size: 100% 2px; }
}

/* Barre mobile : « Demande de location » doit tenir sur une ligne */
@media (max-width: 47.99rem) {
  .barre-mobile { grid-template-columns: auto 1fr; }
  .barre-mobile .bouton { white-space: nowrap; padding-inline: 0.75rem; gap: 0.45rem; font-size: 0.95rem; }
}
@media (max-width: 22.5rem) {
  .barre-mobile .bouton { font-size: 0.875rem; padding-inline: 0.6rem; }
  /* Très petit écran : icône de téléphone seule, libellé conservé pour les lecteurs d'écran */
  .barre-mobile .bouton--contour { min-width: 3rem; }
  .barre-mobile__texte {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : tout est affiché tel quel
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .js .hero__rideau, .hero__toit { display: none; }
  .js .hero__titre .ligne > span,
  .js .hero__sous-titre,
  .js .hero__annonce,
  .js .hero__media img,
  html.js:not(.est-pret) .a-hero .site-header { opacity: 1; transform: none; }
  .js .hero .hero__actions .bouton { opacity: 1; translate: none; }
  .js .reveler::after { display: none; }
  .pastille::after { display: none; }
  .temoins__boite { transform: none; }
  .mot > span { transform: none; }
  .js .fiche[data-trace]::before, .js .fiche[data-trace]::after,
  .js .etapes[data-trace] li::after { transform: none; }
  .js .fiche[data-trace] .unites li, .js .etapes[data-trace] li::before { opacity: 1; translate: none; }
  .js .gages[data-trace] svg [pathLength], .js .appel[data-trace] .appel__toit path { stroke-dashoffset: 0; }
  .js .reveler img { transform: none; }
}