/* Menu « Solution » de la barre (2026-10-05).
   Le panneau est un BON DE ROUTE qui s'imprime : une tete d'impression
   doree descend, le papier se deroule derriere elle (meme langage que la
   chaine d'impression du Studio), la route se trace et chaque arret
   s'allume au passage de la tete. Au survol, un repere glisse le long de
   la route jusqu'a l'arret vise. Les arrets penchent de 8,3 degres en
   entrant : l'angle d'italique du logotype, mesure sur logo-main.svg.
   Le rideau (.trajet) couvre le saut vers une section : la page ne
   defile pas a travers toutes les scenes epinglees. */

/* Accent du menu (2026-10-05) : NAVY sur fond clair, OR seulement sur le
   navy (theme sombre), regle du site : pas d'or sur le blanc. Une seule
   source pour la route, les arrets, les numeros, la tete d'impression,
   le repere, le survol et le focus. */
.nav-sol {
  --sol-accent: var(--navy);
  --sol-trait: var(--navy);
  --sol-lueur: 0 0 14px 2px rgba(11, 5, 47, 0.18);
  --sol-survol: rgba(11, 5, 47, 0.05);
  --sol-trait-barre: var(--navy);
}
html[data-theme="dark"] .nav-sol {
  --sol-accent: var(--gold-2);
  --sol-trait: var(--gold-gradient);
  --sol-lueur: 0 0 18px 4px rgba(245, 227, 154, 0.55), 0 6px 22px rgba(196, 184, 118, 0.4);
  --sol-survol: rgba(196, 184, 118, 0.12);
  --sol-trait-barre: var(--gold-gradient);
  --sol-repere: var(--gold-1);
}
/* Le soulignement du bouton vit dans la barre : sur une section navy, il
   passe en or comme le reste de la barre. */
body.nav-over-dark .nav-sol { --sol-trait-barre: var(--gold-gradient); }

.nav-sol { position: relative; display: inline-flex; }

.nav-sol__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: var(--fs-small); font-weight: 700;
  color: var(--ink);
  background: none; border: 0; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-full);
  position: relative;
}
body.nav-over-dark .nav-sol__btn, html[data-theme="dark"] .nav-sol__btn { color: var(--text-on-dark); }
.nav-sol__btn::after {
  content: ""; position: absolute; left: 0.9rem; right: 1.9rem; bottom: 0.35rem; height: 1.5px;
  background: var(--sol-trait-barre); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}
.nav-sol.is-open .nav-sol__btn::after { transform: scaleX(1); }
.nav-sol__chevron { width: 0.7rem; height: 0.7rem; transition: transform 0.6s var(--ease-out-expo); }
.nav-sol.is-open .nav-sol__chevron { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav-sol__btn:hover { background: rgba(11, 5, 47, 0.05); }
  body.nav-over-dark .nav-sol__btn:hover, html[data-theme="dark"] .nav-sol__btn:hover { background: rgba(252, 252, 252, 0.08); }
}
@media (pointer: coarse) { .nav-sol__btn { min-height: 44px; } }

/* ── Le bon de route ── */
.nav-sol__panneau {
  position: absolute; top: calc(100% + 0.9rem); left: 50%;
  width: min(25rem, calc(100vw - 2rem));
  max-height: var(--sol-max, 70vh); overflow: auto; overscroll-behavior: contain;
  margin-left: calc(min(25rem, calc(100vw - 2rem)) / -2);
  padding: 1.4rem 1.4rem 1.2rem 1.2rem;
  background: var(--off-white); color: var(--ink);
  border: 1px solid var(--ink-faint); border-radius: 1.25rem;
  box-shadow: 0 30px 60px -20px rgba(11, 5, 47, 0.35), 0 2px 0 rgba(196, 184, 118, 0.25) inset;
  clip-path: inset(0 0 100% 0 round 1.25rem);
  visibility: hidden;
  transition: clip-path 0.35s cubic-bezier(0.7, 0, 0.84, 0), visibility 0s linear 0.35s;
  z-index: 120;
}
html[data-theme="dark"] .nav-sol__panneau { border-color: rgba(196, 184, 118, 0.3); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.nav-sol.is-open .nav-sol__panneau {
  clip-path: inset(0 0 0 0 round 1.25rem); visibility: visible;
  transition: clip-path 0.85s var(--ease-out-expo), visibility 0s;
}
/* En-tete du bon */
.nav-sol__tete {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 1rem 2.2rem; padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--ink-faint);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.nav-sol__tete b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink); }

