/* ==========================================================================
   Barre de navigation - v2
   La pilule sombre flottante est conservee du jumeau : c'est la signature
   Numbers. Trois choses changent, toutes imposees par le modele :
   1. la pilule est bornee par le conteneur centre a 1220px, plus par une
      marge de 7 % de la fenetre ;
   2. le bandeau a une hauteur fixe en pixels, plus 10vh, pour que la barre ne
      s'ecrase pas sur une fenetre basse ;
   3. la pilule accueille un menu de sections au centre.
   ========================================================================== */

/* Le bandeau flotte au-dessus du contenu. Contrairement au jumeau, la barre
   n'est plus rognee a hauteur nulle : le rognage servait a reproduire une
   bizarrerie de l'original, il n'a plus lieu d'etre ici. */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  width: 100%;
  pointer-events: none;
}

.site-nav__bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
}

/* On ne reactive les evenements que sur la pilule : le reste du bandeau doit
   laisser passer les clics vers le contenu de l'accroche. */
.site-nav__pill {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  height: 52px;
  padding-left: 24px;
  padding-right: 8px;
  background-color: var(--ink);
  border-radius: var(--r-pill);
  /* Le lisere clair est un outline, pas une bordure : il ne prend pas de place
     et ne decale donc pas le contenu de la pilule. */
  outline: 0.5px solid rgba(255, 255, 255, 0.14);
  outline-offset: 0;
}

/* base.css pose l'anneau de focus en --vert-texte, juste sur les fonds clairs
   de la page mais pas ici : la pilule et le panneau replie sont sur l'encre,
   ou ce vert tombe a 1,92 pour 1 et l'anneau s'efface au moment ou il sert.
   Ils passent au mauve, 6,90 sur ce fond, comme le bloc d'appel a l'action et
   le bandeau de consentement. Le bouton de prise de rendez-vous, lui, est un
   aplat blanc : il garde l'anneau vert de base.css, d'ou l'exclusion. */
.site-nav__pill :focus-visible:not(.site-nav__cta),
.site-nav__panneau :focus-visible {
  outline-color: var(--mauve);
}

.site-nav__zone {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-nav__zone--gauche {
  justify-content: flex-start;
}

.site-nav__zone--centre {
  justify-content: center;
}

.site-nav__zone--droite {
  justify-content: flex-end;
}

/* La pilule et le panneau depliant partagent le meme reperage : le panneau se
   pose sous la pilule, borne par le conteneur. */
.site-nav__conteneur {
  position: relative;
}

/* ------------------------------------------------------------------- logo */

/* Le libelle ne fait que 30px de haut, ce qui est insuffisant pour une cible
   tactile. La zone cliquable est donc portee a 44px de haut par le bloc
   lui-meme : la pilule fait 64px, 56px sous 768px, elle a la place. */
.site-nav__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  font-family: var(--font-display);
  text-decoration: none;
}

/* Le logo n'est pas un titre de document, c'est un libelle : la metrique est
   donc posee explicitement plutot qu'heritee d'un niveau de titre. */
.site-nav__logo-title {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.4px;
}

/* ------------------------------------------------------------------- menu */

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Les liens du menu sont volontairement discrets au repos : la pilule ne doit
   pas concurrencer l'accroche. Le passage au blanc plein signale le survol,
   sans soulignement, comme le reste du site. */
.site-nav__lien {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition) linear;
}

.site-nav__lien:hover,
.site-nav__lien:focus-visible {
  color: var(--white);
}

/* -------------------------------------------------------------------- cta */

.site-nav__cta-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Grille de trois colonnes : la fleche, le libelle, puis une colonne vide de
   24px qui sert d'ancrage au segment droit du contour anime. La largeur du
   bouton n'est pas fixee, elle suit la colonne centrale donc la taille du
   libelle. Ce mecanisme est repris tel quel du jumeau. */
.site-nav__cta {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: 0;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background-color: var(--white);
  color: var(--white);
  font-size: 0.7rem;
  line-height: 1.3em;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-nav__cta-icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 100%;
  padding-left: 8px;
}

/* La fleche est declaree a 20px mais le max-width du socle la ramene aux
   16px disponibles dans la colonne. Le decalage de 8px la fait mordre sur la
   colonne du libelle, comme sur le jumeau. */
