/* ==========================================================================
   Header Hermits — méga menu (ordinateur ≥ 981px) / tiroir (mobile ≤ 980px)
   Toutes les dimensions sont fluides : à ajuster via les variables ci-dessous.
   ========================================================================== */

.hh {
  /* Couleurs (reprises des couleurs globales Divi, avec secours) */
  --hh-ink: var(--gcid-secondary-color, #000);
  --hh-paper: var(--gcid-primary-color, #edece9);
  --hh-light: #fff;
  --hh-scrim: rgba(0, 0, 0, .33);
  --hh-line: rgba(0, 0, 0, .14);
  --hh-font: var(--et_global_body_font, 'EB Garamond'), 'EB Garamond', Georgia, serif;
  --hh-font-button: 'Times New Roman', Times, serif;

  /* Mise en page */
  --hh-bar-h: clamp(4rem, 3.25rem + 2vw, 5rem);
  --hh-gutter: 5vw;
  --hh-admin: var(--wp-admin--admin-bar--height, 0px);
  --hh-menu-h: calc(100vh - var(--hh-bar-h) - var(--hh-admin));
  --hh-nav-w: clamp(16rem, 26.25vw, 26rem);
  --hh-pad-y: clamp(2rem, 1rem + 3vw, 4rem);
  --hh-pad-x: clamp(1.25rem, .5rem + 2.5vw, 3rem);
  --hh-logo-w: clamp(8rem, 15vw, 14rem);

  /* Typographie */
  --hh-fs-nav: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --hh-fs-item: clamp(.9375rem, .9rem + .1vw, 1rem);
  --hh-fs-group: clamp(1.125rem, 1rem + .35vw, 1.25rem);
  --hh-fs-cta: clamp(1.5rem, 1.1rem + 1vw, 1.9rem);
  --hh-fs-lang: .875rem;
  --hh-gap-nav: clamp(1.125rem, .75rem + 1vw, 1.875rem);
  --hh-gap-item: .75rem;

  /* Mouvement */
  --hh-ease: cubic-bezier(.22, .61, .36, 1);
  --hh-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hh-dur: .45s;

  --hh-fg: var(--hh-ink);

  /* top:auto = position d'origine dans le flux (sous la barre d'admin WP).
     Comme l'ancien header Divi, la barre se superpose au haut de la page. */
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  z-index: 9399;
  color: var(--hh-fg);
  font-family: var(--hh-font);
  font-size: var(--hh-fs-item);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: color var(--hh-dur) var(--hh-ease);
}

@supports (height: 100dvh) {
  .hh { --hh-menu-h: calc(100dvh - var(--hh-bar-h) - var(--hh-admin)); }
}

/* Remises à zéro (isole le header des styles Divi / WooCommerce) */
.hh *, .hh *::before, .hh *::after { box-sizing: border-box; }
.hh ul { list-style: none; margin: 0; padding: 0; }
.hh li { margin: 0; padding: 0; }
.hh p { margin: 0; padding: 0; }
.hh a { color: inherit; text-decoration: none; }
.hh button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.hh a:focus-visible, .hh button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: .3rem;
}
.hh-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Soulignement animé (survol, page courante, rubrique active) */
.hh-link,
.hh-nav__trigger > span:first-child {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .08em;
  transition: background-size .45s var(--hh-ease-out);
}
.hh-nav__trigger { background: none; }
.hh-link:hover,
.hh-link[aria-current],
.hh-nav__trigger:hover > span:first-child,
.is-ancestor > .hh-nav__trigger > span:first-child,
.is-open > .hh-nav__trigger > span:first-child {
  background-size: 100% 1px;
}

.hh-arrow::before {
  content: "→";
  display: inline-block;
  transition: transform .45s var(--hh-ease-out);
}
a:hover > .hh-arrow::before { transform: translateX(.25em); }

/* --------------------------------------------------------------------------
   Barre
   -------------------------------------------------------------------------- */

.hh-bar {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--hh-bar-h);
  padding-inline: var(--hh-gutter);
}
.hh-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hh-paper);
  opacity: 0;
  transition: opacity var(--hh-dur) var(--hh-ease);
}
.hh.is-open .hh-bar::before { opacity: 1; }

.hh-toggle {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -.55rem;
}
.hh-toggle__icon {
  position: relative;
  display: block;
  width: 1.625rem;
  height: 1.125rem;
}
.hh-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: top .3s var(--hh-ease), transform .5s var(--hh-ease-out), opacity .25s var(--hh-ease);
}
.hh-toggle__icon span:nth-child(1) { top: 0; }
.hh-toggle__icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hh-toggle__icon span:nth-child(3) { top: 100%; transform: translateY(-100%); }
.hh.is-open .hh-toggle__icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hh.is-open .hh-toggle__icon span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(.2); }
.hh.is-open .hh-toggle__icon span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

.hh-logo {
  justify-self: center;
  display: block;
  width: var(--hh-logo-w);
  line-height: 0;
}
.hh-logo__svg {
  display: block;
  width: 100%;
  height: auto;
}

