/* =========================================================================
   ALTIPUR — les pages intérieures : chantiers, légales, 404

   Une page par chantier réel, avec sa propre URL, son propre h1 et son
   propre JSON-LD. C'est ce qui multiplie la surface indexable du site et
   transforme le sous-score Sémantique : Mosby's Files a décroché le
   Developer Award avec neuf routes réelles et zéro WebGL.

   Pas de hero canvas ici, pas de pin, pas de ScrollTrigger : la photo du
   chantier EST le hero, et elle arrive depuis la vignette de la page
   d'accueil, en Flip.
   ========================================================================= */

.page-chantier main {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(8, 12, 20, 0.9) 0%,
    rgba(8, 12, 20, 0.74) 22%,
    rgba(8, 12, 20, 0.74) 78%,
    rgba(8, 12, 20, 0.9) 100%
  );
}

/* --- Le fil d'Ariane ---------------------------------------------------- */

.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  padding: clamp(5.5rem, 14vh, 8rem) var(--gouttiere) 0;
  padding: clamp(5.5rem, 14svh, 8rem) var(--gouttiere) 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

.fil [aria-current='page'] {
  color: var(--creme);
}

/* --- Le titre ----------------------------------------------------------- */

.ch-tete .filet {
  margin-top: clamp(2rem, 6vh, 4rem);
  margin-top: clamp(2rem, 6svh, 4rem);
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
  margin-bottom: clamp(1.6rem, 4svh, 2.6rem);
}

.ch-titre {
  font-size: var(--t-xl);
  letter-spacing: var(--tr-xl);
  margin-bottom: clamp(2rem, 6vh, 4rem);
  margin-bottom: clamp(2rem, 6svh, 4rem);
  background-image: var(--or-degrade);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ch-titre {
    background-image: none;
    color: var(--or);
  }
}

/* --- La photo en grand --------------------------------------------------
   Bord à bord, dans un rapport large : les photos de chantier sont en 3/4
   vertical et le cadrage retenu est le tiers haut, là où se trouve la
   toiture. `object-position` fait le travail, jamais un recadrage de
   fichier — la photo reste la photo du client.

   `aspect-ratio` est posé sur la figure, pas sur l'image : la boîte a donc
   sa hauteur avant que l'image n'arrive, et le CLS est nul.             */

.ch-vue {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fond-2);
}

.ch-vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: saturate(0.86) contrast(1.04);
}

@media (max-width: 720px) {
  .ch-vue {
    aspect-ratio: 4 / 5;
  }
  .ch-vue img {
    object-position: 50% 40%;
  }
}

/* --- Le corps ----------------------------------------------------------- */

.ch-corps {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  padding-block: clamp(3rem, 9vh, 6rem);
  padding-block: clamp(3rem, 9svh, 6rem);
}

.ch-texte p {
  font-size: var(--t-s);
  color: var(--creme);
  opacity: 0.88;
  margin-bottom: 1.2rem;
}

.ch-meta {
  display: grid;
  gap: 0;
  letter-spacing: 0.14em;
}

.ch-meta__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: clamp(0.7rem, 1.8vh, 1.1rem);
  padding-block: clamp(0.7rem, 1.8svh, 1.1rem);
  border-top: 1px solid var(--trait);
}

.ch-meta__ligne:last-child {
  border-bottom: 1px solid var(--trait);
}

.ch-meta dt {
  color: var(--gris);
}

.ch-meta dd {
  margin: 0;
  color: var(--or-lien);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .ch-corps {
    grid-template-columns: 1fr;
  }
}

/* --- Les chantiers voisins ---------------------------------------------- */

.ch-voisins__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-bottom: clamp(3rem, 9vh, 6rem);
  padding-bottom: clamp(3rem, 9svh, 6rem);
}

.ch-voisin {
  display: grid;
  gap: 0.7rem;
  color: var(--creme);
}

.ch-voisin img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--fond-2);
  filter: saturate(0.82) contrast(1.04);
  transition: transform var(--d-panel) var(--ease-expressive);
}

