/* ==========================================================================
   AURALP — passe premium
   Chargée après styles.css et service.css, elle ne fait que reprendre :
   aucune structure, aucun texte, aucune image n'est touché.

   Trois décisions, tenues partout :
     1. Une voix éditoriale. Les titres passent en Newsreader (serif, OFL,
        auto-hébergée) ; le mot en vert devient italique. IBM Plex Sans
        garde la lecture et toute l'interface, en petites capitales espacées.
     2. Plus d'air. Conteneur élargi, échelle des titres relevée, sections
        plus hautes : la page ralentit.
     3. La géométrie du logo, et seulement elle : le Λ sans barre des « A »
        (repère de surtitre, sommets des bandes nuit) et la crête tracée
        (signature du pied de page).
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin-italic.woff2") format("woff2");
}

/* Police de secours calée sur Newsreader : Georgia mise à la même chasse
   (rapports mesurés sur les titres du site). Le temps que Newsreader
   arrive, les titres occupent déjà leur place : ils ne se recomposent plus
   au chargement (décalage de mise en page mesuré à 0,126 sur Services). */
@font-face {
  font-family: "Newsreader Secours";
  font-style: normal;
  src: local("Georgia");
  size-adjust: 95.1%;
}
@font-face {
  font-family: "Newsreader Secours";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 87.8%;
}

:root {
  --f-serif: "Newsreader", "Newsreader Secours", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --wrap:      1320px;
  --gutter:    clamp(20px, 5.2vw, 84px);
  --section-y: clamp(88px, 10.5vw, 168px);

  --t-display: clamp(2.7rem, 6.1vw, 5.6rem);
  --t-section: clamp(2.15rem, 4.1vw, 3.85rem);
  --t-sub:     clamp(1.35rem, 1.9vw, 1.8rem);

  --nuit-deep: #0F1922;
  --hl-dark:   #8DBB9C;

  /* Le Λ du logo, en masque : il prend la couleur de l'élément qui le porte. */
  --lambda: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2011'%3E%3Cpath%20d='M1%2010.4%20L9%201.2%20L17%2010.4'%20fill='none'%20stroke='black'%20stroke-width='1.5'/%3E%3C/svg%3E");

  /* Deux sommets en Λ, sur une même ligne de base : les « A » du logo posés
     comme son massif. Trait seul, très pâle, réservé aux bandes nuit. */
  --sommets: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20520'%20fill='none'%20stroke='%23B4D6BF'%20stroke-width='1.1'%3E%3Cpath%20d='M10%20520%20L330%2056%20L650%20520'%20stroke-opacity='0.17'/%3E%3Cpath%20d='M430%20520%20L610%20259%20L790%20520'%20stroke-opacity='0.11'/%3E%3C/svg%3E");
}

/* ============================================================ typographie == */

h1, h2, h3,
.entree__t,
.entreprise__nom,
.associe__nom,
.metier__t,
.acc__t {
  font-family: var(--f-serif);
  font-optical-sizing: auto;
}

h1, h2 {
  font-weight: 400;
  letter-spacing: -.024em;
  line-height: 1.02;
}
h2 { line-height: 1.04; }
h3 { font-weight: 500; letter-spacing: -.012em; }

/* Le mot porteur : même vert qu'avant, désormais en italique. La couleur
   seule disait « accent » ; l'italique lui donne une voix. */
h1 .hl, h2 .hl { font-style: italic; font-weight: 400; }

/* Les titres de page, de section et d'ouverture forçaient chacun leur graisse
   et leur interlettrage pour la sans : on les ramène à la serif. */
.svc-hero h1,
.svc-intro h1,
.ouverture h2,
.hero__title,
.approche h2,
.etude__text h2,
.close h2,
.prose h2,
.band h2,
.marques h2,
.entreprise h2,
.chantier h2 {
  font-weight: 400;
  letter-spacing: -.026em;
}

/* Les intitulés de colonne du pied de page et le récit de chantier sont des
   étiquettes, pas des titres : ils restent dans la voix de l'interface. */
.foot h2,
.chantier__recit h3 {
  font-family: var(--f-text);
}

body { color: var(--ink); }

/* -------------------------------------------- étiquettes d'interface -- */
/* Surtitres, fil d'ariane, rôles : une seule voix, petites capitales
   espacées. Le Λ du logo précède les surtitres de section. */

.svc-part__k,
.svc-hero__eyebrow,
.chantier__k {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-size: .74rem;
  letter-spacing: .22em;
}
.svc-part__k::before,
.svc-hero__eyebrow::before,
.chantier__k::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--lambda) center / contain no-repeat;
          mask: var(--lambda) center / contain no-repeat;
}

.crumb {
  padding-top: clamp(30px, 4vw, 56px);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.crumb span { color: var(--sapin); }

/* ================================================================ boutons == */
/* Angles vifs conservés. Un aplat glisse de gauche à droite au survol : le
   même geste que les filets qui se tracent ailleurs sur le site. */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 14px;
  height: 56px;
  padding-inline: 30px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .5s var(--e-titre), border-color .5s var(--e-titre), transform .12s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-fill, var(--sapin));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .6s var(--e-titre);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn::after {
  content: "\2192";
  font-size: 1.25em;
  letter-spacing: 0;
  line-height: 1;
  transition: transform .5s var(--e-titre);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(4px); }

.btn--solid { --btn-fill: var(--sapin); }
.btn--solid:hover { background: var(--nuit); border-color: var(--sapin); }

