/* ==========================================================================
   AURALP — pages internes (services, pages techniques, réalisations,
   entreprise, demander une étude). Complète styles.css : réutilise header,
   footer, tokens, boutons, typographie. Le motif montagne reste sur l'accueil.
   ========================================================================== */

/* ------------------------------------------------------- fil d’ariane -- */

.crumb {
  padding-top: clamp(26px, 3.6vw, 48px);
  font-size: .9rem;
  color: var(--ink-mute);
}
.crumb a { color: var(--ink-mute); text-decoration: none; text-underline-offset: 3px; }
.crumb a:hover { color: var(--sapin); text-decoration: underline; }
.crumb span { color: var(--sapin); }

/* ------------------------------------------------------- hero de page -- */

/* Le bas du bloc de tête est resserré : ajouté au padding de la bande qui
   suit, il ouvrait un vide d'environ 140 px sur Entreprise, Réalisations et
   Demander une étude — mesuré sur captures. Seul l'espacement change. */
.svc-hero { padding-top: clamp(16px, 2vw, 26px); padding-bottom: clamp(6px, 1vw, 14px); }
.svc-hero h1 {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 14ch;
}
.svc-lede {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 1px solid rgba(46, 74, 56, .24);
  max-width: 50ch;
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-lead);
}

/* --------------------------------------------------------- figure -- */

.figure { margin: 0; }
.figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  filter: grayscale(.3) contrast(1.02);
}
.figure--band img { aspect-ratio: 40 / 19; object-fit: cover; object-position: 50% 52%; }
.figure figcaption {
  margin-top: 12px;
  font-size: .9rem;
  color: var(--ink-mute);
  max-width: 66ch;
}

/* --------------------------------- corps : rail latéral + prose -- */

/* Un rail n'est pas une demi-page : il garde sa proportion propre, arrondie
   ici au tiers franc plutôt qu'au 3,3/8 d'origine, et il prend le gap commun.
   C'est la seule césure du site qui ne soit pas le 7/5 partagé ; forcer le
   rail à 5/12 lui donnait 440 px pour une phrase calibrée à 34 caractères. */
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--split-gap);
  align-items: start;
  padding-block: clamp(52px, 6vw, 96px);
}

/* Colonne de gauche de la partie Climatisation : un surtitre, un intertitre,
   une phrase, et le rappel du relevé sur place. La photographie technique qui
   s'y trouvait a été promue en panneau de métier en haut de page ; sans elle
   la colonne ne laisse plus de vide sous une petite image.

   Elle est posée sur un aplat, comme les blocs-schémas des deux autres
   sections et l'encart des pompes à chaleur. Sans lui, la Climatisation était
   devenue la seule section sans aucune surface graphique : du texte et des
   filets sur du blanc, face à deux sections qui avaient gagné en matière.

   L'aplat était un vert froid (#F2F6F3) qui ne tenait pas sur l'ivoire de la
   page : il est passé à la teinte claire unique du site. Il ne descend pas en
   dessous de 900 px : le rail y devient pleine largeur, et son aplat s'y
   lisait comme une bande de plus — celle-là même que la page vient de perdre
   au niveau du comparatif. Empilé, il ne garde que son filet. */
.svc-grid__side {
  position: sticky;
  top: calc(var(--head-h) + 40px);
  padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 32px) clamp(26px, 2.8vw, 38px);
  background: var(--ivory);
  border-left: 3px solid var(--sapin);
}
.svc-grid__side h3 { font-size: var(--t-sub); letter-spacing: -.014em; line-height: 1.2; }
.svc-grid__side > p { margin-top: 12px; color: var(--ink-soft); max-width: 36ch; }
.svc-grid__media { margin: clamp(22px, 2.6vw, 34px) 0 0; }
.svc-grid__media img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 46% 48%;
  border: 1px solid var(--rule);
  /* la source porte un étalonnage cinéma sombre : on l'éclaircit et on la
     désature davantage pour la ramener dans la lumière du reste du site */
  filter: grayscale(.6) brightness(1.12) contrast(.98);
}
.svc-grid__media figcaption { margin-top: 10px; font-size: .88rem; color: var(--ink-mute); }

.svc-aside { position: sticky; top: calc(var(--head-h) + 40px); }
.svc-aside h2 { font-size: clamp(1.28rem, 1.7vw, 1.55rem); letter-spacing: -.01em; }
.svc-aside ul { list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; }
.svc-aside li {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: .96rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ prose -- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: var(--t-section);
  margin-top: clamp(42px, 4.4vw, 64px);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-sub); margin-top: 1.9em; letter-spacing: -.012em; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin-top: 1.1em; padding-left: 1.15em; color: var(--ink-soft); }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--sapin); }

/* section pleine largeur à l’intérieur d’une page service */
.band { padding-block: clamp(50px, 6vw, 92px); }
.band--ivory { background-color: var(--ivory); }
.band h2 {
  font-size: var(--t-section);
  max-width: 20ch;
}
.band__lead { margin-top: clamp(16px, 1.8vw, 22px); max-width: 52ch; color: var(--ink-lead); font-size: var(--t-lead); line-height: 1.42; }

/* page Services : en-tête de partie + navigation d'ancres */
.svc-part-head { padding-top: clamp(40px, 5vw, 72px); }
.svc-part-head > h2 { font-size: var(--t-section); }
.svc-part-head .figure { margin-top: clamp(26px, 3vw, 44px); }
.svc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(22px, 3vw, 44px);
  margin-top: clamp(24px, 2.8vw, 34px);
  padding-top: 18px;
  border-top: 1px solid rgba(46, 74, 56, .24);
}
.svc-jump a {
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: var(--sapin);
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s ease;
}
.svc-jump a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ======================================================================
   PAGE SERVICES — haut de page et entrée dans les trois métiers
   ----------------------------------------------------------------------
   Le sommaire « 01 / 02 » a été retiré : il annonçait deux familles pour
   trois métiers, et sa numérotation n'encodait aucune séquence réelle.
   À la place : un titre, une phrase de positionnement, puis un triptyque
   photographique pleine largeur qui nomme les trois métiers.
   ====================================================================== */

/* Le blanc pur de Services a ete retire : le site tient sur --paper, en-tete
   compris, pour que le fond ne change plus d'une page a l'autre. */

.svc-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(26px, 5vw, 84px);
  align-items: end;
  padding-top: clamp(18px, 2.4vw, 30px);
  /* respiration franche avant le sélecteur : sans elle, l'introduction et
     les trois panneaux se lisaient comme un seul bloc de tête */
  padding-bottom: clamp(52px, 6.4vw, 100px);
}
.svc-intro h1 {
  margin: 0;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 14ch;
}
.svc-intro__lede {
  margin: 0;
  max-width: 40ch;
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-lead);
}
/* le seul vert du bloc de tête : il tombe sur la phrase qui porte la
   méthode, pas sur une décoration */
