h1.title {
  font-family: 'Merriweather', serif;
  font-size: 2.2rem; /* Taille un peu plus grande pour impact visuel */
  font-weight: 700; /* Bien marqué */
  color: #004c70; /* Couleur principale de ta charte */
  margin: 0 0 1rem 0; /* Espacement dessous */
  line-height: 1.3; /* Lisibilité */
}

/* Base */
.menu-histographie-container a {
  position: relative;
  display: inline-block;   /* évite que la barre coupe le texte */
  padding-bottom: 4px;     /* espace pour la barre */
  font-size: 1.1rem;
  text-decoration: none;
}

/* Barre animée */
.menu-histographie-container a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;                /* pleine largeur par défaut */
  bottom:0;
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.menu-histographie-container a:hover::after{
  transform: scaleX(1);
}

/* Cas des items avec sous-menu : garder de la place pour la "puce" à droite */
.menu-histographie-container .menu-item-has-children > a{
  padding-right: 1.2em;   /* adapte à la largeur de ta puce */
}
.menu-histographie-container .menu-item-has-children > a::after{
  right: 1.2em;           /* la barre s'arrête avant la puce */
}

/* Sous-menus : pas de barre animée */
/* Supprime le soulignement classique uniquement dans le menu */
.menu-histographie-container ul#nav li a,
.menu-histographie-container ul#nav li a:hover {
  text-decoration: none;
}

.masthead {
  display: flex;
  justify-content: space-between; /* espace entre branding et menu */
  align-items: center;            /* centre verticalement */
}

.masthead .branding {
  display: flex;
  flex-direction: column; /* garde logo + titre + description en colonne */
}

.menu-histographie-container ul.sub-menu li a {
    font-size: 0.6rem
}


/* Version mobile : menu en dessous */
/* Mobile uniquement */
@media screen and (max-width:768px){
	
	
	.masthead {
    flex-direction: column;   /* au lieu de côte à côte */
    align-items: center;      /* centré horizontalement */
    text-align: center;
  }

  .masthead .menu {
    margin-top: 1rem;         /* espace au-dessus du menu */
    width: 100%;              /* prend toute la largeur */
  }

  /* sous-menus fermés par défaut */
  .masthead .menu-histographie-container ul.sub-menu{
    display:none;
    position:static;
    margin-left:1rem;
    padding-left:0;
  }

  /* ouverture quand on clique/tap sur le parent */
  .masthead .menu-histographie-container li:focus-within > ul.sub-menu{
    display:block;
  }
}


/* Supprime tout soulignement ou bordure par défaut */
.menu-histographie-container .current-menu-item > a,
.menu-histographie-container a[aria-current="page"] {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* Force le style actif identique au hover, mais avec ton trait fin */
.menu-histographie-container .current-menu-item > a::after,
.menu-histographie-container a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px;              /* épaisseur identique à h1.title */
  background: currentColor; /* même couleur que le texte */
}

/* Corps des pages WordPress : réduire marge/padding */
article.page,
article.page .entry,
article.page .entry-content {
  max-width: 1200px !important;  /* largeur max */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Grilles en 2 colonnes fixes sur desktop */
.grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

/* Sur mobile : 1 colonne */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
  }
}


/* Header en 2 lignes (logo centré au-dessus, menu en dessous) */
@media (min-width:1024px) and (max-width:1366px){

  .masthead {
    flex-direction: column;   /* logo + titre en haut */
    align-items: center;      /* centré */
    text-align: center;
    gap: 6px;
  }

  /* Branding centré */
  .masthead .branding {
    align-items: center;
    text-align: center;
  }

  .masthead .branding .logo a {
    font-size: 1.6rem;   /* taille réduite du titre */
    font-weight: 700;
  }

  .masthead .branding .description {
    font-size: 0.8rem;
    margin-top: 2px;
  }

  /* Menu centré en dessous */
  .masthead .menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }

  .menu-histographie-container #nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap; /* évite le débordement si trop long */
  }

  .menu-histographie-container #nav > li > a {
    font-size: 1rem;
    padding: 4px 8px;
  }
}

/* Header en 2 lignes pour petits laptops/tablettes (900px–1024px) */
@media (min-width:900px) and (max-width:1023px){

  .masthead {
    flex-direction: column;   /* logo + titre en haut */
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  /* Branding centré */
  .masthead .branding {
    align-items: center;
    text-align: center;
  }

  .masthead .branding .logo a {
    font-size: 1.5rem;   /* légèrement réduit encore */
    font-weight: 700;
  }

  .masthead .branding .description {
    font-size: 0.75rem;
    margin-top: 2px;
  }

  /* Menu centré en dessous */
  .masthead .menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }

  .menu-histographie-container #nav {
    display: flex;
    justify-content: center;
    gap: 12px;   /* un peu moins de gap pour gagner de la place */
    flex-wrap: wrap;
  }

  .menu-histographie-container #nav > li > a {
    font-size: 0.95rem; /* taille encore réduite */
    padding: 4px 6px;
  }
}

/* Header en 2 lignes pour tablettes larges (769px–899px) */
@media (min-width:769px) and (max-width:899px){

  .masthead {
    flex-direction: column;   /* logo au-dessus */
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .masthead .branding {
    align-items: center;
    text-align: center;
  }

  .masthead .branding .logo a {
    font-size: 1.4rem;  /* encore un peu réduit */
    font-weight: 700;
  }

  .masthead .branding .description {
    font-size: 0.7rem;
    margin-top: 2px;
  }

  .masthead .menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }

  .menu-histographie-container #nav {
    display: flex;
    justify-content: center;
    gap: 10px;   /* encore plus serré */
    flex-wrap: wrap;
  }

  .menu-histographie-container #nav > li > a {
    font-size: 0.9rem;
    padding: 4px 5px;
  }
}