/* =========================================================
   DESIGNER BY NATURE — 13. PIED DE PAGE
   Surface noire. Marque et adresse à gauche, trois colonnes de
   liens à droite, filet de séparation, puis une ligne légale.
   Un plan d'architecture très pâle occupe le fond, comme dans
   le dernier panneau de la maquette.
   ========================================================= */

.pied {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-bloc) var(--sp-6);
}

.pied__plan {
  left: 50%;
  bottom: -10%;
  width: min(60rem, 90%);
  transform: translateX(-50%);
  opacity: .10;
}

.pied__inner {
  position: relative;
  z-index: var(--z-contenu);
}

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}

/* ---------- MARQUE ---------- */

.pied__marque {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  line-height: 1;
}

.pied__nom {
  font-family: var(--display);
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pied__nom::after {
  content: ".";
  color: var(--or);
}

.pied__baseline {
  font-size: .5625rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}

.pied__accroche {
  margin-top: var(--sp-5);
  max-width: 30ch;
  font-size: var(--fs-small);
  line-height: var(--lh-lisible);
  color: var(--muted);
}

/* ---------- COLONNES DE LIENS ---------- */

.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--gouttiere);
}

.pied__titre {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.pied__liste {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Des liens de navigation, pas du texte de lecture : ils gardent leur
   corps, sinon la colonne du pied devient plus lourde que le contenu. */
.pied__liste a {
  font-size: .875rem;
  font-weight: 300;
  color: var(--muted);
  transition: color var(--dur-court) var(--ease-net);
}

.pied__liste a:hover,
.pied__liste a:focus-visible { color: var(--fg); }

/* ---------- LIGNE LÉGALE ---------- */

.pied__bas {
  padding-top: var(--sp-5);
  border-top: var(--trait) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 48rem) {
  .pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .pied__haut {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 8rem);
  }

  .pied__colonnes { grid-column: 2; }

  .pied__bas {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================
   ÉLÉVATION DU PIED DE PAGE
   Une façade à gauche, sa coupe à droite : la planche que dessine
   un architecte pour présenter un immeuble. Elle remplace la trame
   décorative qui occupait ce fond sans rien dire.

   Elle est ancrée en bas et déborde volontairement des côtés : on
   ne voit qu'une portion de planche, comme un calque posé sous le
   contenu. Un dessin entier et centré deviendrait une illustration,
   et prendrait le pas sur les liens.
   ========================================================= */

.pied__plan {
  left: 50%;
  bottom: 0;
  width: min(96rem, 148%);
  transform: translateX(-50%);
  opacity: .16;
}

.pied__plan svg {
  width: 100%;
  height: auto;
  display: block;
}

.pied__plan [data-trait] {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* La hiérarchie d'une planche : la coupe est plus grasse que
   l'élévation, parce qu'elle montre ce que le trait traverse. */
.pied__plan [data-trait="mur"] { stroke-width: 1.6; }
.pied__plan [data-trait="dalle-coupe"] { stroke-width: 2.2; }
.pied__plan [data-trait="refend"] { stroke-width: 1.4; }
.pied__plan [data-trait="dalle"] { stroke-width: .8; opacity: .7; }
.pied__plan [data-trait="baie"] { stroke-width: .9; opacity: .85; }
.pied__plan [data-trait="porte"] { stroke-width: .9; opacity: .85; }
.pied__plan [data-trait="escalier"] { stroke-width: .9; opacity: .8; }
.pied__plan [data-trait="meuble"] { stroke-width: .8; opacity: .7; }
.pied__plan [data-trait="lustre"] { stroke-width: .7; opacity: .6; }
.pied__plan [data-trait="sol"] { stroke-width: 1.4; }
.pied__plan [data-trait="terre"] { stroke-width: .7; opacity: .55; }
.pied__plan [data-trait="cote"] { stroke-width: .6; opacity: .5; }

/* Sous 1024 px, la planche entière devient illisible : on n'en garde
   que la coupe, cadrée sur sa moitié droite. */
@media (max-width: 63.99rem) {
  .pied__plan {
    width: 200%;
    opacity: .12;
  }
}