.svc-intro__lede .hl,
.ent-intro .hl,
.svc-lede .hl { color: var(--sapin); font-weight: 500; }

@media (max-width: 900px) {
  .svc-intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 4vw, 28px);
    padding-bottom: clamp(30px, 5vw, 44px);
  }
  .svc-intro h1 { max-width: 17ch; }
}

/* ---------------------------------------- sélecteur des trois métiers -- */
/* Trois panneaux joints, séparés par deux pixels de blanc. Ils tiennent dans
   la colonne de la page, pas en pleine largeur : c'est ce qui les distingue
   d'une bannière et les fait lire comme un choix. Une image par métier,
   aucune reprise d'une image tenant déjà un grand rôle sur la page. Le nom et
   la phrase courte sont toujours lisibles ; le survol n'ajoute que du lavis,
   un filet et un libellé d'appel. */

/* la respiration qui sépare le sélecteur de l'ouverture de section qui suit */
.metiers__wrap { padding-bottom: clamp(52px, 6.4vw, 100px); }

.metiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  /* le fond ne se voit que dans les deux pixels qui séparent les panneaux :
     il suit celui de la page, sans quoi il y dessinait un filet blanc */
  background: var(--paper);
}

.metier {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* hauteur d'un choix, pas d'une bannière */
  min-height: clamp(262px, 23vw, 330px);
  padding: clamp(20px, 2.1vw, 30px);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  /* socle nuit : le panneau ne clignote jamais en blanc avant l'image */
  background: var(--nuit);
}

.metier__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.12) contrast(1.02) brightness(1.02);
  transition: transform 520ms var(--e-matiere), filter 420ms ease;
}
/* Chaque panneau est cadré sur son sujet : l'unité murale en haut à droite,
   la pompe à chaleur au centre. Le fichier PAC est déjà centré en largeur sur
   l'unité ; 15 % en hauteur garde le capot dans le cadre et laisse le pied
   de l'appareil sous le voile du titre, de 360 à 1920 px de large. */
.metier:nth-child(1) .metier__img { object-position: 62% 34%; }
.metier:nth-child(2) .metier__img { object-position: 50% 15%; }

/* Voile permanent : il tient la lisibilité du texte, il ne bouge pas.
   Il ne couvre que le bas du panneau — au-dessus, la photographie doit
   rester une photographie, pas un aplat vert. Le panneau ayant été raccourci,
   le texte y remonte en proportion : le voile monte donc avec lui, sans quoi
   les titres passaient sur un mur clair. */
/* Deux états seulement. Là où le survol existe, le panneau est une
   photographie au repos (voile réduit au pied, pour le titre) et devient un
   panneau de lecture au survol. Partout ailleurs, un état intermédiaire
   fixe : image encore lisible, tout le texte affiché. Le voile est nuit, pas
   vert : il assombrit la photo sans la teinter. */
.metier__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(12, 20, 28, .74) 0%,
    rgba(12, 20, 28, .44) 38%,
    rgba(12, 20, 28, .06) 70%,
    transparent 100%);
}

.metier::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(12, 20, 28, .8) 0%,
    rgba(12, 20, 28, .56) 44%,
    rgba(12, 20, 28, .2) 100%);
  opacity: 0;
  transition: opacity 420ms var(--e-matiere);
}

/* Les deux lignes secondaires occupent chacune une rangée qui peut se
   replier à zéro : c'est leur ouverture qui fait remonter le titre. */
.metier__in {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr 1fr;
}

.metier__t {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
  text-shadow: 0 1px 16px rgba(8, 14, 20, .45);
}
/* le filet sous le nom : court au repos, il court sur toute la largeur au
   survol — le même langage de filets d'un pixel que le reste du site */
.metier__t::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: clamp(10px, 1vw, 14px);
  background: #A6D9BB;
  transition: width 560ms var(--e-trace);
}

/* Marge portée par le padding et non par margin : une rangée repliée à zéro
   doit l'être vraiment, et une marge compterait dans sa hauteur. */
.metier__d,
.metier__go {
  display: block;
  min-height: 0;
  overflow: hidden;
}
.metier__d {
  padding-top: clamp(12px, 1.2vw, 16px);
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.48;
  color: #fff;
  text-shadow: 0 1px 12px rgba(8, 14, 20, .5);
}

.metier__go {
  padding-top: 12px;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .03em;
  color: #B4D6BF;
}
.metier__go::after {
  content: "\00A0\2192";
  display: inline-block;
  transition: transform .3s var(--e-titre);
}

@media (hover: hover) and (min-width: 901px) {
  .metier__veil {
    background: linear-gradient(to top,
      rgba(12, 20, 28, .58) 0%,
      rgba(12, 20, 28, .26) 22%,
      transparent 44%);
  }
  .metier__in {
    grid-template-rows: auto 0fr 0fr;
    transition: grid-template-rows 420ms var(--e-titre);
  }
  .metier__d,
  .metier__go {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 280ms ease, transform 380ms var(--e-titre);
  }
  .metier__t::after { width: 0; }

  .metier:hover .metier__in,
  .metier:focus-visible .metier__in { grid-template-rows: auto 1fr 1fr; }
  .metier:hover .metier__d,
  .metier:focus-visible .metier__d { opacity: 1; transform: none; transition-delay: 90ms; }
  .metier:hover .metier__go,
  .metier:focus-visible .metier__go { opacity: 1; transform: none; transition-delay: 170ms; }
  .metier:hover::after,
  .metier:focus-visible::after { opacity: 1; }
  .metier:hover .metier__img,
  .metier:focus-visible .metier__img { transform: scale(1.04); filter: grayscale(.2) contrast(1.04) brightness(.88); }
  .metier:hover .metier__t::after,
  .metier:focus-visible .metier__t::after { width: 100%; }
  .metier:hover .metier__go::after { transform: translateX(5px); }
}

/* Contour de focus dessiné en couche propre. Un « outline » classique serait
   invisible ici : le panneau est un contexte d'empilement, et l'image posée
   en inset 0 se peint par-dessus le contour de son propre élément. Le liseré
   passe donc au-dessus de tout le reste, et il est vert clair — le vert sapin
   du site ne se verrait pas sur un panneau sombre. */
.metier:focus-visible { outline: none; }
.metier::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 4;
  pointer-events: none;
  border: 2px solid #B4D6BF;
  opacity: 0;
}
.metier:focus-visible::before { opacity: 1; }

@media (max-width: 900px) {
  .metiers { grid-template-columns: minmax(0, 1fr); }
  .metier { min-height: clamp(212px, 44vw, 280px); }
  .metier__d { max-width: 40ch; }
}

@media (prefers-reduced-motion: reduce) {
  .metier__img,
  .metier::after,
  .metier__in,
  .metier__t::after,
  .metier__d,
  .metier__go,
  .metier__go::after { transition: none !important; }
  .metier__d,
  .metier__go { transform: none !important; }
  .metier:hover .metier__img,
  .metier:focus-visible .metier__img { transform: none; }
}

