/* ==========================================================================
   R.R Construction — feuille de style unique
   HTML/CSS pur, responsive mobile-first fluide. Aucune dependance.

   SOMMAIRE
   1.  Tokens          — couleurs, typo fluide, espacements
   2.  Reset & base
   3.  Layout          — wrap, section, split, grilles
   4.  Typographie     — titres, eyebrow, texte
   5.  Boutons
   6.  Topbar & navigation (+ menu mobile)
   7.  Hero
   8.  Marquee & bandeau de stats
   9.  Media & cartes
   10. Carrousel de realisations (ex-temoignages, composant retire)
   11. Formulaires
   12. FAQ / accordeon
   13. CTA & footer
   14. Utilitaires & animations
   15. Responsive       — 1080px / 760px / 520px
   16. Theme « Nuit de chantier » — diapo du hero, rail scroll-snap,
       avant/apres au curseur (integre depuis la variante B le 31/08/2026)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* couleurs — theme « Nuit de chantier » : nuit, photo plein cadre,
     zero arrondi. L'accent reprend le bleu du logo, eclairci pour tenir
     sur le fond quasi noir. */
  --bleu: #16181a;          /* fond principal */
  --bleu-fonce: #0d0f10;    /* topbar, footer, CTA */
  --cyan: #35bde2;          /* accent */
  --cyan-clair: #7ed6f0;
  --cyan-fonce: #0e7490;    /* accent sur fond clair */
  --encre: #17191b;         /* texte sur fond clair */
  --encre-douce: #4c5257;
  --encre-pale: #5c6469;
  --blanc: #fff;
  --creme: #f4f2ee;
  --creme-fonce: #eae7e1;
  --bord-clair: #dbd7d0;
  --bord-sombre: rgba(255, 255, 255, .09);
  --sur-bleu: rgba(255, 255, 255, .72);
  --sur-bleu-doux: rgba(255, 255, 255, .5);

  /* typo */
  --titre: 'Anton', system-ui, sans-serif;
  --texte: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: 'Barlow Semi Condensed', system-ui, sans-serif;

  /* echelle fluide : la meme valeur sert du mobile au grand ecran */
  --t-h1: clamp(2.4rem, 1rem + 6vw, 5.2rem);           /* 38 -> 83px  */
  --t-h2: clamp(1.6rem, 1.15rem + 2.2vw, 2.375rem);    /* 26 -> 38px  */
  --t-h3: clamp(1.15rem, 1rem + .7vw, 1.5rem);         /* 18 -> 24px  */
  --t-lead: clamp(.95rem, .9rem + .35vw, 1.03rem);     /* 15 -> 16.5px*/
  --t-base: clamp(.9rem, .87rem + .18vw, .97rem);      /* 14.5 -> 15.5*/
  --t-petit: .84rem;
  --t-mini: .72rem;

  /* espacements */
  --gouttiere: clamp(1.15rem, .3rem + 3.2vw, 2.75rem); /* 18 -> 44px  */
  --bloc: clamp(3rem, 1.6rem + 5vw, 5rem);             /* 48 -> 80px  */
  --largeur: 1280px;
  --rayon: 0px;
  --rayon-petit: 0px;

  --ombre-carte: none;
  --ombre-forte: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --transition: .25s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;   /* la nav collante ne masque plus les ancres */
}

body {
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.6;
  background: var(--bleu);
  color: var(--blanc);
  overflow-x: hidden;         /* filet de securite contre le scroll lateral */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
input, textarea, select, button { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* accessibilite : un focus visible partout, au clavier uniquement */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* lien d'evitement pour les lecteurs d'ecran */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--cyan);
  color: var(--bleu);
  padding: 12px 20px;
  font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--bloc); position: relative; }
.section--compact { padding-block: clamp(2.2rem, 1.4rem + 3vw, 3.5rem); }

/* variantes de fond */
.section--clair  { background: var(--blanc); color: var(--encre); }
.section--creme  { background: var(--creme-fonce); color: var(--encre); }
.section--creme-clair { background: var(--creme); color: var(--encre); }
.section--bleu   { background: var(--bleu); color: var(--blanc); }
.section--fonce  { background: var(--bleu-fonce); color: var(--blanc); }

/* trame de points discrete sur les fonds sombres (reprise de la maquette) */
.section--bleu::before,
.section--fonce::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0);
  background-size: 26px 26px;
}
.section--bleu > *, .section--fonce > * { position: relative; }

/* deux colonnes texte + image */
.split {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  align-items: center;
}
.split--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.split--egal    { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* grilles de cartes : auto-fit, elles se reorganisent seules */
.grille {
  display: grid;
  gap: clamp(.9rem, .5rem + 1.2vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
/* 3 colonnes IMPOSEES (pas d'auto-fit) : au-dela de 1080px le auto-fit de
   .grille fait tenir 4 cartes de 260px, ce qui laissait une derniere rangee
   orpheline de 2 cartes sur l'accueil. Ici on veut des rangees pleines. */
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 4. Typographie ---------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;              /* Anton n'a qu'une graisse */
  letter-spacing: .004em;
  text-transform: uppercase;
  line-height: .98;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--sur-bleu);
}
.section--clair .lead,
.section--creme .lead,
.section--creme-clair .lead { color: var(--encre-douce); }

/* petit label majuscule precede d'un trait */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
.section--clair .eyebrow,
.section--creme .eyebrow,
.section--creme-clair .eyebrow { color: var(--cyan-fonce); }

/* label encadre (hero) */
.badge {
  display: inline-block;
  font-size: var(--t-mini);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 9, 10, .55);
  border: 1px solid rgba(255, 255, 255, .32);
  padding: 6px 12px;
  margin-bottom: 1.6rem;
}

.titre-centre { text-align: center; }
.titre-centre .eyebrow { justify-content: center; }
.titre-centre .lead { margin-inline: auto; max-width: 62ch; }

.section-intro { margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 2.75rem); }

/* liste a puces cochees */
.liste-check { display: flex; flex-direction: column; gap: .75rem; }
.liste-check li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: var(--t-base);
  font-weight: 600;
}
.liste-check li::before {
  content: "✓";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #e6f4f8;
  color: var(--cyan-fonce);
  font-size: 13px;
  display: grid;
  place-items: center;
}
.section--bleu .liste-check li::before,
.section--fonce .liste-check li::before {
  background: rgba(43, 184, 214, .16);
  color: var(--cyan);
}

/* ---------- 5. Boutons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--texte);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 14px 24px;
  min-height: 46px;            /* cible tactile confortable */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); }

.btn--cyan {
  background: var(--cyan);
  color: #0d1114;              /* 8,6:1 — largement au-dessus du seuil AA */
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(14, 116, 144, .6);
}
.btn--cyan:hover { box-shadow: 0 16px 30px -12px rgba(53, 189, 226, .65); }

.btn--plein { background: var(--cyan-fonce); color: var(--blanc); }
.btn--plein:hover { background: #0b6076; }

.btn--fantome {
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: var(--blanc);
  font-weight: 600;
}
.btn--fantome:hover { border-color: var(--cyan); background: rgba(43, 184, 214, .12); }

/* Variante contour pour FONDS CLAIRS (creme, blanc) : btn--fantome est blanc
   sur transparent, donc illisible hors des sections sombres. */
.btn--contour {
  border: 1.5px solid rgba(4, 26, 41, .22);
  color: var(--bleu);
  font-weight: 600;
}
.btn--contour:hover { border-color: var(--cyan-fonce); background: rgba(43, 184, 214, .10); }

.btn--large { width: 100%; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- 6. Topbar & navigation --------------------------------------- */
.topbar {
  background: var(--bleu-fonce);
  border-bottom: 1px solid var(--bord-sombre);
  font-size: var(--t-petit);
  color: var(--sur-bleu-doux);
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 8px;
  flex-wrap: wrap;
}
.topbar__groupe { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 7px; }
.topbar a { transition: color .2s; }
.topbar a:hover { color: var(--blanc); }
.topbar svg { width: 13px; height: 13px; opacity: .7; flex: none; }

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(6, 38, 58, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord-sombre);
  box-shadow: 0 1px 0 rgba(43, 184, 214, .16), 0 12px 32px -24px rgba(0, 0, 0, .7);
  transition: box-shadow .3s;
}
body.defile .nav { box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .55); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  transition: min-height .3s;
}
body.defile .nav__inner { min-height: 62px; }

.marque { display: flex; align-items: center; gap: 11px; flex: none; }
.marque__logo {
  background: var(--blanc);
  border-radius: 10px;
  padding: 5px 8px;
  display: flex;
  box-shadow: 0 6px 18px -9px rgba(0, 0, 0, .55);
  transition: transform var(--transition);
}
.marque:hover .marque__logo { transform: scale(1.04); }
.marque__logo img { height: 44px; width: auto; }
.marque__nom {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .03em;
  line-height: 1.05;
}
.marque__slogan {
  display: block;
  font-size: .55rem;
  letter-spacing: .28em;
  color: var(--sur-bleu-doux);
  white-space: nowrap;
  margin-top: 3px;
}