.btn--light { --btn-fill: var(--sapin); }
.btn--light:hover,
.btn--light:focus-visible { background: #fff; border-color: var(--sapin); color: #fff; }

/* focus clavier visible sur fond sombre comme sur fond clair ; appui net */
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn--light:focus-visible,
.btn--clear:focus-visible { outline-color: #fff; }
.btn:active::before { transform: scaleX(1); transition-duration: .15s; }

/* Groupe de deux actions sur fond sombre : principal blanc, secondaire
   sombre en contour. Chacun vire au vert sapin (texte blanc) au survol et au
   focus clavier ; le voisin garde sa couleur de repos. */
.btn--clear { --btn-fill: var(--sapin); }
.btn--clear:hover,
.btn--clear:focus-visible { background: transparent; border-color: var(--sapin); color: #fff; }

.btn--outline { --btn-fill: var(--sapin); }
.btn--outline:hover { background: transparent; color: #fff; }

.btn--ghost { --btn-fill: var(--ivory); }
.btn--ghost:hover { background: transparent; }

/* Boutons d'appel (« data-appel ») : les boutons ci-dessus, plus le
   numéro, séparé du libellé par un filet (numéro : script.js, TELEPHONE). */
.appel__num {
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.btn.appel { white-space: nowrap; }
/* Sur téléphone, libellé et numéro tiennent sur une ligne : la flèche
   s'efface, les capitales se resserrent. */
@media (max-width: 560px) {
  .btn.appel { gap: 12px; padding-inline: 16px; letter-spacing: .1em; }
  .btn.appel::after { display: none; }
  .appel__num { padding-left: 12px; }
}
/* Très étroit : le numéro passe sous le libellé, sans filet. */
@media (max-width: 400px) {
  .btn.appel { flex-direction: column; gap: 4px; height: auto; min-height: 60px; padding-block: 11px; }
  .btn.appel .appel__num { padding-left: 0; border-left: 0; }
}

/* Lien de suite : capitales espacées sur un filet permanent, le vert se
   trace par-dessus au survol. */
.lien-suite a {
  font-family: var(--f-text);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: 6px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(rgba(46, 74, 56, .28), rgba(46, 74, 56, .28)) 0 100% / 100% 1px no-repeat;
  transition: background-size 520ms var(--e-trace);
}
.lien-suite a:hover,
.lien-suite a:focus-visible { background-size: 100% 1px, 100% 1px; }
.approche .lien-suite a {
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(rgba(180, 214, 191, .3), rgba(180, 214, 191, .3)) 0 100% / 100% 1px no-repeat;
}

/* Relances internes (Services) : même voix que le lien de suite. */
.svc-grid__cta a,
.svc-next a:not(.btn),
.svc-jump a {
  font-family: var(--f-text);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.svc-grid__cta--preuve a {
  font-size: .76rem;
  letter-spacing: .12em;
}

/* =============================================================== en-tête == */
/* Logo à gauche, navigation au centre, action à droite. L'en-tête s'efface
   quand on descend et revient dès qu'on remonte (script.js). */

.head {
  border-bottom-color: transparent;
  transition: transform .55s var(--e-titre), border-color .3s ease;
}
.head.is-scrolled { border-bottom-color: var(--rule-soft); }
.head.is-hidden { transform: translateY(-101%); }

.head__in { grid-template-columns: auto 1fr auto; }
.head__cluster { display: contents; }
.head__nav { justify-self: center; gap: clamp(20px, 2.4vw, 40px); }
.head__nav a {
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-block: 6px;
}
.head__nav a::after { bottom: -2px; }
.head__cta {
  justify-self: end;
  height: 46px;
  padding-inline: 22px;
  font-size: .72rem;
  letter-spacing: .16em;
}
.head__logo img { height: 48px; }

@media (max-width: 1180px) {
  .head__nav { gap: 18px; }
  .head__nav a { font-size: .68rem; letter-spacing: .12em; }
}

/* Menu mobile : un panneau plein écran, les pages en grand dans la voix des
   titres. Toujours sans JavaScript (<details>).
   La navigation passe dans le menu, mais pas l'action : « Demander une
   étude » reste dans l'en-tête, en aplat sapin à côté du menu (l'action
   principale, le menu en filet). Elle suit l'en-tête, qui s'efface à la
   descente et revient à la remontée : rien de fixe ne s'ajoute à l'écran.
   Sous 560 px, le libellé se réduit à « Étude » ; le nom complet reste
   celui du lien pour les lecteurs d'écran. */
@media (max-width: 1080px) {
  .head__nav { display: none; }
  .mnav { display: block; }
  .head__in { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; }

  .head__cta { background: var(--sapin); border-color: var(--sapin); color: #fff; }
  .head__cta[aria-current] { display: none; }

  .mnav > summary {
    padding: 11px 18px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  .mnav__panel {
    position: fixed;
    top: var(--head-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--head-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 5vw, 44px) var(--gutter) clamp(28px, 7vw, 48px);
    border-top: 1px solid var(--rule-soft);
    border-bottom: 0;
  }
  .mnav__panel a {
    padding: clamp(12px, 2.6vw, 18px) 0;
    font-family: var(--f-serif);
    font-size: clamp(1.75rem, 7vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .mnav__cta {
    margin-top: auto !important;
    font-family: var(--f-text) !important;
    font-size: .78rem !important;
    font-weight: 500;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    padding: 19px 0 !important;
  }
  /* l'appel, sous l'action principale : la même forme, en filet */
  .mnav__panel .mnav__appel {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 18px 0;
    border: 1px solid var(--sapin);
    font-family: var(--f-text);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sapin);
  }
  @media (prefers-reduced-motion: no-preference) {
    .mnav[open] .mnav__panel { animation: menu-fond .4s var(--e-titre) both; }
    .mnav[open] .mnav__panel a { animation: menu-ligne .55s var(--e-titre) both; }
    .mnav[open] .mnav__panel a:nth-child(2) { animation-delay: 40ms; }
    .mnav[open] .mnav__panel a:nth-child(3) { animation-delay: 80ms; }
    .mnav[open] .mnav__panel a:nth-child(4) { animation-delay: 120ms; }
    .mnav[open] .mnav__panel a:nth-child(5) { animation-delay: 160ms; }
    .mnav[open] .mnav__panel a:nth-child(6) { animation-delay: 220ms; }
    .mnav[open] .mnav__panel a:nth-child(7) { animation-delay: 260ms; }
  }
}
@keyframes menu-fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-ligne {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================= héros == */

.hero__banner {
  min-height: clamp(560px, calc(100svh - var(--head-h)), 940px);
}
.hero__in { padding-block: clamp(48px, 7vw, 112px); }

/* Le héros a grandi : le titre monte plus haut sur la façade claire. Le
   voile latéral s'étend et se densifie d'un cran pour tenir l'italique. */
/* La marque devient un surtitre : plus petite, prolongée d'un filet. */
.hero__marque {
  display: flex;
  align-items: center;
  margin-bottom: clamp(22px, 2.6vw, 34px);
  font-size: clamp(.86rem, 1vw, 1rem);
  letter-spacing: .42em;
}
.hero__marque::after {
  content: "";
  margin-left: 6px;
  width: clamp(40px, 5vw, 72px);
  height: 1px;
  background: rgba(255, 255, 255, .55);
}

.hero__title {
  font-size: clamp(2.9rem, 7vw, 6.8rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.03em;
  max-width: 10.4em;
  text-shadow: 0 2px 30px rgba(6, 12, 18, .35);
}
.hero__lead { margin-top: clamp(24px, 2.6vw, 34px); max-width: 44ch; }
.hero__cta { margin-top: clamp(30px, 3.4vw, 46px); }
.hero__tel { margin-top: 18px; font-size: .95rem; color: rgba(255, 255, 255, .78); }
.hero__tel-lien { color: #fff; font-weight: 500; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.hero__tel-lien:hover { border-bottom-color: #8DBB9C; }

/* L'italique déborde à droite de sa boîte : le cache du titre s'ouvre
   aussi sur les côtés. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title { animation-name: hero-titre-p; animation-duration: 900ms; }
  .hero__img   { animation-duration: 1600ms; }
}
@keyframes hero-titre-p {
  from { clip-path: inset(106% -.4em -.25em -.4em); transform: translate3d(0, .32em, 0); }
  to   { clip-path: inset(-.4em -.4em -.25em -.4em); transform: none; }
}

/* ========================================================== accueil ===== */

.solutions { padding-block: var(--section-y); }
.solutions__text h2 { max-width: 13ch; }
/* La photographie et son aplat : voir « SYSTÈME PHOTOGRAPHIQUE », en fin de
   feuille. */

/* Sommaire des deux métiers : titres en serif, flèche dans un carré qui se
   remplit au survol. */
.entree { padding: clamp(22px, 2.4vw, 32px) 0; column-gap: 28px; }
.entree__t {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.1;
  transition: color .3s ease, transform .6s var(--e-titre);
}
.entree__d {
  margin-top: 8px;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.entree::after {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--rule);
  font-size: 1.1rem;
  transition: background-color .45s var(--e-titre), border-color .45s var(--e-titre), color .45s var(--e-titre);
}
.entree:hover::after,
.entree:focus-visible::after {
  transform: none;
  background: var(--sapin);
  border-color: var(--sapin);
  color: #fff;
}
.entree:hover .entree__t,
.entree:focus-visible .entree__t { transform: translateX(10px); }

/* La thèse : un vrai moment, plus grand que les autres titres. */
.approche { padding-block: calc(var(--section-y) * 1.05) calc(var(--section-y) + clamp(56px, 7vw, 110px)); }
.approche h2 {
  font-size: clamp(2.5rem, 5.8vw, 5.4rem);
  line-height: 1;
  max-width: 15ch;
}
.approche h2 span { font-style: italic; font-weight: 400; }
.approche__pied { margin-top: clamp(48px, 5.4vw, 80px); }

/* Aperçu des réalisations : les cartes projet sont décrites avec les
   autres photographies, en fin de feuille. */
.apercu { padding-block: var(--section-y) clamp(72px, 8vw, 120px); }

/* Les deux associés : prénom droit, nom en italique, sur un filet fin. */
.entreprise { padding-block: clamp(72px, 8vw, 128px) var(--section-y); }
.entreprise__noms li {
  border-left: 1px solid var(--sapin);
  padding-block: 4px;
}
.entreprise__nom,
.associe__nom {
  font-size: clamp(2.1rem, 3.4vw, 3.15rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.024em;
}
.entreprise__nom span,
.associe__nom span { font-style: italic; color: var(--ink-lead); }
.entreprise__role,
.associe__role {
  margin-top: 18px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sapin);
}

/* ======================================================== bandes nuit == */
/* Appels finaux : titre en grand, deux sommets en Λ posés sur le bas de la
   bande, côté action. */

.etude,
.close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(84px, 9.5vw, 150px);
}
.etude::before,
.close::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -3vw;
  bottom: -1px;
  width: clamp(380px, 48vw, 780px);
  aspect-ratio: 800 / 520;
  background: var(--sommets) right bottom / contain no-repeat;
  pointer-events: none;
}
.etude__in,
.close__in { align-items: flex-end; }
.etude__text,
.close__text { max-width: 58ch; }
.etude__text h2,
.close h2 {
  font-size: clamp(2.3rem, 4.6vw, 4.3rem);
  line-height: 1.02;
  max-width: 15ch;
}
.etude__text p,
.close__text p { margin-top: clamp(20px, 2vw, 26px); max-width: 52ch; }
.etude__action .btn,
.close__action .btn { height: 60px; padding-inline: 36px; }
/* deux actions, l'étude puis l'appel : même largeur, l'une sous l'autre */
.etude__action,
.close__action { justify-items: stretch; }
.etude__note,
.close__note { font-size: .86rem; }

/* ========================================================= pied de page == */

.foot {
  background: var(--nuit-deep);
  border-top: 0;
  padding-top: clamp(72px, 8vw, 120px);
}
.foot__mark { font-size: 1.5rem; letter-spacing: .34em; }
.foot__brand p { margin-top: 20px; font-size: 1rem; }
.foot h2 {
  margin-bottom: 20px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}
.foot nav a {
  width: fit-content;
  background: linear-gradient(#8DBB9C, #8DBB9C) 0 calc(100% - 4px) / 0 1px no-repeat;
  transition: color .3s ease, background-size .5s var(--e-trace);
}
.foot nav a:hover { color: #fff; text-decoration: none; background-size: 100% 1px; }
.foot__grid { padding-bottom: clamp(40px, 4vw, 60px); }

/* La crête du logo : une ligne continue à trois sommets, et une crête
   lointaine plus pâle, en fondu aux deux bouts, qui ne la croise jamais.
   Elle se dessine quand on l'atteint (script.js, famille « tracé »). */
.foot__crete { line-height: 0; }
.foot__crete svg { display: block; width: 100%; height: auto; overflow: visible; }
.foot__crete path {
  fill: none;
  stroke: #8DBB9C;
  stroke-opacity: .42;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foot__crete .foot__crete-loin { stroke: url(#crete-fondu); stroke-opacity: .24; stroke-width: 1.3; }
.foot__crete [data-draw-path] { transition-duration: 2.6s; }
.foot__bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ================================================ pages intérieures ===== */

.svc-hero { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(16px, 2vw, 28px); }
.svc-hero h1,
.svc-intro h1 { line-height: .98; max-width: 13ch; }
.svc-lede,
.ent-intro,
.svc-intro__lede { font-size: clamp(1.15rem, .95rem + .6vw, 1.38rem); }
.svc-lede { padding-top: clamp(22px, 2.4vw, 30px); margin-top: clamp(28px, 3.2vw, 44px); }
.svc-intro { padding-top: clamp(24px, 3vw, 40px); }
.ent-ouverture h1 { max-width: 15ch; }

/* --------------------------------------------------------- Services -- */

.metier { min-height: clamp(340px, 31vw, 460px); padding: clamp(24px, 2.6vw, 40px); }
.metier__t {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.02;
}
.metier__go {
  font-family: var(--f-text);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.metier__img { transition: transform 1.1s var(--e-matiere), filter .6s ease; }

.ouverture { grid-template-rows: minmax(clamp(360px, 34vw, 520px), auto); }
.ouverture h2 { max-width: 12ch; line-height: 1; }
.ouverture__texte { padding-block: clamp(40px, 4.4vw, 64px); }

.svc-grid { padding-block: clamp(64px, 7.6vw, 120px); }
.svc-grid__side h3 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 400; line-height: 1.12; }
.svc-grid__side { border-left-width: 1px; }

.acc__t { font-size: clamp(1.3rem, 1.75vw, 1.6rem); font-weight: 400; letter-spacing: -.014em; }
.acc__sum { padding: clamp(24px, 2.6vw, 32px) 0; }


.comparatif { gap: clamp(18px, 2vw, 32px); }
.comparatif__col {
  padding: clamp(28px, 3.2vw, 48px);
  background: var(--paper);
  border-color: rgba(46, 74, 56, .16);
  transition: border-color .4s ease;
}
.comparatif__col:hover { border-color: rgba(46, 74, 56, .4); }
.comparatif__col h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.02em; }
.comparatif__sub { font-family: var(--f-text); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 12px; }
.faits { border-top-width: 1px; }
.faits dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }

.marques__list { border-color: var(--rule-soft); }

/* ------------------------------------------------------- Réalisations -- */
/* La planche photographique et la galerie : en fin de feuille. */

.chantier__recit h3 {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sapin);
}
.chantier__recit h3 + p { margin-top: 10px; }
.chantier__recit p + h3 { margin-top: clamp(28px, 3vw, 38px); }
.chantier__faits { border-top-color: var(--sapin); }
.chantier__faits div { padding: 16px 0 18px; }
.chantier__faits dt { font-size: .7rem; letter-spacing: .2em; }
.chantier__faits dd {
  margin-top: 6px;
  font-family: var(--f-serif);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------- Entreprise -- */

.associe { border-left-width: 1px; }
.associe__txt { margin-top: clamp(24px, 2.6vw, 34px); }

.temps__i {
  position: relative;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top-color: var(--rule);
}
.temps__i::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--sapin);
}
.temps__i h3 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 400; letter-spacing: -.02em; }
.temps__i p { margin-top: 14px; }

/* --------------------------------------------- Nous rejoindre, formulaires -- */

.etude__suite-t { font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.checks h3 { font-weight: 500; }

.page-etude .form-wrap {
  padding: clamp(28px, 3.4vw, 48px);
  border: 0;
}
/* Demander une étude : le formulaire et, à côté, ce qui suit l'envoi. */
.etude__duo { display: grid; grid-template-columns: var(--split-a) var(--split-b); gap: var(--split-gap); align-items: start; }
.etude__duo .form-wrap { max-width: none; }
.etude__suite { padding-top: clamp(4px, 1vw, 12px); }
.etude__suite .checks { margin-top: clamp(18px, 2vw, 26px); }
.etude__appel { margin-top: clamp(28px, 3vw, 40px); }
/* boutons ajoutés aux points de décision (Réalisations, L'entreprise) */
.svc-hero__action { margin-top: clamp(24px, 2.6vw, 34px); }
.ent-methode__action { margin-top: clamp(40px, 4.4vw, 60px); }
.etude__appel p { margin-bottom: 14px; color: var(--ink-soft); }
.etude__appel .etude__mail { margin: 14px 0 0; font-size: .95rem; }
.etude__mail a { color: var(--sapin); text-underline-offset: 4px; }
/* Version de validation : envoi des formulaires désactivé, dit clairement. */
.form__envoi {
  flex-basis: 100%;
  margin: 0 0 4px;
  padding: 12px 16px;
  border-left: 2px solid var(--sapin);
  background: var(--paper);
  font-size: .95rem;
  color: var(--ink-soft);
}
.form__envoi a { color: var(--sapin); text-underline-offset: 3px; }
.form__foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
.form__foot .btn[disabled]::before,
.form__foot .btn[disabled]::after { transition: none; transform: none; }
@media (max-width: 900px) {
  .etude__duo { grid-template-columns: minmax(0, 1fr); }
}

/* Nous rejoindre : une ouverture à l'échelle d'un titre de section, les
   informations pratiques en une seule rangée de trois colonnes séparées
   d'un filet (pas de cartes), puis le formulaire seul dans une colonne
   centrale. */
.rejoindre-ouverture { padding-bottom: clamp(56px, 6vw, 88px); }
.rejoindre-ouverture h1 { font-size: var(--t-section); max-width: 14ch; }
.rejoindre__infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px clamp(28px, 3.4vw, 56px);
  margin: clamp(40px, 4.6vw, 64px) 0 0;
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--rule);
}
.rejoindre__infos dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sapin);
}
.rejoindre__infos dd { margin: 10px 0 0; max-width: 38ch; color: var(--ink-soft); }
.rejoindre-form { padding-block: clamp(56px, 6.4vw, 96px); }
.rejoindre__col { max-width: 760px; margin-inline: auto; }
.rejoindre__col .band__lead { max-width: 56ch; }
.rejoindre__col .form-wrap { max-width: none; }
@media (max-width: 900px) {
  .rejoindre__infos { grid-template-columns: minmax(0, 1fr); }
}
.field { gap: 10px; }
.field label,
.field--set legend {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field .opt { letter-spacing: .08em; text-transform: none; font-weight: 400; }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  padding: 15px 16px;
  font-size: 1.02rem;
  border-color: rgba(22, 35, 47, .18);
}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  box-shadow: inset 0 -2px 0 var(--sapin);
  border-color: var(--sapin);
}
.chk__i { font-size: 1rem; text-transform: none; letter-spacing: 0; }
.field__help { font-size: .94rem; }

/* ============================================================ mouvement == */
/* Les photographies révélées par un volet arrivent aussi de plus près :
   elles se posent pendant que le volet s'ouvre. Rapprochement court et
   léger : la photo est lisible dès l'ouverture du volet, sans attente. */

@media (prefers-reduced-motion: no-preference) {
  [data-anim^="wipe"] img { transition: transform 1.1s var(--e-matiere); }
  [data-anim^="wipe"].is-wait img { transform: scale(1.05); }
}

/* ========================================================= responsive == */

@media (max-width: 900px) {
  .hero__banner { min-height: 0; }
  .hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1; }
  .hero__marque { font-size: .8rem; }

  .etude::before,
  .close::before { width: 92vw; right: -18vw; opacity: .8; }
  .etude__in,
  .close__in { align-items: flex-start; }

  .metier { min-height: clamp(260px, 62vw, 360px); }
}

@media (max-width: 360px) {
  .hero__title { font-size: clamp(2.05rem, 10.2vw, 2.6rem); }
}

@media (max-width: 560px) {
  :root { --t-section: clamp(2.05rem, 8.6vw, 2.5rem); }
  .hero__title { letter-spacing: -.026em; }
  .entree::after { width: 44px; height: 44px; }
  .foot__bar { flex-direction: column; }
  .btn { padding-inline: 24px; }

  /* en-tête : logo, « Étude », menu tiennent sur une ligne dès 360 px */
  .head__in { column-gap: 8px; }
  .head__cta { height: 42px; padding-inline: 14px; }
  .head__cta::after { content: none; }
  .head__cta-plus {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mnav > summary { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .head { transition: none; }
  .btn::before, .btn::after,
  .entree__t { transition: none; }
}

/* ==========================================================================
   PASSE 2 — affinage
   Cinq gestes, aucun nouvel élément de contenu :
     1. l'aura : les fonds nuit reçoivent une lumière, ils ne sont plus à plat ;
     2. une descente tonale : chaque page s'assombrit vers sa conclusion ;
     3. l'horizon : les séparateurs s'élèvent en Λ à leur départ ;
     4. des plans : les photographies posées sur un aplat (règles reprises
        dans « SYSTÈME PHOTOGRAPHIQUE », en fin de feuille) ;
     5. la profondeur : la photographie du héros se déplace moins vite que la
        page, et quelques finitions de matière.
   ========================================================================== */

/* -------------------------------------------------- italiques, dosage -- */
/* L'italique reste aux phrases qui ont une voix (titres de page, thèse,
   appels finaux). Sur un mot-étiquette ou un nom propre, le vert suffit. */
h1 .hl.hl--droit,
h2 .hl.hl--droit { font-style: normal; }

/* ------------------------------------------------------------- 1. aura -- */
/* Un halo vert très bas, venu d'un angle, comme une lumière rasante sur une
   matière sombre ; l'angle opposé descend d'un cran. Le filet clair de
   l'arête haute est la lumière accrochée au bord du volume. */
:root {
  --aura:
    radial-gradient(110% 120% at 0% 0%, rgba(141, 187, 156, .13) 0%, rgba(141, 187, 156, .04) 38%, rgba(141, 187, 156, 0) 62%),
    radial-gradient(90% 90% at 100% 100%, rgba(6, 11, 16, .42) 0%, rgba(6, 11, 16, 0) 64%);
  --arete: inset 0 1px 0 rgba(180, 214, 191, .1);
}

.approche,
.etude,
.close,
.foot {
  position: relative;
  isolation: isolate;
  box-shadow: var(--arete);
}
.approche::after,
.etude::after,
.close::after,
.ouverture__texte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--aura);
  pointer-events: none;
}
.ouverture__texte { isolation: isolate; }
.ouverture__texte::before { z-index: -1; }
/* le panneau des pompes à chaleur est à gauche : sa lumière vient de la
   photographie, donc de la droite */
.ouverture--pac .ouverture__texte::before {
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(141, 187, 156, .13) 0%, rgba(141, 187, 156, .04) 38%, rgba(141, 187, 156, 0) 62%),
    radial-gradient(90% 90% at 0% 100%, rgba(6, 11, 16, .42) 0%, rgba(6, 11, 16, 0) 64%);
}

/* Le pied de page : une lueur d'aube derrière la crête, et rien d'autre. */
.foot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 46% at 50% 100%, rgba(141, 187, 156, .1) 0%, rgba(141, 187, 156, .03) 45%, rgba(141, 187, 156, 0) 72%);
  pointer-events: none;
}

/* Sur mobile, le texte du héros pose sur le fond du bandeau : il reçoit la
   même lumière que les autres bandes nuit. */
.hero__banner { background: var(--aura), var(--nuit); }

/* ----------------------------------------------- 2. descente tonale -- */
/* Accueil : papier, ivoire, nuit, nuit profonde. « Derrière AURALP » passe
   en ivoire ; le changement de fond sépare désormais les deux sections,
   le filet n'a plus de rôle. */
.page-accueil .sep--accueil { display: none; }
.page-accueil .entreprise {
  background: var(--ivory);
  padding-block: var(--section-y);
}
.page-accueil .apercu { padding-bottom: var(--section-y); }

/* ---------------------------------------------------------- 3. horizon -- */
/* Le filet de séparation part d'un petit sommet sapin, aligné sur le bord
   gauche du contenu, puis court en gris jusqu'au bout : une ligne d'horizon. */
.trait {
  height: 12px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2046%2012'%3E%3Cpath%20d='M0%2011.5%20H12%20L23%201.2%20L34%2011.5%20H46'%20fill='none'%20stroke='%232E4A38'%20stroke-width='1.2'/%3E%3C/svg%3E") left bottom / 46px 12px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 46px 100% / calc(100% - 46px) 1px no-repeat;
}

/* ----------------------------------------------------------- 4. plans -- */
/* Repris dans « SYSTÈME PHOTOGRAPHIQUE », en fin de feuille. */

/* Services : au survol d'un métier, un filet de passe-partout se pose à
   l'intérieur du panneau, comme le cadre d'un tirage. */
.metier::before {
  inset: clamp(12px, 1.2vw, 16px);
  border-width: 1px;
  transition: opacity .5s var(--e-titre), inset .6s var(--e-titre);
}
@media (hover: hover) and (min-width: 901px) {
  .metier:hover::before { opacity: .45; }
}
.metier:focus-visible::before { border-width: 2px; opacity: 1; }

/* ------------------------------------------------- 5. finitions -- */

/* Les titres serif : crénage et ligatures du dessin, ponctuation suspendue
   là où le navigateur sait le faire. */
h1, h2, h3, .entree__t, .entreprise__nom, .associe__nom, .metier__t, .acc__t {
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  hanging-punctuation: first;
}

/* Le chapô d'ouverture et la fiche de chantier s'alignent sur des chiffres
   de même chasse quand il y en a. */
.chantier__faits dd,
.faits dd { font-variant-numeric: lining-nums; }

/* Comparatif : la carte au survol gagne l'arête sapin en tête, la même
   ligne que celle qui ouvre son tableau de faits. */
.comparatif__col { position: relative; }
.comparatif__col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--sapin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--e-trace);
}
.comparatif__col:hover::before { transform: scaleX(1); }

