/* =========================================================
   HISTOGRAPHIE — CSS GLOBAL
   Navigation + mise en page
   Version propre — août 2026
   ========================================================= */


/* =========================================================
   1. VARIABLES HISTOGRAPHIE
   ========================================================= */

:root{
  --hg-blue:#17374f;
  --hg-blue-deep:#102b40;
  --hg-blue-mid:#294f70;

  --hg-coral:#c65f50;
  --hg-coral-dark:#934237;

  --hg-text:#56616e;
  --hg-line:#dfe4e8;

  --hg-warm:#f8f4ed;
  --hg-white:#ffffff;
}


/* =========================================================
   2. TITRES DE PAGE
   ========================================================= */

h1.title{
  margin:0 0 1rem;

  color:var(--hg-blue);

  font-family:
    "Merriweather",
    Georgia,
    serif;

  font-size:clamp(1.8rem,3vw,2.2rem);
  font-weight:700;

  line-height:1.3;
}


/* =========================================================
   3. EN-TÊTE
   ========================================================= */

.masthead{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:28px;
}


.masthead .branding{
  display:flex;
  flex-direction:column;

  flex-shrink:0;
}


/* =========================================================
   4. MENU PRINCIPAL — ORDINATEUR UNIQUEMENT
   ========================================================= */

@media(min-width:769px){

  .menu-histographie-container #nav{
    display:flex;

    align-items:center;

    gap:clamp(12px,1.7vw,25px);

    margin:0;
    padding:0;
  }


  .menu-histographie-container #nav > li{
    position:relative;

    margin:0;
    padding:0;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
  }


  /* Liens principaux */

  .menu-histographie-container #nav > li > a{
    position:relative;

    display:block;

    padding:
      8px 0
      7px;

    border:0 !important;

    color:#455968;

    font-size:clamp(.88rem,1.15vw,1.08rem);
    font-weight:500;

    letter-spacing:.055em;

    text-decoration:none !important;

    background-color:transparent !important;

    /*
       Trait fin corail.
       Pas de ::after pour éviter
       les anciens conflits.
    */

    background-image:
      linear-gradient(
        var(--hg-coral),
        var(--hg-coral)
      ) !important;

    background-position:
      left bottom !important;

    background-repeat:
      no-repeat !important;

    background-size:
      0 2px !important;

    box-shadow:none !important;

    transition:
      color .2s ease,
      background-size .25s ease;
  }


  /* Survol */

  .menu-histographie-container
  #nav > li > a:hover{

    color:var(--hg-blue);

    background-size:
      100% 2px !important;

    border:0 !important;

    box-shadow:none !important;

    text-decoration:none !important;
  }

}


/* =========================================================
   5. PAGE ACTIVE — ORDINATEUR
   ========================================================= */

@media(min-width:769px){

  .menu-histographie-container
  #nav > li.current-menu-item,

  .menu-histographie-container
  #nav > li.current-menu-ancestor,

  .menu-histographie-container
  #nav > li.current_page_item,

  .menu-histographie-container
  #nav > li.current_page_ancestor{

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
  }


  .menu-histographie-container
  #nav > li.current-menu-item > a,

  .menu-histographie-container
  #nav > li.current-menu-ancestor > a,

  .menu-histographie-container
  #nav > li.current_page_item > a,

  .menu-histographie-container
  #nav > li.current_page_ancestor > a,

  .menu-histographie-container
  #nav > li > a[aria-current="page"]{

    border:0 !important;

    color:var(--hg-blue) !important;

    background-color:transparent !important;

    background-image:
      linear-gradient(
        var(--hg-coral),
        var(--hg-coral)
      ) !important;

    background-position:
      left bottom !important;

    background-repeat:
      no-repeat !important;

    background-size:
      100% 2px !important;

    box-shadow:none !important;

    text-decoration:none !important;
  }

}


/* =========================================================
   6. PETITE FLÈCHE DES SOUS-MENUS
   ========================================================= */

