/* Mise en page de la landing (assemble les composants) */

/* --- Hero : texte + fenêtre A ------------------------------------------------ */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; padding-bottom: calc(var(--cut-h) + var(--s-6)); }
.hero__fenetre { position: absolute; z-index: 0; right: -18vw; top: 11svh; width: 135vw; pointer-events: none; }
.hero__body { position: relative; z-index: 1; margin-block: auto 0; padding-top: var(--s-7); }
.hero__sous { margin-top: var(--s-5); }
.hero__date { margin: var(--s-6) 0 var(--s-4); }

/* --- Sections : coin haut-gauche coupé à l'angle du A ------------------------------ */
.papier, .rouge, .sombre { position: relative; margin-top: calc(var(--cut-h) * -1); padding: calc(var(--s-section) + var(--cut-h)) 0 var(--s-section); clip-path: polygon(0 var(--cut-h), var(--cut-w) 0, 100% 0, 100% 100%, 0 100%); }
.papier { background: var(--papier); color: var(--anthracite); }
.rouge { background: var(--rouge); color: var(--creme); }
.sombre { background: var(--anthracite); color: var(--creme); }
.insta-bloc { display: grid; gap: var(--s-6); }
.insta-bloc .titre { margin-bottom: 0; }

/* --- Pratique : adresse, infos et façade --------------------------------------------- */
.pratique { display: grid; gap: var(--s-7); }
.pratique__facade { --ratio: 16 / 9; }

@media (min-width: 48em) {
  .insta-bloc { grid-template-columns: 1fr auto; align-items: end; }
  .insta-bloc .insta { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .hero__fenetre { right: -9vw; top: auto; bottom: -10%; width: auto; height: 96%; }
  .pratique { grid-template-columns: 1fr 1fr; align-items: start; column-gap: var(--s-8); }
  .pratique .titre, .pratique .adresse { grid-column: 1; }
  .pratique .infos, .pratique__facade { grid-column: 1; }
  .pratique__facade { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; --ratio: 4 / 5; }
}