/* --------------------------------------------- parallaxe du héros -- */
/* Posée par script.js sur la propriété « translate », indépendante du
   « transform » qui porte déjà le miroir et l'animation d'entrée. */
.hero__img { will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  .comparatif__col::before, .metier::before { transition: none; }
}

/* ==========================================================================
   PASSE 3 — finitions
   Italiques dosés, habillage photographique unique, reliefs redessinés.
   ========================================================================== */

/* ------------------------------------------------------------ italiques -- */
/* Les noms de famille ne portent plus d'italique : rien ne le justifiait.
   Prénom et nom restent distingués par le ton, comme sur une signature. */
.entreprise__nom span,
.associe__nom span { font-style: normal; color: var(--ink-soft); }

/* ----------------------------------------------- habillage photographique -- */
/* Repris et complété dans « SYSTÈME PHOTOGRAPHIQUE », en fin de feuille. */

/* ------------------------------------------------------------- reliefs -- */
/* L'ancienne crête était une ligne brisée continue, plus proche d'un relevé
   de mesure que d'un paysage. Elle cède la place à un horizon en trois plans
   (assets/brand/horizon-*.svg) : massif lointain voilé, chaîne portant les
   trois sommets du logo et leur seul contour, replat du premier plan. Calé
   à droite, il garde les sommets dans le champ sur mobile. Deux usages
   seulement : la thèse de l'accueil et la méthode de L'entreprise. */