.nav__liens {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: .84rem;
  font-weight: 600;
  /* les liens se rangent a droite, contre les actions — la marque
     reste seule a gauche */
  margin-left: auto;
}
.nav__lien {
  /* padding resserre depuis le passage a 6 entrees de menu : mesure au
     navigateur, 11px de part et d'autre faisaient deborder la barre. */
  padding: 9px 8px;
  border-radius: var(--rayon-petit);
  color: var(--sur-bleu);
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav__lien:hover { background: rgba(255, 255, 255, .07); color: var(--blanc); }
.nav__lien[aria-current="page"] { background: rgba(43, 184, 214, .13); color: var(--cyan); }

/* --- sous-menu deroulant « Services » -------------------------------------
   Regle de survie : le sous-menu doit rester atteignable SANS JavaScript.
   Au-dessus de 1250px il s'ouvre au :hover ET au :focus-within (clavier) ;
   en dessous il est rendu statique et deplie en permanence (cf. section 15).
   Le JS n'ajoute que le clic sur le parent et la fermeture au clic exterieur. */
.nav__groupe { position: relative; display: flex; }
.nav__lien--parent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  color: var(--sur-bleu);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__chevron { width: 10px; height: 10px; flex: none; transition: transform .25s; }
.nav__groupe.ouvert .nav__lien--parent { background: rgba(255, 255, 255, .07); color: var(--blanc); }
.nav__groupe.ouvert .nav__chevron { transform: rotate(180deg); }

.sous-menu {
  display: grid;
  gap: 2px;
  min-width: 250px;
  padding: 6px;
  background: var(--bleu);
  border: 1px solid var(--bord-sombre);
  border-radius: 14px;
  box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .85);
}
.sous-menu__lien {
  padding: 11px 12px;
  border-radius: var(--rayon-petit);
  color: var(--sur-bleu);
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.sous-menu__lien:hover { background: rgba(255, 255, 255, .07); color: var(--blanc); }
.sous-menu__lien[aria-current="page"] { background: rgba(43, 184, 214, .13); color: var(--cyan); }

@media (min-width: 1251px) {
  .sous-menu {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 210;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav__groupe:hover .sous-menu,
  .nav__groupe:focus-within .sous-menu,
  .nav__groupe.ouvert .sous-menu { opacity: 1; visibility: visible; transform: none; }
  /* zone tampon : evite que le curseur « tombe » entre le parent et le panneau */
  .nav__groupe::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
}

.nav__actions { display: flex; gap: 12px; align-items: center; flex: none; }
.bouton-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .22);
  transition: all .2s;
  flex: none;
}
.bouton-tel:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(43, 184, 214, .1);
  transform: translateY(-2px);
}

/* bouton burger — masque au-dessus de 1080px (cf. section 15) */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .22);
  place-items: center;
  flex: none;
}
.burger__trait {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--blanc);
  border-radius: 2px;
  transition: transform .3s, opacity .2s;
}
.burger__trait + .burger__trait { margin-top: 5px; }
.burger[aria-expanded="true"] .burger__trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(430px, 58vh, 580px);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoomLent 22s ease-in-out infinite alternate;
}
/* Deux voiles superposes : un lateral pour degager la colonne de texte,
   un vertical pour garantir le contraste quelle que soit la photo.
   Le diaporama tourne sur 4 chantiers dont certains en plein soleil :
   sans renforcement, le titre passerait en blanc sur ciel bleu.
   z-index 1 : le voile couvre le diaporama (z-index 0), le contenu
   passe au-dessus (z-index 2). */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 9, 10, .5) 0%, rgba(8, 9, 10, .15) 34%, rgba(8, 9, 10, .82) 100%),
    linear-gradient(100deg, rgba(8, 9, 10, .88) 0%, rgba(8, 9, 10, .5) 56%, rgba(8, 9, 10, .18) 100%);
}
.hero__contenu { position: relative; z-index: 2; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.1rem); max-width: 660px; }
.hero__contenu h1 { margin-bottom: 1.35rem; }
.hero__contenu .lead { max-width: 470px; margin-bottom: 2.1rem; }
.hero strong { color: var(--blanc); font-weight: 700; }

/* halo anime */
.halo {
  position: absolute;
  width: min(520px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 184, 214, .28), transparent 65%);
  top: -140px;
  right: 6%;
  pointer-events: none;
  z-index: -1;
  animation: halo 9s ease-in-out infinite;
}

/* hero court des pages interieures — bandeau sobre aux tons nuit */
.hero--page { min-height: clamp(240px, 32vh, 340px); }
.hero--page .hero__voile { background: linear-gradient(100deg, var(--bleu) 12%, rgba(13, 15, 16, .82) 60%, rgba(13, 15, 16, .45) 100%); }

/* fil d'ariane */
.ariane {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: var(--t-petit);
  color: var(--sur-bleu-doux);
  margin-bottom: .9rem;
}
.ariane a:hover { color: var(--cyan); }

/* ---------- 8. Marquee & stats ------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--bord-sombre);
  padding-block: 15px;
  background: var(--bleu-fonce);
}
.marquee__piste {
  display: flex;
  width: max-content;
  animation: defile 28s linear infinite;
  white-space: nowrap;
}
.marquee__piste span {
  font-family: var(--titre);
  font-size: var(--t-petit);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sur-bleu-doux);
}
.marquee__piste i { color: var(--cyan); font-style: normal; margin-inline: 26px; }
.marquee:hover .marquee__piste { animation-play-state: paused; }

/* s'adapte seul a 3 ou 4 colonnes selon le nombre d'enfants */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  border-top: 1px solid var(--bord-sombre);
}
.stat {
  padding: clamp(1.1rem, .7rem + 1.4vw, 1.65rem) clamp(1rem, .4rem + 2vw, 2.1rem);
  border-right: 1px solid var(--bord-sombre);
}
.stat:last-child { border-right: none; }
.stats--grand .stat__valeur { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }
.stat__valeur {
  font-family: var(--titre);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 1.875rem);
  font-weight: 400;
  color: var(--cyan);
  line-height: 1.1;
}
.stat__libelle { font-size: var(--t-petit); color: var(--sur-bleu-doux); margin-top: 3px; }

/* ---------- 9. Media & cartes -------------------------------------------- */
/* conteneur d'image : le ratio est reserve, donc aucun saut de mise en page */
.media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #bcae95;         /* teinte d'attente si la photo tarde */
  aspect-ratio: 4 / 3;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--large { aspect-ratio: 16 / 9; }
.media--carre { aspect-ratio: 1; }
.media--haut  { aspect-ratio: 3 / 4; }

.carte {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--bord-clair);
  box-shadow: var(--ombre-carte);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(6, 38, 58, .4); }
.carte .media { border-radius: 0; aspect-ratio: 16 / 10; }
.carte .media img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.carte:hover .media img { transform: scale(1.06); }
.carte__corps { padding: 1rem 1.15rem; }
.carte__titre { font-family: var(--titre); font-weight: 400; font-size: 1.15rem; }
.carte__texte { font-size: var(--t-petit); color: var(--encre-pale); margin-top: .4rem; line-height: 1.6; }

/* toute la surface de la carte devient cliquable, pas seulement le libelle */
.carte__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

/* carte sur fond sombre */
.carte--sombre {
  background: rgba(255, 255, 255, .04);
  border-color: var(--bord-sombre);
  color: var(--blanc);
}
.carte--sombre .carte__texte { color: var(--sur-bleu-doux); }

/* carte avec filet cyan au survol */
.carte--filet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan-fonce), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  z-index: 2;
}
.carte--filet:hover::before { transform: scaleX(1); }

/* ---------- 10. Carrousel de realisations --------------------------------
   Remplace l'ancien bloc « temoignages » (composant retire du site : aucun
   avis verifiable, cf. contraintes de contenu). Le rail est un simple
   overflow-x + scroll-snap : il reste utilisable a la souris, au doigt et au
   clavier MEME SI site.js ne se charge pas. Le JS n'ajoute que les fleches,
   les puces et la synchronisation. */
.carrousel { position: relative; }
.carrousel__piste {
  display: flex;
  gap: clamp(.9rem, .5rem + 1.2vw, 1.15rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: var(--rayon); }

.carrousel__item {
  flex: 0 0 calc((100% - 2 * clamp(.9rem, .5rem + 1.2vw, 1.15rem)) / 3);
  scroll-snap-align: start;
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
}
.carrousel__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.carrousel__legende { padding: 1rem 1.1rem 1.15rem; }
.carrousel__titre { font-family: var(--texte); font-weight: 700; font-size: var(--t-base); color: var(--bleu); line-height: 1.25; }
.carrousel__note { display: block; margin-top: .3rem; font-size: var(--t-petit); color: var(--encre-pale); }

/* fleches : masquees tant que le JS ne les a pas activees */
.carrousel__fleche {
  display: none;
  position: absolute;
  top: calc(50% - 46px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  color: var(--bleu);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45);
  z-index: 3;
  cursor: pointer;
  transition: transform .2s, color .2s, border-color .2s;
}
.carrousel.js-actif .carrousel__fleche { display: grid; place-items: center; }
.carrousel__fleche:hover { color: var(--cyan-fonce); border-color: var(--cyan); transform: translateY(-50%) scale(1.06); }
.carrousel__fleche[disabled] { opacity: .35; pointer-events: none; }
.carrousel__fleche--prec { left: -14px; }
.carrousel__fleche--suiv { right: -14px; }
.carrousel__fleche svg { width: 18px; height: 18px; }

.puces { display: flex; gap: 8px; justify-content: center; margin-top: 1.5rem; }
.puces button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfd8dc;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.puces button[aria-selected="true"] { background: var(--cyan-fonce); transform: scale(1.35); }

/* ---------- 11. Formulaires ---------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__ligne { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ label { font-size: var(--t-petit); font-weight: 700; }
.champ .aide { font-size: var(--t-mini); color: var(--encre-pale); font-weight: 500; }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: 12px 14px;
  min-height: 46px;
  font-size: 16px;             /* < 16px ferait zoomer Safari iOS au focus */
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid #d8d3c9;
  border-radius: var(--rayon-petit);
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--cyan-fonce);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, .16);
}
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: #d1524b; }