.site-nav__cta-arrow {
  position: relative;
  left: 8px;
  display: block;
  width: 20px;
  height: 100%;
}

.site-nav__cta-label {
  display: block;
  height: auto;
}

/* Le libelle est decale vers la droite et deborde donc dans la troisieme
   colonne : c'est ce qui laisse la fleche respirer a gauche. */
.site-nav__cta-text {
  position: relative;
  left: 10px;
  display: block;
  width: 100%;
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: -0.1px;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
}

.site-nav__cta-gap {
  display: block;
  height: auto;
}

/* ------------------------------------------------- contour anime au survol */

/* Trois fenetres absolues, une par colonne de la grille. Elles sont a largeur
   nulle au repos : le contour qu'elles contiennent est donc entierement rogne,
   et il se devoile en s'elargissant. Les marges negatives de 1px les font
   recouvrir la bordure du bouton. */
.site-nav__outline {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  width: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
}

/* Au repos, c'est le repli qui joue : le segment droit part en premier, le
   central ensuite, le gauche en dernier. */
.site-nav__outline--left {
  grid-column: 1 / 2;
  transition: width 150ms linear 500ms;
}

.site-nav__outline--middle {
  grid-column: 2 / 3;
  transition: width 300ms linear 200ms;
}

.site-nav__outline--right {
  grid-column: 3 / 4;
  right: auto;
  transition: width 200ms linear 0ms;
}

/* Au survol, cascade inverse : gauche, puis centre, puis droite qui deborde de
   10 % pour refermer la pilule. */
.site-nav__cta:hover .site-nav__outline--left {
  width: 100%;
  transition: width 200ms linear 0ms;
}

.site-nav__cta:hover .site-nav__outline--middle {
  width: 100%;
  transition: width 300ms linear 200ms;
}

.site-nav__cta:hover .site-nav__outline--right {
  width: 110%;
  transition: width 150ms linear 500ms;
}

.site-nav__cta:hover {
  transform: scale(0.97);
}

/* Le trait lui-meme. Il fait 100px de large, bien plus que sa fenetre : seule
   la portion visible change, jamais sa forme.
   Le rose du jumeau est remplace par le vert. Le bouton est un aplat BLANC
   pose dans la pilule sombre : c'est donc un fond clair, ou le vert est le
   seul des trois accents a tenir. Corail et mauve n'ont leur place que sur
   l'encre, dans le bloc d'appel a l'action. */
.site-nav__stroke {
  position: absolute;
  inset: 0;
  width: 100px;
  margin: 0;
  border: 1px solid var(--vert);
  border-radius: var(--r-pill);
  cursor: pointer;
}

/* Le segment droit est tire vers la gauche pour que ce soit sa terminaison
   arrondie qui apparaisse dans la fenetre de droite. */
.site-nav__stroke--right {
  inset: 0 auto 0 -74px;
}

/* Le segment central n'a que ses filets horizontaux et suit sa fenetre. */
.site-nav__stroke--middle {
  inset: 0;
  width: 100%;
  border-left-style: none;
  border-right-style: none;
  border-radius: 0;
}

/* -------------------------------------------- bouton du menu depliant */

/* Au-dessus de 991px le menu central suffit : ni le bouton ni le panneau
   n'existent. Ils ne reapparaissent que dans la rupture. */
.site-nav__bascule {
  display: none;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.site-nav__bascule:hover .site-nav__bascule-barre,
.site-nav__bascule:focus-visible .site-nav__bascule-barre {
  background-color: var(--white);
}

.site-nav__bascule-barres {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
}

/* Trois filets de 1,5px. La barre du milieu disparait a l'ouverture et les
   deux autres se croisent : le bouton dit lui-meme dans quel etat il est. */
.site-nav__bascule-barre {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.78);
  transition: transform var(--transition) ease, opacity var(--transition) ease,
    background-color var(--transition) linear;
}

.site-nav__bascule[aria-expanded='true'] .site-nav__bascule-barre:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.site-nav__bascule[aria-expanded='true'] .site-nav__bascule-barre:nth-child(2) {
  opacity: 0;
}

.site-nav__bascule[aria-expanded='true'] .site-nav__bascule-barre:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ---------------------------------------------------- panneau depliant */