/* surtitre de page : lève l'ambiguïté avant même le titre */
/* Le seul surtitre du site, repris à l'identique par .svc-part__k */
.svc-hero__eyebrow {
  margin-bottom: clamp(12px, 1.4vw, 18px);
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sapin);
}

.checks--serre { margin-top: 0; }
.checks--serre li { padding: 16px 0; }
.checks--serre h3 { font-size: clamp(1.02rem, 1.3vw, 1.14rem); letter-spacing: -.008em; }
.checks--serre p { margin-top: 6px; font-size: 1rem; max-width: 46ch; }

/* Relance en fin de section métier : pas un bouton (l'en-tête en porte déjà un),
   mais une ligne fine sur un filet, avec un intitulé propre au service qui précède.
   Le rappel de bas de page (section « close ») reste le seul appel à l'action appuyé. */
/* Posée dans la bande du comparatif : la bande propre qu'elle avait ajoutait
   ses deux marges à celles du comparatif, soit près de 300 px de vide. */
.band--vert .svc-next { margin-bottom: 0; }
.svc-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(20px, 3vw, 40px);
  margin: clamp(38px, 4.4vw, 60px) 0 clamp(44px, 5vw, 72px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.svc-next span {
  font-size: 1rem;
  color: var(--ink-mute);
}
.svc-next a:not(.btn) {
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: var(--sapin);
  text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s ease;
}
.svc-next a:not(.btn)::after { content: " \2192"; }
.svc-next a:not(.btn):hover { text-decoration: underline; text-decoration-color: currentColor; }

@media (max-width: 560px) {
  .svc-next { flex-direction: column; align-items: flex-start; }
  .svc-next a:not(.btn) { white-space: normal; }
}

/* ========================================================================
   PAGE SERVICES — trois métiers, trois formes
   Chaque section a son ambiance, prise UNIQUEMENT dans la palette validée :
     Climatisation  frais    lavis gris-bleu désaturé + flux d'air
     Pompe à chaleur neutre  ivoire clair + schéma d'échange, le plus technique
     Chauffage      chaud    ivoire poussé d'un cran + schéma de réseau
   Aucun cuivre, aucun orange : la chaleur vient de l'ivoire du site, pas
   d'une teinte importée (ANTI_AI_BUILD_RULES §3).
   ======================================================================== */

.svc-part { position: relative; isolation: isolate; }

/* surtitre de métier : remplace toute numérotation décorative (§4) */
.svc-part__k {
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sapin);
}

/* ======================================================================
   LES TROIS OUVERTURES DE SECTION
   ----------------------------------------------------------------------
   Un seul système, trois rapports entre le texte et la photographie :
     Climatisation   le texte est DANS l'image (bandeau pleine largeur)
     Pompes à chaleur le texte est CONTRE l'image, sur un aplat sapin, 5/12
     Chauffage        le texte est À CÔTÉ de l'image, sur du blanc, 5/12 à
                      droite d'une photographie qui prend 7/12
   Même surtitre, même échelle de titre, même longueur de chapô, mêmes
   hauteurs : ce sont trois ouvertures d'un même niveau, pas trois heros.
   Ce qui varie encode quelque chose de vrai — les pompes à chaleur sont la
   partie la plus technique, celle que la couleur de marque porte ; le
   chauffage est la plus dense, et sa chaleur vient de sa photographie.
   ====================================================================== */

/* La rangée est posée explicitement. Sans elle, l'image imposait sa hauteur
   intrinsèque à toute la bande : à 840 px de large, la photographie du
   chauffage réclamait 560 px et l'ouverture doublait de poids. */
.ouverture {
  display: grid;
  /* même hauteur pour les trois : c'est elle qui garantit le même poids */
  /* Hauteur plancher commune, mais la rangée grandit si le texte l'exige :
     l'image est en position absolue, elle n'impose plus sa hauteur. */
  grid-template-rows: minmax(clamp(320px, 30vw, 440px), auto);
  align-items: stretch;
  /* La bande sert de reference de largeur au calage du texte, plus bas. Elle
     mesure exactement la largeur de contenu de la page, barre de defilement
     exclue — ce que 50vw, lui, ne sait pas faire. */
  container-type: inline-size;
}

/* Trois compositions apparentees, jamais superposables :
     Climatisation    photographie 7 | panneau 5   (+ flux d'air)
     Pompes a chaleur panneau 5 | photographie 7
     Chauffage        photographie 6 | panneau 6
   Ce qui distingue les trois, c'est desormais le cote du panneau et le
   rapport des colonnes, plus la couleur. Les deux aplats sombres etaient un
   bleu nuit (#16232F) et un vert (#1E3A29) separes par 700 px de fond clair :
   deux noirs presque identiques a cette distance, qui se lisaient comme une
   erreur d'echantillon plutot que comme une intention. Un seul fond sombre
   sur tout le site. La couleur de marque reste dans les cartes de metier, le
   surtitre et les filets. Les deux premieres reprennent la cesure partagee
   du site, ce qui aligne leur panneau sur l'axe des autres sections. */
.ouverture--clim  { grid-template-columns: var(--split-a) var(--split-b); background: var(--nuit); }
.ouverture--pac   { grid-template-columns: var(--split-b) var(--split-a); background: var(--nuit); }
.ouverture--chauf { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); background: var(--nuit); }

/* L'image est enveloppée : c'est l'enveloppe qui coupe. Posée directement
   dans la grille, elle imposait sa hauteur intrinsèque à toute la bande, et
   un zoom de recadrage débordait sur la colonne de texte voisine. */
.ouverture__media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 0;
}
.ouverture__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(.34) contrast(1.05);
}
/* La photographie precedente (pompe-a-chaleur-exterieure.webp, 1440 x 699,
   un format tres allonge) affichait sa pleine largeur dans cette bande sans
   la couvrir en hauteur, d'ou le zoom qui resserrait sur l'unite. Le
   remplacement (1440 x 960) est plus proche du format de la bande : le
   recadrage normal par « object-fit: cover » suffit, sans zoom manuel. */
/* Recadrage de l'unité. Le zoom CSS qui la recentrait ne tenait qu'à une
   largeur d'écran : dès que la colonne de texte grandissait, l'unité
   glissait vers la droite. La photo est désormais recadrée dans le fichier
   (pac-unite-centree-1280.jpg, 4:3), symétriquement autour de l'appareil :
   son centre est le centre de l'image. « cover » rogne alors à égalité des
   deux côtés et l'unité reste au milieu du panneau à toutes les largeurs,
   capot et bac compris. */
.ouverture--pac .ouverture__media { aspect-ratio: 3 / 2; }
.ouverture--pac .ouverture__img { object-position: 60% 50%; }
.ouverture--chauf .ouverture__img {
  object-position: 50% 56%;
  filter: grayscale(.42) contrast(1.05);
}
.ouverture--clim .ouverture__img { object-position: 44% 46%; }