.champ--obligatoire label::after { content: " *"; color: #d1524b; }

/* cases et radios en pastilles cliquables */
.options { display: flex; flex-wrap: wrap; gap: .6rem; }
.option {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 11px 15px;
  min-height: 44px;
  border: 1px solid #d8d3c9;
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.option:hover { border-color: var(--cyan-fonce); }
.option input { accent-color: var(--cyan-fonce); width: 17px; height: 17px; flex: none; }
.option:has(input:checked) { border-color: var(--cyan-fonce); background: #e9f5f9; }

.form__message { font-size: var(--t-petit); padding: 12px 14px; border-radius: 8px; }
.form__message--ok { background: #e8f6ee; border: 1px solid #a9d9bf; color: #1c6b42; }
.form__message--ko { background: #fdecec; border: 1px solid #f5b5b5; color: #b3261e; }

/* ---------- 12. FAQ / accordeon ------------------------------------------ */
.faq { display: grid; gap: .7rem; max-width: 820px; margin-inline: auto; }
.faq details {
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-petit);
  overflow: hidden;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-family: var(--texte);
  font-weight: 700;
  font-size: var(--t-base);
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cyan-fonce);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__reponse { padding: 0 1.25rem 1.15rem; font-size: var(--t-base); color: var(--encre-douce); line-height: 1.7; }

/* ---------- 12 bis. Composants de pages ---------------------------------- */

/* --- etapes numerotees (procede, methode de travail) ---
   Des blocs pleins, pas du texte nu : fond leger, bordure fine, et le
   numero souligne d'un filet qui court sur toute la largeur du bloc. */
.etapes {
  display: grid;
  gap: clamp(.9rem, .5rem + 1.2vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: etape;
}
/* a partir de 5 etapes, des colonnes plus etroites : les 5 tiennent
   sur une seule rangee en desktop au lieu de laisser une orpheline */
.etapes:has(> :nth-child(5)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr));
}
.etape {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
}
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--titre);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--cyan);
  padding-bottom: .8rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid rgba(53, 189, 226, .35);
}
.section--clair .etape,
.section--creme .etape,
.section--creme-clair .etape {
  background: var(--blanc);
  border-color: var(--bord-clair);
}
.section--clair .etape::before,
.section--creme .etape::before,
.section--creme-clair .etape::before {
  color: var(--cyan-fonce);
  border-bottom-color: var(--bord-clair);
}
.etape h3 { margin-bottom: .5rem; }
.etape p { font-size: var(--t-petit); line-height: 1.7; color: var(--sur-bleu-doux); }
.section--clair .etape p,
.section--creme .etape p,
.section--creme-clair .etape p { color: var(--encre-douce); }

/* --- tableau comparatif : vraie table, empilee en cartes sur mobile --- */
.comparatif { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.comparatif th, .comparatif td {
  padding: .85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--bord-clair);
  vertical-align: top;
}
.comparatif thead th {
  font-family: var(--texte);
  font-weight: 700;
  color: var(--bleu);
  background: var(--creme-fonce);
  white-space: nowrap;
}
.comparatif tbody th { font-weight: 700; color: var(--encre); }
.comparatif td { color: var(--encre-douce); }
.comparatif .oui { color: #1c6b42; font-weight: 700; }
.comparatif .non { color: #b3261e; font-weight: 700; }
.comparatif-boite { overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--bord-clair); background: var(--blanc); }

/* --- blog : sommaire d'article --- */
.sommaire { max-width: 820px; margin-inline: auto; }
.sommaire__titre {
  font-family: var(--texte);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan-fonce);
  margin-bottom: .9rem;
}
.sommaire ol { counter-reset: sommaire; display: grid; gap: .55rem; }
.sommaire li { counter-increment: sommaire; }
.sommaire a {
  display: flex;
  gap: .7rem;
  font-size: var(--t-base);
  color: var(--encre-douce);
  line-height: 1.5;
  transition: color .2s;
}
.sommaire a::before {
  content: counter(sommaire) ".";
  flex: 0 0 auto;
  font-family: var(--texte);
  font-weight: 700;
  color: var(--cyan-fonce);
}
.sommaire a:hover { color: var(--bleu); }

/* --- blog : article pas encore publie (voir assets/js/blog-schedule.js) --- */
.publish-gate__locked {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--rayon);
  border: 1px dashed rgba(4, 26, 41, .22);
  background: rgba(4, 26, 41, .03);
}
.publish-gate__locked h2 { font-size: var(--t-h3); }
.publish-gate__locked p { color: var(--encre-douce); margin-top: .8rem; }

/* --- galerie de realisations --- */
.galerie {
  display: grid;
  gap: clamp(.7rem, .4rem + 1vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.tuile {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  aspect-ratio: 4 / 3;
  background: #a9b0ae;
}
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.tuile:hover img { transform: scale(1.07); }
.tuile__legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(4, 26, 41, .88));
  color: var(--blanc);
  transition: opacity .3s;
}
.tuile__titre { font-family: var(--texte); font-weight: 700; font-size: .95rem; }
.tuile__lieu { font-size: var(--t-mini); color: rgba(255, 255, 255, .75); margin-top: 2px; }
/* sans survol possible (tactile), la legende reste toujours lisible */
@media (hover: hover) {
  .tuile__legende { opacity: 0; }
  .tuile:hover .tuile__legende, .tuile:focus-within .tuile__legende { opacity: 1; }
}

/* --- titre de groupe a l'interieur d'une galerie --- */
.titre-groupe {
  font-family: var(--titre);
  font-size: var(--t-h3);
  font-weight: 400;
  margin: 2.8rem 0 1rem;
}
.titre-groupe:first-of-type { margin-top: 0; }

/* --- avant / apres -------------------------------------------------------
   Les deux volets restent COTE A COTE a toutes les tailles, y compris en
   mobile : la comparaison est tout le propos du composant, les empiler la
   detruit (et rallonge le scroll). Pas de slider JS — deux images et deux
   etiquettes suffisent, et ca reste lisible sans JavaScript. */
.avant-apres { margin-top: 2rem; }
.avant-apres + .avant-apres { margin-top: 2.8rem; }
.avant-apres__volets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, .3rem + 1vw, 1rem);
}
.avant-apres__volet {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  aspect-ratio: 4 / 3;
  background: #a9b0ae;
  margin: 0;
}
.avant-apres__volet img { width: 100%; height: 100%; object-fit: cover; }
.avant-apres__etiquette {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 1;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-family: var(--texte);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanc);
  background: rgba(4, 26, 41, .82);
}
.avant-apres__etiquette--apres { background: var(--cyan-fonce); }
.avant-apres__legende {
  margin-top: .9rem;
  font-size: var(--t-mini);
  color: var(--encre-douce);
  max-width: 68ch;
}
.avant-apres__legende strong { color: var(--encre); }

/* --- nuancier de coloris --- */
.coloris {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.coloris__item { text-align: center; }
.coloris__pastille {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--blanc);
  box-shadow: var(--ombre-carte);
  margin-bottom: .6rem;
}
.coloris__nom { font-size: var(--t-petit); font-weight: 700; }

/* --- bloc valeurs / atouts avec icone --- */
.valeurs {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.valeur__icone {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(43, 184, 214, .14);
  color: var(--cyan);
  margin-bottom: .9rem;
}
.section--clair .valeur__icone,
.section--creme .valeur__icone,
.section--creme-clair .valeur__icone { background: #e6f4f8; color: var(--cyan-fonce); }
.valeur h3 { margin-bottom: .45rem; }
.valeur p { font-size: var(--t-petit); line-height: 1.7; color: var(--sur-bleu-doux); }
.section--clair .valeur p,
.section--creme .valeur p,
.section--creme-clair .valeur p { color: var(--encre-douce); }

/* --- articles de blog --- */
.categorie {
  display: inline-block;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan-fonce);
  background: #e6f4f8;
  padding: 5px 10px;
  border-radius: 40px;
  margin-bottom: .7rem;
}
.article-meta { font-size: var(--t-mini); color: var(--encre-pale); margin-top: .8rem; }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: var(--t-petit);
  color: var(--cyan-fonce);
  margin-top: .9rem;
}
.lien-fleche::after { content: "→"; transition: transform .25s; }
.carte:hover .lien-fleche::after { transform: translateX(4px); }

/* --- encart Facebook / bandeau transversal --- */
.encart {
  display: flex;
  flex-wrap: wrap;              /* la version d'origine debordait sous 600px */
  align-items: center;
  gap: clamp(1rem, .6rem + 1.5vw, 1.8rem);
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--bord-sombre);
}
.encart__texte { flex: 1 1 260px; }
.encart__texte p { font-size: var(--t-petit); color: var(--sur-bleu-doux); margin-top: .4rem; }

/* .encart est calibre pour les sections SOMBRES (fond blanc 4 %, bord clair).
   Sur creme ou blanc il devient un cadre invisible : on inverse les valeurs. */
.section--clair .encart,
.section--creme .encart,
.section--creme-clair .encart {
  background: rgba(4, 26, 41, .035);
  border-color: rgba(4, 26, 41, .10);
}
.section--clair .encart__texte p,
.section--creme .encart__texte p,
.section--creme-clair .encart__texte p { color: var(--encre-douce); }

