/* En-tête ——————————————————————— */
.main-header {
  position: relative;
  margin-block-end: 0;
}

@media (width > 720px) {
  .main-header__wrapper {
    > .brand,
    > .page-title {
      margin-inline-start: var(--space-20);
    }
  }
}

/* Conteneur en-tête — mobile : empilement simple */
.main-header__wrapper {
  align-items: center;
  display: grid;
  grid-template-areas:
    "brand nav"
    "title title"
    "cta cta";
  justify-items: stretch;
  justify-content: space-between;
}

.brand { grid-area: brand; }
.main-navigation { grid-area: nav; }
.page-title { grid-area: title; }
.header-cta { grid-area: cta; }

/* Header CTA (Consulter nos bases / Questionner le CRIDON) */
ul.header-cta {
  align-items: center;
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  line-height: 1.2;
  list-style: none;
  padding: var(--space-8);
  width: 100%;
}

/* Conteneur en-tête — desktop large : une ligne */
@media (width > 720px) {
  .main-header__wrapper {
    align-items: start;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "brand . cta nav"
      "title title title title";
    gap: var(--space-8);
    justify-items: start;
    padding-block-start: var(--space-16);
  }
  
  .main-navigation {
    margin-block-start: var(--space-32);
  }
}

/* Conteneur en-tête — desktop étroit : CTA passe en dessous */
@media (width > 720px) and (width < 960px) {
  .main-header__wrapper {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand . nav"
      "title title title"
      "cta   cta cta";
  }

  .header-cta {
    justify-self: start;
    margin-block-start: 0;
  }
}

/* Marque et logo */
.brand {
  padding-block: var(--space-16);

  .logo {
    width: 7rem;
  }
}

@media (width > 960px) {
  ul.header-cta {
    margin-block-start: var(--space-32);
  }
}

@media (width > 961px) {
  .wrapper:not(.home) .main-header {
    margin-block-end: var(--space-20);
  }
}

@media (width < 960px) {
  ul.header-cta {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    margin-block-start: var(--space-20);
  }

  .header-cta li {
    display: grid;
    
    & a {
      place-content: center;
    }
  }
}


@media (width > 720px) {
  .brand {
    padding-block: 0;

    .logo {
      width: 10rem;
    }
  }
}

/* Titre de la page */
.page-title {
  font-weight: normal;
  line-height: 1.2;
  margin-block: var(--space-24) 0;
}

.page-title:not(.home .page-title) {
  color: transparent;
  font-size: 1.25rem;
}

.header-cta li + li {
  margin-inline-start: calc(var(--space-16) - 1px);
  position: relative;
}

.header-cta li + li::before {
  background-color: var(--color-border-light);
  bottom: 0;
  content: "";
  display: inline-block;
  left: -0.5rem;
  position: absolute;
  top: 0;
  width: 1px;
}