/* Tete d'impression : une barre doree lumineuse qui balaie le papier */
.nav-sol__imprime {
  /* Calque de la hauteur du papier : on le translate (transform, pas top),
     la barre lumineuse est son bord superieur. */
  position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none;
  opacity: 0; transform: translateY(0);
}
.nav-sol__imprime::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--sol-trait);
  box-shadow: var(--sol-lueur);
}
.nav-sol.is-open .nav-sol__imprime { animation: sol-imprime 0.85s var(--ease-out-expo) forwards; }
@keyframes sol-imprime {
  0% { transform: translateY(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(calc(100% - 2px)); opacity: 0; }
}

/* La route */
.nav-sol__plan { position: relative; }
.nav-sol__liste { list-style: none; margin: 0; padding: 0; }
.nav-sol__route {
  position: absolute; left: 1.4rem; top: 0.9rem; bottom: 0.9rem; width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--sol-accent) 0 6px, transparent 6px 11px);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.25s ease;
}
.nav-sol.is-open .nav-sol__route { transform: scaleY(1); transition: transform 0.9s var(--ease-out-expo) 0.1s; }
.nav-sol__repere {
  position: absolute; left: 1.4rem; top: 0; width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem;
  border-radius: 50%; background: var(--sol-repere, var(--navy));
  box-shadow: 0 0 0 3px var(--off-white), 0 0 0 4.5px var(--sol-accent);
  transform: translateY(var(--sol-y, 1.4rem)) scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-sol.is-open .nav-sol__repere.is-vu { transform: translateY(var(--sol-y, 1.4rem)) scale(1); }

/* Les arrets */
.nav-sol__arret { position: relative; }
.nav-sol .nav-sol__lien {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; gap: 0 0.6rem;
  padding: 0.65rem 0.6rem; border-radius: 0.8rem; color: inherit;
  opacity: 0; transform: translateX(-0.9rem) skewX(-8.3deg);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.3s ease;
}
.nav-sol.is-open .nav-sol__lien {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(var(--i) * 0.11s + 0.18s),
              transform 0.8s var(--ease-out-expo) calc(var(--i) * 0.11s + 0.18s),
              background 0.3s ease;
}
.nav-sol__point {
  grid-row: span 2; justify-self: center; margin-top: 0.42rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--off-white); border: 2px solid var(--sol-accent);
  transform: scale(0); transition: transform 0.2s ease;
  position: relative; z-index: 1;
}
.nav-sol.is-open .nav-sol__point { transform: scale(1); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.11s + 0.12s); }
.nav-sol__point::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--sol-accent); opacity: 0;
}
.nav-sol.is-open .nav-sol__point::after { animation: sol-onde 0.9s ease-out calc(var(--i) * 0.11s + 0.2s); }
@keyframes sol-onde { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }

.nav-sol__nom { display: flex; align-items: baseline; gap: 0.55rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.nav-sol__num { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--sol-accent); }
.nav-sol__desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; margin-top: 0.15rem; }
.nav-sol__fleche { display: inline-block; margin-left: auto; opacity: 0; transform: translateX(-0.4rem); transition: opacity 0.3s ease, transform 0.5s var(--ease-out-expo); color: var(--sol-accent); }
.nav-sol .nav-sol__lien:hover .nav-sol__fleche, .nav-sol .nav-sol__lien:focus-visible .nav-sol__fleche { opacity: 1; transform: none; }
.nav-sol .nav-sol__lien:hover, .nav-sol .nav-sol__lien:focus-visible { background: var(--sol-survol); outline: none; }
.nav-sol .nav-sol__lien:focus-visible { box-shadow: 0 0 0 2px var(--sol-accent); }

/* Les arrets sont des <a> dans .nav__links : on neutralise ce que la barre
   impose a ses liens (gras, pastille, couleur claire sur section sombre,
   cible tactile en inline-flex). Meme specificite que la regle la plus forte
   de main.css (0,2,2), chargee apres : elle l'emporte. */
html body .nav-sol .nav-sol__lien {
  display: grid; font-size: var(--fs-body); font-weight: 400; color: var(--ink);
  padding: 0.65rem 0.6rem; border-radius: 0.8rem; min-width: 0; min-height: 0;
  justify-content: stretch; align-items: start;
}

