/* ==========================================================================
   FLAA — layout.css
   Conteneurs · En-tête · Overlay de navigation · Pied de page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Conteneurs
   -------------------------------------------------------------------------- */

/* Pleine largeur avec gouttière de page (64 px sur la maquette). */
.l-shell {
  width: 100%;
  padding-inline: var(--gutter);
}

/* Colonne éditoriale de 768 px, centrée dans la page.
   Le rembourrage vaut `--column-pad` (32 px sur la maquette) et non la
   gouttière de page : c'est lui qui place le texte à 480 px du bord à
   1728 px de large, comme la référence. Le plancher de 20 px évite que la
   colonne ne colle aux bords sur petit écran. */
.l-column {
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--column-pad));
  margin-inline: auto;
  padding-inline: max(20px, var(--column-pad));
}

/* Longueur de ligne des paragraphes (640 px sur la maquette). */
.l-measure {
  max-width: 640px;
}

/* Corps des pages secondaires : recouvre le hero épinglé en défilant.
   Le fond opaque est indispensable, sinon le hero resterait visible dessous.
   Il porte aussi le dernier écart avant le pied de page (cf. `.site-main`). */
.page-body {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-section);
  background-color: var(--surface, var(--color-bg));
}

/* Rythme vertical : chaque section porte un écart *au-dessus* d'elle, jamais
   en dessous. L'écart entre deux sections vaut donc toujours exactement
   `--space-section`, sans addition de marges. Le bas de page est réglé une
   fois pour toutes sur `.site-main`. */
.l-section {
  position: relative;
  padding-block: var(--space-section) 0;
}

/* Pour les sections qui gèrent elles-mêmes leur rembourrage (fond coloré,
   média plein cadre collé au bloc précédent). */
.l-section--flush {
  padding-block: 0;
}

.site-main {
  padding-bottom: var(--space-section);
}

/* Sur les pages secondaires, ce dernier écart appartient à la page plutôt
   qu'au conteneur : sinon la bande précédant le pied de page garderait le
   fond du site et trancherait sur une page au fond sombre. */
.site-main:has(> .page-body) {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. En-tête
   Le header est en `mix-blend-mode: difference` avec un contenu blanc : il
   apparaît noir sur les sections claires et blanc sur les visuels sombres,
   sans le moindre script. C'est le comportement de la maquette.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

/* Au-dessus du hero, le header est blanc franc plutôt que différencié :
   le `difference` vire au brun sur un ciel clair, alors que la maquette
   demande un blanc pur. La classe est posée côté serveur (pas de flash)
   puis retirée par header.js dès que le hero quitte l'écran. */
.site-header--light {
  color: #fff;
  mix-blend-mode: normal;
}

/* Masqué quand l'overlay est ouvert : l'overlay porte sa propre barre. */
.site-header.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.brand__mark {
  width: auto;
  height: clamp(18px, 1.62vw, 28px);
  color: currentColor;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.brand:hover .brand__mark {
  opacity: 0.65;
}

.brand__image {
  height: clamp(18px, 1.62vw, 28px);
  width: auto;
}

/* Bouton MENU / FERMER */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  color: inherit;
  /* Correction optique, et non égalité arithmétique. À corps égal, un mot tout
     en capitales occupe toute la hauteur de capitale quand un texte en bas de
     casse se lit surtout à hauteur d'œil : « MENU » paraissait donc plus gros
     que « Toutes nos réalisations ». Le facteur ramène sa hauteur de capitale
     entre l'œil et la capitale du lien, où les deux se lisent de même taille.
     La graisse s'aligne aussi : en gras, le mot pesait plus lourd. */
  font-size: calc(var(--fs-action) * 0.84);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  gap: 0.42em;
}

.menu-toggle__icon {
  width: 1em;
  height: 1em;
  stroke-width: 1.6;
  transition: transform var(--dur-base) var(--ease-out);
}

.menu-toggle:hover .menu-toggle__icon {
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   3. Overlay de navigation
   -------------------------------------------------------------------------- */

/* Le conteneur ne peint rien : il couvre le viewport pour porter le voile et
   le panneau. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}

.nav-overlay.is-open {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* Le panneau ne couvrant qu'un tiers de l'écran, le voile assombrit le reste
   de la page et la ferme au clic. */
.nav-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
  cursor: pointer;
}

.nav-overlay.is-open .nav-overlay__scrim {
  opacity: 1;
}

/* Panneau latéral, entrant par la droite. */
.nav-overlay__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: clamp(320px, 33.333vw, 560px);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-fg);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-base) var(--ease-in-out);
  will-change: transform;
}