.hh-langs { justify-self: end; }
.hh-langs__list {
  display: flex;
  gap: 1.375rem;
  font-size: var(--hh-fs-lang);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Menu ouvert : base commune
   -------------------------------------------------------------------------- */

.hh-menu {
  position: absolute;
  top: var(--hh-bar-h);
  left: 0;
  right: 0;
  height: var(--hh-menu-h);
  visibility: hidden;
  opacity: 0;
  color: var(--hh-ink);
  transition: opacity var(--hh-dur) var(--hh-ease), transform var(--hh-dur) var(--hh-ease-out), visibility 0s linear var(--hh-dur);
}
.hh.is-open .hh-menu {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.hh-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--hh-gap-nav);
  font-size: var(--hh-fs-nav);
}

/* Entrées du menu : apparition décalée */
.hh.is-ready .hh-nav__link {
  opacity: 0;
  transform: translateY(.5rem);
  transition:
    opacity .5s var(--hh-ease),
    transform .7s var(--hh-ease-out),
    background-size .45s var(--hh-ease-out);
}
.hh.is-open .hh-nav__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(.08s + var(--i, 0) * .04s), calc(.08s + var(--i, 0) * .04s), 0s;
}

.hh-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.hh-group__title {
  font-size: var(--hh-fs-group);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: calc(var(--hh-gap-item) / 2);
  break-after: avoid;
  -webkit-column-break-after: avoid;
}
.hh-group__list + .hh-group__title { margin-top: var(--hh-gap-nav); }
.hh-group__list li,
.hh-panel__list li {
  padding-block: calc(var(--hh-gap-item) / 2);
  font-size: var(--hh-fs-item);
  break-inside: avoid;
}
.hh-panel__list li { padding-block: .5rem; }

.hh-panel__overview {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  margin-bottom: var(--hh-gap-nav);
  font-size: var(--hh-fs-item);
  font-style: italic;
}

.hh-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  min-height: clamp(18rem, 29vw, 27.5rem);
  padding: 2rem;
  background: var(--hh-paper) center / cover no-repeat;
}
.hh.is-loaded .hh-cta { background-image: var(--hh-cta-bg, none); }
.hh-cta__title {
  font-size: var(--hh-fs-cta);
  font-weight: 700;
  line-height: 1.05;
}
.hh-cta__button {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: .3em;
  border-bottom: 1px solid currentColor;
  font-family: var(--hh-font-button);
  font-size: 1rem;
}

.hh-visual {
  position: absolute;
  top: var(--hh-pad-y);
  left: var(--hh-pad-x);
  width: calc(100% - 2 * var(--hh-pad-x));
  height: calc(100% - 2 * var(--hh-pad-y));
  object-fit: contain;
  object-position: left top;
  opacity: 0;
  transform: scale(1.03);
  transform-origin: left top;
  transition: opacity .6s var(--hh-ease), transform 1.2s var(--hh-ease-out);
}
.hh-visual.is-visible {
  opacity: 1;
  transform: none;
}

html.hh-lock,
html.hh-lock body { overflow: hidden; }
html.hh-lock body { padding-right: var(--hh-scrollbar, 0px); }

/* --------------------------------------------------------------------------
   Ordinateur : méga menu
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  /* Navbar claire sur hero sombre (case cochée sur la page) */
  .hh--on-dark:not(.is-open) { --hh-fg: var(--hh-light); }

  /* Accueil : pas de logo dans la barre (il est déjà dans le hero).
     visibility garde la grille centrée et retire le lien de la tabulation. */
  .hh--no-logo .hh-logo { visibility: hidden; }

  .hh-only-mobile,
  .hh-nav__footer,
  .hh-plus { display: none !important; }

  /* Le fond sombre est celui du conteneur : un clic dessus ferme le menu */
  .hh-menu { background: var(--hh-scrim); }

  /* Colonne de gauche. NB : pas de position ni de transform ici, pour que les
     panneaux se positionnent par rapport à .hh-menu. */
  .hh-nav {
    width: var(--hh-nav-w);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--hh-pad-y) var(--hh-pad-x);
    background: var(--hh-paper);
  }

  .hh-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--hh-nav-w);
    right: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    container-type: inline-size;
    background: var(--hh-paper);
    border-left: 1px solid var(--hh-ink);
    visibility: hidden;
    opacity: 0;
    transform: translateX(-1rem);
    transition:
      opacity .4s var(--hh-ease),
      transform .6s var(--hh-ease-out),
      visibility 0s linear .4s;
  }
  .is-open > .hh-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .hh-panel__inner {
    display: grid;
    min-height: 100%;
  }
  .hh-panel--groups .hh-panel__inner { grid-template-columns: 2fr 1fr; }
  .hh-panel--list .hh-panel__inner { grid-template-columns: 1fr 2fr; }

  .hh-panel__main {
    padding: var(--hh-pad-y) var(--hh-pad-x);
  }
  .hh-panel__main > *,
  .hh-cta {
    opacity: 0;
    transform: translateY(.6rem);
    transition: opacity .45s var(--hh-ease), transform .7s var(--hh-ease-out);
  }
  .is-open > .hh-panel .hh-panel__main > *,
  .is-open > .hh-panel .hh-cta {
    opacity: 1;
    transform: none;
    transition-delay: .1s;
  }
  .is-open > .hh-panel .hh-cta { transition-delay: .18s; }

  .hh-panel__cols {
    columns: 2;
    column-gap: calc(2 * var(--hh-pad-x));
  }
  .hh-colbreak {
    break-before: column;
    -webkit-column-break-before: always;
  }

  .hh-cta {
    align-self: start;
    margin: var(--hh-pad-y) var(--hh-pad-x);
  }

  .hh-panel__visual { position: relative; }

  /* Panneau étroit (petits écrans d'ordinateur, tablettes paysage) :
     l'encart contact passe sous les colonnes. */
  @container (max-width: 56rem) {
    .hh-panel--groups .hh-panel__inner { grid-template-columns: 1fr; align-content: start; }
    .hh-cta {
      margin-top: 0;
      min-height: clamp(10rem, 22vw, 14rem);
    }
  }
  @container (max-width: 34rem) {
    .hh-panel__cols { columns: 1; }
    .hh-colbreak { break-before: auto; -webkit-column-break-before: auto; }
  }
}