/* --- calculateur d'estimation (page devis) --- */
.calcul {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: start;
}
.calcul__panneau {
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon);
  padding: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  box-shadow: var(--ombre-carte);
}
.calcul__groupe + .calcul__groupe { margin-top: 1.6rem; }
.calcul__label {
  display: block;
  font-family: var(--texte);
  font-weight: 700;
  font-size: var(--t-base);
  margin-bottom: .7rem;
}
.calcul__resultat {
  position: sticky;
  top: 96px;
  background: var(--bleu-fonce);
  border: 1px solid rgba(43, 184, 214, .3);
  border-radius: var(--rayon);
  padding: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
  color: var(--blanc);
}
.calcul__montant {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  font-weight: 400;
  color: var(--cyan);
  line-height: 1.15;
  margin-block: .3rem .2rem;
}
.calcul__mention { font-size: var(--t-mini); color: var(--sur-bleu-doux); line-height: 1.6; }
.calcul__detail { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-petit); padding-block: .55rem; border-bottom: 1px solid var(--bord-sombre); }
.calcul__detail span:last-child { font-weight: 700; }

/* les <fieldset> groupent les radios Usage / Coloris : on neutralise le rendu
   par defaut du navigateur (bordure + largeur min-content) qui casse le panneau */
.calcul__panneau fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calcul__panneau legend { padding: 0; width: 100%; }

/* avant saisie d'une surface valide, on affiche une invite a la place du prix :
   elle ne doit pas heriter du gros gabarit typographique du montant */
.calcul__montant[data-etat="vide"] {
  font-family: var(--texte);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--sur-bleu);
}

/* pastille de couleur dans chaque option de coloris — 100% CSS, aucune image */
.option__pastille {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  flex: none;
}
.option__pastille--beige      { background-color: #d8cbb2; }  /* Beige Sahara */
.option__pastille--gris       { background-color: #b7b2a8; }  /* Gris Perle   */
.option__pastille--ocre       { background-color: #c9a883; }  /* Ocre Dore    */
.option__pastille--anthracite { background-color: #8f8b83; }  /* Anthracite   */
.option__pastille--blanc      { background-color: #e4dccb; }  /* Marbre Blanc */

@media (max-width: 900px) {
  .calcul { grid-template-columns: minmax(0, 1fr); }
  .calcul__resultat { position: static; }
}

/* ---------- 13. CTA & footer --------------------------------------------- */
.cta { background: var(--bleu-fonce); text-align: center; }
.cta h2 { margin-bottom: .8rem; }
.cta p { color: var(--sur-bleu-doux); margin-bottom: 1.7rem; font-size: var(--t-lead); }
.cta .groupe-btn { justify-content: center; }

.footer { background: var(--bleu-fonce); position: relative; }
.footer__filet { height: 3px; background: linear-gradient(90deg, var(--cyan-fonce), var(--cyan) 50%, var(--cyan-fonce)); }
.footer__grille {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
  gap: clamp(1.6rem, .8rem + 2.5vw, 2.75rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem) clamp(1.8rem, 1rem + 2vw, 2.75rem);
}
.footer__titre {
  font-family: var(--texte);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer__liens { display: flex; flex-direction: column; gap: .65rem; }
.footer__liens a {
  color: rgba(255, 255, 255, .58);
  font-size: var(--t-petit);
  width: fit-content;
  transition: color .2s;
}
.footer__liens a:hover { color: var(--blanc); }
.footer__texte { font-size: var(--t-petit); color: rgba(255, 255, 255, .5); line-height: 1.75; max-width: 320px; margin-bottom: 1.4rem; }

.contact-item { display: flex; gap: .7rem; align-items: flex-start; }
.contact-item svg { flex: none; margin-top: 2px; width: 15px; height: 15px; stroke: var(--cyan); }
.contact-item__label {
  display: block;
  font-size: .63rem;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-item__valeur { font-size: var(--t-petit); color: rgba(255, 255, 255, .82); font-weight: 600; }

.bouton-facebook {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(24, 119, 242, .14);
  border: 1px solid rgba(24, 119, 242, .4);
  font-size: var(--t-petit);
  font-weight: 600;
  padding: 11px 16px;
  min-height: 44px;
  border-radius: var(--rayon-petit);
  transition: all .2s;
}
.bouton-facebook:hover { background: #1877f2; border-color: #1877f2; }

.footer__bas {
  border-top: 1px solid var(--bord-sombre);
  padding-block: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
  font-size: var(--t-mini);
  color: rgba(255, 255, 255, .35);
}
.footer__bas a { transition: color .2s; }
.footer__bas a:hover { color: var(--blanc); }
.footer__legal { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }

/* bouton d'appel flottant, mobile uniquement (cf. section 15) */
.appel-flottant {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  background: var(--cyan);
  color: var(--bleu);
  font-family: var(--texte);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 14px 20px;
  min-height: 50px;
  border-radius: 60px;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 16px 34px -12px rgba(43, 184, 214, .6);
}

/* ---------- 14. Utilitaires & animations --------------------------------- */
.pastille {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
  animation: pulse 2.2s infinite;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.centre { text-align: center; }
.mt-0 { margin-top: 0; }

@keyframes monte    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes zoomLent { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes halo     { 0%, 100% { opacity: .45; transform: none; } 50% { opacity: .85; transform: translate(-60px, 30px) scale(1.18); } }
@keyframes defile   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse    { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 184, 214, .55); } 70% { box-shadow: 0 0 0 7px rgba(43, 184, 214, 0); } }

/* Entree du hero en cascade.
   L'opacite de depart vit DANS la keyframe (+ `both`), jamais sur l'element :
   si l'animation ne se joue pas, le titre reste visible au lieu de disparaitre. */
.anim-hero > * { animation: monte .8s cubic-bezier(.22, 1, .36, 1) both; }
.anim-hero > *:nth-child(1) { animation-delay: .08s; }
.anim-hero > *:nth-child(2) { animation-delay: .2s; }
.anim-hero > *:nth-child(3) { animation-delay: .34s; }
.anim-hero > *:nth-child(4) { animation-delay: .48s; }
.anim-hero > *:nth-child(5) { animation-delay: .62s; }

/* .anim-section ne fait plus rien : les apparitions sont pilotees en JS
   (section 20). L'ancienne version reposait sur animation-timeline: view(),
   invisible sur tout navigateur qui ne connait pas encore les timelines de
   defilement — c'etait le bug « je ne vois aucune animation » du 31/08. */

/* ---------- 15. Responsive ----------------------------------------------- */

/* --- tablette paysage : la navigation passe en menu deroulant ------------- */
/* --- bascule du menu en burger -------------------------------------------
   Point de rupture PROPRE A LA NAVIGATION, volontairement separe du 1080px
   qui suit. La nav compte 6 entrees depuis le passage aux 3 poles, dont
   « Amenagement exterieur » qui est long : mesure au navigateur, la barre
   deborde des 1280px et le bouton « Devis gratuit » se fait couper.
   Le reste du responsive (split, hero) reste a 1080px : basculer les
   colonnes des 1250px degraderait la mise en page sans raison.
   Valeur verifiee par capture navigateur a 1240 / 1260 px. */
@media (max-width: 1250px) {
  .burger { display: grid; }

  .nav__liens {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bleu);
    border-bottom: 1px solid var(--bord-sombre);
    padding: .6rem var(--gouttiere) 1.1rem;
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8);

    /* ferme par defaut, sans display:none pour garder la transition */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .32s ease, opacity .22s ease, visibility .32s;
  }
  .nav__liens.ouvert {
    max-height: min(75vh, 520px);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
  }
  .nav__lien {
    padding: 13px 12px;
    font-size: .95rem;
    border-radius: var(--rayon-petit);
  }
  .nav__lien + .nav__lien { border-top: 1px solid rgba(255, 255, 255, .06); }

  /* En burger, le sous-menu « Services » n'est PAS un panneau flottant : il
     est deplie en permanence et indente. Un accordeon supplementaire aurait
     ajoute un cran de clic et serait tombe en panne sans JS. */
  .nav__groupe { display: block; border-top: 1px solid rgba(255, 255, 255, .06); }
  .nav__lien--parent { width: 100%; justify-content: space-between; cursor: default; }
  .nav__chevron { display: none; }
  .sous-menu {
    min-width: 0;
    padding: 2px 0 4px;
    margin-left: 12px;
    background: none;
    border: 0;
    border-left: 2px solid rgba(43, 184, 214, .3);
    border-radius: 0;
    box-shadow: none;
  }
  .sous-menu__lien { padding: 11px 12px; font-size: .92rem; }
}

@media (max-width: 1080px) {
  .split, .split--inverse { grid-template-columns: minmax(0, 1fr); }
  .split > .media, .split--inverse > .media { order: -1; }   /* la photo passe au-dessus */
  .split--egal { grid-template-columns: minmax(0, 1fr); }

  /* le texte occupe toute la largeur : le voile devient franchement
     vertical. Limite aux pages interieures : sur l'accueil, le voile
     du diaporama est deja calibre pour le mobile. */
  .hero--page .hero__voile {
    background: linear-gradient(180deg, rgba(13, 15, 16, .86) 0%, rgba(13, 15, 16, .78) 40%, rgba(8, 9, 10, .9) 100%);
  }
}

/* --- blog : article "digeste" (standard BE WEB, adapte aux variables R.R) ---
   Bloc ajoute le 28/08/2026 pour la mise en service du blog. Les noms de
   classes (.article-brief, .article-realisations, .article-zones, .article-more)
   sont ceux du standard ; les couleurs/rayons viennent des tokens du site. --- */
.article-body { max-width: 820px; margin-inline: auto; }
.article-body > .publish-gate__content > h2 { font-size: var(--t-h3); font-family: var(--titre); margin: 2.4rem 0 .9rem; }
.article-body p { margin-bottom: 1rem; line-height: 1.75; }
.article-body ul { list-style: none; margin: 0 0 1.2rem; padding-left: 1.2rem; }
.article-body ul li { position: relative; margin-bottom: .45rem; }
.article-body ul li::before { content: '•'; position: absolute; left: -1.1rem; color: var(--cyan-fonce); font-weight: 700; }
.article-body a:not(.btn):not(.reno-btn) { color: var(--cyan-fonce); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:not(.btn):not(.reno-btn):hover { color: var(--bleu); }
.article-body .article-meta { margin: 0 0 1.4rem; }

.article-brief { margin: 1.5rem 0 2.2rem; padding: 1.5rem 1.8rem; background: rgba(14, 116, 144, .07); border-left: 4px solid var(--cyan-fonce); border-radius: var(--rayon-petit); }
.article-brief h2 { margin: 0 0 .8rem; font-size: var(--t-mini); font-family: var(--texte); text-transform: uppercase; letter-spacing: .07em; color: var(--cyan-fonce); }
.article-brief ul { margin: 0; display: grid; gap: .55rem; }

.article-toc { margin: 1.5rem 0 2.2rem; padding: 1.5rem 1.8rem; border: 1px solid rgba(4, 26, 41, .12); border-radius: var(--rayon-petit); }
.article-toc h2 { margin: 0 0 .8rem; font-size: var(--t-mini); font-family: var(--texte); text-transform: uppercase; letter-spacing: .07em; color: var(--encre-douce); }
.article-toc ol { counter-reset: toc; margin: 0; padding-left: .2rem; list-style: none; display: grid; gap: .5rem; }
.article-toc li { counter-increment: toc; }
.article-toc a { display: inline-flex; gap: .55rem; color: var(--encre); text-decoration: none; font-weight: 600; }
.article-toc a::before { content: counter(toc) "."; font-family: var(--texte); font-weight: 700; color: var(--cyan-fonce); }
.article-toc a:hover { color: var(--cyan-fonce); }

.article-quote { margin: 2.2rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 4px solid var(--cyan-fonce); font-size: 1.18rem; line-height: 1.5; font-weight: 600; font-family: var(--texte); color: var(--encre); }

.article-realisations { margin: 3rem 0; padding: 2.6rem 1.8rem; text-align: center; background: linear-gradient(160deg, rgba(14, 116, 144, .10), rgba(14, 116, 144, .03)); border: 1px solid rgba(14, 116, 144, .28); border-radius: var(--rayon); }
.reno-eyebrow { display: inline-block; margin-bottom: .6rem; font-size: var(--t-mini); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan-fonce); }
.article-realisations h3 { margin: 0 0 .6rem; font-size: var(--t-h3); font-family: var(--titre); }
.reno-sub { margin: 0 auto 1.4rem; max-width: 460px; color: var(--encre-douce); font-size: var(--t-petit); }
.reno-buttons { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.article-realisations a.reno-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; background: var(--cyan-fonce); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--t-petit); border-radius: 999px; box-shadow: 0 4px 14px rgba(14, 116, 144, .30); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.article-realisations a.reno-btn span { transition: transform .18s ease; }
.article-realisations a.reno-btn:hover { background: var(--bleu); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14, 116, 144, .38); }
.article-realisations a.reno-btn:hover span { transform: translateX(4px); }

.article-faq { margin-top: 1rem; display: grid; gap: .7rem; }
.article-faq details.faq-item { background: var(--blanc); border: 1px solid rgba(4, 26, 41, .10); border-radius: var(--rayon-petit); }
.article-faq details.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; color: var(--encre); position: relative; padding-right: 2.4rem; }
.article-faq details.faq-item summary::-webkit-details-marker { display: none; }
.article-faq details.faq-item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; font-size: 1.2rem; color: var(--cyan-fonce); transition: transform .25s; }
.article-faq details.faq-item[open] summary::after { transform: rotate(45deg); }
.article-faq .faq-answer { padding: 0 1.25rem 1.15rem; color: var(--encre-douce); line-height: 1.7; }
.article-faq .faq-answer p { margin: 0; }

.article-more { margin: 2.2rem 0; padding-top: 1.5rem; border-top: 1px solid rgba(4, 26, 41, .12); }
.article-more h3 { font-size: 1.1rem; font-family: var(--titre); margin-bottom: .6rem; }
.article-zones { margin: 2.2rem 0; padding: 1rem 1.5rem; border-left: 3px solid var(--cyan-fonce); }
.article-zones h3 { margin: 0 0 .6rem; font-size: 1.1rem; font-family: var(--titre); }
.article-zones p { margin: 0; color: var(--encre-douce); }

/* --- tablette portrait ---------------------------------------------------- */
@media (max-width: 860px) {
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carrousel__item { flex-basis: calc((100% - clamp(.9rem, .5rem + 1.2vw, 1.15rem)) / 2); }
  .carrousel__fleche--prec { left: 2px; }
  .carrousel__fleche--suiv { right: 2px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--bord-sombre); }

  .footer__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__texte { max-width: none; }
}

/* --- mobile --------------------------------------------------------------- */
@media (max-width: 620px) {
  .topbar__inner { justify-content: center; gap: .5rem 1.1rem; font-size: var(--t-mini); }
  .topbar__groupe { gap: 1rem; justify-content: center; }
  /* on ne garde que le telephone et la zone : le reste alourdit l'entete */
  .topbar a.topbar__masquer-mobile,
  .topbar span.topbar__masquer-mobile { display: none; }

  .marque__slogan { display: none; }
  .marque__logo img { height: 36px; }
  .marque__nom { font-size: .9rem; }
  .nav__actions .btn { display: none; }        /* le CTA est repris par le bouton flottant */

  .hero__contenu .lead { max-width: none; }
  .groupe-btn > .btn { flex: 1 1 100%; }       /* boutons pleine largeur, plus faciles a viser */

  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--bord-sombre); }
  .stat:last-child { border-bottom: none; }

  .footer__grille { grid-template-columns: 1fr; }
  .footer__bas { justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; }

  .appel-flottant { display: inline-flex; }
  .footer { padding-bottom: 76px; }            /* le bouton flottant ne masque rien */

  .grille--3 { grid-template-columns: minmax(0, 1fr); }
  .carrousel__item { flex-basis: 88%; }        /* on laisse depasser la carte suivante */
}

