/* ==========================================================================
   Couche « Magic UI » — tout le site (THM-2 accueil, THM-5 toutes les pages)
   Chargé seulement quand la couche est active (body.magic, voir inc/magic.php),
   après shareck.css, qu'il ne modifie pas. Effets Magic UI refaits en CSS + JS natif,
   les mêmes partout, dosés par gabarit (2 à 4 effets) :
     1. blur-fade        — entrée du premier écran ; sections et listes de cartes
                           qui apparaissent quand on les atteint en défilant
     2. animated-gradient-text — accueil seulement : surlignage lime du titre
     3. shiny-button     — reflet sur l'appel principal (héros, bandeau final,
                           bouton d'envoi des formulaires au survol / focus)
     4. magic-card       — halo qui suit la souris : cartes projets, articles, équipe
     5. number-ticker    — chiffres qui comptent jusqu'à leur valeur (durée de
                           lecture des articles, chiffres des cartes statistiques)
     6. marquee          — bords fondus sur les bandeaux défilants existants
   + Menu en carte flottante (structure inspirée de Nationex), plus bas.
   Pages de texte (Confidentialité, Termes, 404, article) : apparition douce seulement.
   Règles : rien n'est masqué sans JS (les états cachés n'existent que sous
   .hm-armed, posé par le script) ; seulement transform / opacity / filter
   (aucun décalage de mise en page) ; tout s'arrête en mouvement réduit.
   ========================================================================== */