.ouverture__texte {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: clamp(30px, 3.4vw, 48px);
}
.ouverture__in { position: relative; z-index: 1; }

/* Le texte s'aligne sur la colonne de la page, pas sur le bord de sa moitié :
   sans cela, le titre d'une ouverture ne tombait pas sur la même verticale
   que le titre de la page.

   Le calcul partait de 50vw, qui compte la barre de defilement : il visait
   donc un axe decale d'une demi-barre, soit 8 px, vers l'interieur. Tant que
   --wrap valait 1320 px le max() ecrasait ce calcul sur des ecrans de
   portable et l'erreur ne se voyait pas ; a 1240 px, c'est le calcul qui
   l'emporte et les 8 px se sont mis a se voir. 50cqi mesure la bande
   elle-meme, qui fait exactement la largeur de contenu de la page. La
   version en 50vw reste en premiere ligne : un navigateur qui ignore les
   unites de conteneur garde l'ancien calage plutot que plus de calage. */
.ouverture--pac .ouverture__in {
  padding-left: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
  padding-left: max(var(--gutter), calc(50cqi - var(--wrap) / 2 + var(--gutter)));
  padding-right: clamp(24px, 3vw, 52px);
}
.ouverture--clim .ouverture__in,
.ouverture--chauf .ouverture__in {
  padding-right: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc(50cqi - var(--wrap) / 2 + var(--gutter)));
  padding-left: clamp(26px, 3.4vw, 60px);
}

/* Flux d'air : ils appartiennent à la Climatisation et à elle seule. Posés au
   bas du panneau nuit, sous le texte, ils donnent à cette ouverture sa
   signature sans que rien d'équivalent soit ajouté aux deux autres. */