/* --- tres petits ecrans ---------------------------------------------------- */
@media (max-width: 380px) {
  .marque__nom { font-size: .8rem; }
  .marque__logo img { height: 30px; }
}

/* --- grands ecrans : on evite l'etalement --------------------------------- */
@media (min-width: 1600px) {
  .hero__contenu { max-width: 720px; }
}

/* --- confort de lecture et impression ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .anim-hero > * { opacity: 1; }
  /* sans animation, la piste doit revenir a son point de depart */
  .marquee__piste { transform: none !important; }
}

@media print {
  .nav, .topbar, .appel-flottant, .marquee, .halo { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}

/* ---------- 16. Theme « Nuit de chantier » ------------------------------- */
/* Composants integres depuis la variante B validee (31/08/2026). */

/* --- Diaporama du hero (accueil) : fondu enchaine pilote par site.js.
   Sans JS, la premiere vue reste affichee : la page fonctionne. --- */
.diapo { position: absolute; inset: 0; z-index: 0; }
.diapo__vue {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.diapo__vue.actif { opacity: 1; }
.diapo__vue img { width: 100%; height: 100%; object-fit: cover; }

.diapo-puces {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  z-index: 4;
}
.diapo-puces button {
  width: 30px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .3s;
}
.diapo-puces button[aria-selected="true"] { background: var(--cyan); }

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

/* --- Rail scroll-snap : grille en desktop, rail horizontal sous 640px.
   Zero JS : c'est le scroll natif qui fait le travail. Les cartes font
   82% de large pour laisser depasser la suivante — c'est ce debord qui
   signale qu'on peut swiper, sans avoir a poser de fleches. --- */
@media (max-width: 640px) {
  .rail {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-bottom: .6rem;
    /* deborde volontairement la gouttiere pour que le rail
       parte du bord de l'ecran et y revienne */
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .rail--large > * { flex: 0 0 88%; }
}

/* indice de swipe, visible seulement la ou le rail existe */
.rail-note {
  display: none;
  font-family: var(--mono, inherit);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-top: .9rem;
}
@media (max-width: 640px) { .rail-note { display: block; } }
.section--bleu .rail-note { color: var(--sur-bleu-doux); }

/* --- Avant / apres au curseur : deux images superposees, un curseur
   qui devoile. Sans JS, l'input range reste utilisable au clavier et
   au doigt : c'est un vrai controle de formulaire, pas un div. --- */
.bascule {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--creme-fonce);
  isolation: isolate;
}
.bascule img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* l'image « apres » est rognee par la position du curseur */
.bascule__apres {
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.bascule__trait {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 2;
}
.bascule__trait::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
}
/* le curseur : invisible mais bien present, et focusable */
.bascule__curseur {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.bascule__curseur:focus-visible + .bascule__trait::after {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}
.bascule__etiquette {
  position: absolute;
  top: .8rem;
  z-index: 2;
  padding: .3rem .8rem;
  font-family: var(--mono, inherit);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 14, 18, .78);
  border-radius: var(--rayon-petit);
  pointer-events: none;
}
.bascule__etiquette--avant { left: .8rem; }
.bascule__etiquette--apres { right: .8rem; background: var(--cyan-fonce); }

/* --- Zones d'intervention (accueil) : deux cartes cote a cote,
   communes en pastilles uniformes alignees a gauche — remplace les
   boutons centres en drapeau, inegaux a l'oeil. --- */
.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(.9rem, .5rem + 1.2vw, 1.15rem);
  max-width: 980px;
  margin-inline: auto;
}
.zone {
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
}
.zone h3 {
  font-size: 1.15rem;
  padding-bottom: .8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bord-clair);
}
.zone__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.zone__pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* cible tactile */
  padding: 8px 16px;
  border: 1.5px solid rgba(23, 25, 27, .22);
  font-weight: 600;
  font-size: .84rem;
  color: var(--encre);
  transition: border-color .2s, background .2s;
}
.zone__pills a:hover {
  border-color: var(--cyan-fonce);
  background: rgba(53, 189, 226, .1);
}