.nav-overlay.is-open .nav-overlay__panel {
  transform: translate3d(0, 0, 0);
}

.nav-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: var(--header-height);
  padding-inline: var(--gutter);
}

/* Les liens se posent en bas à gauche, pas au centre. */
.nav-overlay__body {
  /* Le panneau défile seul : arrivé en butée, il ne doit pas entraîner la
     page restée derrière lui. */
  overscroll-behavior: contain;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  padding-inline: var(--gutter);
  padding-block: var(--space-lg);
  overflow-y: auto;
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 10px);
  width: 100%;
}

.nav-overlay__item {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.nav-overlay.is-open .nav-overlay__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(160ms + var(--nav-index, 0) * 60ms);
}

/* Calibré pour que « Réalisations », le plus long libellé, tienne sur une
   ligne dans la largeur utile du panneau. */
.nav-overlay__link {
  display: inline-block;
  font-size: var(--fs-display-md);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--ls-xl);
}

.nav-overlay__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex: 0 0 auto;
  padding: 0 var(--gutter) var(--space-lg);
  color: var(--color-inverse-muted);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  /* Au-dessus du hero épinglé, comme le reste du contenu. */
  z-index: 1;
  overflow: hidden;
  padding-block: var(--space-xl) var(--space-md);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-fg);
  isolation: isolate;
}

/* Mot « FLAA » géant en filigrane derrière le contenu.
   `line-height: 1` et non 0.78 : une interligne plus courte que la fonte
   rognait le haut et le bas des lettres. */
.site-footer__watermark {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(16px, 2vw, 40px);
  color: var(--color-ghost);
  font-size: clamp(140px, 22vw, 380px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-2xl);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--gutter);
}

.site-footer__colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-inverse-rule);
  margin-inline: var(--gutter);
  color: var(--color-inverse-muted);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Plan de site */
.sitemap__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.sitemap__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.35vw, 6px);
}

.sitemap__link {
  display: inline-block;
  font-size: var(--fs-label);   /* 40px sur toute la largeur était bien trop lourd */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--ls-sm);
}

/* Réseaux sociaux */
.socials {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-inverse-fg);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.socials__link:hover {
  opacity: 0.55;
}

.socials__icon {
  width: 100%;
  height: 100%;
}

/* Retour en haut */
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-inverse-fg);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.to-top__icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}

.to-top:hover .to-top__icon {
  transform: translateY(-5px);
}

/* --------------------------------------------------------------------------
   5. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .sitemap__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .site-footer__colophon,
  .nav-overlay__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  /* Sous cette largeur, un tiers d'écran ne serait plus lisible. */
  .nav-overlay__panel {
    width: 100%;
  }

  .nav-overlay__link {
    font-size: clamp(36px, 12vw, 64px);
  }
}

/* Crédit du pied de page. Le logotype ImmoSprint n'a pas de couleur propre :
   il hérite de celle du texte, donc du blanc atténué du colophon. */
.colophon__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  color: var(--color-inverse-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.colophon__credit:hover {
  color: var(--color-inverse-fg);
}

.colophon__credit-label {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.colophon__logo {
  width: auto;
  height: 1.6em;
  color: var(--color-inverse-fg);
}