.magic {
  --hm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. blur-fade — entrée du premier écran, en CSS pur (pas de JS), à partir d'un
   état déjà lisible : opacité 0,2, pas 0, pour que le titre reste visible et
   compte tout de suite pour le LCP. */
@keyframes hm-blur-in {
  from {
    opacity: 0.2;
    filter: blur(10px);
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
/* Pages de texte : le bloc entier monte doucement, sans flou (texte long). */
@keyframes hm-fade-in {
  from {
    opacity: 0.2;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Accueil : sur-titre, titre, boutons du héros en cascade. */
.home-magic .hero--trace .hero-trace__copy > *,
.home-magic .hero--trace .hero__actions {
  animation: hm-blur-in 0.9s var(--hm-ease) both;
}
.home-magic .hero--trace .hero-trace__copy > :nth-child(2) { animation-delay: 0.08s; }
.home-magic .hero--trace .hero-trace__copy > :nth-child(3) { animation-delay: 0.16s; }
.home-magic .hero--trace .hero__actions { animation-delay: 0.28s; }

/* Autres pages : le texte du héros (À propos, Équipe, Projets, fiche projet,
   Articles, catégories, Carrières) et la colonne de gauche de Nous joindre. Les photos du héros ne bougent pas. */
.magic:not(.home-magic) :is(
  main > .hero:first-child .hero__grid > div:first-child,
  main > .hero:first-child .hero-split__copy,
  main > .archive-hero:first-child > .wrap,
  main > .section:first-child > .form-grid > div:first-child
) > * {
  animation: hm-blur-in 0.9s var(--hm-ease) both;
}
.magic:not(.home-magic) :is(
  main > .hero:first-child .hero__grid > div:first-child,
  main > .hero:first-child .hero-split__copy,
  main > .archive-hero:first-child > .wrap,
  main > .section:first-child > .form-grid > div:first-child
) > :nth-child(2) { animation-delay: 0.08s; }
.magic:not(.home-magic) :is(
  main > .hero:first-child .hero__grid > div:first-child,
  main > .hero:first-child .hero-split__copy,
  main > .archive-hero:first-child > .wrap,
  main > .section:first-child > .form-grid > div:first-child
) > :nth-child(3) { animation-delay: 0.16s; }
.magic:not(.home-magic) :is(
  main > .hero:first-child .hero__grid > div:first-child,
  main > .hero:first-child .hero-split__copy,
  main > .section:first-child > .form-grid > div:first-child
) > :nth-child(n + 4) { animation-delay: 0.24s; }

/* Article (lecture sobre) : titre puis carte de contenu, en fondu sans flou.
   Formulaire de Nous joindre (premier écran) : fondu sans flou, juste après le
   titre ; les champs restent utilisables pendant. */
.magic .article-hero > .wrap > * {
  animation: hm-fade-in 0.9s var(--hm-ease) both;
}
.magic .article-hero > .wrap > :nth-child(2) { animation-delay: 0.08s; }
.magic main > .section:first-child > .form-grid > .form-card,
.magic .article-single .article-shell {
  animation: hm-fade-in 0.9s var(--hm-ease) 0.2s both;
}
/* Confidentialité, Termes, 404 (page sans sections) : tout le bloc d'un coup. */
.magic main > .section:first-child > .wrap:not(.form-grid) {
  animation: hm-fade-in 0.9s var(--hm-ease) both;
}

/* blur-fade — en défilant. Le script pose .hm-armed seulement sur ce qui est
   hors écran au chargement, puis .is-in quand le bloc entre dans l'écran ;
   les enfants arrivent en cascade (--hm-i, plafonné à 4). */
.magic .hm-armed > [data-hm-item] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(1.25rem);
}
.magic .hm-armed.is-in > [data-hm-item] {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 0.7s var(--hm-ease),
    filter 0.7s var(--hm-ease),
    transform 0.8s var(--hm-ease);
  transition-delay: calc(var(--hm-i, 0) * 90ms);
}
/* Article : les « Autres articles » arrivent sans flou (page de lecture sobre). */
.magic.single-post .hm-armed > [data-hm-item] { filter: none; }

/* La carte du menu est fixe : les sauts d'ancre (#formulaire, #equipe,
   #membre-…) et le focus clavier s'arrêtent sous elle, pas dessous. */
html:has(> body.magic) { scroll-padding-top: 7.5rem; }
@media (min-width: 1024px) {
  html:has(> body.magic) { scroll-padding-top: 6.5rem; }
}

/* 2. animated-gradient-text (accueil seulement, le moment principal du site) —
   le surlignage du titre (« santé urbaine », champ ACF heading_highlight) : le
   lime de la marque glisse vers la pervenche et revient, à l'arrivée. Les deux
   teintes gardent plus de 7:1 sur le voile du héros. */
.home-magic .hero--trace h1 .text-lime {
  background: linear-gradient(
    100deg,
    var(--lime) 0%,
    var(--lime-bright) 30%,
    var(--periwinkle) 55%,
    var(--lime) 85%
  ) 0 50% / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Deux passages (aller-retour, 5 s en tout) puis immobile sur le lime : pas de
     mouvement automatique de plus de 5 s sans moyen de l'arrêter (WCAG 2.2.2). */
  animation: hm-gradient 2.5s ease-in-out 0.6s 2 alternate both;
}
@media (forced-colors: active) {
  .home-magic .hero--trace h1 .text-lime {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}
@keyframes hm-gradient {
  to { background-position: 100% 50%; }
}

/* 3. shiny-button — un reflet traverse l'appel principal : premier bouton du
   héros (deux passages à l'arrivée sur l'accueil, un ailleurs), bouton du
   bandeau final (un passage quand il entre dans l'écran) ; puis seulement au
   survol ou au focus. Boutons d'envoi des formulaires (Nous joindre,
   Carrières) : au survol / focus seulement, rien ne bouge tout seul. */
.magic :is(
  .hero--trace .hero__actions .btn-white,
  main > .hero:first-child .hero__actions > .btn:first-child,
  .cta-banner__row .btn,
  .form-card button[type="submit"]
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.magic :is(
  .hero--trace .hero__actions .btn-white,
  main > .hero:first-child .hero__actions > .btn:first-child,
  .cta-banner__row .btn,
  .form-card button[type="submit"]
)::before,
.magic :is(
  .hero--trace .hero__actions .btn-white,
  main > .hero:first-child .hero__actions > .btn:first-child,
  .cta-banner__row .btn,
  .form-card button[type="submit"]
)::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgb(188 232 73 / 0.55) 46%,
    rgb(255 255 255 / 0.9) 50%,
    rgb(188 232 73 / 0.55) 54%,
    transparent 70%
  );
  transform: translateX(-110%);
  pointer-events: none;
}
.home-magic .hero--trace .hero__actions .btn-white::after {
  animation: hm-shine 1.6s var(--hm-ease) 1.1s 2;
}
.magic:not(.home-magic) main > .hero:first-child .hero__actions > .btn:first-child::after {
  animation: hm-shine 1.6s var(--hm-ease) 1s 1;
}
.magic .cta-banner__row.is-in .btn::after {
  animation: hm-shine 1.6s var(--hm-ease) 0.5s 1;
}
/* Survol / focus : un reflet sur ::before, en transition, pour ne pas relancer
   l'animation d'arrivée de ::after quand la souris repart. */
.magic :is(
  .hero--trace .hero__actions .btn-white,
  main > .hero:first-child .hero__actions > .btn:first-child,
  .cta-banner__row .btn,
  .form-card button[type="submit"]
):is(:hover, :focus-visible)::before {
  transform: translateX(110%);
  transition: transform 0.9s var(--hm-ease);
}
@keyframes hm-shine {
  from { transform: translateX(-110%); }
  60%, to { transform: translateX(110%); }
}

/* 4. magic-card — un halo lime suit la souris dans la carte (position posée par
   le script en --hm-x / --hm-y). Sous le contenu, sans toucher aux dimensions.
   Pas sur la page d'un article (lecture sobre). */
.magic:not(.single-post) :is(.project-card, .post-card, .team-card) {
  position: relative;
  isolation: isolate;
}
.magic:not(.single-post) :is(.project-card, .post-card, .team-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    22rem circle at var(--hm-x, 50%) var(--hm-y, 50%),
    rgb(188 232 73 / 0.22),
    rgb(182 193 252 / 0.12) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* Cartes sans fond propre (équipe, grille des projets) : les bords du halo
   sont fondus sur 1,5 rem pour qu'il ne dessine jamais un rectangle net. */
.magic:not(.single-post) :is(.cards-3 > .project-card, .team-card)::before {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent),
    linear-gradient(to bottom, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent),
    linear-gradient(to bottom, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-composite: intersect;
}
.magic:not(.single-post) :is(.project-card, .post-card, .team-card).is-lit::before { opacity: 1; }
.magic:not(.single-post) .post-card {
  transition: box-shadow 0.35s ease;
}
.magic:not(.single-post) .post-card:is(.is-lit, :focus-within) {
  box-shadow: 0 0 0 1px rgb(26 51 92 / 0.14), 0 1.25rem 2.5rem -1.5rem rgb(26 51 92 / 0.28);
}

/* 5. number-ticker — chiffres à chasse fixe pour que le compte ne fasse rien bouger. */
.magic .post-card__time b,
.magic .stat-card > p:first-of-type { font-variant-numeric: tabular-nums; }

/* 6. marquee — bords fondus : le texte entre et sort au lieu d'être coupé net. */
.magic .ticker .marquee,
.magic .cta-banner .marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* Mouvement réduit : contenu visible et immobile, sans reflet ni dégradé qui bouge. */
@media (prefers-reduced-motion: reduce) {
  .home-magic .hero--trace .hero-trace__copy > *,
  .home-magic .hero--trace .hero__actions,
  .home-magic .hero--trace h1 .text-lime,
  .magic:not(.home-magic) :is(
    main > .hero:first-child .hero__grid > div:first-child,
    main > .hero:first-child .hero-split__copy,
    main > .archive-hero:first-child > .wrap,
    main > .section:first-child > .form-grid > div:first-child
  ) > *,
  .magic .article-hero > .wrap > *,
  .magic main > .section:first-child > .form-grid > .form-card,
  .magic .article-single .article-shell,
  .magic main > .section:first-child > .wrap:not(.form-grid),
  .magic :is(
    .hero--trace .hero__actions .btn-white,
    main > .hero:first-child .hero__actions > .btn:first-child,
    .cta-banner__row .btn
  )::after { animation: none !important; } /* !important : passe devant les sélecteurs plus précis ci-dessus */
  .magic :is(
    .hero--trace .hero__actions .btn-white,
    main > .hero:first-child .hero__actions > .btn:first-child,
    .cta-banner__row .btn,
    .form-card button[type="submit"]
  )::before { display: none; }
  .magic .hm-armed > [data-hm-item] {
    opacity: 1;
    filter: none;
    transform: none;
  }
  .magic :is(.project-card, .post-card, .team-card)::before { transition: none; }
}

@media print {
  .magic .hm-armed > [data-hm-item] {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* ==========================================================================
   Menu en carte flottante (template-parts/magic/header.php)
   Fermé : accès rapides en petites capitales + bouton carré lime (icône → X).
   Ouvert : la même carte s'agrandit vers le bas, liens groupés en colonnes,
   rangée « Nous joindre » + profils de recherche. Fond blanc opaque et ombre
   douce : lisible sur la vidéo du héros comme sur les sections crème.
   ========================================================================== */
.hm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hm-nav {
  --hm-gap: max(1.5rem, calc((100% - var(--wrap)) / 2));
  position: fixed;
  z-index: 70;
  top: 3.25rem; /* centre de la carte au niveau du centre du logo, comme la pastille actuelle */
  right: var(--hm-gap);
  width: min(33rem, calc(100% - 2 * var(--hm-gap)));
  background: #fff;
  color: var(--navy);
  border-radius: var(--radius-card, 1.25rem);
  box-shadow:
    0 1px 2px rgb(14 26 44 / 0.08),
    0 1.5rem 3.5rem -1.25rem rgb(14 26 44 / 0.45);
  transition: transform 0.4s var(--hm-ease);
}
/* Page défilée : la carte remonte près du bord pour moins couvrir le contenu. */
.hm-nav.is-scrolled { transform: translateY(-2rem); }
.hm-nav__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}
.hm-nav__logo { display: none; }
.hm-nav__quick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.25rem;
}
.hm-nav__quick a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.18s ease;
}
.hm-nav__quick a:hover { background: var(--lime-soft); }
.hm-nav a:focus-visible,
.hm-nav__toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.hm-nav__toggle {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.9rem;
  background: var(--lime);
  color: var(--navy);
  transition: background-color 0.18s ease;
}
.hm-nav__toggle:hover { background: var(--lime-bright); }
.hm-nav__icon {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1rem;
}
.hm-nav__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--hm-ease), opacity 0.2s ease;
}
/* Fermé : trois traits de longueurs différentes (alignés à droite) ; ouvert : un X. */
.hm-nav__icon span:nth-child(1) { top: 0; }
.hm-nav__icon span:nth-child(2) { top: calc(50% - 1px); transform: translateX(19%) scaleX(0.62); }
.hm-nav__icon span:nth-child(3) { bottom: 0; transform: translateX(9%) scaleX(0.82); }
.hm-nav.is-open .hm-nav__icon span:nth-child(1) { transform: translateY(calc(0.5rem - 1px)) rotate(45deg); }
.hm-nav.is-open .hm-nav__icon span:nth-child(2) { opacity: 0; transform: translateX(19%) scaleX(0.2); }
.hm-nav.is-open .hm-nav__icon span:nth-child(3) { transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg); }

/* Ouverture : la hauteur passe de 0 à son contenu (grille 0fr → 1fr), puis les
   groupes apparaissent en cascade. La carte est hors flux : rien ne bouge dessous. */
.hm-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--hm-ease);
}
.hm-nav__panel[hidden],
.hm-js .hm-nav:not([data-hm-ready]) .hm-nav__panel { display: none; }
.hm-nav.is-open .hm-nav__panel { grid-template-rows: 1fr; }
.hm-nav__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.hm-nav.is-open .hm-nav__panel-inner {
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hm-nav__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0.5rem;
  padding: 1.75rem 0.75rem 0.5rem;
  border-top: 1px solid rgb(26 51 92 / 0.1);
}
.hm-nav__group,
.hm-nav__foot {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.45s var(--hm-ease);
}
.hm-nav.is-open .hm-nav__group,
.hm-nav.is-open .hm-nav__foot {
  opacity: 1;
  transform: none;
}
.hm-nav.is-open .hm-nav__group:nth-child(1) { transition-delay: 0.12s; }
.hm-nav.is-open .hm-nav__group:nth-child(2) { transition-delay: 0.18s; }
.hm-nav.is-open .hm-nav__group:nth-child(3) { transition-delay: 0.24s; }
.hm-nav.is-open .hm-nav__foot { transition-delay: 0.3s; }
.hm-nav__label {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hm-nav__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-nav__group a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.15;
  transition: color 0.18s ease;
}
/* Survol : changement de couleur seulement. Le soulignement animé viendra de la
   classe commune .link-underline (THM-4) posée sur ces liens, sans doublon ici. */