/* ---------- 17. Animations enrichies (31/08/2026) ------------------------ */
/* Tout est en CSS scroll-driven ou en transition : rien ne casse si le
   navigateur ne suit pas, et prefers-reduced-motion coupe tout. */

@media (prefers-reduced-motion: no-preference) {

  /* (la cascade d'apparition est passee en section 20, pilotee en JS) */

  /* parallaxe du hero : le fond sur-zoome glisse vers le bas pendant que
     la page defile. Le zoomLent existant reste sur l'img ; la parallaxe
     vit sur le conteneur pour ne pas se marcher dessus. */
  @supports (animation-timeline: scroll()) {
    .hero__media,
    .diapo {
      animation: parallaxe linear both;
      animation-timeline: scroll();
      animation-range: 0 120vh;
    }
    @keyframes parallaxe {
      from { transform: scale(1.14) translateY(-3%); }
      to   { transform: scale(1.14) translateY(6%); }
    }
  }

  /* zoom doux des photos au survol */
  .media img,
  .carrousel__item img {
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  }
  .carte:hover .media img,
  .split .media:hover img,
  .carrousel__item:hover img { transform: scale(1.05); }

  /* les cartes et blocs se soulevent au survol */
  .carte,
  .etape,
  .zone {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s, border-color .35s;
  }
  .carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); }
  .etape:hover,
  .zone:hover { transform: translateY(-4px); border-color: rgba(53, 189, 226, .45); }
  .section--clair .etape:hover,
  .section--creme .etape:hover,
  .section--creme-clair .etape:hover,
  .zone:hover { box-shadow: 0 18px 40px -24px rgba(23, 25, 27, .35); }
}

/* --- Duo d'avant/apres au curseur (page realisations) : les deux
   comparaisons cote a cote, chacune avec son propre curseur. --- */
.duo-bascules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.1rem, .6rem + 1.6vw, 1.6rem);
}
.duo-bascules figure { margin: 0; }
.duo-bascules .rail-note { display: block; text-align: center; }

/* --- Carrousel photo simple : une seule photo visible, fleches par-dessus.
   Reutilise le moteur [data-carrousel] de site.js tel quel. --- */
.trio-carrousels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.1rem, .6rem + 1.6vw, 1.6rem);
}
.trio-carrousels h3 {
  font-size: 1.15rem;
  margin-bottom: .9rem;
}
.carrousel--simple .carrousel__piste { gap: 0; }
.carrousel--simple .carrousel__item {
  flex: 0 0 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--creme-fonce);
}
.carrousel--simple .carrousel__item img { aspect-ratio: 4 / 3; }
.carrousel--simple .carrousel__fleche {
  top: 50%;
  width: 40px;
  height: 40px;
}
.carrousel--simple .carrousel__fleche--prec { left: 10px; }
.carrousel--simple .carrousel__fleche--suiv { right: 10px; }
.carrousel--simple .puces { margin-top: .9rem; }

/* ---------- 18. Formulaires soignes & encadres d'options (31/08/2026) -----
   Recadrage typo : Anton n'existe qu'en graisse 400. Tout ce qui demandait
   du 700/800 dessus produisait un faux gras synthetique qui ne ressemblait
   plus a Anton — d'ou l'impression de « plein de polices ». Anton est
   desormais reserve aux grands titres et aux gros chiffres ; toute
   l'interface (boutons, labels, petits titres) est en Barlow.
   -------------------------------------------------------------------- */

/* garde-fou : Anton ne doit jamais etre demande en gras */
h1, h2, h3, h4,
.marque__nom, .stat__valeur, .calcul__montant, .titre-groupe, .carte__titre {
  font-synthesis-weight: none;
}

/* --- en-tete de carte formulaire --- */
.form-entete {
  padding: clamp(1.2rem, 1rem + 1vw, 1.6rem) clamp(1.15rem, 1rem + 1vw, 1.7rem);
  background: var(--creme);
  border-bottom: 1px solid var(--bord-clair);
}
.form-entete h2,
.form-entete h3 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  color: var(--encre);
  margin: 0;
}
.form-entete p {
  margin-top: .45rem;
  font-size: var(--t-petit);
  color: var(--encre-pale);
}
.form-corps { padding: clamp(1.2rem, 1rem + 1vw, 1.8rem) clamp(1.15rem, 1rem + 1vw, 1.7rem); }

/* --- champs --- */
.champ label {
  font-family: var(--texte);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ .aide { text-transform: none; letter-spacing: 0; }

.champ input,
.champ textarea,
.champ select {
  font-family: var(--texte);
  background: #fbfaf8;
  border: 1px solid var(--bord-clair);
  min-height: 50px;
  padding: 13px 15px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.champ input::placeholder,
.champ textarea::placeholder { color: #a9a49b; }
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  background: var(--blanc);
  border-color: var(--cyan-fonce);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, .14);
}
.champ--obligatoire label::after { color: var(--cyan-fonce); }

/* le bouton d'envoi prend toute la largeur : plus facile a viser */
.form .btn--large { width: 100%; margin-top: .3rem; }

/* ligne de reassurance sous le bouton */
.form-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-top: .9rem;
  font-size: var(--t-mini);
  color: var(--encre-pale);
}
.form-reassurance span { display: inline-flex; align-items: center; gap: .4rem; }
.form-reassurance svg { width: 14px; height: 14px; color: var(--cyan-fonce); flex: none; }

/* --- encadres d'options : le choix multiple devient une grille de cadres
   cliquables plutot qu'une liste deroulante ou des pastilles serrees --- */
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: .55rem;
}
.option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 13px 14px;
  min-height: 52px;
  background: #fbfaf8;
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-petit);
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 1.25;
  color: var(--encre);
  cursor: pointer;
  transition: border-color .22s, background .22s, transform .22s, box-shadow .22s;
}
.option:hover {
  border-color: var(--cyan-fonce);
  background: var(--blanc);
  transform: translateY(-2px);
}
.option:has(input:checked) {
  border-color: var(--cyan-fonce);
  background: #eaf5f9;
  box-shadow: inset 0 0 0 1px var(--cyan-fonce);
}
.option:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.option svg { width: 18px; height: 18px; flex: none; color: var(--cyan-fonce); }

/* --- bloc signature : le logo de l'entreprise a cote du texte --- */
.signature {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  background: var(--bleu-fonce);
  border: 1px solid var(--bord-sombre);
  border-top: 3px solid var(--cyan);
}
/* le logo a des aplats noirs : sur le fond nuit il faut une plaque claire,
   comme dans la barre de navigation */
.signature__logo {
  display: block;
  width: min(240px, 78%);
  height: auto;
  padding: 12px 16px;
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
}
.signature__nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  letter-spacing: .03em;
  color: var(--blanc);
  text-transform: uppercase;
}
.signature__role {
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: .3rem;
}
.signature__faits {
  display: grid;
  gap: .55rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bord-sombre);
}
.signature__fait {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-petit);
}
.signature__fait dt { color: var(--sur-bleu-doux); }
.signature__fait dd { margin: 0; font-weight: 600; color: var(--blanc); text-align: right; }

/* --- une valeur illustree par une vraie photo de chantier --- */
.valeur--photo { display: flex; flex-direction: column; }
.valeur--photo .valeur__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.1rem;
  background: var(--creme-fonce);
}
.valeur--photo .valeur__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.valeur--photo:hover .valeur__photo img { transform: scale(1.06); }
.valeur--photo .valeur__icone {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 0;
  background: var(--cyan);
  color: var(--bleu-fonce);
}

@media (max-width: 760px) {
  .signature__logo { width: min(190px, 60%); }
  .options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
}

/* un groupe d'encadres est un <fieldset> : le navigateur lui met des marges
   et une bordure par defaut qu'il faut neutraliser */
fieldset.champ { border: 0; padding: 0; margin: 0; min-width: 0; }
.champ__legende {
  padding: 0;
  margin-bottom: .4rem;
  font-family: var(--texte);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* --- encadres generiques : sert des que plusieurs elements de meme rang
   doivent etre lisibles d'un coup d'oeil (garanties, criteres, options) --- */
.cadres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(.7rem, .5rem + .8vw, 1rem);
}
.cadre {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(1rem, .85rem + .7vw, 1.35rem);
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  border-top: 3px solid var(--cyan-fonce);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
}
.cadre:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(23, 25, 27, .35);
}
.cadre__titre {
  font-family: var(--texte);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--encre);
}
.cadre__texte {
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--encre-pale);
}
.cadre__marque {
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan-fonce);
}
/* sur fond sombre, l'encadre s'inverse */
.section--bleu .cadre,
.cta .cadre {
  background: rgba(255, 255, 255, .04);
  border-color: var(--bord-sombre);
  border-top-color: var(--cyan);
}
.section--bleu .cadre__titre { color: var(--blanc); }
.section--bleu .cadre__texte { color: var(--sur-bleu-doux); }
.section--bleu .cadre__marque { color: var(--cyan); }

/* colonne « signature + photo » a cote d'un texte de presentation */
.colonne-signature { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.4rem); align-content: start; }