@media(min-width:769px){

  .menu-histographie-container
  #nav > li.menu-item-has-children > a{

    padding-right:15px;
  }


  .menu-histographie-container
  #nav > li.menu-item-has-children > a::after{

    content:"" !important;

    position:absolute !important;

    top:50% !important;
    right:1px !important;

    display:block !important;

    width:5px !important;
    height:5px !important;

    margin-top:-4px !important;

    border:0 !important;

    border-right:
      1.5px solid currentColor !important;

    border-bottom:
      1.5px solid currentColor !important;

    background:transparent !important;

    box-shadow:none !important;

    transform:
      rotate(45deg) !important;

    transform-origin:center !important;
  }


  /* Pas de carré ou symbole parasite
     sur les rubriques sans sous-menu */

  .menu-histographie-container
  #nav > li:not(.menu-item-has-children) > a::after{

    content:none !important;

    display:none !important;
  }

}


/* =========================================================
   7. SOUS-MENUS — ORDINATEUR
   ========================================================= */

@media(min-width:769px){

  .menu-histographie-container
  ul.sub-menu{

    min-width:245px;

    margin-top:0 !important;

    padding:
      7px 0 !important;

    border:0 !important;

    border-top:
      3px solid
      var(--hg-coral) !important;

    border-radius:
      0 0
      10px 10px;

    background:
      var(--hg-blue-deep) !important;

    box-shadow:
      0 14px 34px
      rgba(16,43,64,.20) !important;
  }


  .menu-histographie-container
  ul.sub-menu li{

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
  }


  .menu-histographie-container
  ul.sub-menu li a{

    display:block;

    width:100%;

    padding:
      10px 14px !important;

    border:0 !important;

    background:
      transparent !important;

    background-image:
      none !important;

    color:
      #ffffff !important;

    font-size:
      .68rem !important;

    font-weight:650;

    line-height:1.35;

    letter-spacing:.035em;

    text-decoration:none !important;

    box-shadow:none !important;

    transition:
      background .18s ease,
      color .18s ease,
      padding-left .18s ease;
  }


  /* Aucun symbole parasite dans les sous-menus */

  .menu-histographie-container
  ul.sub-menu li a::before,

  .menu-histographie-container
  ul.sub-menu li a::after{

    content:none !important;

    display:none !important;
  }


  /* Survol */

  .menu-histographie-container
  ul.sub-menu li a:hover{

    padding-left:
      18px !important;

    background:
      rgba(255,255,255,.08) !important;

    color:
      #f1b8ae !important;

    text-decoration:none !important;
  }


  /* Élément actif */

  .menu-histographie-container
  ul.sub-menu
  .current-menu-item > a,

  .menu-histographie-container
  ul.sub-menu
  .current_page_item > a{

    background:
      rgba(255,255,255,.08) !important;

    color:
      #f1b8ae !important;

    box-shadow:none !important;

    border:0 !important;
  }

}


/* =========================================================
   8. CONTENU DES PAGES
   ========================================================= */

article.page,
article.page .entry,
article.page .entry-content{

  max-width:
    1200px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  padding-left:
    10px !important;

  padding-right:
    10px !important;
}


/* =========================================================
   9. GRILLES
   ========================================================= */

.grid{
  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  gap:
    20px !important;
}


/* =========================================================
   10. ÉCRANS INTERMÉDIAIRES
   769 px → 1366 px
   ========================================================= */

@media
(min-width:769px)
and
(max-width:1366px){

  .masthead{
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:7px;

    text-align:center;
  }


  .masthead .branding{
    align-items:center;

    text-align:center;
  }


  .masthead
  .branding
  .logo a{

    font-size:
      clamp(
        1.4rem,
        2.1vw,
        1.65rem
      );

    font-weight:700;
  }


  .masthead
  .branding
  .description{

    margin-top:2px;

    font-size:
      clamp(
        .7rem,
        1vw,
        .8rem
      );
  }


  .masthead .menu{
    width:100%;

    display:flex;

    justify-content:center;

    margin-top:5px;
  }


  .menu-histographie-container
  #nav{

    justify-content:center;

    gap:
      clamp(
        9px,
        1.5vw,
        15px
      );

    flex-wrap:wrap;
  }


  .menu-histographie-container
  #nav > li > a{

    padding:
      5px 5px
      6px;

    font-size:
      clamp(
        .87rem,
        1.35vw,
        1rem
      );
  }


  .menu-histographie-container
  #nav > li.menu-item-has-children > a{

    padding-right:17px;
  }

}


