/* ============================================================
   LAYOUT – css/layout/layout.css
   CSS Grid pour les layouts de page
   ============================================================ */

/* ── Conteneur global ───────────────────────────────────────── */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main prend tout l'espace disponible (footer en bas) */
.site-main {
  flex: 1;
  padding-block: var(--space-16) var(--space-16);
}

.site-main--front {
  padding-block: 0;
}

/* ── Header top ─────────────────────────────────────────────── */
.header-top {
  background: var(--palette-gray-900);
  color: var(--clr-text-inverse);
  font-size: var(--fs-xs);
  max-height: 100px;
  z-index: var(--z-tooltip);
  transition: max-height 0.35s ease, padding-block 0.35s ease;
}

body.is-scrolled .header-top {
  max-height: 0;
  padding-block: 0;
}

/* ── Site header ────────────────────────────────────────────── */
.site-header {
  background: var(--clr-bg-body);
  padding-block: var(--space-4) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: box-shadow 0.35s ease;
  box-shadow: 0px 1px 13px 0px rgba(29, 29, 28, 0.21);
}


/* ── Navigation ─────────────────────────────────────────────── */
.site-nav {
  background: var(--clr-bg-body);
  border-bottom: var(--border-width-1) solid var(--clr-border-default);
}

/* ── Hero ───────────────────────────────────────────────────── */
.layout-hero {
  /* Pleine largeur – le composant hero gère sa propre hauteur */
  width: 100%;
}

/* ── Layout avec sidebar ────────────────────────────────────── */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr 390px;
    gap: var(--space-8);
    align-items: start;
  }

  /* Contact : 50/50 */
  .layout-with-sidebar--contact {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* Sidebar sticky sur desktop */
@media (min-width: 1024px) {
  .layout-sidebar {
    position: sticky;
    top: calc(var(--header-height, 100px) + var(--space-40));
    align-self: start;
    transition: top 0.35s ease;
  }
  .region-sidebar {
    /*padding-top: var(--space-12);*/
  }

  body.is-scrolled .layout-sidebar {
    top: calc(var(--header-height, 100px) + var(--space-3));
  }

}

/* ── Content row – 50/50 (page front) ───────────────────────── */
/* .content-row__grid contient .region-content-row qui contient les blocs.
   On cible donc .region-content-row comme grid container. */
.region-content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
}

/* Propager la hauteur de la grille jusqu'à la card via tous les wrappers Drupal */
.region-content-row > .views-element-container,
.region-content-row > .views-element-container > div,
.region-content-row > .views-element-container > div > .view,
.region-content-row > .views-element-container > div > .view > .view-content,
.region-content-row > .views-element-container > div > .view > .view-content > .views-row {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.region-content-row .destination-card,
.region-content-row .theme-card {
  flex: 1;
}

@media (max-width: 767px) {
  .region-content-row {
    grid-template-columns: 1fr;
  }
}

/* ── Newsletter ─────────────────────────────────────────────── */
.section-newsletter {
  background: var(--clr-bg-subtle);
  padding-block: var(--space-16);
  text-align: center;
  margin-top: auto;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--palette-gray-900);
  color: var(--clr-text-inverse);
  padding-block: var(--space-12);
  font-size: var(--fs-sm);
}