/* ----------- LAYOUT GALERIE 2026 (ex grid.css) ----------- */

/* ========== 1. Structure générale ========== */

/* Supprime l'espace du bloc "page principale" quand il est au-dessus d'un bloc View */
.block-system-main-block:has(.node--type-sans-champs) {
  display: none;
}

/* Page d'accueil : bloc contenu vide */
.path-frontpage #block-galerie2026-content {
  display: none !important;
}


/* ========== 2. Header ========== */

/* Supprime les marges au-dessus du header */
@media (min-width: 62.5rem) {
  #header .site-branding {
    padding-block: 0 !important;
    min-height: 0 !important;
  }
  #header .site-branding__inner,
  #header .site-branding__text {
    padding-block: 0 !important;
  }
}

/* Alignement logo / bouton menu mobile */
@media (min-width: 43.75rem) {
  #header .mobile-buttons {
    display: flex;
    align-items: center;
    margin-block: 0;
  }
  #header .mobile-nav-button {
    margin-block: 0;
  }
}


/* ========== 3. Contenu remonté sous le header (desktop) ========== */

@media (min-width: 43.75rem) {
  /* Supprime les marges sous le header */
  #main-wrapper,
  .layout-main,
  .main-content,
  .main-content__container,
  .main-content__container > main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remonte le contenu principal */
  .main-content__container {
    transform: translateY(-4rem);
  }
}

/* Contrepartie du translateY : le header ne doit pas bloquer les clics
   (fil d'Ariane) sur le contenu remonté. */
header#header.site-header {
  pointer-events: none;
}
header#header.site-header * {
  pointer-events: auto;
}


/* ========== 4. Pleine largeur corps + footer (desktop, sans toucher au header) ========== */

@media (min-width: 43.75rem) {

  /* 4.1 Une seule colonne dans le corps de page et le footer */
  #main-wrapper,
  .site-footer {
    --grid-col-count: 1 !important;
  }

  /* 4.2 Supprime les restrictions de grille sur contenus et blocs du footer */
  #main-wrapper .site-main,
  #main-wrapper .main-content,
  #main-wrapper .layout-content,
  #main-wrapper .grid-full,
  #main-wrapper .layout--content-narrow,
  #main-wrapper .layout--content-medium,
  #main-wrapper .node__content,
  .site-footer .site-footer__inner,
  .site-footer .grid-full {
    grid-column: 1 / -1 !important;
    display: block !important; /* attention : annule tout grid/flex sur ces éléments */
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4.3 Aligne la largeur des contenus (paddings) sur celle du header */
  #main-wrapper .container,
  #main-wrapper .region,
  .site-footer .container,
  .site-footer .region {
    max-width: 100% !important;
    padding-inline: var(--sp2) !important;
  }

  /* 4.4 Supprime les décalages de marges d'Olivero */
  #main-wrapper .main-content__container,
  .site-footer__inner {
    margin-inline: 0 !important;
    width: 100% !important;
  }
}


/* ========== 5. Navigation et blocs de liens ========== */
.site-header__initial,
.social-bar {
  display: none !important;
}

/* Menu */
.primary-nav__menu-link-inner {
  padding-block: var(--sp0-3); /* variable à vérifier dans Olivero */
}

/* Sélecteur de langue */
#block-galerie2026-selecteurdelangue .links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.125rem;
}
#block-galerie2026-selecteurdelangue a {
  color: var(--color-text-neutral-loud);
}

/* Menus expos et artistes (sur blocs) */
.menu-custom a {
  color: var(--color-text-neutral-loud);
}
.menu-custom ul {
  margin-inline-start: 0;

  @media (max-width: 43.6875rem) {
    padding-block-end: 1.125rem;
  }
}
.menu-custom li {
  display: inline-block;
  list-style: none !important;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
.menu-custom li:not(:last-child)::after {
  content: " ";
  margin: 0 0.75rem;

  @media (max-width: 43.6875rem) {
    margin: 0 0.25rem;
  }
}

.block__content .links li {
  margin: 0 0 1.125rem;
}
.block__content .links a {
  text-decoration: none;
  font-size: 1.125rem;
}


/* ========== 6. Fil d'Ariane ========== */
.breadcrumb {
  font-weight: lighter;
  font-size: 0.875rem;
  color: var(--color-text-neutral-soft);
}
@media (max-width: 43.6875rem) {
  .breadcrumb {
    display: none;
  }
}
.breadcrumb__link {
  color: var(--color-text-neutral-soft);
}
.breadcrumb__item {
  &:nth-child(n+2)::before {
    margin-inline: 0.5rem 0.75rem;
    border-block-start: 1px solid var(--color-text-neutral-soft);
    border-inline-end: 1px solid var(--color-text-neutral-soft);
  }
}


/* ========== 7. Footer ========== */
.site-footer {
  color: var(--color-text-neutral-soft);
  background: white;
}
.region--footer-bottom {
  font-size: 0.875rem;

  & a {
    font-weight: bold;
  }

  @media (min-width: 31.25rem) {
    line-height: 1.9rem !important;
    font-size: 1rem;
    text-align: left;
  }
}
.region--footer-bottom hr {
  background: #D3D3D3;
  height: 1px;
  padding: 0;
  color: var(--color-text-neutral-soft);
  border: 0;
}