/*
 * Menu principal — construit par js/site-nav.js.
 *
 * Il s'insère dans l'en-tête du site, le même partout (js/site-chrome.js) :
 * un <header> avec .nav-links, qui devient un panneau plein écran sur mobile.
 * Les règles ci-dessous se limitent aux éléments que le script crée, sans
 * toucher à l'en-tête lui-même.
 *
 * Les couleurs sont reprises des pages via les variables CSS, avec un repli en
 * dur : ce fichier est chargé avant les styles de page, il ne peut pas compter
 * sur leur présence.
 */

[data-yj-site-nav] {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  min-width: 0;
}

.yj-nav-link,
.yj-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  /* 24 px pile sans ce padding : le minimum de WCAG 2.5.8, donc à la limite
     dès que la police change. Le padding vertical ne déplace rien, la barre
     étant centrée. */
  padding: .3rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(.8rem, 1vw, .92rem);
  font-weight: 600;
  letter-spacing: .01em;
  /* Assez clair pour se lire d'un coup sur le navy : à .82 d'opacité, les
     entrées passaient pour désactivées à côté de celle de la page courante. */
  color: rgba(255, 255, 255, .94);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s;
}

.yj-nav-link:hover,
.yj-nav-trigger:hover,
.yj-nav-trigger[aria-expanded="true"] {
  color: #fff;
}

/* La page courante est marquée, pas seulement soulignée au survol. */
.yj-nav-link[aria-current="page"],
.yj-nav-trigger[aria-current="true"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--cyan, #1ACDD8);
}

.yj-nav-chev {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .2s;
}

.yj-nav-trigger[aria-expanded="true"] .yj-nav-chev {
  transform: rotate(180deg);
}

/* ————— sous-menu produits ————— */

.yj-nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* Le script referme le panneau avec `hidden`. Le `display: none` que le
   navigateur applique alors vient de sa feuille par défaut : n'importe quelle
   règle d'auteur le bat, y compris le `display: grid` ci-dessous. Il faut donc
   le redire ici, sinon le menu reste déroulé en permanence. */
.yj-nav-panel[hidden] { display: none; }

.yj-nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  min-width: 21rem;
  padding: .5rem;
  display: grid;
  gap: .15rem;
  background: var(--white, #fff);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10, 44, 84, .08), 0 24px 48px -18px rgba(10, 44, 84, .45);
}

/* La pointe qui rattache le panneau à son bouton : sans elle il flotte, et on
   ne sait plus laquelle des trois entrées l'a ouvert. */
.yj-nav-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
  background: var(--white, #fff);
}

/* Une ligne : la marque, le nom et sa phrase, le chevron. */
.yj-nav-product {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem 1fr auto;
  align-items: center;
  gap: .1rem .75rem;
  padding: .6rem .7rem;
  border-radius: 13px;
  color: var(--navy, #0A2C54);
  text-decoration: none;
  transition: background .16s;
}

.yj-nav-product:hover,
.yj-nav-product:focus-visible {
  background: rgba(26, 205, 216, .14);
}

.yj-nav-product[aria-current="page"] {
  background: rgba(26, 205, 216, .2);
}

/* La marque du produit, dans sa pastille. */
.yj-nav-mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  background: var(--mist, #DEFBFF);
  color: var(--navy, #0A2C54);
  transition: background .16s;
}

.yj-nav-mark svg { width: 20px; height: 20px; }

.yj-nav-product:hover .yj-nav-mark,
.yj-nav-product[aria-current="page"] .yj-nav-mark {
  background: var(--white, #fff);
}

.yj-nav-product-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.yj-nav-product-name {
  font-weight: 700;
  font-size: .95rem;
}

.yj-nav-product-tag {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--muted, #51647D);
}

/* Le chevron ne se montre qu'au survol : quatre flèches au repos, c'est une
   liste qui crie. */
.yj-nav-go {
  display: grid;
  place-items: center;
  color: var(--cyan, #1ACDD8);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .16s, transform .16s;
}

.yj-nav-go svg { width: 16px; height: 16px; }

.yj-nav-product:hover .yj-nav-go,
.yj-nav-product:focus-visible .yj-nav-go {
  opacity: 1;
  transform: translateX(0);
}

/*
 * L'en-tête riche (landing, vidéothèque, prothésiste) replie .nav-links en
 * panneau plein écran derrière un bouton hamburger — mais pas au même seuil
 * d'une page à l'autre : 1180 px, 1200 px, 1400 px. Ces règles se calent donc
 * sur l'état du panneau (.open), pas sur une largeur : c'est la page qui sait
 * quand elle bascule, pas ce fichier.
 */

.nav-links[data-yj-site-nav] {
  /* .nav-links est `flex: 0 1 auto; overflow: hidden` : le menu s'y ferait
     rogner, et le sous-menu déroulant serait coupé net en sortant du cadre. */
  flex: 0 0 auto;
  overflow: visible;
}

/*
 * L'en-tête riche colore tous ses liens en blanc (`.nav-links a`). Dans le
 * sous-menu, qui est sur fond blanc, le nom du produit disparaissait ; seule sa
 * description restait, parce qu'elle a sa propre couleur. On reprend la main —
 * et on coupe le soulignement animé de ces liens-là, qui n'a rien à faire ici.
 */
.nav-links .yj-nav-product,
.nav-links .yj-nav-product:hover,
.nav-links .yj-nav-product:focus-visible { color: var(--navy, #0A2C54); }
.nav-links .yj-nav-product::after { display: none; }

.nav-links.open[data-yj-site-nav] {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.nav-links.open .yj-nav-group {
  flex-direction: column;
  align-items: stretch;
}

.nav-links.open .yj-nav-link,
.nav-links.open .yj-nav-trigger {
  justify-content: space-between;
  padding: .9rem 0;
  min-height: 48px;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-links.open .yj-nav-link[aria-current="page"],
.nav-links.open .yj-nav-trigger[aria-current="true"] {
  box-shadow: none;
  color: var(--cyan, #1ACDD8);
}

/* Dans le panneau, le sous-menu s'ouvre en place plutôt que de flotter. */
.nav-links.open .yj-nav-panel {
  position: static;
  transform: none;
  min-width: 0;
  padding: .25rem 0 .75rem .9rem;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-links.open .yj-nav-product { color: #fff; padding: .55rem .6rem; }
.nav-links.open .yj-nav-panel::before { display: none; }
.nav-links.open .yj-nav-mark {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.nav-links.open .yj-nav-product:hover .yj-nav-mark { background: rgba(255, 255, 255, .18); }

.nav-links.open .yj-nav-product:hover,
.nav-links.open .yj-nav-product:focus-visible,
.nav-links.open .yj-nav-product[aria-current="page"] {
  background: rgba(255, 255, 255, .09);
}

.nav-links.open .yj-nav-product-tag { color: rgba(255, 255, 255, .62); }

@media (prefers-reduced-motion: reduce) {
  .yj-nav-link,
  .yj-nav-trigger,
  .yj-nav-chev,
  .yj-nav-product,
  .yj-nav-go {
    transition: none;
  }
}