/* Sur telephone : le panneau prend la largeur reelle, sous la barre */
@media (max-width: 62rem) {
  .nav-sol { position: static; }
  .nav-sol__panneau { position: fixed; left: 1rem; right: 1rem; width: auto; margin-left: 0; top: var(--sol-top, 4.5rem); }
}

/* ── Le rideau du trajet ── */
.trajet {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: var(--navy); color: var(--gold-1);
  display: grid; place-items: center;
  clip-path: inset(100% 0 0 0);
}
.trajet.is-entre { pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
.trajet.is-sort { clip-path: inset(0 0 100% 0); transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1); }
.trajet__inner { text-align: center; padding: 0 1rem; }
.trajet__num { display: block; font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; letter-spacing: 0.3em; font-size: 0.9rem; color: var(--gold-2); margin-bottom: 0.6rem; }
.trajet__nom {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); line-height: 1.05; letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 50%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transform: translateY(40%) skewY(3deg); opacity: 0;
}
.trajet.is-entre .trajet__nom { transform: none; opacity: 1; transition: transform 0.8s var(--ease-out-expo) 0.15s, opacity 0.4s ease 0.15s; }
.trajet__route { display: block; width: min(16rem, 60vw); height: 2px; margin: 1.4rem auto 0; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; }
.trajet.is-entre .trajet__route { transform: scaleX(1); transition: transform 0.9s var(--ease-out-expo) 0.2s; }
.trajet.is-sort .trajet__route { transform-origin: right; transform: scaleX(0); transition: transform 0.5s ease; }

@media (prefers-reduced-motion: reduce) {
  .nav-sol__panneau, .nav-sol.is-open .nav-sol__panneau { transition: none; clip-path: none; }
  .nav-sol__panneau { opacity: 0; } .nav-sol.is-open .nav-sol__panneau { opacity: 1; }
  .nav-sol__lien, .nav-sol.is-open .nav-sol__lien, .nav-sol__point, .nav-sol.is-open .nav-sol__point { transition: none; transform: none; opacity: 1; }
  .nav-sol.is-open .nav-sol__imprime, .nav-sol.is-open .nav-sol__point::after { animation: none; }
  .nav-sol__route { transform: none; transition: none; }
}

/* Petits telephones : le chevron elargit la barre de ~20 px et poussait la
   pastille d appel hors de l ecran a 360 px. On resserre les liens. */
@media (max-width: 36rem) {
  .nav__links { gap: 0.15rem; }
  .nav-sol__btn { padding-inline: 0.45rem; gap: 0.25rem; }
  .nav__links > a { padding-inline: 0.45rem; }
}

/* Petits telephones : sous 36rem, les liens de la barre laissent la place
   au menu telephone (css/nav-telephone.css, 2026-10-05). */
@media (max-width: 36rem) {
  .nav__links > a, .nav-sol__btn { white-space: nowrap; }
}

/* ── Le bon de route en GRILLE (2026-10-05, demande d Anthony) ──────────
   Six arrets en une colonne debordaient de la fenetre et faisaient naitre
   une barre de defilement dans le panneau. Deux colonnes de quatre (sept arrets depuis le 07/10, Outils metier) : tout
   tient d un regard. La route n est plus un trait unique mais un troncon
   par colonne, dessine par chaque arret (::before) : du point du premier au
   point du dernier. Le repere glisse en X et en Y (--sol-x, --sol-y).
   Le panneau est plus large : nav-solution.js le borne a la fenetre
   (--sol-dx) au lieu de le centrer aveuglement sous le bouton. */
.nav-sol__panneau {
  width: min(44rem, calc(100vw - 2rem));
  left: var(--sol-dx, 50%);
  margin-left: 0;
}
.nav-sol__route { display: none; }
.nav-sol__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 1.25rem;
}
/* Troncon de route : de haut en bas de l arret, sauf en tete et en queue de
   colonne ou il part du point / s arrete au point. Le centre du point est
   a 0,65rem (padding du lien) + 0,42rem (marge) + 0,275rem (demi-point). */
.nav-sol__arret::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--sol-accent) 0 6px, transparent 6px 11px);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease;
}
.nav-sol__arret:nth-child(4n + 1)::before { top: 1.345rem; }
.nav-sol__arret:nth-child(4n)::before,
.nav-sol__arret:last-child::before { bottom: auto; height: 1.345rem; }
.nav-sol.is-open .nav-sol__arret::before {
  transform: scaleY(1);
  transition: transform 0.7s var(--ease-out-expo) calc(var(--i, 0) * 0.11s + 0.1s);
}
.nav-sol__repere {
  left: 0;
  transform: translate(var(--sol-x, 1.4rem), var(--sol-y, 1.4rem)) scale(0);
}
.nav-sol.is-open .nav-sol__repere.is-vu { transform: translate(var(--sol-x, 1.4rem), var(--sol-y, 1.4rem)) scale(1); }