.ouverture__flux {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  width: 100%;
  height: 34%;
  pointer-events: none;
  opacity: .55;
  /* Le tracé s'efface avant d'atteindre le chapô. Sans ce fondu, la courbe la
     plus haute traversait les lignes de texte et les coupait. */
  -webkit-mask-image: linear-gradient(to top, #000 46%, transparent 100%);
          mask-image: linear-gradient(to top, #000 46%, transparent 100%);
}

/* Un H2 comme les autres : même taille que tous les titres de section du
   site, pour qu'aucun titre de partie ne se confonde avec le titre de page. */
.ouverture h2 {
  margin-top: clamp(12px, 1.3vw, 16px);
  max-width: 14ch;
  font-size: var(--t-section);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.04;
}
.ouverture__lead {
  margin-top: clamp(12px, 1.4vw, 18px);
  max-width: 40ch;
  font-size: var(--t-lead);
  line-height: 1.42;
}

/* Les trois panneaux sont sombres : un seul régime typographique, blanc sur
   fond profond, pour les trois. C'est ce qui les fait lire comme une famille. */
.ouverture h2 { color: #fff; }
.ouverture .ouverture__lead { color: rgba(255, 255, 255, .88); }
/* Le vert clair du surtitre est le meme sur les trois : depuis que les trois
   panneaux partagent le bleu nuit, la reprise d'un cran qui compensait le
   panneau vert n'a plus d'objet. */
.ouverture .svc-part__k { color: #B4D6BF; }

@media (max-width: 900px) {
  /* empilé, image d'abord dans les deux cas : l'ordre de lecture reste
     image puis titre, comme sur le bandeau de la Climatisation */
  .ouverture { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .ouverture__media { aspect-ratio: 16 / 9; order: -1; }
  .ouverture__texte { padding-block: clamp(26px, 6vw, 40px); }
  .ouverture--clim .ouverture__in,
  .ouverture--pac .ouverture__in,
  .ouverture--chauf .ouverture__in { padding-inline: var(--gutter); }
  .ouverture h2 { max-width: 18ch; }
  /* les flux d'air ne tiennent pas dans un panneau court : ils y traversaient
     le chapô au lieu de courir sous lui */
  .ouverture__flux { height: 26%; opacity: .4; }
}

/* flux d'air animés : dérive lente et continue, amplitude minime */
.flux__l { fill: none; stroke: #BFE0CB; stroke-linecap: round; }
.flux__l--a { stroke-width: 1.6; stroke-opacity: .8; }
.flux__l--b { stroke-width: 1.3; stroke-opacity: .55; }
.flux__l--c { stroke-width: 1.1; stroke-opacity: .38; }
@media (prefers-reduced-motion: no-preference) {
  .flux__l--a { animation: flux 34s linear infinite; }
  .flux__l--b { animation: flux 46s linear infinite; }
  .flux__l--c { animation: flux 60s linear infinite; }
}
@keyframes flux {
  from { transform: translateX(0); }
  to   { transform: translateX(600px); }
}

/* Relance de la colonne des volets : l'ancienne phrase « le relevé se fait
   sur place », posée sur un filet, est retirée (redite du chapô et de la
   bande finale) ; la relance garde l'écart que lui donnait le filet. */
.svc-grid__side > p:not(.svc-grid__cta) + .svc-grid__cta { margin-top: clamp(26px, 3vw, 40px); }
.svc-grid__cta { margin-top: clamp(12px, 1.4vw, 18px); }
.svc-grid__cta a {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--sapin);
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color .22s ease;
}
/* La flèche reste « inline » : en inline-block, l'espace insécable qui la
   précède se retrouve à l'intérieur du pseudo-élément et la ligne peut casser
   juste avant — la flèche partait seule à la ligne. Le déplacement au survol
   passe donc par la marge, pas par une transformation. */
.svc-grid__cta a::after {
  content: "\00A0\2192";
  transition: margin-left .3s var(--e-titre);
}
.svc-grid__cta a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.svc-grid__cta a:hover::after { margin-left: 5px; }
/* lien secondaire vers un chantier réel : même geste, en encre, plus discret */
.svc-grid__cta--preuve { margin-top: 8px; }
/* l'action de la colonne : un vrai bouton, puis la preuve en lien */
.svc-grid__action { margin-top: clamp(26px, 3vw, 40px); }
.svc-grid__action + .svc-grid__cta--preuve { margin-top: 18px; }
.svc-grid__cta--preuve a { font-size: .96rem; color: var(--ink-soft); }
.svc-grid__cta--preuve a:hover { color: var(--sapin); }
@media (prefers-reduced-motion: reduce) {
  .svc-grid__cta a::after { transition: none; }
}



/* Fin de la partie Chauffage : volets à gauche, mise en garde à droite.
   Seule, la mise en garde laissait la moitié droite de la bande vide. */
.chauf-fin {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(30px, 4.4vw, 72px);
  align-items: start;
}
.chauf-fin .acc { margin-top: 0; }
.chauf-fin .note { max-width: none; }

/* ------------------------------------- fond des sections metier -- */
/* Les corps de section n'ont plus de fond a eux. Tant que la page etait en
   blanc pur, ce blanc etait celui de la page ; depuis le retour a --paper,
   il dessinait un grand rectangle blanc pleine largeur sous chaque
   ouverture, c'est-a-dire exactement la bande qu'on cherche a faire
   disparaitre. C'est l'ouverture qui donne son caractere a chaque section,
   pas un aplat. */

/* Bande de rythme de la page Services : elle ne porte plus de couleur. Le
   comparatif se detachait sur un aplat vert pale pleine largeur de 672 px,
   troisieme fond de la page apres deux aplats sombres. Il tient maintenant
   sur le fond general, par sa respiration verticale et par les filets de
   ses deux colonnes. Les deux bandes beiges (--froid, --warm) qui dataient
   d'une version anterieure de la palette ont ete retirees : plus aucun
   document ne les portait. */
.band--vert {
  /* Fond ivoire : entre l'ouverture nuit et les marques, des sections claires
     se suivaient sans rien pour les distinguer, et les deux cartes blanches du
     comparatif se perdaient sur le papier. L'ivoire découpe la section et
     fait ressortir les cartes. */
  background-color: var(--ivory);
  padding-block: var(--section-y);
}

/* ------------------------------------------------------- accordéon -- */
/* <details>/<summary> natif : pas une ligne de JavaScript, donc rien qui
   puisse casser. Chaque volet montre un titre ET un résumé d'une ligne :
   on comprend sans cliquer, on ouvre si on veut le détail.
   Repris du langage de filets d'un pixel utilisé partout sur le site. */

.acc { margin-top: clamp(8px, 1.4vw, 18px); }

.acc__item { position: relative; border-top: 1px solid var(--rule-soft); }
.acc__item:last-child { border-bottom: 1px solid var(--rule-soft); }

/* Le filet sapin se trace sur le bord bas du volet au survol, et reste tracé
   tant que le volet est ouvert : le même geste que partout ailleurs sur le
   site, ici il sert aussi de repère d'état. Sur le bord bas et non le bord
   haut : posé en haut, le filet chevauchait le border-top du volet suivant
   et paraissait appartenir à la ligne précédente. */
.acc__item::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sapin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--e-trace);
}
.acc__item:hover::before,
.acc__item:focus-within::before,
.acc__item[open]::before { transform: scaleX(1); }

.acc__sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 5px clamp(16px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum:hover .acc__t { color: var(--sapin); }
.acc__item[open] > .acc__sum .acc__t { color: var(--sapin); }

/* Un vrai <h3>, pas un <span> : la structure de titres du document est
   conservée telle qu'elle était avant le repli. */
.acc__t {
  grid-column: 1;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.014em;
  color: var(--ink);
  transition: color .2s ease;
}
/* Le résumé : c'est lui qui évite d'avoir à ouvrir pour comprendre.
   Devenu couche de lecture principale, il prend le gris le plus lisible. */
.acc__r {
  grid-column: 1;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* marqueur + / − dessiné en CSS, aligné sur la première ligne du titre */
.acc__ico {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  flex: 0 0 auto;
  align-self: start;
}
.acc__ico::before,
.acc__ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--sapin);
  transform: translate(-50%, -50%);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.acc__ico::before { width: 18px; height: 1.5px; }
.acc__ico::after  { width: 1.5px; height: 18px; }
.acc__item[open] .acc__ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acc__body {
  padding-bottom: clamp(20px, 2.4vw, 28px);
  max-width: 66ch;
}
.acc__body p { margin: 0 0 14px; color: var(--ink-soft); }
.acc__body p:last-child { margin-bottom: 0; }
.acc__body ul { margin: 0 0 14px; padding-left: 1.1em; color: var(--ink-soft); }
.acc__body li { margin-bottom: 8px; }
.acc__body li:last-child { margin-bottom: 0; }

/* Ouverture/fermeture glissée là où le navigateur le permet.
   Ailleurs, le volet s'ouvre instantanément : rien n'est cassé. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acc__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .34s cubic-bezier(.22, 1, .36, 1),
                content-visibility .34s allow-discrete;
  }
  .acc__item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .acc__item::details-content { transition: none; }
  .acc__ico::before, .acc__ico::after { transition: none; }
}

@media (max-width: 560px) {
  .acc__sum { padding: 16px 0; gap: 3px 14px; }
  .acc__r { font-size: 1rem; }
}

/* ------------------------------- section : titre à gauche, corps à droite -- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(26px, 4.5vw, 84px);
  align-items: start;
}
.row + .row { margin-top: clamp(40px, 5vw, 76px); }
.row__h h2 { font-size: clamp(1.5rem, 2.3vw, 2.05rem); letter-spacing: -.016em; }
.row__h .k {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--f-display);
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--sapin);
}
.row__body { max-width: 60ch; }
.row__body > * + * { margin-top: 1.1em; }
.row__body p { color: var(--ink-soft); }
.row__body h3 { font-size: clamp(1.1rem, 1.4vw, 1.26rem); margin-top: 1.5em; letter-spacing: -.008em; }
.row__body strong { color: var(--ink); font-weight: 600; }
.row__body ul { margin-top: 1.05em; padding-left: 1.15em; color: var(--ink-soft); }
.row__body li { margin-top: .5em; }
.row__body li::marker { color: var(--sapin); }

/* ====================================================================
   COMPARATIF — deux panneaux mis en regard
   Employé deux fois sur la page : air/air contre air/eau, remplacer contre
   reprendre. Il remplace « .duo » et « .bascule », deux colonnes de texte
   séparées d'un filet : on y lisait deux paragraphes, on ne comparait rien.
   ==================================================================== */

/* Titre puis chapô, empilés : le titre ouvre la section avec son filet, il
   n'a plus à partager sa ligne avec un paragraphe. */
.comparatif__head { margin-bottom: clamp(32px, 3.6vw, 52px); }
.comparatif__head h2 { max-width: 17ch; }
/* sous le chapô, le pourquoi : il ouvre la comparaison au lieu de la
   précéder dans une bande à lui */
.comparatif__rappel { margin-top: 14px; max-width: 60ch; color: var(--ink-soft); }

.comparatif {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}
.comparatif__col {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 38px);
  background: #fff;
  border: 1px solid rgba(46, 74, 56, .20);
}
.comparatif__col h3 {
  font-size: var(--t-sub);
  letter-spacing: -.014em;
}
.comparatif__sub {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--sapin);
}
/* La marge basse tient l'écart minimum avec le tableau de faits : « margin-top:
   auto » sur le tableau ne peut pas cumuler avec une marge, et le filet sapin
   venait alors souligner la dernière ligne du paragraphe. */
.comparatif__d { margin-top: 14px; margin-bottom: clamp(24px, 2.6vw, 36px); color: var(--ink-soft); }

/* Le tableau de faits : les mêmes questions posées aux deux familles, dans le
   même ordre, avec les réponses que les paragraphes au-dessus donnent déjà.
   « margin-top: auto » colle les deux tableaux au bas de leur panneau, ce qui
   aligne leurs lignes entre eux quelle que soit la longueur du paragraphe. */
.faits {
  margin: 0;
  margin-top: auto;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 2px solid var(--sapin);
}
.faits > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px clamp(12px, 1.4vw, 20px);
  padding: clamp(10px, 1.1vw, 13px) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.faits > div:first-child { padding-top: clamp(6px, .8vw, 10px); }
.faits > div:last-child { border-bottom: 0; padding-bottom: 0; }
.faits dt {
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.faits dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}

/* Sans tableau de faits à caler en bas, la marge basse du paragraphe n'a plus
   rien à écarter : elle ne faisait que creuser le panneau. */
.comparatif--simple .comparatif__d { max-width: 46ch; margin-bottom: 0; }

@media (max-width: 900px) {
  .comparatif__head h2 { max-width: 20ch; }
  .comparatif { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .faits > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ------------------------------------------------- encart éditorial -- */
/* Un titre à gauche, son texte à droite, sur la teinte claire du site. Sert
   aux blocs qui n'ont rien à replier et que le fond laissait flotter.
   L'aplat était un vert froid propre à ce composant : il rejoint l'ivoire, la
   seule teinte claire secondaire du site. */
.encart {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(18px, 3vw, 56px);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 2.8vw, 40px);
  background: var(--ivory);
  border-left: 3px solid var(--sapin);
}
.encart h3 { font-size: var(--t-sub); letter-spacing: -.014em; max-width: 14ch; }
.encart__corps p { margin: 0; color: var(--ink-soft); max-width: 64ch; }
.encart__corps p + p { margin-top: 12px; }
@media (max-width: 900px) {
  .encart { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .encart h3 { max-width: none; }
}

/* ------------------------------------ note / mise en garde sobre -- */

/* Le fond était un second vert pâle (#F3F6F1) indiscernable de celui de
   l'encart : deux valeurs pour un seul rôle. Une seule reste. */
.note {
  border-left: 2px solid var(--sapin);
  background: var(--ivory);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 38px);
  max-width: 74ch;
}
.note h3 { font-size: var(--t-sub); letter-spacing: -.014em; }
.note p { margin-top: 12px; color: var(--ink-soft); }
.note p + p { margin-top: 10px; }

/* --------------------------------------------- texte + image (split) -- */

/* Le 1,05/0,95 d'origine etait une quasi-moitie : la seconde colonne y
   demarrait a 55 % quand toutes les autres sections la font demarrer a 58 %.
   Un ecart trop petit pour se lire comme une intention, assez grand pour
   casser l'axe d'une page a l'autre. Meme cesure que le reste du site. */
.split {
  display: grid;
  grid-template-columns: var(--split-a) var(--split-b);
  gap: var(--split-gap);
  align-items: center;
}
/* le miroir inverse aussi le rapport, sinon l'image passerait dans la colonne
   large et le texte dans l'etroite */
.split--rev { grid-template-columns: var(--split-b) var(--split-a); }
.split--rev .split__media { order: -1; }
.split__media { margin: 0; }
.split__media img {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  filter: grayscale(.3) contrast(1.02);
}
/* dans la marie-louise, le filet sapin suffit : pas de seconde bordure */
.split__media.cadre img { border: 0; }
.split__media figcaption { margin-top: 12px; font-size: .9rem; color: var(--ink-mute); }
/* Le portrait brut (900 × 1346) cadrait sur le dos du technicien : on ne
   voyait ni les mains ni la ligne frigorifique, et la légende ne
   correspondait pas à l'image. Recadrage sur le geste. */
.split__media--geste img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 52%;
  filter: grayscale(.34) brightness(1.04) contrast(1.02);
}
/* image portrait en hero : plafonnée pour rester secondaire */
.svc-hero .split { align-items: center; }
.svc-hero .split__media img { max-height: clamp(340px, 44vw, 540px); object-fit: cover; object-position: 50% 32%; }
.split__text h2 { font-size: var(--t-section); }
.split__text h3, .row__h h3 { font-size: var(--t-sub); letter-spacing: -.014em; }
.split__text > p { margin-top: 16px; color: var(--ink-soft); max-width: 52ch; }
.split__text > p + p { margin-top: 12px; }

/* -------------------------------------------- points à vérifier -- */

.checks { list-style: none; margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; }
.checks li { padding: 22px 0; border-top: 1px solid var(--rule); }
.checks li:last-child { border-bottom: 1px solid var(--rule); }
.checks h3 { font-size: clamp(1.08rem, 1.4vw, 1.22rem); letter-spacing: -.008em; }
.checks p { margin-top: 8px; color: var(--ink-soft); max-width: 66ch; }

.checks--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5vw, 92px);
}
.checks--cols li:nth-child(2) { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ marques -- */
/* Logos officiels, en couleur, sans cadre et sans filtre.
   Pas de mise en gris : un filtre CSS modifie le logo, et les chartes de
   marque l'interdisent le plus souvent. C'est l'espace autour, et lui seul,
   qui les fait tenir ensemble.
   Chaque marque a sa propre hauteur : les quatre verrous ne se ressemblent
   pas — Daikin et Panasonic sont des logotypes sur une ligne, Mitsubishi
   Electric est un bloc de trois lignes, LG une pastille suivie de deux
   lettres. Une hauteur unique aurait écrasé les uns et gonflé les autres.
   Les proportions d'origine ne sont jamais touchées : seule la hauteur est
   posée, la largeur suit. */

.marques { padding-block: clamp(56px, 6.6vw, 100px); }
.marques__head { max-width: 60ch; }
.marques h2 { font-size: var(--t-section); }
.marques__lead { margin-top: clamp(16px, 1.8vw, 22px); color: var(--ink-lead); font-size: var(--t-lead); line-height: 1.42; }

.marques__list {
  list-style: none;
  margin: clamp(38px, 4.4vw, 64px) 0 0;
  padding: clamp(30px, 3.4vw, 46px) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.marque { display: flex; align-items: center; justify-content: center; }
.marque img {
  display: block;
  width: auto;
  height: var(--h, 34px);
  max-width: 100%;
  opacity: .9;
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.marque img:hover { opacity: 1; transform: translateY(-2px); }

/* hauteurs optiques, réglées verrou par verrou */
.marque--daikin     img { --h: 30px; }
.marque--mitsubishi img { --h: 46px; }
.marque--lg         img { --h: 42px; }
.marque--panasonic  img { --h: 56px; }

.marques__note {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: var(--t-small);
  color: var(--ink-mute);
  max-width: 74ch;
}

/* ----------------------------------- clôture : appel vers l’étude -- */

.close {
  background: var(--nuit);
  color: #fff;
  color-scheme: dark;
  padding-block: clamp(54px, 6.2vw, 94px);
}
.close__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(26px, 4vw, 60px);
}
.close__text { max-width: 50ch; }
.close h2 { font-size: var(--t-section); }
.close__text p { margin-top: 16px; color: rgba(255, 255, 255, .74); }
.close__action { flex-shrink: 0; display: grid; gap: 14px; justify-items: start; }
.close__action .btn { height: 52px; padding-inline: 34px; }
.close__note { font-size: var(--t-small); color: rgba(255, 255, 255, .56); }

/* ============================ page Services (orientation) ============= */

.svc-item { padding-block: clamp(48px, 6vw, 90px); border-top: 1px solid var(--rule); }
.svc-item:first-of-type { border-top: 0; padding-top: clamp(10px, 2vw, 26px); }

.svc-item__grid {
  display: grid;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.svc-item--split .svc-item__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.svc-item--aside .svc-item__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.svc-item--rev .svc-item__media { order: -1; }

.svc-item__media { margin: 0; }
.svc-item__media img {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  filter: grayscale(.3) contrast(1.02);
}
.svc-item--aside .svc-item__media img { max-height: 460px; object-fit: cover; }
.svc-item__media figcaption { margin-top: 10px; font-size: .88rem; color: var(--ink-mute); }

.svc-item h2 { font-size: clamp(1.55rem, 2.4vw, 2.1rem); letter-spacing: -.016em; }
.svc-item__lead { margin-top: 14px; color: var(--ink-soft); max-width: 54ch; }
.svc-item h3 { font-size: clamp(1.02rem, 1.3vw, 1.16rem); margin-top: clamp(20px, 2.2vw, 28px); letter-spacing: -.006em; }
.svc-item p + h3 { margin-top: clamp(20px, 2.2vw, 28px); }
.svc-item ul { margin-top: 10px; padding-left: 1.1em; color: var(--ink-soft); }
.svc-item li { margin-top: .4em; }
.svc-item li::marker { color: var(--sapin); }
.svc-item__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(24px, 3vw, 48px); }
.svc-item__more { margin-top: clamp(22px, 2.6vw, 32px); }
.svc-item__more a {
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: var(--sapin);
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s ease;
}
.svc-item__more a::after { content: "\00A0\2192"; }
.svc-item__more a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ============================ page Réalisations ====================== */

/* Un chantier réel par article. Trois temps, serrés à l'intérieur du
   sujet : l'en-tête (métier, titre, lieu), les photos, puis le récit face à
   la fiche. Les emplacements vides qui tenaient la page ont été retirés :
   la page ne montre que ce qui existe.

   Les photos : une principale verticale et trois horizontales en regard.
   Chacune porte le cadre commun (styles.css, .cadre), et un écart franc
   entre les photos pour que chacune respire. L'image principale est posée en absolu : elle prend la
   hauteur de la colonne voisine au lieu de l'imposer. */
.chantier { padding-block: clamp(40px, 4.6vw, 68px) var(--section-y); }

.chantier__tete { margin-bottom: clamp(28px, 3.4vw, 46px); }
.chantier__k {
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sapin);
}

.chantier h2 {
  margin-top: clamp(12px, 1.3vw, 16px);
  /* titre court (« Projet » + lieu) : il tient sur une ligne en desktop */
  max-width: none;
}
.chantier__lieu {
  margin-top: clamp(12px, 1.3vw, 16px);
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--ink-lead);
}