/* Le panneau n'est pose que dans la rupture. Ici il est simplement retire :
   sur le menu de bureau il n'a aucune raison d'exister. */
.site-nav__panneau {
  display: none;
}

.site-nav__panneau-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Les liens du panneau sont des cibles tactiles, pas des mots dans une barre :
   48px de haut, toute la largeur du panneau. */
.site-nav__panneau-lien {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--t-corps-lh);
  letter-spacing: -0.1px;
  text-decoration: none;
  transition: color var(--transition) linear, background-color var(--transition) linear;
}

.site-nav__panneau-lien:hover,
.site-nav__panneau-lien:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.site-nav__panneau-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background-color: var(--white);
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: -0.1px;
  text-decoration: none;
}

.site-nav__panneau-cta-fleche {
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------------- ruptures */

@media screen and (max-width: 991px) {
  /* Le menu central ne tient plus dans la pilule sans compresser le bouton.
     Il n'est pas supprime pour autant : il repart dans le panneau depliant,
     seul acces aux sections sur tablette et sur telephone. */
  .site-nav__menu {
    display: none;
  }

  .site-nav__pill {
    grid-template-columns: 1fr auto;
  }

  .site-nav__zone--centre {
    display: none;
  }

  .site-nav__zone--droite {
    gap: 4px;
  }

  .site-nav__bascule {
    display: flex;
  }

  /* Ferme, le panneau reste dans le flux mais en visibility: hidden : il sort
     de l'ordre de tabulation sans que le script ait a manipuler tabindex. Le
     delai sur visibility laisse le fondu se jouer avant l'escamotage. */
  .site-nav__panneau {
    pointer-events: auto;
    position: absolute;
    top: calc(100% + 8px);
    right: var(--marge);
    left: auto;
    /* Ancre sous le bouton, pas etale sur toute la pilule : au-dela de 500px
       de fenetre un panneau pleine largeur laisserait une grande zone vide a
       droite des libelles. En dessous, la borne du conteneur reprend la main. */
    width: min(360px, calc(100% - 2 * var(--marge)));
    display: block;
    padding: 8px;
    background-color: var(--ink);
    border-radius: var(--r-lg);
    outline: 0.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(14, 15, 17, 0.24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition) ease, transform var(--transition) ease,
      visibility 0s linear var(--transition);
  }

  .site-nav__panneau.est-ouvert {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition) ease, transform var(--transition) ease,
      visibility 0s linear 0s;
  }
}

@media screen and (max-width: 767px) {
  .site-nav__bar {
    height: 80px;
  }

  .site-nav__pill {
    height: 56px;
    padding-left: 20px;
  }

  /* 44px, le minimum d'une cible tactile. La pilule fait 56px, il reste 6px
     de respiration de chaque cote. */
  .site-nav__cta {
    height: 44px;
  }
}

@media screen and (max-width: 479px) {
  .site-nav__pill {
    padding-left: 16px;
    padding-right: 6px;
  }

  .site-nav__logo-title {
    font-size: 20px;
  }

  /* La hauteur ne descend pas sous 44px : c'est la largeur du bouton qui se
     resserre, par ses colonnes laterales et par la taille du libelle. Les
     colonnes sont plus etroites qu'avant l'ajout du bouton de menu, qui prend
     48px sur la droite de la pilule : sans cela le libelle viendrait toucher
     le logo sur les fenetres les plus etroites. */
  .site-nav__cta {
    height: 44px;
    grid-template-columns: 18px 1fr 8px;
  }

  .site-nav__cta-text {
    font-size: 13px;
    left: 6px;
  }

  /* La fleche est ramenee dans sa colonne pour ne plus mordre sur le libelle :
     a cette taille de texte, les deux se touchaient. */
  .site-nav__cta-icon {
    padding-left: 6px;
  }

  .site-nav__cta-arrow {
    width: 14px;
    left: 2px;
  }

  .site-nav__zone--droite {
    gap: 2px;
  }
}

/* Mouvement reduit : le socle ramene deja toutes les durees a presque zero,
   mais pas les delais. Sans cette regle le panneau resterait 300ms visible
   apres sa fermeture. */
@media (prefers-reduced-motion: reduce) {
  .site-nav__panneau {
    transition-delay: 0s !important;
  }
}