@media (max-width: 62rem) {
  .nav-sol__panneau { left: 1rem; width: auto; }
}
/* Telephone : deux colonnes etroites, les noms suffisent. */
@media (max-width: 36rem) {
  .nav-sol__panneau { padding: 1.1rem 0.75rem 0.9rem 0.5rem; }
  .nav-sol__liste { column-gap: 0.25rem; }
  .nav-sol__desc { display: none; }
  /* En bloc : un nom long (« Studio de développement ») passe a la ligne
     au lieu de deborder ; la cesure ne joue que si un mot seul ne tient pas. */
  .nav-sol__nom { display: block; font-size: 0.875rem; -webkit-hyphens: auto; hyphens: auto; }
  .nav-sol__num { margin-right: 0.35rem; }
  .nav-sol__fleche { display: none; }
  html body .nav-sol .nav-sol__lien { padding: 0.55rem 0.3rem 0.55rem 0.4rem; gap: 0 0.4rem; grid-template-columns: 1.6rem minmax(0, 1fr); }
  .nav-sol__arret::before { left: 1.2rem; }
  .nav-sol__arret:nth-child(4n + 1)::before { top: 1.245rem; }
  .nav-sol__arret:nth-child(4n)::before,
  .nav-sol__arret:last-child::before { height: 1.245rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sol__arret::before, .nav-sol.is-open .nav-sol__arret::before { transform: none; transition: none; }
}

/* La barre de defilement « qui ne fonctionne pas » (vue par Anthony le
   05/10) : la tete d impression finit sa course translatee sous le panneau,
   et une translation compte dans le debordement. Le panneau en overflow:auto
   affichait donc une barre pour un contenu qui tenait. En grille, tout tient :
   plus de defilement, sauf sur une fenetre vraiment basse. */
.nav-sol__panneau { overflow: hidden; }
@media (max-height: 30rem) {
  .nav-sol__panneau { overflow-y: auto; }
}
/* Le papier plus haut que la fenetre (nav-solution.js, borner) : il defile, sans tete d impression. */
.nav-sol__panneau.is-long { overflow-y: auto; }
.nav-sol__panneau.is-long .nav-sol__imprime { display: none; }

/* ── Les correspondances (2026-10-09, demande d Anthony) ──────────────
   Les pages qui s ajoutent au parcours (se lancer, site Premium, centres
   de formation) ne sont pas des arrets de la tournee : elles se posent sous
   le bon, comme des tickets de correspondance. Ni numero ni point : la route
   reste celle des sept arrets. Le menu telephone en fait un troisieme groupe
   (js/nav-telephone.js lit .nav-sol__ticket). */
.nav-sol__corresp { margin-top: 0.9rem; }
.nav-sol__corresp .nav-sol__tete { margin-bottom: 0.7rem; border-bottom: 0; border-top: 1px dashed var(--ink-faint); padding: 0.75rem 0 0; }
.nav-sol__corresp-liste {
  list-style: none; margin: 0 0 0 2.2rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem;
}
html body .nav-sol .nav-sol__ticket {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0.3rem;
  height: 100%; min-width: 0; min-height: 0;
  padding: 0.8rem 0.9rem; border-radius: 0.8rem;
  font-size: var(--fs-body); font-weight: 400; color: var(--ink);
  background: var(--sol-survol); border: 1px solid transparent;
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.3s ease;
}
.nav-sol.is-open .nav-sol__ticket {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(var(--i) * 0.11s + 0.18s),
              transform 0.8s var(--ease-out-expo) calc(var(--i) * 0.11s + 0.18s),
              border-color 0.3s ease;
}
.nav-sol .nav-sol__ticket:hover, .nav-sol .nav-sol__ticket:focus-visible { border-color: var(--sol-accent); outline: none; }
.nav-sol__ticket-nom { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.nav-sol__ticket-desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  html body .nav-sol .nav-sol__ticket, .nav-sol.is-open .nav-sol__ticket { transition: none; transform: none; }
  .nav-sol.is-open .nav-sol__ticket { opacity: 1; }
}