/* ---------- 19. Animations, suite (31/08/2026) --------------------------- */
/* Meme principe qu'en section 17 : scroll-driven pur, coupe par
   prefers-reduced-motion, et sans effet si le navigateur ne suit pas. */

@media (prefers-reduced-motion: no-preference) {

  /* (les apparitions de cette section sont passees en section 20, en JS) */


  /* soulignement des liens de navigation */
  .nav__lien { position: relative; }
  .nav__lien::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .nav__lien:hover::after,
  .nav__lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

  /* le bouton principal s'eclaire au survol */
  .btn { position: relative; overflow: hidden; }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }
  .btn:hover::before { transform: translateX(120%); }

  /* les encadres d'option et de garantie repondent au clic */
  .option:active, .cadre:active { transform: translateY(-1px) scale(.995); }

  /* le logo de la signature respire doucement au survol du bloc */
  .signature__logo { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .signature:hover .signature__logo { transform: scale(1.04); }
}

/* --- page contact : le formulaire prend plus de place que les coordonnees,
   et la colonne de droite reste visible pendant qu'on remplit --- */
.split--contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.split--contact > :last-child {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 1.4rem;
  align-content: start;
}
.colonne-contact__titre {
  font-size: var(--t-h3);
  margin-bottom: -.5rem;
}
.cadres--colonne { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .split--contact { grid-template-columns: 1fr; }
  .split--contact > :last-child { position: static; }
}

/* --- corrections de detail reperees a la relecture (31/08/2026) --- */

/* le titre de carte collait au texte : Anton a une interligne de .98 */
.carte__titre { line-height: 1.12; margin-bottom: .5rem; }
.carte__texte { margin-top: 0; }

/* les cartes d'une meme rangee n'ont pas le meme volume de texte :
   le lien final se cale en bas pour que toute la rangee s'aligne.
   ATTENTION : `height: 100%` sur le corps ecrasait la PHOTO des cartes sans
   texte (bug du 31/08 sur « Ce que donne un tapis de pierre pose »). Le corps
   ne prend la hauteur restante que s'il a un lien a pousser vers le bas, et la
   photo est protegee par `flex: none`. */
.carte__corps { display: flex; flex-direction: column; gap: .55rem; }
.carte__corps > p { margin: 0; }
.carte__corps:has(.lien-fleche) { flex: 1; }
.carte__corps > p:last-child:has(.lien-fleche) { margin-top: auto; padding-top: .5rem; }
.grille > .carte { display: flex; flex-direction: column; }
.grille > .carte > .media,
.carte__lien > .media { flex: none; }
.grille > .carte > .carte__lien { flex: 1; display: flex; flex-direction: column; }

/* les libelles du simulateur suivent la meme regle que les autres champs */
.calcul__label {
  font-size: var(--t-mini);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.calcul--sombre .calcul__label,
.section--bleu .calcul__label { color: var(--sur-bleu); }

/* deux encadres qui se comparent, centres sous un titre */
.cadres--duo {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: 820px;
  margin-inline: auto;
}
.cadre__chiffre {
  font-family: var(--titre);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--cyan-fonce);
}
.cadre--accent {
  border-top-width: 3px;
  border-top-color: var(--cyan-fonce);
  background: #f6fbfd;
}
.section--bleu .cadre--accent { background: rgba(53, 189, 226, .09); }
.section--bleu .cadre__chiffre { color: var(--cyan); }

/* dans un split, la photo remplit la hauteur du texte au lieu de flotter
   au milieu d'une colonne trop haute (le « trou » signale le 31/08) */
@media (min-width: 900px) {
  .split > .media,
  .split--inverse > .media,
  .split--egal > .media {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 340px;
  }
}

/* Sous 520px, deux encadres cote a cote laissent trop peu de place :
   « AMENAGEMENT EXTERIEUR » debordait du cadre. Une seule colonne. */
@media (max-width: 520px) {
  .options { grid-template-columns: 1fr; }
}
/* filet de securite : un libelle tres long se coupe plutot que de deborder */
.option { min-width: 0; overflow-wrap: break-word; }

/* .encart est calibre pour les sections sombres. Dans une carte blanche
   (bandeau « vos choix ont bien ete repris » du formulaire), il devenait
   un cadre invisible et centre. */
.carte .encart,
.form-corps .encart {
  display: block;
  max-width: none;
  margin-inline: 0;
  padding: 1rem 1.15rem;
  background: #eaf5f9;
  border: 1px solid rgba(14, 116, 144, .28);
  border-left: 3px solid var(--cyan-fonce);
  color: var(--encre);
}
.carte .encart p,
.form-corps .encart p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }

/* --- Carrousel large : une seule photo, pleine largeur du contenu.
   Reutilise le moteur [data-carrousel] de site.js, comme les carrousels
   de la page realisations. --- */
.carrousel--large { max-width: 1000px; margin-inline: auto; }
.carrousel--large .carrousel__piste { gap: 0; }
.carrousel--large .carrousel__item {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--creme-fonce);
}
.carrousel--large .carrousel__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.carrousel__etiquette {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .7rem 1.1rem;
  background: var(--bleu-fonce);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.carrousel--large .carrousel__fleche { top: 50%; width: 46px; height: 46px; }
.carrousel--large .carrousel__fleche--prec { left: 12px; }
.carrousel--large .carrousel__fleche--suiv { right: 12px; }
.carrousel--large .puces { margin-top: 1rem; }

@media (max-width: 520px) {
  .carrousel--large .carrousel__item img { aspect-ratio: 4 / 3; }
  .carrousel__etiquette { padding: .55rem .8rem; font-size: var(--t-mini); }
}

/* --- Prestations et avantages : encadres, et plus de rangee orpheline ---
   Avec 5 ou 6 items, l'auto-fit sortait 4 colonnes puis une rangee de 1 ou 2
   items, d'ou le « trou a droite ». On impose 3 colonnes des 5 items. */
.valeurs:has(> :nth-child(5)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, .6rem + .8vw, 1.1rem);
}

/* chaque prestation devient un encadre, comme les autres blocs du site.
   Les valeurs illustrees d'« A propos » gardent leur mise en page photo. */
.valeur:not(.valeur--photo) {
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, .9rem + .8vw, 1.5rem);
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  border-top: 3px solid var(--cyan-fonce);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
.valeur:not(.valeur--photo):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(23, 25, 27, .35);
}
.valeur:not(.valeur--photo) h3 { margin-bottom: .5rem; line-height: 1.12; }
.valeur:not(.valeur--photo) p { font-size: var(--t-petit); color: var(--encre-pale); line-height: 1.6; }
.valeur:not(.valeur--photo) .valeur__icone { margin-bottom: .8rem; border-radius: 0; }

/* sur fond sombre, l'encadre s'inverse */
.section--bleu .valeur:not(.valeur--photo) {
  background: rgba(255, 255, 255, .04);
  border-color: var(--bord-sombre);
  border-top-color: var(--cyan);
}
.section--bleu .valeur:not(.valeur--photo) p { color: var(--sur-bleu-doux); }

@media (max-width: 900px) {
  .valeurs:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .valeurs:has(> :nth-child(5)) { grid-template-columns: 1fr; }
}

/* Le bouton fantome est calibre pour les fonds sombres (bord et texte blancs).
   Sur creme ou blanc il devenait illisible : on inverse. */
.section--clair .btn--fantome,
.section--creme .btn--fantome,
.section--creme-clair .btn--fantome,
.carte .btn--fantome {
  border-color: rgba(23, 25, 27, .28);
  color: var(--encre);
}
.section--clair .btn--fantome:hover,
.section--creme .btn--fantome:hover,
.section--creme-clair .btn--fantome:hover,
.carte .btn--fantome:hover {
  border-color: var(--cyan-fonce);
  background: rgba(14, 116, 144, .08);
  color: var(--cyan-fonce);
}
/* l'encart de conclusion s'aligne sur la largeur des encadres au-dessus */
.section .cadres + .encart { max-width: none; }

/* Cas des CINQ prestations (page construction) : 3 colonnes laissent un vide
   a droite sur la 2e rangee. En flex, la rangee incomplete se centre. */
.valeurs:has(> :nth-child(5):last-child) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.valeurs:has(> :nth-child(5):last-child) > .valeur {
  flex: 0 1 calc(33.333% - .75rem);   /* base a 33 % : jamais 4 par rangee */
  max-width: calc(33.333% - .75rem);
}
@media (max-width: 900px) {
  .valeurs:has(> :nth-child(5):last-child) > .valeur { max-width: calc(50% - .55rem); }
}
@media (max-width: 560px) {
  .valeurs:has(> :nth-child(5):last-child) > .valeur { max-width: 100%; }
}

/* --- Rangees orphelines dans .grille (pages SEO, blog, tapis de pierre) ----
   L'auto-fit sort 4 colonnes : 6 cartes donnaient 4 + 2, 10 cartes 4 + 4 + 2,
   avec un vide a droite. Regles au-dessus du point de bascule du rail (640px)
   pour ne pas perturber le scroll-snap mobile.
   .grille--3 et .grille--4 imposent deja leur compte : on les laisse. */
@media (min-width: 641px) {
  /* exactement 6 : deux rangees pleines de trois */
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* exactement 5, ou 7 et plus : la derniere rangee se centre */
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(5):last-child),
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(7)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(5):last-child) > * {
    flex: 0 1 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(7)) > * {
    flex: 0 1 calc(25% - 1.2rem);
    max-width: calc(25% - 1.2rem);
  }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(5):last-child) > *,
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(7)) > * {
    flex: 0 1 calc(50% - .75rem);
    max-width: calc(50% - .75rem);
  }
  .grille:not(.grille--3):not(.grille--4):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Blog : la grille s'adapte au nombre d'articles deja parus ------------
   Les articles suivants sont deja en ligne mais masques jusqu'a leur date
   (blog-schedule.js). Avec une seule carte publiee, la grille en 4 colonnes
   laissait une vignette perdue au milieu du vide. --- */
