/* ==========================================================================
   Multi-Services Ma-Gi — feuille de style
   ==========================================================================

   REGISTRE : papier imprimé, pas tableau de bord SaaS.
   Un entrepreneur en rénovation n'a pas de photos à montrer aujourd'hui. La
   version precedente comblait ce vide avec des icones (81 sur le site), des
   pastilles, des ombres portees, des degrades et un bandeau vert pleine
   largeur. C'est exactement ce qui fait lire un site comme un gabarit.
   Le vide se comble ici par de la TYPOGRAPHIE et du blanc, pas par du decor.

   Trois regles qui tiennent tout :
   1. Une icone doit LEVER UNE AMBIGUITE, jamais decorer. Aucune n'en levait.
   2. Un filet de 1 px separe mieux que deux fonds differents et une ombre.
   3. Le vert est un TAMPON, pas une peinture : liens, un bouton, une legende.

   Les jetons (--green, --sand, --radius-xl, --shadow-md...) gardent leurs NOMS
   parce que admin.css et soumission.css les consomment. Seules leurs VALEURS
   changent : l'admin et les documents suivent le meme mouvement sans edition.
   ========================================================================== */

:root {
  /* Vert du logo, assombri et desature : #4A9F22 pleine surface virait au
     fluo. Il ne sert plus qu'en petites quantites, ou il peut etre franc. */
  --green:      #3D7A22;
  --green-600:  #33681C;
  --green-700:  #2A5717;
  --green-050:  #F1F5EC;
  --green-100:  #DCE7D1;

  /* Encre chaude plutot que gris-bleu : la page doit avoir la temperature
     d'un papier, pas d'un ecran. */
  --ink-900:    #121311;
  --ink:        #1A1917;
  --ink-800:    #26251F;
  --ink-700:    #3B3830;
  --muted:      #6E6A61;
  --muted-2:    #948F84;

  --paper:      #FFFFFF;   /* fonds de cartes (admin, documents) */
  --shell:      #FBFAF6;   /* le papier du site */
  --sand:       #F2EFE7;   /* la bande calme */
  --line:       rgba(26,25,23,.16);
  --line-soft:  rgba(26,25,23,.09);
  --line-dark:  rgba(255,255,255,.14);

  /* Angles quasi vifs. Les rayons de 20-28 px etaient la signature « carte
     d'application » qui donnait le ton gabarit. --pill reste defini : l'admin
     s'en sert pour de vraies pastilles d'etat, ou c'est justifie. */
  --radius:     3px;
  --radius-lg:  3px;
  --radius-xl:  4px;
  --pill:       999px;

  /* Ombres reduites au strict minimum. Rien ne flotte sur ce site. */
  --shadow-sm:  0 1px 2px rgba(26,25,23,.05);
  --shadow-md:  0 1px 3px rgba(26,25,23,.06);
  --shadow-lg:  0 2px 8px rgba(26,25,23,.08);
  --glow:       none;
  --glow-hover: none;

  --nav-h:      72px;
  --maxw:       1140px;

  /* Serif de texte pour les titres, grotesque pour tout le reste. C'est le
     couple qui se lit comme « compose par quelqu'un » plutot que « genere ».
     --f-display reste le SANS : admin.css et soumission.css l'utilisent pour
     leurs libelles d'interface, ou une serif serait deplacee. */
  --f-title:    'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-display:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:     'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html {
  overflow-x: clip;           /* jamais overflow:hidden (tue les sticky) */
  -webkit-text-size-adjust: 100%;
  /* PAS de scroll-behavior: smooth — interdit sur une page Lenis */
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
/* Sans ca, une image dont le CSS fixe la largeur garde la HAUTEUR de son
   attribut HTML et s'ecrase. Les regles qui posent une hauteur explicite
   (.nav__brand img, .figure-tile--photo img) sont plus specifiques et gagnent. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2 {
  font-family: var(--f-title);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0 0 .46em;
}
h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(37px, 5.4vw, 64px); }
h2 { font-size: clamp(27px, 3.4vw, 42px); }
h3 { font-size: clamp(17.5px, 1.5vw, 20px); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--green); color: #fff; }

.accent { color: var(--green); }

/* Un lien dans le corps du texte est souligne. C'est la seule decoration de
   lien du site — plus de gras vert sans soulignement, qui ne se distingue pas
   d'un mot en emphase.
   `:not(.crumbs)` : le fil d'Ariane est aussi un <p> dans <main>, et il a sa
   propre couleur sur fond sombre. Sans cette exclusion, « Accueil » sortait
   vert souligne sur le bandeau noir de chaque page interieure. */
.prose-link,
main p:not(.crumbs):not(.form__note) a:not(.btn):not(.cta__tel):not(.lien-suite):not(.hero__tel) {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--green-100);
  transition: text-decoration-color .18s;
}
.prose-link:hover,
main p:not(.crumbs):not(.form__note) a:not(.btn):not(.cta__tel):not(.lien-suite):not(.hero__tel):hover { text-decoration-color: var(--green); }

/* helpers Lenis (obligatoires) */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - 44px, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(58px, 7vw, 104px) 0; position: relative; }
.section--sand { background: var(--sand); }
.section--ink  { background: var(--ink-900); color: #B9B5AC; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--tight { padding-block: clamp(44px, 5vw, 70px); }

/* Un filet remplace un changement de fond. Deux sections claires de suite se
   separent par une ligne, pas par une alternance blanc/beige qui finit par
   ressembler a un empilement de blocs generes. */
.section--rule { border-top: 1px solid var(--line-soft); }

.eyebrow {
  display: block;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 15px;
}
.hero .eyebrow, .pagehead .eyebrow, .cta .eyebrow, .section--ink .eyebrow {
  color: rgba(255,255,255,.42);
}

.lede {
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--muted);
  max-width: 60ch;
}
.section--ink .lede, .cta .lede, .pagehead .lede, .hero .lede { color: #9E9A91; }

.section-head { max-width: 720px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  letter-spacing: .005em;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--primary:hover { background: var(--green-700); border-color: var(--green-700); }

.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-800); border-color: var(--ink-800); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--lg { padding: 17px 32px; font-size: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Lien-fleche : remplace les boutons secondaires a icone qui pointaient vers
   les pages interieures. Un lien souligne suffit a dire « suite ». */
.lien-suite {
  display: inline-block;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .18s, color .18s;
}
.lien-suite:hover { border-color: var(--green); color: var(--green-700); }
.section--ink .lien-suite, .cta .lien-suite { color: #fff; border-color: rgba(255,255,255,.3); }
.section--ink .lien-suite:hover, .cta .lien-suite:hover { border-color: #fff; color: #fff; }

/* --------------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, height .25s ease;
}
.nav__inner {
  width: min(100% - 44px, var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; }
.nav__brand img { height: 40px; width: auto; transition: height .25s ease; }
.nav__name {
  font-family: var(--f-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: -.01em; line-height: 1.15; color: #fff;
}
.nav__name span {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42);
}

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  font-family: var(--f-display); font-weight: 600; font-size: 14.5px;
  color: rgba(255,255,255,.72);
  position: relative; padding: 5px 0;
  transition: color .18s ease;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor;
  transition: width .22s ease;
}
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }

.nav__cta { display: flex; align-items: center; gap: 14px; }
/* Le numero est ecrit, pas emballe. Une pastille vert translucide avec une
   icone de combine ne rend pas un numero plus lisible ni plus cliquable. */
.nav__tel {
  font-family: var(--f-display); font-weight: 700; font-size: 15.5px; color: #fff;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 2px;
  transition: border-color .18s;
}
.nav__tel:hover { border-color: #fff; }

.nav.is-scrolled, body.nav--no-hero .nav {
  background: var(--ink-900);
  border-bottom-color: var(--line-dark);
  height: 64px;
}
.nav.is-scrolled .nav__brand img, body.nav--no-hero .nav__brand img { height: 36px; }

/* burger */
/* flex-column, PAS grid : en grid les 3 lignes se repartissent sur les 44 px
   et le translateY(7px) de l'etat ouvert ne referme plus le X. */
.burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 22px; height: 1.5px; background: #fff;
  transition: transform .28s ease, opacity .18s ease;
}
.burger span + span { margin-top: 5px; }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Le panneau descend jusqu'en bas : arrete a la hauteur de son contenu, il
   laissait depasser le bouton du hero, coupe en deux sous son bord. */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 890;
  background: var(--ink-900);
  padding: 10px 22px 24px;
  display: none; flex-direction: column;
  overflow-y: auto;
}
.nav.is-scrolled ~ .mobile-menu, body.nav--no-hero .mobile-menu { top: 64px; }
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  font-family: var(--f-display); font-weight: 600; font-size: 16.5px; color: #E4E1DA;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: 18px; }

/* --------------------------------------------------------------- hero */
/* Fond plat. La version precedente empilait un halo vert radial, une trame de
   plan masquee, une bande diagonale floue et un filigrane du logo a 8,5 %
   d'opacite : quatre couches de decor pour dire la meme chose que le texte. */
.hero {
  position: relative;
  min-height: min(86svh, 760px);
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 76px) 0 clamp(48px, 6vw, 76px);
  background: var(--ink-900);
}
.hero__grid { max-width: 940px; }
.hero h1 {
  color: #fff;
  font-size: clamp(40px, 6vw, 74px);
  line-height: 1.03;
  margin-bottom: 22px;
  max-width: 16ch;
}
.hero .lede { color: #A39F95; max-width: 52ch; }
.hero .btn-row { margin-top: 34px; gap: 22px; }

/* Le telephone est le premier appel a l'action : il est ECRIT en grand, il
   n'est pas un bouton parmi deux. */
.hero__tel {
  font-family: var(--f-title); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px); color: #fff;
  letter-spacing: -.02em; line-height: 1;
  border-bottom: 2px solid var(--green);
  padding-bottom: 5px;
  transition: color .18s, border-color .18s;
}
.hero__tel:hover { color: #A7CE8C; border-color: #A7CE8C; }

/* Les trois preuves tenaient dans trois pastilles a icone. Une ligne de texte
   dit la meme chose et ne fait pas ecran au titre. */
.hero__trust {
  margin-top: clamp(38px, 5vw, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--f-display); font-size: 13.5px; font-weight: 500;
  color: #8B877E; letter-spacing: .01em;
}
.hero__trust span + span::before { content: '  ·  '; color: #55524B; }

/* --------------------------------------------------------------- bandeau interieur */
.pagehead {
  background: var(--ink-900);
  padding: calc(var(--nav-h) + 54px) 0 clamp(44px, 5vw, 64px);
}
.pagehead h1 { color: #fff; font-size: clamp(34px, 4.6vw, 56px); max-width: 18ch; margin-bottom: 18px; }
.pagehead .lede { color: #A39F95; }

.crumbs {
  font-size: 13px; color: #78746C; margin-bottom: 26px;
  font-family: var(--f-display); font-weight: 600;
}
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .45; margin: 0 8px; }

/* ------------------------------------------------------------ liste editoriale */
/* Le primitif qui remplace les grilles de cartes a icone. Un filet, un titre,
   un paragraphe. Rien a survoler, rien qui se souleve de 6 px. */
.lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 76px);
  border-bottom: 1px solid var(--line-soft);
}
.lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lista__item { padding: 26px 0 28px; border-top: 1px solid var(--line-soft); }
.lista__item h3 { margin-bottom: 9px; }
.lista__item p { margin: 0; font-size: 15.5px; color: var(--muted); }

/* ------------------------------------------------------------ colonnes a filet */
/* Trois arguments cote a cote, separes par un filet vertical. C'etait un
   bandeau vert pleine largeur avec trois cartes de verre depoli. */
.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.colonnes > div { padding-inline: clamp(22px, 3vw, 40px); border-left: 1px solid var(--line); }
.colonnes > div:first-child { padding-left: 0; border-left: 0; }
.colonnes > div:last-child { padding-right: 0; }
.colonnes h3 { margin-bottom: 10px; }
.colonnes p { margin: 0; font-size: 15.5px; color: var(--muted); }

/* --------------------------------------------------------------- etapes */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(24px, 3vw, 44px); counter-reset: s; }
.step { border-top: 1px solid var(--ink); padding-top: 18px; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--f-title); font-weight: 700; font-size: 26px;
  color: var(--green); line-height: 1; margin-bottom: 14px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------- split contenu */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(34px, 5vw, 76px); align-items: center; }
.split--wide { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
.split h2 { font-size: clamp(26px, 3.1vw, 40px); }

/* La tuile tient une VRAIE photo des que Gilles en depose une (l'emplacement
   est branche sur l'admin). Tant qu'il n'y en a pas, elle reste un CADRE VIDE
   — un filet et le nom du metier.
   Deux versions ont ete essayees avant : une grande icone sur trame de plan
   avec diagonale floue, puis une plaque pleine (noire, et verte une fois sur
   deux). Les deux donnaient l'illusion d'une image. Six plaques de couleur
   alternees sur la page services ramenaient exactement le decor qu'on venait
   de retirer. Un cadre vide ne ment pas : il dit qu'il manque une photo. */
.figure-tile {
  position: relative; overflow: clip;
  background: transparent;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border-radius: var(--radius-xl);
}
/* Le logo de repli (page A propos) se rend EN COULEURS : le gris a 55 %
   deteignait la seule marque de Gilles sur la page qui parle de lui.
   La largeur est bornee par la HAUTEUR de la tuile, pas par sa largeur : le
   logo est carre, la tuile est en 4/3. Un pourcentage de largeur seul le
   ferait deborder en haut et en bas des qu'on l'agrandit. */
.figure-tile img { width: 64%; max-height: 82%; object-fit: contain; }

/* Le cadre tombe pour le repli LOGO, et lui seul. Un logo detoure n'a pas
   besoin d'une boite pour exister, et le 4/3 le bridait a la hauteur de la
   tuile plutot qu'a sa largeur.
   `:has(img)` distingue le repli logo des tuiles a etiquette texte
   (`.figure-tile__mark`), et `:not(--photo)` rend le cadre ET le 4/3 des que
   Gilles depose une vraie photo a cet emplacement. */
.figure-tile:not(.figure-tile--photo):has(img) {
  border: 0; border-radius: 0; aspect-ratio: auto;
}
.figure-tile:not(.figure-tile--photo):has(img) img { width: 84%; max-height: none; }
.figure-tile--photo { border-color: var(--line-soft); }
.figure-tile--photo img { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }

.figure-tile__mark { padding: 30px; text-align: center; max-width: 24ch; }
.figure-tile__mark b {
  display: block;
  font-family: var(--f-title); font-weight: 700; font-size: clamp(19px, 2vw, 25px);
  letter-spacing: -.01em; color: var(--ink); line-height: 1.15;
}
.figure-tile__mark i {
  display: block; font-style: normal; margin-top: 11px;
  font-family: var(--f-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2);
}

/* ------------------------------------------------------------ realisations */
/* Un projet = un AVANT et un APRES cote a cote. La comparaison EST le contenu :
   les deux vues restent sur deux colonnes meme a 390 px. */
/* Nombre de colonnes FIXE, pas `auto-fit` : la largeur du cadre decidait
   toute seule combien de chantiers tenaient sur une rangee, et la page
   Realisations en mettait trois la ou on en veut deux. Deux sur la page
   dediee (la comparaison avant/apres a besoin de place), trois en apercu sur
   l'accueil. `justify-content: start` reste pour le cas d'un seul chantier :
   la carte se cale a gauche, sous un titre aligne a gauche. */
.realisations {
  display: grid; gap: clamp(26px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
}
.realisations--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .realisations--trois { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* La comparaison avant/apres elle-meme (`.ba`, la poignee, les etiquettes)
   porte son style DANS Realisation.astro, scope par Astro. Ne pas la
   redescendre ici : le composant a ete ecrit pour ne dependre de cette
   feuille que par ses jetons (--green, --ink, --radius-lg...), qu'il lit avec
   une valeur de repli. Ici on ne stylise que ce qui entoure la photo. */
.realisation { display: flex; flex-direction: column; }
.realisation__corps { padding: 18px 0 0; }
.realisation__corps h3 { font-size: 19px; margin: 0 0 4px; font-family: var(--f-title); font-weight: 700; }
.realisation__lieu {
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
  margin: 0 0 10px;
}
.realisation__corps p:last-child { margin: 0; font-size: 15.5px; color: var(--muted); }

.realisations-vide {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(36px, 5vw, 60px) 0; text-align: center;
}
.realisations-vide p { margin: 0 auto; max-width: 52ch; color: var(--muted); }

/* --------------------------------------------------------------- listes de faits */
/* Vingt crochets verts identiques ne disent rien qu'un filet ne dise mieux. */
.fact-list { list-style: none; margin: 28px 0 0; padding: 0; }
.fact-list li {
  padding: 13px 0; font-size: 15.5px;
  border-top: 1px solid var(--line-soft);
}
.fact-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.fact-list strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- secteurs */
/* 42 municipalites en pastilles ombrees = 42 boutons qui ne cliquent pas.
   En texte courant, la liste se lit et occupe cinq fois moins de hauteur. */
.zone-list {
  font-size: 16.5px; line-height: 2.05; color: var(--ink-700);
  max-width: 74ch;
}
.zone-list span, .zone-list a { display: inline; }
.zone-list span:not(:last-child)::after,
.zone-list a:not(:last-child)::after { content: ' · '; color: var(--muted-2); }
.zone-list a { border-bottom: 1px solid var(--line); }
.zone-list a:hover { border-color: var(--green); color: var(--green-700); }

/* --------------------------------------------------------------- CTA */
.cta {
  background: var(--ink-900);
  color: #A39F95;
  padding: clamp(56px, 6.5vw, 92px) 0;
}
.cta h2 { color: #fff; max-width: 17ch; }
.cta__inner {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(34px, 5vw, 68px); align-items: center;
}
.cta__box { border-left: 1px solid var(--line-dark); padding-left: clamp(28px, 4vw, 54px); }
.cta__tel {
  display: block; font-family: var(--f-title); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px); color: #fff; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 10px;
}
.cta__tel:hover { color: #A7CE8C; }
.cta__box p { font-size: 14.5px; color: #857F76; }

/* --------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.78fr); gap: clamp(36px, 5vw, 72px); align-items: start; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-display); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 16px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; width: 100%;
  transition: border-color .18s;
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ink);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: 13.5px; color: var(--muted-2); margin: 0; }

.info-card { border-top: 1px solid var(--ink); padding-top: 22px; }
.info-card + .info-card { margin-top: 44px; }
.info-card h3 {
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 20px;
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.info-list li:last-child { border-bottom: 0; }
.info-list dt {
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px;
}
.info-list dd { margin: 0; font-size: 16px; color: var(--ink); }
.info-list a { border-bottom: 1px solid var(--line); }
.info-list a:hover { border-color: var(--green); color: var(--green-700); }

.map-embed {
  border: 1px solid var(--line); width: 100%; height: 320px;
  border-radius: var(--radius);
  transition: filter .3s;
}
/* Le gris ne vaut que la ou le survol existe pour le lever. Sur un appareil
   tactile il n'y a pas de :hover : la carte resterait grise pour toujours. */
@media (hover: hover) {
  .map-embed { filter: grayscale(1) contrast(1.04); }
  .map-embed:hover { filter: grayscale(0); }
}

/* --------------------------------------------------------------- FAQ */
.faq { max-width: 780px; border-bottom: 1px solid var(--line-soft); }
.faq details { border-top: 1px solid var(--line-soft); padding: 4px 0; }
.faq summary {
  font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 18px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--f-display); font-size: 19px; font-weight: 400;
  color: var(--muted-2); line-height: 1; flex: none;
  transition: color .18s;
}
.faq summary:hover::after { color: var(--ink); }
.faq details[open] summary::after { content: '–'; color: var(--ink); }
.faq p { margin: 0 0 20px; font-size: 15.5px; color: var(--muted); max-width: 62ch; }

/* --------------------------------------------------------------- footer */
.footer {
  background: var(--ink-900);
  color: #85817A; padding: clamp(52px, 6vw, 76px) 0 0;
}
.footer__grid {
  display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,.85fr));
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: 46px;
}
.footer__logo { width: 100%; max-width: 132px; margin-bottom: 22px; }
.footer p { font-size: 14.5px; line-height: 1.7; max-width: 34ch; }
.footer h4 {
  font-family: var(--f-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer ul a, .footer address a { font-size: 14.5px; color: #85817A; transition: color .18s; }
.footer ul a:hover, .footer address a:hover { color: #fff; }
.footer address { font-style: normal; font-size: 14.5px; line-height: 1.85; }
.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0 28px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 12.5px; color: #6A665F;
}
.footer__bottom a:hover { color: #fff; }
.footer__rbq {
  display: block; margin-top: 18px;
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: #A7CE8C;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  .burger { display: flex; }
  .split, .split--wide, .cta__inner, .contact-grid { grid-template-columns: 1fr; }
  .colonnes { grid-template-columns: 1fr; }
  .colonnes > div {
    padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line);
    margin-top: 24px;
  }
  .colonnes > div:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .cta__box { border-left: 0; border-top: 1px solid var(--line-dark); padding: 30px 0 0; }
  .lista--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .wrap, .nav__inner { width: min(100% - 30px, var(--maxw)); }
  .nav__name { display: none; }   /* le logo suffit, le numero garde la place */
  .nav__tel { font-size: 14.5px; }
  .lista, .lista--3 { grid-template-columns: 1fr; }
  /* Une realisation par ligne — mais l'avant/apres garde ses deux colonnes. */
  .realisations, .realisations--trois { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .zone-list { font-size: 16px; line-height: 1.95; }
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 48px); }
  .hero h1 { font-size: clamp(33px, 9.5vw, 46px); }
  .hero .btn-row { gap: 18px; }
  .btn { width: 100%; }
  .hero__tel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .nav, .mobile-menu, .cta, .burger { display: none !important; }
  .figure-tile, .map-embed { display: none !important; }
  body { color: #000; background: #fff; }
  [data-reveal], [data-stagger], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}