.hm-nav__group a:hover { color: var(--olive-ink); }
.hm-nav__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0.5rem 0;
  padding: 1rem 0.75rem 1.25rem;
  border-top: 1px solid rgb(26 51 92 / 0.1);
}
.hm-nav .hm-nav__cta {
  min-height: 2.75rem;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.hm-nav__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-nav__social a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hm-nav__social a:hover { color: var(--olive-ink); }
.hm-nav__arrow {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.35em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mobile et tablette : la carte prend la largeur moins la marge et porte le
   logo ; le logo de l'en-tête laisse sa place (la hauteur de l'en-tête est
   gardée). Sous 1024 px, le grand logo et la carte ne tiennent pas côte à côte. */
@media (max-width: 1023px) {
  .hm-header .site-header__inner { min-height: 7rem; }
  .hm-header .site-header__inner .site-logo { display: none; }
  .hm-nav {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
  }
  .hm-nav__bar { padding-left: 1rem; }
  .hm-nav__logo { display: block; }
  .hm-nav__logo img { height: 4.5rem; width: auto; } /* taille du logo mobile actuel */
  .hm-nav.is-open .hm-nav__panel-inner { max-height: calc(100dvh - 7.5rem); }
  .hm-nav.is-scrolled { transform: none; }
}
/* Jusqu'à 800 px, même hauteur que l'en-tête classique (1,1rem + logo 4,5rem
   + 1,1rem) : la page garde la même hauteur avec et sans la couche. */
@media (max-width: 800px) {
  .hm-header .site-header__inner { min-height: 6.7rem; }
}
@media (max-width: 639px) {
  .hm-nav__quick { display: none; }
  .hm-nav__groups {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-nav,
  .hm-nav__panel,
  .hm-nav__group,
  .hm-nav__foot,
  .hm-nav__icon span { transition: none; }
  .hm-nav.is-open .hm-nav__group,
  .hm-nav.is-open .hm-nav__foot { transition-delay: 0s; }
}


/* Sans JavaScript : pas de carte fixe ni de bouton (il ne ferait rien). Le
   panneau est ouvert et posé dans l'en-tête, sous le logo : toute la navigation
   reste visible et utilisable, sans rien couvrir. */
html:not(.hm-js) .hm-nav {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: auto;
  margin: 0 var(--hm-gap) 1.5rem;
  transform: none;
}
html:not(.hm-js) .hm-nav__toggle,
html:not(.hm-js) .hm-nav__quick { display: none; }
html:not(.hm-js) .hm-nav__panel { grid-template-rows: 1fr; }
html:not(.hm-js) .hm-nav__group,
html:not(.hm-js) .hm-nav__foot {
  opacity: 1;
  transform: none;
}
html:not(.hm-js) .hm-nav__groups { border-top: 0; }
@media (min-width: 1024px) {
  html:not(.hm-js) .hm-nav__bar { display: none; }
}
@media (max-width: 1023px) {
  /* La carte porte le logo : la bande vide de l'en-tête n'a plus lieu d'être. */
  html:not(.hm-js) .hm-header .site-header__inner { display: none; }
  html:not(.hm-js) .hm-nav { margin: 0.75rem; }
  html:not(.hm-js) .hm-nav__groups { border-top: 1px solid rgb(26 51 92 / 0.1); }
}