.grille[data-grille-articles][data-visibles="1"] > .carte:not([style*="none"]) {
  flex: 0 1 auto;
  width: min(100%, 620px);
  max-width: min(100%, 620px);
  margin-inline: auto;
}
.grille[data-grille-articles][data-visibles="2"] > .carte:not([style*="none"]),
.grille[data-grille-articles][data-visibles="3"] > .carte:not([style*="none"]) {
  flex: 0 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}
@media (min-width: 641px) {
  [data-grille-articles][data-visibles="1"],
  [data-grille-articles][data-visibles="2"],
  [data-grille-articles][data-visibles="3"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
  [data-grille-articles][data-visibles="1"] { grid-template-columns: 1fr; }
  [data-grille-articles][data-visibles="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.parution {
  margin-top: 1.6rem;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan-fonce);
}
.section--bleu .parution { color: var(--cyan); }

/* --- Duo de taux : le chiffre qui compte, mis en face de l'autre --------- */
.taux-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(.7rem, .5rem + .8vw, 1rem);
  max-width: 720px;
  margin-inline: auto;
}
.taux {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1.1rem, .9rem + .9vw, 1.6rem);
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  text-align: center;
}
.taux__valeur {
  font-family: var(--titre);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1;
  color: var(--encre-pale);
}
.taux__libelle {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-pale);
  line-height: 1.4;
}
.taux--fort {
  background: #eaf5f9;
  border-color: var(--cyan-fonce);
  box-shadow: inset 0 0 0 1px var(--cyan-fonce);
}
.taux--fort .taux__valeur { color: var(--cyan-fonce); }
.taux--fort .taux__libelle { color: var(--encre); }

/* ==========================================================================
   21. Rideau d'ouverture (accueil uniquement) — 31/08/2026

   Logo, nom, slogan, zone d'intervention, puis le rideau se leve sur le site.
   Trois garde-fous :
     - la disparition est faite par l'ANIMATION elle-meme (forwards), donc le
       rideau se leve meme si le JavaScript ne tourne pas ;
     - un script inline dans le <head> d'index.html pose `.intro-off` sur
       <html> quand l'intro a deja ete vue dans la session, AVANT le premier
       rendu (sinon elle clignote a chaque retour sur l'accueil) ;
     - prefers-reduced-motion la supprime completement.
   Duree totale : 2,5 s. Ne pas l'allonger : au-dela, on perd le visiteur.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--gouttiere, 1.2rem);
  background: var(--bleu-fonce);
  animation: introRideau 2.5s cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes introRideau {
  0%, 72%   { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }
  100%      { opacity: 1; visibility: hidden; clip-path: inset(0 0 100% 0);
              pointer-events: none; }
}

/* halo discret derriere le bloc, dans la teinte de la marque */
.intro::before {
  content: "";
  position: absolute;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 189, 226, .17), transparent 68%);
  animation: introHalo 2.5s ease-out forwards;
}
@keyframes introHalo {
  0%   { opacity: 0; transform: scale(.7); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

.intro__bloc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.intro__logo {
  width: min(280px, 62vw);
  height: auto;
  padding: 14px 20px;
  background: var(--blanc);
  animation: introLogo .9s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes introLogo {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.intro__nom {
  font-family: var(--titre);
  font-size: clamp(1.7rem, 1.1rem + 3vw, 2.9rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--blanc);
  animation: introMonte .8s cubic-bezier(.22, 1, .36, 1) .28s both;
}

.intro__trait {
  width: 74px;
  height: 3px;
  background: var(--cyan);
  transform-origin: center;
  animation: introTrait .7s cubic-bezier(.22, 1, .36, 1) .5s both;
}
@keyframes introTrait {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.intro__slogan {
  font-family: var(--mono);
  font-size: clamp(.78rem, .7rem + .4vw, .95rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
  animation: introMonte .8s cubic-bezier(.22, 1, .36, 1) .62s both;
}

.intro__lieu {
  font-size: var(--t-petit);
  color: var(--sur-bleu-doux);
  animation: introMonte .8s cubic-bezier(.22, 1, .36, 1) .78s both;
}

@keyframes introMonte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* deja vue dans cette session : rien du tout */
.intro-off .intro { display: none; }

/* et jamais pour qui demande moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* --- BUG CORRIGE 31/08/2026 : les pastilles de « Nos coloris de pierre »
   (page tapis de pierre) n'avaient AUCUNE couleur. Le HTML appelle
   .coloris__pastille--sahara / --perle / --ocre / --anthracite / --marbre,
   mais seules les .option__pastille--* du simulateur existaient : cinq
   cercles blancs vides s'affichaient depuis la mise en ligne.
   Memes teintes que le simulateur de /devis, pour rester coherent. --- */
.coloris__pastille--sahara     { background-color: #d8cbb2; }  /* Beige Sahara */
.coloris__pastille--perle      { background-color: #b7b2a8; }  /* Gris Perle   */
.coloris__pastille--ocre       { background-color: #c9a883; }  /* Ocre Dore    */
.coloris__pastille--anthracite { background-color: #8f8b83; }  /* Anthracite   */
.coloris__pastille--marbre     { background-color: #e4dccb; }  /* Marbre Blanc */

/* ==========================================================================
   20. Apparitions au defilement — pilotees en JavaScript (31/08/2026)

   POURQUOI PAS DE CSS PUR : la version precedente utilisait
   `animation-timeline: view()`. C'est elegant, mais c'est une technologie
   recente — Firefox et Safari ne l'ont eue que tres tard, et sur un
   navigateur qui ne la connait pas AUCUNE apparition ne se jouait. Le hero
   marchait (animation CSS classique a delais), tout le reste etait fige.

   Ici c'est un IntersectionObserver (supporte partout depuis 2019) qui pose
   la classe `.vu`. Le CSS ne fait que des transitions : previsible et
   identique sur tous les navigateurs.

   Le masquage n'existe que sous `html.anim-js`, une classe posee par un
   script inline dans le <head> UNIQUEMENT si IntersectionObserver existe et
   si le visiteur ne demande pas moins d'animations. Sans JavaScript, rien
   n'est cache : la page s'affiche normalement.
   ========================================================================== */

.anim-js .anim {
  opacity: 0;
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1),
              transform .85s cubic-bezier(.22, 1, .36, 1),
              clip-path .95s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}
.anim-js .anim.vu { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* --- les differentes facons d'apparaitre --- */

/* par defaut : monte en fondu */
.anim-js .anim                { transform: translateY(34px); }

/* titres : se decouvrent par le haut, comme un rideau qui se leve */
.anim-js .anim--titre         { transform: translateY(38px); clip-path: inset(0 0 105% 0); }

/* sur-titres et lignes de liste : arrivent par la gauche */
.anim-js .anim--gauche        { transform: translateX(-32px); }

/* photos : le cadre se devoile de haut en bas et le zoom se relache */
.anim-js .anim--photo         { clip-path: inset(0 0 100% 0); opacity: 1; }
.anim-js .anim--photo img     { transform: scale(1.1); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.anim-js .anim--photo.vu img  { transform: none; }

/* blocs et cartes : montent avec un leger agrandissement */
.anim-js .anim--bloc          { transform: translateY(38px) scale(.96); }

/* boutons : arrivent avec un petit rebond */
.anim-js .anim--bouton        { transform: translateY(16px) scale(.94); }
.anim-js .anim--bouton.vu     { transition-timing-function: cubic-bezier(.34, 1.45, .64, 1); }

/* chiffres mis en avant : montent en grandissant */
.anim-js .anim--chiffre       { transform: translateY(24px) scale(.8); }
.anim-js .anim--chiffre.vu    { transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }

/* le trait du sur-titre se dessine, une fois le sur-titre en place */
.anim-js .eyebrow::before     { width: 0; opacity: 0; transition: width .55s cubic-bezier(.22, 1, .36, 1) .18s, opacity .3s .18s; }
.anim-js .eyebrow.vu::before  { width: 24px; opacity: 1; }

/* le filet d'accent en tete d'encadre se tire de gauche a droite */
.anim-js .cadre, .anim-js .signature, .anim-js .taux { position: relative; }
.anim-js .cadre::after,
.anim-js .signature::after,
.anim-js .taux--fort::after {
  content: "";
  position: absolute;
  inset: -3px 0 auto 0;
  height: 3px;
  background: var(--cyan-fonce);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1) .15s;
}
.anim-js .signature::after,
.anim-js .section--bleu .cadre::after { background: var(--cyan); }
.anim-js .cadre.vu::after,
.anim-js .signature.vu::after,
.anim-js .taux--fort.vu::after { transform: scaleX(1); }
/* la bordure statique s'efface pour laisser la place au filet anime */
.anim-js .cadre         { border-top-color: var(--bord-clair); }
.anim-js .signature     { border-top-color: var(--bord-sombre); }

/* un contenu deja au-dessus de la ligne de flottaison ne doit pas attendre */
.anim-js .anim--direct  { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .anim-js .anim { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* Sous 640px, .rail devient un defilement HORIZONTAL : ses cartes hors ecran
   ne sont jamais vues par l'observateur (il travaille sur le viewport, pas sur
   le conteneur). Elles resteraient invisibles jusqu'au premier swipe.
   On les affiche donc sans animation dans ce mode. */
@media (max-width: 640px) {
  .anim-js .rail > .anim,
  .anim-js .rail > .anim.vu {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}