/* SMACSS · Layout : bandeau neutre, ligne d'indication, puis les trois portes.
   --edge aligne le mot-symbole, l'indication et le texte des portes sur la même verticale. */
.l-page {
  --pad: clamp(1.25rem, 2.2vw, 2.5rem);
  --edge: calc(var(--gutter) + var(--pad));
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.l-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem clamp(.75rem, 3vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--edge) clamp(1.25rem, 2.4vw, 2rem);
}
.l-band .intro { grid-column: 1 / -1; grid-row: 2; }
.l-band .discovery { grid-column: 2; grid-row: 1; justify-self: end; }
.l-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.l-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin: 0 var(--gutter);
  padding: 0.9rem var(--pad);
  border-top: 1px solid var(--ink);
}
.l-doors {
  flex: 1;
  display: grid;
  gap: var(--gutter);
  padding: 0 var(--gutter) var(--gutter);
}
.l-doors > li {
  display: flex;
  min-width: 0;
}

@media (max-width: 767px) {
  .l-band { column-gap: .75rem; }
}

/* Triptyque : chaque panneau est un item flex dont la largeur suit le survol ou le focus. */
@media (min-width: 1024px) {
  .l-band { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; }
  .l-band .wordmark { grid-column: 1; grid-row: 1 / 3; }
  .l-band .intro { display: contents; }
  .l-band .intro-lead { grid-column: 2; grid-row: 1; }
  .l-band .intro-facts { grid-column: 2 / 4; grid-row: 2; }
  .l-band .discovery { grid-column: 3; align-self: start; }
  .l-page {
    height: 100svh;
    min-height: 640px;
  }
  .l-doors {
    display: flex;
    min-height: 0;
  }
  .l-doors > li {
    flex: var(--door-rest-grow, 1) 1 0;
    min-height: 0;
    transition: flex-grow var(--slow) var(--ease);
  }
  .l-doors > li:has(> .door--reho) {
    --door-rest-grow: var(--phi);
  }
  .l-doors:has(.door:is(:hover, :focus-visible, .is-awake)) > li {
    flex-grow: 1;
  }
  .l-doors > li:has(> .door:is(:hover, :focus-visible, .is-awake)) {
    flex-grow: 1.75;
  }
}

/* Suite du sélecteur. Les colonnes principales suivent 1 : φ. */
.l-page { display: block; height: auto; }
.l-entry { position: relative; display: flex; flex-direction: column; min-height: 100svh; }
.l-band, .l-cue { flex-shrink: 0; }
.l-cue { position: relative; }
.l-golden { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.l-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); align-items: center; }
.l-project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.l-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(2rem, 6vw, 7rem); }
.l-terminal { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); }
.l-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.l-watch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.l-research { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
@media (min-width: 1024px) { .l-entry { height: 100svh; min-height: 640px; } }
@media (max-width: 1023px) {
  .l-golden, .l-project, .l-contact { gap: 2rem; }
  .l-art { grid-template-columns: 1fr 1.4fr; }
}
@media (max-width: 767px) {
  .l-golden, .l-art, .l-project, .l-contact, .l-terminal, .l-watch, .l-research { grid-template-columns: minmax(0, 1fr); }
  .l-form-row { grid-template-columns: minmax(0, 1fr); }
  .l-activities { gap: 1.5rem; }
}