/* ==========================================================================
   cassiopeia_grognard — header.css
   En-tête et menu : mêmes règles sur toutes les pages.
   Les valeurs viennent de variables.css.
   ========================================================================== */

/* --- En-tête ------------------------------------------------------------ */

.container-header {
  border-bottom: 3px solid var(--sc-header-bordure);
}

@media (min-width: 992px) {
  .container-header {
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] repeat(4, minmax(0, 19.875rem))
      [main-end] minmax(0, 1fr) [full-end];
    grid-template-areas: "top top top top top top" ". logo nav nav nav .";
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    min-height: var(--sc-header-hauteur);
  }

  .container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
  }

  .container-header .container-nav {
    grid-area: nav;
  }
}

/* Le logo fixe la largeur du bloc ; le slogan s'étire à cette largeur. */
.container-header .navbar-brand {
  display: flex;
  flex-direction: column;
  width: max-content;
  margin: 0;
  padding-block: 0.5rem;
}

.container-header .brand-logo {
  font-family: var(--font-corps);
  font-size: var(--sc-logo-taille);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.container-header .site-description {
  width: 0;
  min-width: 100%;
  margin-top: 0.35rem;
  font-family: var(--font-corps);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: justify;
  text-align-last: justify;
  color: color-mix(in srgb, var(--headercolor) 65%, transparent);
}

/* --- Menu --------------------------------------------------------------- */

.container-header .container-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0;
}

.container-header .container-nav .mod-menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-header .container-nav .mod-menu > li > a {
  display: flex;
  align-items: center;
  min-height: var(--sc-header-hauteur);
  padding: 0 0.9rem;
  font-family: var(--font-corps);
  font-size: var(--sc-menu-taille);
  letter-spacing: 0.02em;
  color: var(--sc-menu-texte);
  text-decoration: none;
  white-space: nowrap;
}

.container-header .container-nav .mod-menu > li > a:hover,
.container-header .container-nav .mod-menu > li.active > a {
  color: var(--sc-menu-actif);
}

/* Ajustement : le logo ne compte pas l'espace de fin de lettre. */
.container-header .brand-logo {
  margin-right: -0.12em;
}

/* Barre du haut : sa propre rangée, sur toute la largeur de la grille. */
@media (min-width: 992px) {
  .container-header .container-topbar {
    grid-area: top;
  }
}

/* Barre du haut : fond sombre, texte lisible, contenu aligné sur le logo. */
.container-header .container-topbar {
  padding-block: var(--sc-topbar-espace);
  background: var(--sc-topbar-fond);
  color: var(--sc-topbar-texte);
  font-size: var(--sc-topbar-taille);
}

.container-header .container-topbar > * {
  padding-inline: 0.5em;
}

@media (min-width: 992px) {
  .container-header .container-topbar {
    display: grid;
    grid-template-columns: subgrid;
  }

  .container-header .container-topbar > * {
    grid-column: 2 / 6;
  }
}

.container-header .container-topbar p {
  margin: 0;
}