/* =========================================================
   11. MOBILE
   IMPORTANT :
   WORDPRESS GARDE LE CONTRÔLE DU MENU HAMBURGER
   ========================================================= */

@media(max-width:768px){

  /*
     On adapte seulement l'en-tête.

     On ne met volontairement AUCUN :
     display:block;
     display:flex;
     display:none;

     sur #nav ou sur .menu.

     Le thème WordPress peut donc ouvrir
     et fermer normalement son menu hamburger.
  */


  .masthead{
    flex-direction:column;

    align-items:center;

    gap:8px;

    text-align:center;
  }


  .masthead .branding{
    align-items:center;

    text-align:center;
  }


  /* =======================================================
     LIENS PRINCIPAUX MOBILE
     ======================================================= */

  .menu-histographie-container
  #nav > li > a{

    font-size:.9rem;

    text-decoration:none !important;
  }


  /* On retire nos traits corail desktop
     sur le menu mobile */

  .menu-histographie-container
  #nav > li > a,

  .menu-histographie-container
  #nav > li.current-menu-item > a,

  .menu-histographie-container
  #nav > li.current-menu-ancestor > a,

  .menu-histographie-container
  #nav > li.current_page_item > a,

  .menu-histographie-container
  #nav > li.current_page_ancestor > a,

  .menu-histographie-container
  #nav > li > a[aria-current="page"]{

    background-image:
      none !important;

    box-shadow:none !important;

    text-decoration:none !important;
  }


  /* Rubrique active */

  .menu-histographie-container
  #nav > li.current-menu-item > a,

  .menu-histographie-container
  #nav > li.current-menu-ancestor > a,

  .menu-histographie-container
  #nav > li.current_page_item > a,

  .menu-histographie-container
  #nav > li.current_page_ancestor > a,

  .menu-histographie-container
  #nav > li > a[aria-current="page"]{

    color:
      var(--hg-blue) !important;

    font-weight:700;
  }


  /* =======================================================
     SOUS-MENUS MOBILE
     ======================================================= */

  /*
     IMPORTANT :
     on ne touche PAS à display ni à position.
     Le thème conserve entièrement
     son mécanisme d'ouverture/fermeture.
  */

  .menu-histographie-container
  ul.sub-menu{

    min-width:0;

    border-color:
      var(--hg-line) !important;

    background:
      #f4f6f7 !important;

    box-shadow:none !important;
  }


  .menu-histographie-container
  ul.sub-menu li a{

    background:
      transparent !important;

    background-image:
      none !important;

    color:
      var(--hg-blue) !important;

    font-size:.82rem !important;

    text-decoration:none !important;

    box-shadow:none !important;
  }


  .menu-histographie-container
  ul.sub-menu li a:hover{

    background:
      var(--hg-warm) !important;

    color:
      var(--hg-coral-dark) !important;
  }


  .menu-histographie-container
  ul.sub-menu
  .current-menu-item > a,

  .menu-histographie-container
  ul.sub-menu
  .current_page_item > a{

    background:
      var(--hg-warm) !important;

    color:
      var(--hg-coral-dark) !important;
  }


  /* =======================================================
     GRILLES MOBILE
     ======================================================= */

  .grid{
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   12. ACCESSIBILITÉ
   ========================================================= */

.menu-histographie-container
a:focus-visible{

  outline:
    2px solid
    var(--hg-coral);

  outline-offset:
    3px;
}