.approche {
  background-image: url("assets/brand/horizon-nuit.svg");
  background-size: max(100%, 1100px) auto;
  background-position: right bottom;
}
.ent-methode.mtn-bg {
  background-image:
    url("assets/brand/horizon-ivoire.svg"),
    var(--grain);
  background-size: max(100%, 1100px) auto, 220px 220px;
  background-position: right bottom, 0 0;
  background-repeat: no-repeat, repeat;
  padding-bottom: calc(max(165px, 15vw) + 24px);
}

/* Les deux Λ des bandes d'appel répétaient le même dessin en bas de chaque
   page : ces bandes gardent leur lumière, et rien d'autre. */
.etude::before,
.close::before { content: none; }

/* --------------------------------------------------------------- matière -- */
/* Un grain très fin sur les seules bandes ivoire : une matière d'enduit,
   perceptible de près, invisible de loin. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.09%200%200%200%200%200.14%200%200%200%200%200.18%200%200%200%200.05%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
}
.page-accueil .entreprise,
.band--vert,
.band--ivory:not(.ent-methode) {
  background-image: var(--grain);
  background-size: 220px 220px;
}

/* ==========================================================================
   LISIBILITÉ — texte posé sur photographie
   Corrections mesurées sur captures (1440 et 390 px), rien d'autre ne bouge.
   ========================================================================== */