.ch-voisin:hover img {
  transform: scale(1.035);
}

.ch-voisin__nom {
  font-family: var(--display);
  font-size: var(--t-l);
  letter-spacing: var(--tr-l);
  line-height: 1.05;
}

.ch-voisin__quoi {
  color: var(--gris);
}

@media (prefers-reduced-motion: reduce) {
  .ch-voisin:hover img {
    transform: none;
  }
}


/* =========================================================================
   LES PAGES LÉGALES

   Même habillage que le reste : filets numérotés, Instrument Serif en casse
   normale, dégradé or unique, gouttières existantes. Rien de nouveau — un
   texte légal n'est pas un endroit où inventer une grammaire.

   Une seule différence de fond : la mesure de ligne est resserrée. Un texte
   qu'on lit par obligation se lit mieux en colonne courte.
   ========================================================================= */

.ch-chapeau {
  font-size: var(--t-s);
  color: var(--creme);
  opacity: 0.88;
  max-width: 62ch;
  margin-bottom: clamp(1rem, 3svh, 1.8rem);
}

/* Le filet de section porte `margin-bottom: var(--scene-y)`, soit jusqu'à
   140 px : c'est le bon rythme entre deux grandes scènes de l'accueil, c'est
   beaucoup trop entre une étiquette et le titre qu'elle annonce sur une page
   de texte. Ici les blocs sont courts et nombreux. */
.legal .filet {
  margin-top: clamp(2rem, 5svh, 3.5rem);
  margin-bottom: clamp(1.1rem, 2.6svh, 1.8rem);
}

.legal:first-of-type .filet {
  margin-top: 0;
}

.legal__corps {
  padding-bottom: clamp(1rem, 3svh, 2rem);
}

.legal__titre {
  font-size: var(--t-l);
  letter-spacing: var(--tr-l);
  margin-bottom: clamp(1rem, 2.5svh, 1.6rem);
  background-image: var(--or-degrade);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .legal__titre {
    background-image: none;
    color: var(--or);
  }
}

.legal__corps p {
  font-size: var(--t-s);
  color: var(--creme);
  opacity: 0.88;
  max-width: 68ch;
  margin-bottom: 1.1rem;
}

.legal__corps p strong {
  font-weight: 400;
  color: var(--creme);
  opacity: 1;
}

/* Une note de cadrage : ce qui explique la règle plutôt que de l'énoncer. */
.legal__note {
  border-left: 1px solid var(--trait-fort);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--gris) !important;
  opacity: 1 !important;
}

/* Les couples libellé / valeur : raison sociale, SIREN, durées… */
.legal__liste {
  margin: 0 0 1.4rem;
  max-width: 74ch;
}

.legal__liste > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.4rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(0.6rem, 1.6svh, 1rem);
  border-top: 1px solid var(--trait);
}

.legal__liste > div:last-child {
  border-bottom: 1px solid var(--trait);
}

.legal__liste dt {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

.legal__liste dd {
  margin: 0;
  font-size: var(--t-s);
  color: var(--creme);
}

.legal__points {
  max-width: 72ch;
  display: grid;
  gap: 0;
}

.legal__points li {
  font-size: var(--t-s);
  color: var(--creme);
  opacity: 0.88;
  line-height: 1.6;
  padding-block: clamp(0.8rem, 2svh, 1.2rem);
  border-top: 1px solid var(--trait);
}

.legal__points li:last-child {
  border-bottom: 1px solid var(--trait);
}

.legal__corps code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--or-lien);
}

/* La ligne d'assurance et celle du médiateur, dans le pied de page. */
.pied__legal {
  margin-top: 0.5rem;
  max-width: none;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--gris);
}

@media (max-width: 720px) {
  .legal__liste > div {
    grid-template-columns: 1fr;
  }
}

/* Les liens légaux en rangée, sur les pages sans grille de pied — la 404 et
   la confirmation d'envoi. */
.pied__legaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1rem, 3vw, 2rem);
  max-width: none;
  margin-top: clamp(1.2rem, 3svh, 2rem);
  color: var(--gris);
}