.chantier__photos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
  gap: clamp(16px, 2vw, 28px);
}
.chantier__ph {
  position: relative;
  margin: 0;
  padding: var(--cadre-air);
  background: var(--paper);
  border: var(--cadre-trait) solid var(--sapin);
}
.chantier__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* étalonnage cuit dans les fichiers (assets/img, originaux dans assets/) */
}

.chantier__ph--main { grid-column: 1; grid-row: 1 / span 2; }
/* le groupe et la goulotte dans le tiers gauche, le débord de toit en haut */
.chantier__ph--main img {
  position: absolute;
  inset: var(--cadre-air);
  width: calc(100% - 2 * var(--cadre-air));
  height: calc(100% - 2 * var(--cadre-air));
  object-position: 30% 50%;
}

.chantier__ph--porte { grid-column: 2 / span 2; }
.chantier__ph--porte img { aspect-ratio: 3 / 2; object-position: 50% 22%; }

.chantier__ph--vert img,
.chantier__ph--niche img { aspect-ratio: 4 / 3; }
/* photo prise en lumière du soir : éclaircie dans le fichier */
.chantier__ph--niche img { object-position: 50% 30%; }

/* Récit à gauche, fiche à droite : la même césure que le reste du site. */
.chantier__texte {
  margin-top: clamp(40px, 4.6vw, 64px);
  display: grid;
  grid-template-columns: var(--split-a) var(--split-b);
  gap: var(--split-gap);
  align-items: start;
}
.chantier__recit { max-width: 60ch; }
.chantier__recit h3 {
  font-size: clamp(1.1rem, 1.35vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.chantier__recit h3 + p { margin-top: 8px; color: var(--ink-soft); }
.chantier__recit p + h3 { margin-top: clamp(22px, 2.4vw, 30px); }

.chantier__faits { margin: 0; border-top: 1px solid var(--rule); }
.chantier__faits div { padding: 14px 0 15px; border-bottom: 1px solid var(--rule-soft); }
.chantier__faits dt {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.chantier__faits dd { margin: 4px 0 0; font-weight: 500; line-height: 1.4; color: var(--ink); }

@media (max-width: 900px) {
  .chantier__texte { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .chantier__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chantier__ph--main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
  .chantier__ph--porte { grid-column: 1 / -1; }
}

/* ============================ page L’entreprise ====================== */

/* Page conçue sans photographie, comme une page éditoriale : les deux
   associés ont un gabarit strictement identique, et la seule couleur
   appuyée de la page est le titre des associés. */

/* Ouverture sans photographie, assumée : le titre à gauche, la présentation
   à droite, calée sur le pied du titre — la composition de l'ouverture de
   Services, pour que les deux pages d'entrée parlent la même langue. Les
   associés suivent directement, sans filet ni titre intermédiaire. */
.ent-ouverture { padding-bottom: 0; }

.ent-ouverture__tete {
  display: grid;
  grid-template-columns: var(--split-a) var(--split-b);
  gap: var(--split-gap);
  align-items: end;
}
.ent-ouverture h1 { max-width: 18ch; }

.ent-intro {
  max-width: 40ch;
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-lead);
}

@media (max-width: 900px) {
  .ent-ouverture__tete { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 4vw, 26px); }
  .ent-ouverture h1 { max-width: 16ch; }
}

/* Entrée resserrée : les associés prolongent l'ouverture, ils n'ouvrent pas
   une nouvelle section. */
.associes { padding-block: clamp(48px, 5.4vw, 84px) var(--section-y); }

.associes__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

/* Le filet-reliure du site, ici structurel : il tient le nom et le parcours
   comme un seul bloc, à gauche de chacun des deux associés. */
.associe {
  border-left: 3px solid var(--sapin);
  padding-left: clamp(20px, 2.4vw, 34px);
}
.associe__nom {
  font-size: clamp(1.7rem, 2.3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.034em;
}
.associe__nom span { display: block; font-weight: 400; }
.associe__role {
  margin-top: 14px;
  font-size: .94rem;
  letter-spacing: .02em;
  color: var(--ink-mute);
}
.associe__txt {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 54ch;
  color: var(--ink-soft);
}
/* Le repère vert du site (.hl), posé ici sur quelques mots du parcours
   plutôt que sur un titre. Poids repris du chapô (.svc-intro__lede .hl) :
   la couleur suffit à guider l'œil, sans peser sur la lecture. */
.associe__txt .hl { color: var(--sapin); font-weight: 500; }

/* Le bas de la bande garde la hauteur de la crête : elle passe sous le
   texte, jamais à travers. */
.ent-methode { padding-bottom: calc(clamp(104px, 13.5vw, 190px) + 12px); }
.ent-methode h2 { max-width: none; }

.temps {
  margin-top: clamp(40px, 4.6vw, 68px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 56px);
}
.temps__i {
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid rgba(22, 35, 47, .22);
}
.temps__i h3 { font-size: var(--t-sub); letter-spacing: -.014em; }
.temps__i p { margin-top: 12px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .associes__duo,
  .temps { grid-template-columns: minmax(0, 1fr); }
  .associes__duo { gap: 48px; }
  .temps { gap: 30px; }
}

/* ============================ page Demander une étude ================ */

.form-wrap { max-width: 760px; }
.form { margin-top: clamp(28px, 3.2vw, 42px); }

/* Le formulaire seul, posé à même le fond ivoire dans un conteneur bien plus
   large que lui, se lisait comme un fragment de HTML brut plutôt que comme
   une étape de la page. Le même traitement de cadre que .ph-frame (bordure
   fine + fond légèrement toné) le rassemble en un seul bloc, centré au lieu
   de plaqué à gauche. Scopé à cette page : le formulaire « Nous rejoindre »,
   qui partage les mêmes classes, n'est pas concerné. */
.page-etude .form-wrap {
  /* Aligné sur le même axe gauche que le fil d'ariane et le h1 au-dessus
     (tous deux posés directement dans le .wrap standard) : un encart centré
     entre une introduction à gauche lisait comme deux mises en page
     différentes sur la même page. */
  max-width: 840px;
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--ivory);
  border: 1px solid var(--rule);
}
.page-etude .form { margin-top: 0; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 32px); }
.field { display: grid; gap: 8px; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 1rem; color: var(--ink-soft); }
.field .opt { color: var(--ink-mute); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  font-family: var(--f-text);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field input:not([type="checkbox"]):not([type="radio"]):hover,
.field select:hover, .field textarea:hover { border-color: rgba(22, 35, 47, .34); }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sapin);
  box-shadow: inset 0 0 0 1px var(--sapin);
}
.field input[type="file"] { padding: 10px 12px; background: #FBFAF7; }
.field__help { font-size: 1rem; color: var(--ink-mute); }

/* Le sélecteur natif traîne sa propre flèche de plateforme, incohérente
   d'un navigateur à l'autre ; le bouton de fichier natif est un rectangle
   gris qui ne parle pas la langue graphique du site. Chevron dessiné en
   SVG (même technique que le filigrane .mtn-bg) et bouton de fichier repris
   du langage de .btn--ghost : bordure fine, fond transparent, aucun rayon. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%23626E7A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  padding-right: 36px;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button,
.field input[type="file"]::-webkit-file-upload-button {
  font-family: var(--f-text);
  font-size: .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.field input[type="file"]:hover::file-selector-button,
.field input[type="file"]:hover::-webkit-file-upload-button {
  border-color: rgba(22, 35, 47, .34);
  background: var(--ivory);
}

/* -------------------------------------------------------- case a cocher -- */
/* La regle « .field input » ci-dessus visait aussi les cases a cocher : sans
   l'exclusion posee plus haut, chaque case heritait de width:100%, d'un
   padding de 12px et d'une bordure pleine largeur — un grand rectangle vide,
   pas une case. Fieldset et cases dessinees ici, independamment des champs
   de texte. */
.field--set { border: 0; margin: 0; padding: 0; }
.field--set legend {
  padding: 0;
  font-size: 1rem;
  color: var(--ink-soft);
}
.chk {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(20px, 2.6vw, 32px);
  row-gap: 12px;
}
.chk__i {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}
.chk__i input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.chk__i input:hover { border-color: rgba(22, 35, 47, .34); }
.chk__i input:focus-visible { outline: 2px solid var(--sapin); outline-offset: 2px; }
/* la coche : un trait dessine en clip-path, pas une image externe */
.chk__i input::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .14s var(--e-label);
  background: var(--sapin);
  clip-path: polygon(14% 44%, 0 63%, 38% 100%, 100% 20%, 82% 4%, 36% 66%);
}
.chk__i input:checked {
  border-color: var(--sapin);
}
.chk__i input:checked::before { transform: scale(1); }
.form__foot { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.form__note { font-size: var(--t-small); color: var(--ink-mute); max-width: 46ch; }

/* --------------------------------------------------------- responsive -- */

@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: minmax(0, 3.6fr) minmax(0, 7fr); gap: 48px; }
}

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 44px); padding-block: clamp(44px, 7vw, 64px); }
  .svc-aside { position: static; }
  .svc-aside ul { max-width: 60ch; }
  /* Pleine largeur, l'aplat du rail redevenait une bande : il tombe, le filet
     reste, et le retrait se réduit à ce que demande le filet. */
  .svc-grid__side {
    position: static;
    background: none;
    padding: 0 0 0 clamp(16px, 4vw, 22px);
  }
  .svc-grid__media { max-width: 460px; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split--rev .split__media { order: 0; }
  .split__media { max-width: 460px; }

  .row { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 3vw, 22px); }
  .row + .row { margin-top: clamp(34px, 6vw, 52px); }

  .svc-item--split .svc-item__grid,
  .svc-item--aside .svc-item__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-item--split .svc-item__media { order: -1; }
  .svc-item--aside .svc-item__media img { max-height: none; }
  .svc-item--aside .svc-item__media { max-width: 520px; }
}

@media (max-width: 760px) {
  .checks--cols { grid-template-columns: minmax(0, 1fr); }
  .checks--cols li:nth-child(2) { border-top: 1px solid var(--rule); }

  .marques__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 7vw, 44px); }
}

@media (max-width: 900px) {

  .chauf-fin { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 40px); }
}

@media (max-width: 520px) {
  .points { grid-template-columns: minmax(0, 1fr); }
  .points > li { border-left: 0; padding-left: 0; padding-right: 0; }
  .points > li + li { border-top: 1px solid var(--rule); }
}

@media (max-width: 560px) {
  .close__action { width: 100%; justify-items: stretch; }
  .close__action .btn { width: 100%; }

  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-item__cols { grid-template-columns: minmax(0, 1fr); }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
}