/* Héros : la façade beige et ses joints clairs montent derrière « réversible »
   et le chapô. Le voile latéral descend plus loin vers la droite, le vert
   des accents s'éclaircit d'un cran (même teinte), le bouton secondaire
   reçoit un fond nuit léger qui tient sa bordure. */
.hero__veil {
  background:
    radial-gradient(ellipse 62% 32% at 42% 52%, rgba(10, 17, 24, .6) 0%, rgba(10, 17, 24, .34) 55%, transparent 100%),
    linear-gradient(to top, rgba(10, 17, 24, .88) 0%, rgba(10, 17, 24, .64) 30%, rgba(10, 17, 24, .3) 58%, rgba(10, 17, 24, .12) 100%),
    linear-gradient(to right, rgba(10, 17, 24, .78) 0%, rgba(10, 17, 24, .62) 36%, rgba(10, 17, 24, .4) 64%, rgba(10, 17, 24, .14) 84%, transparent 96%);
}
.hero__title { --hl: #AAD5B9; text-shadow: 0 1px 3px rgba(6, 12, 18, .28), 0 2px 28px rgba(6, 12, 18, .42); }
.hero__marque span { color: #AAD5B9; }
.hero__lead { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 14px rgba(6, 12, 18, .45); }
.btn--clear { background: rgba(10, 17, 24, .3); border-color: rgba(255, 255, 255, .75); }
.btn--clear:hover,
.btn--clear:focus-visible { background: rgba(10, 17, 24, .3); border-color: var(--sapin); }

/* Cartes de Services, au repos : le titre se posait sur le gris clair de la
   photographie. Le voile du pied monte plus haut et se densifie ; au survol
   (déjà satisfaisant) rien ne change. */
.metier__t { text-shadow: 0 1px 3px rgba(8, 14, 20, .35), 0 1px 18px rgba(8, 14, 20, .5); }
.metier__go { color: #C3E2CE; text-shadow: 0 1px 10px rgba(8, 14, 20, .55); }
@media (hover: hover) and (min-width: 901px) {
  .metier__veil {
    background: linear-gradient(to top,
      rgba(12, 20, 28, .8) 0%,
      rgba(12, 20, 28, .56) 26%,
      rgba(12, 20, 28, .22) 48%,
      transparent 68%);
  }
}
/* Mobile et appareils sans survol : tout le texte est affiché en permanence
   sur la photo, y compris sur l'unité blanche. Voile plus dense et plus haut. */
@media (max-width: 900px), (hover: none) {
  .metier__veil {
    background: linear-gradient(to top,
      rgba(12, 20, 28, .86) 0%,
      rgba(12, 20, 28, .7) 36%,
      rgba(12, 20, 28, .46) 62%,
      rgba(12, 20, 28, .14) 86%,
      transparent 100%);
  }
  .metier__d { text-shadow: 0 1px 3px rgba(8, 14, 20, .4), 0 1px 14px rgba(8, 14, 20, .55); }
}

/* ==========================================================================
   BLOC 3 — taille optique des marques
   (Les photographies de ce bloc sont reprises dans « SYSTÈME
   PHOTOGRAPHIQUE », en fin de feuille.)
   ========================================================================== */

/* 3. Marques ---------------------------------------------------------------
   Hauteurs recalculées sur l'encre réelle de chaque logo (boîte visible et
   densité), pour une surface perçue égale : Daikin et Mitsubishi Electric
   gagnent un cran, la pastille pleine de LG en perd un, Panasonic compense
   les marges vides de son fichier. Proportions d'origine intactes. */
.marque--daikin     img { --h: 33px; }
.marque--mitsubishi img { --h: 50px; }
.marque--lg         img { --h: 37px; }
.marque--panasonic  img { --h: 60px; }
@media (max-width: 760px) {
  .marque--daikin     img { --h: 28px; }
  .marque--mitsubishi img { --h: 43px; }
  .marque--lg         img { --h: 32px; }
  .marque--panasonic  img { --h: 52px; }
}

/* ==========================================================================
   BLOC 4 — champ de téléchargement des photos (mobile)
   Le champ natif aligne bouton et texte d'état sur une ligne : sur écran
   étroit, « Aucun fichier choisi » était coupé (« Aucun …r choisi »). Sous
   560 px, le bouton prend sa propre ligne, le texte d'état se pose dessous,
   en entier, dans la voix de l'interface.
   ========================================================================== */
.field input[type="file"] {
  font-family: var(--f-text);
  font-size: .94rem;
  color: var(--ink-mute);
}
@media (max-width: 560px) {
  .field input[type="file"] { padding: 14px 16px 16px; line-height: 1.4; }
  .field input[type="file"]::file-selector-button,
  .field input[type="file"]::-webkit-file-upload-button {
    display: block;
    margin: 0 0 12px;
    padding: 12px 18px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}

/* Spécialités (Nous rejoindre) : ce sont des choix de contenu, pas des
   intitulés. La règle des libellés de champ (capitales espacées) les
   atteignait aussi ; ils reprennent la casse et le ton du texte courant. */
.field .chk__i {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* ==========================================================================
   SYSTÈME PHOTOGRAPHIQUE
   Toute photographie du site relève de l'un de quatre registres. Jamais
   d'ombre, d'arrondi ni d'équerre : la profondeur vient des plans, le bord
   net d'un filet intérieur d'un pixel, ton sur ton (les murs blancs ne se
   fondent plus dans le papier).

     immersif        héros de l'accueil, ouvertures et cartes de Services :
                     pleine largeur ou pleine cellule, sans cadre. Leurs
                     règles restent dans styles.css et service.css.
     accompagnement  une photographie seule à côté d'un texte (accueil,
                     « Nos solutions ») : calée sur le bord droit de la
                     grille, posée sur un aplat ivoire au même ratio qu'elle
                     (93 %), décalé vers le bas et la gauche.
     planche         les photographies d'un projet : une planche ivoire,
                     marges et gouttières égales, la présentation d'une
                     monographie d'architecture. Les cartes projet de
                     l'accueil en sont la réduction. Ce sont elles qui
                     ouvrent la galerie plein écran.
     emplacement     une photographie attendue : le gabarit exact de l'image
                     qu'il annonce, un fond et une mention, rien d'autre.

   Communs : un format fixe par emplacement (l'image est recadrée par
   object-fit, jamais déformée), un fond ivoire tant qu'elle charge.
   ========================================================================== */

:root {
  --filet-photo: rgba(22, 35, 47, .14);
  --plan:        clamp(14px, 1.7vw, 26px); /* décalage de l'aplat */
  --photo-zoom:  1.035;                     /* survol d'une photo-lien */
  --photo-duree: 1.2s;
}

/* --------------------------------------------------- accompagnement -- */

.cadre {
  padding: 0;
  border: 0;
  background: none;
}
.cadre img {
  position: relative;
  z-index: 1;
  background-color: var(--ivory);
  outline: 1px solid var(--filet-photo);
  outline-offset: -1px;
}

/* L'aplat est porté par la scène (la figure y est révélée par un volet,
   l'aplat la précède). Il reprend le ratio de la photographie à 93 % de ses
   dimensions, calé sur son angle bas-gauche et décalé d'un plan : une
   ombre portée à plat, pas un second cadre. */
.solutions__scene {
  position: relative;
  max-width: none;
  padding: 0 0 var(--plan) var(--plan);
}
.solutions__scene::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc((100% - var(--plan)) * .93);
  height: calc((100% - var(--plan)) * .93);
  background: var(--ivory);
}

/* Accueil : carrée sur ordinateur, elle répond à la hauteur de la colonne
   de texte voisine au lieu de flotter en son milieu. */
.scene__large img { aspect-ratio: 5 / 4; }
@media (min-width: 901px) {
  .scene__large img { aspect-ratio: 1 / 1; object-position: 50% 45%; }
}

/* ---------------------------------------------------------- planche -- */

.chantier__photos  { --planche: clamp(10px, 1.5vw, 22px); }
.pcartes          { --planche: clamp(8px, 1vw, 14px); align-items: stretch; }
.chantier__photos,
.pcartes {
  gap: var(--planche);
  padding: var(--planche);
  background: var(--ivory);
}

.chantier__ph,
.pcarte__media {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--paper);
}
.chantier__ph--main img {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* le filet, posé au-dessus de l'image : il ne grossit pas avec elle */
.chantier__ph::after,
.pcarte__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--filet-photo);
  pointer-events: none;
}

/* Photo-lien : une photographie qui ouvre la galerie de son projet. Le
   lien porte le recadrage, pas la figure : l'anneau de focus se pose dans
   la gouttière de la planche au lieu d'être rogné. */
.ph-lien {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
}
.chantier__ph--main .ph-lien { position: absolute; inset: 0; height: auto; }
.ph-lien:focus-visible { outline: 2px solid var(--sapin); outline-offset: 3px; }

/* Un rapprochement lent, sans que rien ne bouge autour. */
@media (prefers-reduced-motion: no-preference) {
  .ph-lien img,
  .pcarte__media img { transition: transform var(--photo-duree) var(--e-matiere); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ph-lien:hover img,
  .pcarte:hover .pcarte__media img { transform: scale(var(--photo-zoom)); }
}

/* Cartes projet de l'accueil : une par réalisation, chacune vers son
   projet. Toute la carte est le lien. Le nom et le type de projet sont
   lisibles en permanence : en cartel sur une bande papier au bas de la
   photo sur ordinateur (le survol le souligne de vert), sous l'image sur
   tablette et mobile. */
.pcarte {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--paper);
}
.pcarte:focus-visible { outline: 2px solid var(--sapin); outline-offset: 3px; }
.pcarte__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.pcarte__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* cadrage propre à chaque photo : l'unité dans le champ */
.pcarte__media--chatillon img { object-view-box: inset(0 30% 30% 0); object-position: 50% 50%; }
.pcarte__media--valseo img    { object-view-box: inset(14% 30.3% 6% 20.4%); object-position: 50% 50%; }
.pcarte__media--valleiry img  { object-position: 50% 53%; }
.pcarte__nom {
  display: block;
  padding: 14px 14px 16px;
}
.pcarte__t {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pcarte__d {
  display: block;
  margin-top: 6px;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .pcarte { position: relative; overflow: hidden; }
  .pcarte__nom {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    padding: 16px 20px 18px;
    background: rgba(255, 252, 248, .96);
    border-top: 1px solid var(--filet-photo);
  }
  /* au survol, le cartel se souligne du vert AURALP */
  .pcarte:hover .pcarte__nom,
  .pcarte:focus-visible .pcarte__nom { border-top-color: var(--sapin); }
  .pcarte:hover .pcarte__t,
  .pcarte:focus-visible .pcarte__t { color: var(--sapin); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .pcarte__nom { transition: border-color 400ms var(--e-matiere); }
  .pcarte__t { transition: color 400ms var(--e-matiere); }
}

/* Mobile : la photographie réelle en tête, sur toute la largeur ; les deux
   projets en préparation côte à côte, plus petits. */
@media (max-width: 900px) {
  .pcartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcartes > li:first-child { grid-column: 1 / -1; }
  .pcarte__media { aspect-ratio: 1 / 1; }
  .pcartes > li:first-child .pcarte__media { aspect-ratio: 3 / 2; }
}

/* Pied de planche : le compte des photographies et l'ouverture en plein
   écran, pour le clavier et le toucher. Montré par galerie.js : sans
   script, il reste masqué. */
.planche__pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.planche__pied[hidden] { display: none; }
.planche__ouvrir {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 8px 0 7px;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--sapin);
  cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
              linear-gradient(rgba(46, 74, 56, .28), rgba(46, 74, 56, .28)) 0 100% / 100% 1px no-repeat;
  transition: background-size 520ms var(--e-trace);
}
.planche__ouvrir:hover,
.planche__ouvrir:focus-visible { background-size: 100% 1px, 100% 1px; }
.planche__ouvrir svg { width: 13px; height: 13px; }

/* ------------------------------ Réalisations : Valséo et Valleiry -- */
/* Même vocabulaire que Châtillon (planche ivoire, gouttières égales,
   filet d'un pixel, récit face à la fiche), composé selon ce que chaque
   chantier montre :
     frise  Valséo : quatre vues verticales égales sur toute la largeur,
            le récit dessous, comme Châtillon ;
     paire  Valleiry : deux vues verticales, à côté du récit (césure 7/5).
   Les photos fournies sont verticales : on les garde verticales (4/5), la
   galerie montre ensuite l'image entière. */
.chantier__photos--frise { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chantier__photos--paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Valséo : deux unités intérieures (verticales, cadre natif 3/4), puis deux
   groupes extérieurs (panoramas, cadrés 8/5 autour de l'appareil). */
.chantier__photos--valseo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chantier__photos--valseo .chantier__ph:nth-child(-n+2) { aspect-ratio: 3 / 4; }
.chantier__photos--valseo .chantier__ph:nth-child(n+3) { aspect-ratio: 8 / 5; }
.chantier__photos--valseo .chantier__ph:nth-child(n+3) img { object-position: 42% 50%; }
.chantier__photos--frise .chantier__ph,
.chantier__photos--paire .chantier__ph { aspect-ratio: 4 / 5; }

.chantier__corps {
  display: grid;
  grid-template-columns: var(--split-a) var(--split-b);
  gap: var(--split-gap);
  align-items: start;
}
.chantier__corps .chantier__texte { display: block; margin-top: 0; }
.chantier__corps .chantier__faits { margin-top: clamp(30px, 3.2vw, 44px); }

@media (max-width: 900px) {
  .chantier__corps { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 44px); }
}
@media (max-width: 760px) {
  .chantier__photos--frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chantier__photos--valseo .chantier__ph:nth-child(n+3) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   GALERIE PLEIN ÉCRAN (galerie.js)
   Une boîte de dialogue native, construite au premier usage. L'image est
   montrée entière (object-fit: contain), sur le nuit profond du site ;
   l'interface reprend la voix des étiquettes : capitales espacées, filets.
   ========================================================================== */

html.galerie-ouverte { overflow: hidden; }

.galerie {
  --g-btn: 52px;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(14px, 2vw, 28px) clamp(14px, 2.4vw, 36px);
  border: 0;
  background: var(--nuit-deep);
  color: #fff;
}
.galerie::backdrop { background: var(--nuit-deep); }
.galerie[open] {
  display: grid;
  grid-template-columns: var(--g-btn) minmax(0, 1fr) var(--g-btn);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "barre barre barre"
    "prec  scene suiv"
    ".     legende .";
  column-gap: clamp(12px, 2vw, 32px);
  row-gap: clamp(12px, 1.8vw, 24px);
}

.galerie__barre {
  grid-area: barre;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.galerie__titre {
  display: flex;
  align-items: baseline;
  gap: 1.4em;
  min-width: 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.galerie__compte { flex: 0 0 auto; color: #fff; font-variant-numeric: tabular-nums; }
.galerie__nom { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.galerie__scene {
  grid-area: scene;
  min-height: 0;
  margin: 0;
  touch-action: pan-y pinch-zoom;
}
.galerie__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .3s ease;
}
.galerie.is-charge .galerie__img { opacity: 0; transition: none; }

.galerie__legende {
  grid-area: legende;
  justify-self: center;
  max-width: 72ch;
  min-height: 1.5em;
  font-size: .98rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, .82);
}

.galerie__btn {
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  width: var(--g-btn);
  height: var(--g-btn);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s var(--e-titre), border-color .3s var(--e-titre);
}
.galerie__btn:hover { background: var(--sapin); border-color: var(--sapin); }
.galerie__btn:focus-visible { outline: 2px solid var(--hl-dark); outline-offset: 3px; }
.galerie__btn svg { width: 20px; height: 20px; }
.galerie__prec { grid-area: prec; align-self: center; }
.galerie__suiv { grid-area: suiv; align-self: center; }
.galerie__suiv svg { transform: scaleX(-1); }
.galerie__fermer {
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  gap: 12px;
  padding: 0 14px 0 18px;
  font: 500 .72rem/1 var(--f-text);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.galerie__fermer svg { width: 16px; height: 16px; }
/* une seule photographie : rien à parcourir */
.galerie--seule .galerie__prec,
.galerie--seule .galerie__suiv { visibility: hidden; }

.galerie__annonce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mobile : les flèches quittent les côtés, où elles mangeraient l'image,
   pour une ligne de pouce sous la légende. Le glissement latéral fait le
   même travail. */
@media (max-width: 760px) {
  .galerie[open] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "barre   barre"
      "scene   scene"
      "legende legende"
      "prec    suiv";
  }
  .galerie__prec { justify-self: start; }
  .galerie__suiv { justify-self: end; }
  .galerie__legende { justify-self: stretch; text-align: left; font-size: .92rem; }
}

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

/* ------------------------------------------------ pages légales -- */
/* Mentions légales et politique de confidentialité : une colonne de
   lecture, les mêmes étiquettes et filets que le reste du site. */
.legal__bloc, .legal__maj { max-width: 760px; }
.legal__bloc { padding-block: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--filet-photo); }
.legal__bloc:first-child { border-top: 0; padding-top: 0; }
.legal h2 { max-width: none; margin-bottom: 12px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.legal h3 {
  margin: 18px 0 6px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; }
.legal p + p, .legal ul + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--sapin); text-underline-offset: 3px; }
/* Cible tactile d'au moins 24 px : la hauteur de ligne (1,65) la fournit déjà,
   la boîte du lien doit simplement l'occuper. */
.legal__liste a { display: inline-block; min-height: 24px; }
.legal__liste div[hidden] { display: none; }
.legal__liste div {
  display: grid;
  grid-template-columns: minmax(130px, 200px) 1fr;
  gap: 4px 20px;
  padding-block: 9px;
  border-top: 1px solid var(--filet-photo);
}
.legal__liste div:first-child { border-top: 0; }
.legal__liste dt {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal__maj { margin-top: 12px; font-size: .9rem; color: var(--ink-mute); }
@media (max-width: 560px) {
  .legal__liste div { grid-template-columns: minmax(0, 1fr); }
}

.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__legal a { color: inherit; text-underline-offset: 3px; }
.foot__legal a:hover { color: #fff; }
.form__merci { margin-bottom: 20px; }
.field input[type="file"] + input[type="file"] { margin-top: 8px; }

/* ------------------------------------- formulaires : clarté (passe B) -- */
.req { color: var(--sapin); font-weight: 600; }
.form__oblig { margin: 0 0 18px; font-size: .9rem; color: var(--ink-mute); }
.form__oblig .req { margin-right: 2px; }

/* Photos : zone dépliable. Sur ordinateur elle reste ouverte et son titre
   est masqué (le libellé « Photos » du champ suffit) ; sur mobile elle est
   repliée par défaut et se déplie d'un geste (script.js). Sans script, elle
   reste ouverte. */
.photos > summary { display: none; }
.photos__retirer {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .94rem;
  color: var(--sapin);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.etude__rassure { display: none; }
@media (max-width: 900px) {
  .photos > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 14px 16px;
    border: 1px solid var(--filet-photo);
    background: var(--paper, #fff);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
  }
  .photos > summary::-webkit-details-marker { display: none; }
  .photos > summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; line-height: 1; color: var(--sapin); }
  .photos[open] > summary::after { content: "\2212"; }
  .photos > summary:focus-visible { outline: 2px solid var(--sapin); outline-offset: 3px; }
  .photos__etat { flex-basis: 100%; letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--sapin); }
  .photos[open] > summary { margin-bottom: 14px; }
  .photos__etat:empty { display: none; }
  .etude__rassure {
    display: block;
    margin: 0 0 22px;
    padding: 12px 16px;
    border-left: 2px solid var(--sapin);
    background: var(--paper);
    font-size: .95rem;
    color: var(--ink-soft);
  }
  .etude__rassure a { color: var(--sapin); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
}

/* ------------------------------------------- Accueil : photo du hero -- */
/* Mobile : la photo d'origine (pac-exterieure-hero), cadrée à 16/10 et centrée
   sur l'unité. Le fichier coupe lui-même le bas de l'unité. L'ordinateur n'est
   pas touché. */
@media (max-width: 900px) {
  .hero__img { aspect-ratio: 16 / 10; object-position: 36% 50%; }
}

/* ---------------------------------------------- Barre d'appel mobile -- */
/* Sans JavaScript elle ne s'affiche jamais : le numéro reste dans le menu,
   la section d'appel et le pied de page. « viewport-fit=cover » donne accès
   à la zone de sécurité de l'iPhone ; le retrait latéral du corps de page
   rend en paysage la marge qu'iOS appliquait de lui-même. */
.appel-fixe { display: none; }
body { padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0); }

@media (max-width: 900px) and (min-height: 501px) {
  html { scroll-padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .appel-fixe {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 39;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7em;
    box-sizing: content-box;
    height: 52px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: var(--nuit);
    color: #fff;
    font-family: var(--f-text);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .28s var(--e-titre), visibility 0s linear .28s;
  }
  .appel-fixe.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .28s var(--e-titre) .18s, visibility 0s .18s;
  }
  .appel-fixe__num { color: #8DBB9C; letter-spacing: .08em; }
  .appel-fixe:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
  body:has(dialog[open]) .appel-fixe { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .appel-fixe, .appel-fixe.is-visible { transition: none; }
}

/* --------------------------------- Fiches et pied de page sur mobile -- */
@media (max-width: 480px) {
  .chantier__faits div { display: grid; grid-template-columns: 5.7rem minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 12px 0 13px; }
  .chantier__faits dt { letter-spacing: .14em; }
  .chantier__faits dd { margin: 0; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .foot__brand, .foot__zone { grid-column: 1 / -1; }
}
@media (max-width: 345px) {
  .chantier__faits dd { font-size: 1rem; }
}

/* Services, ouverture Pompes à chaleur, mobile : le cadre 3/2 imposait à la
   photo une largeur de 540 px dans une colonne de 390, et la moitié droite de
   l'unité sortait de l'écran. Le cadre reprend la largeur de la colonne. */
@media (max-width: 900px) {
  .ouverture--pac .ouverture__media { width: 100%; min-width: 0; }
  .ouverture--pac .ouverture__img { object-position: 38% 50%; }
}

/* Accueil, mobile : l'illustration de climatisation (installation-finie)
   restait posée seule entre deux listes de liens et la bande sombre, avant les
   vraies photos de chantier. Masquée sous 900 px, conservée sur ordinateur. */
@media (max-width: 900px) {
  .solutions__scene { display: none; }
}