/*
  Augmented — navigation (spec 0001). Valeurs Figma MENU NAVBAR 3359:3208 (prototypes/landing-home/figma/b-nav/).
  Position : fixed en haut du viewport, par-dessus le hero (Figma : barre sticky dans un calque qui couvre le
  hero). Pas de sticky : HubSpot enveloppe le module dans un div.hs_cos_wrapper de la hauteur de la nav, qui
  borne un sticky. Le header ne porte ni transform ni filter : le panneau du mode agent (T11, slice I) reste
  libre de son position: fixed. Choix et écarts : prototypes/landing-home/PLAN-b.md.
  Point de rupture : 900 px, écrit en dur.
*/

/* Ancres : le contenu visé ne passe pas sous la nav fixe. */
html { scroll-padding-top: var(--aug-nav-h); }

/* Défilement doux vers les ancres : module.js (au clic seulement). */

.aug-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: 19px;           /* Figma : pilule à 19 px du haut */
  pointer-events: none;        /* les côtés transparents laissent passer les clics vers le hero */
}

/* Pilule : 1350 × 61 à 1440, soit 45 px de marge de chaque côté. Fond Figma rgba(255,255,255,.1).
   Grand format (Figma 2560 3402:4318, PLAN-xl) : même marge, plafonnée à 1574 ; retrait intérieur 35 → 80 et écart
   entre liens, bouton et bascule 30 → 57 (Figma 2560 : space-between dans une rangée de la largeur de la pilule). */
.aug-nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(30px + 27 * var(--aug-xl));
  width: min(100% - 90px, 1574px);
  min-height: 61px;
  margin-inline: auto;
  padding: 8px calc(35px + 45 * var(--aug-xl));
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--aug-ink);
  pointer-events: auto;
}

/* Figma montre la pilule à 10 % sur le hero. Au défilement, elle passe au-dessus des panneaux noirs, où des
   liens #010205 sur 10 % de blanc deviennent illisibles : la pilule s'opacifie sur les 160 premiers pixels.
   Sans animation-timeline (Firefox), elle reste à 85 % partout (règle ci-dessus). */
@supports (animation-timeline: scroll()) {
  .aug-nav__bar {
    background: rgba(255, 255, 255, 0.1);
    animation: aug-nav-solid linear both;
    animation-timeline: scroll(root);
    animation-range: 0 160px;
  }
}

@keyframes aug-nav-solid {
  to { background-color: rgba(255, 255, 255, 0.85); }
}

.aug-nav__logo {
  flex: none;
  display: block;
  margin-right: auto;
  border-radius: 8px;
}

.aug-nav__logo img {
  display: block;
  width: auto;
  height: 36px;
}

/* ---------- Liens ---------- */
.aug-nav__menu {
  flex: 0 1 auto;
  min-width: 0;
}

/* Bloc (pas flex) : un libellé trop long se coupe en points de suspension au lieu de déborder. */
.aug-nav__toggle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 0 14px;
  border: 1px solid rgba(1, 2, 5, 0.18);
  border-radius: var(--aug-radius-btn);
  font-weight: 600;
  font-size: 15px;
  line-height: 38px;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.aug-nav__toggle::-webkit-details-marker { display: none; }

/* Chevron : bas fermé, haut ouvert. */
.aug-nav__toggle::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  vertical-align: 3px;
  transform: rotate(45deg);
}

.aug-nav__menu[open] > .aug-nav__toggle::after {
  vertical-align: -1px;
  transform: rotate(-135deg);
}

.aug-nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 50px;            /* Figma : 50 px entre les liens */
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aug-nav__link {
  display: block;
  padding-block: 6px;
  color: var(--aug-ink);
  font-weight: 600;
  font-size: 15px;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.aug-nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------- Bouton « La conf’ » : 128 × 44, padding 20, écart 7 (Figma 3359:3237) ---------- */
.aug-nav__cta.aug-btn {
  flex: none;
  min-height: 44px;
  padding: 0 20px;
  gap: 7px;
  white-space: nowrap;
}

.aug-nav__cta .aug-btn__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Bascule IA (Figma 3359:3242) : piste 36 × 20 #C6C6C6, pastille 16 blanche, écart 12 ---------- */
.aug-nav__agent {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--aug-ink);
  font: 600 15px/normal var(--aug-font-sans);
  cursor: pointer;
}