/* --------------------------------------------------------------------------
   Mobile / tablette : tiroir en accordéon
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hh { --hh-fg: var(--hh-ink); }

  .hh-only-desktop,
  .hh-langs,
  .hh-cta,
  .hh-panel__visual { display: none !important; }

  .hh-bar {
    grid-template-columns: 1fr auto;
    background: var(--hh-paper);
  }
  .hh-bar::before { display: none; }
  .hh-logo {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    width: clamp(7.5rem, 30vw, 12.5rem);
  }
  .hh-toggle {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    margin-left: 0;
    margin-right: -.55rem;
  }

  .hh-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--hh-paper);
    border-top: 1px solid var(--hh-line);
    transform: translateY(-.75rem);
  }
  .hh.is-open .hh-menu { transform: none; }

  .hh-nav {
    padding: clamp(.5rem, 2vw, 1rem) var(--hh-gutter) clamp(2rem, 8vw, 3rem);
  }
  .hh-nav__list {
    gap: 0;
    font-size: clamp(1.125rem, 1rem + .8vw, 1.375rem);
  }
  .hh-nav__item { border-bottom: 1px solid var(--hh-line); }

  /* .hh préfixé : doit l'emporter sur la remise à zéro « .hh button » pour que
     rubriques (button) et liens (a) aient exactement la même hauteur. */
  .hh .hh-nav__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 1.4em;
    padding-block: clamp(.85rem, .7rem + .6vw, 1.1rem);
    line-height: 1.4;
  }
  /* En pleine largeur, le soulignement animé se limiterait mal : texte souligné */
  a.hh-nav__link,
  .hh-nav__trigger > span:first-child {
    padding-bottom: 0;
    background: none;
  }
  .is-ancestor > .hh-nav__trigger > span:first-child,
  a.hh-nav__link[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
  }

  /* « + » qui devient « − » à l'ouverture (comme le menu mobile d'origine) */
  .hh-plus {
    position: relative;
    flex: none;
    width: .7em;
    height: .7em;
  }
  .hh-plus::before,
  .hh-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    margin-top: -.75px;
    background: currentColor;
    transition: transform .45s var(--hh-ease-out), opacity .3s var(--hh-ease);
  }
  .hh-plus::after { transform: rotate(90deg); }
  .is-open > .hh-nav__trigger .hh-plus::after { transform: rotate(0deg); opacity: 0; }

  /* Accordéon animé en hauteur (grid 0fr → 1fr) */
  .hh-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .5s var(--hh-ease-out), visibility 0s linear .5s;
  }
  .is-open > .hh-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
  }
  .hh-panel__inner {
    min-height: 0;
    overflow: hidden;
  }
  .hh-panel__main {
    padding: 0 0 1.25rem;
    opacity: 0;
    transition: opacity .35s var(--hh-ease);
  }
  .is-open > .hh-panel .hh-panel__main {
    opacity: 1;
    transition-delay: .12s;
  }

  .hh-panel__overview { margin-bottom: .5rem; }
  .hh-group__title {
    margin-top: .75rem;
    font-size: var(--hh-fs-item);
  }
  .hh-group__list + .hh-group__title { margin-top: 1.25rem; }
  .hh-group__list li,
  .hh-panel__list li { padding-block: .45rem; }

  .hh-nav__footer { padding-top: 1.75rem; }
  .hh-langs__list--drawer {
    gap: 1.5rem;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Accessibilité : mouvements réduits
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hh *,
  .hh *::before,
  .hh *::after,
  .hh-menu {
    transition-duration: .15s !important;
    transition-delay: 0s !important;
  }
  .hh-menu,
  .hh .hh-nav__link,
  .hh .hh-panel,
  .hh .hh-panel__main > *,
  .hh .hh-cta,
  .hh .hh-visual { transform: none !important; }
}

@media print {
  .hh-menu { display: none; }
}