.aug-nav__track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 100px;
  background: #C6C6C6;
  transition: background-color 0.3s var(--aug-ease);
}

.aug-nav__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 100px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 39, 0.1);   /* Drop Shadow/2 */
  transition: transform 0.3s var(--aug-ease);
}

/* État ON (non dessiné dans Figma) : piste verte, pastille à droite. */
.aug-nav__agent[aria-checked="true"] .aug-nav__track { background: var(--aug-green); }
.aug-nav__agent[aria-checked="true"] .aug-nav__thumb { transform: translateX(16px); }

/* ---------- Desktop : menu ouvert par module.js, bouton « Menu » masqué ---------- */
@media (min-width: 900px) {
  .aug-nav__menu[open] > .aug-nav__toggle { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 899.98px) {
  .aug-nav { padding-top: var(--aug-frame); }

  .aug-nav__bar {
    gap: 10px;
    width: calc(100% - 2 * var(--aug-frame));
    min-height: 56px;
    padding: 8px 10px 8px 12px;
    border-radius: 28px;
  }

  /* Liens dépliés : panneau sous la pilule, pleine largeur de la pilule. */
  .aug-nav__links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 8px;
    border-radius: var(--aug-radius-card);
    background: var(--aug-surface);
    box-shadow: 0 12px 32px rgba(1, 2, 5, 0.12);
  }

  .aug-nav__link {
    padding: 12px 16px;
    border-radius: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .aug-nav__cta.aug-btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
  }

  .aug-nav__agent { gap: 8px; }
}

/* ---------- Mode agent (T11) : panneau plein écran sous la pilule, la page en Markdown ---------- */
/* Rendu après le <header>, pas dedans. Fermé : hidden (display: none, hors de l'ordre du clavier). */
.aug-agent {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* sous la nav (100) : la bascule reste cliquable */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-top: calc(var(--aug-nav-h) + 8px);
  background: var(--aug-panel);
  color: #E9E6E6;
  animation: aug-agent-in 0.8s var(--aug-ease) backwards;
}

.aug-agent[hidden] { display: none; }

/* Ouverture en cercle depuis la bascule (coin haut droit), comme le prototype. */
@keyframes aug-agent-in {
  from { clip-path: circle(0% at calc(100% - 60px) 50px); }
  to { clip-path: circle(150% at calc(100% - 60px) 50px); }
}

html.aug-agent-on { overflow: hidden; }

/* Pilule lisible sur le fond noir : opaque, sans l'animation de défilement. */
html.aug-agent-on .aug-nav__bar {
  animation: none;
  background: rgba(255, 255, 255, 0.92);
}

.aug-agent__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px var(--aug-gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #9B9B9C;
  font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
}

.aug-agent__file { color: var(--aug-on-dark); }
.aug-agent__stat b { color: var(--aug-green); font-weight: 500; }

.aug-agent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.aug-agent__btn.aug-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.aug-agent .aug-btn--primary:hover { background: var(--aug-on-dark); color: var(--aug-ink); }

.aug-agent__md {
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 32px max(var(--aug-gutter), calc((100% - 78ch) / 2)) 80px;
  font: 14px/1.75 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.aug-agent__md:focus-visible { outline-offset: -4px; }
.aug-agent__meta,
.aug-agent__quote { color: #9B9B9C; }
.aug-agent__h { color: var(--aug-green); font-weight: 600; }
.aug-agent__link { color: #B9A6FF; }

.aug-agent__caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--aug-green);
  animation: aug-agent-blink 1s steps(1) infinite;
}

@keyframes aug-agent-blink { 50% { opacity: 0; } }

@media (max-width: 899.98px) {
  .aug-agent__bar { padding-block: 12px; }
  .aug-agent__actions { width: 100%; margin-left: 0; }
  .aug-agent__md { padding: 20px var(--aug-gutter) 64px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .aug-nav__track,
  .aug-nav__thumb { transition: none; }
  .aug-agent,
  .aug-agent__caret { animation: none; }
}