/* Barre de navigation de cartflox.com, reproduite depuis osmo.supply
   (mesures relevées sur le site source : tailles, marges, rayons, courbes).

   Trois choses à savoir avant de toucher à ce fichier :

   1) TOUT est en `em` et la base est posée une fois sur `.osmo-nav`. Changer
      ce seul `font-size` redimensionne la barre entière, proportions comprises.
      Osmo tient 14px du plus petit portable au 1920, et passe à 16px sous
      768px (les doigts, eux, ne rétrécissent pas).
   2) Aucune classe Tailwind ici. Le gabarit du site a son Tailwind DÉJÀ
      compilé dans /cfa/assets/main.css : toute classe utilitaire absente de
      cette feuille est inerte. D'où du CSS écrit à la main.
   3) Les sélecteurs sont tous préfixés par `.osmo-nav`. Des noms comme
      `.button`, `.line` ou `.tag` viennent du balisage d'origine : sans ce
      préfixe ils écraseraient la feuille du gabarit.

   Les noms de classes sont ceux d'Osmo, exprès : on peut comparer les deux
   inspecteurs côte à côte. */

.osmo-nav {
  /* Charte Cartflox. Les valeurs d'Osmo sont en commentaire. */
  --c-dark: #1a1a1c; /* encre du site ; osmo: #201d1d */
  --c-card: #26262b; /* osmo: #2a2727 */
  --c-rule: #35353c; /* osmo: #312e2e */
  --c-light: #f4f4f4;
  --c-dim: #8a8a94;
  --c-accent: #864ffe; /* violet Cartflox ; osmo: #a1ff62 */
  --c-accent-ink: #ffffff; /* le violet demande du texte clair */
  --c-mute: #45454d;

  --stroke: 1px;
  --btn-h: 2.5em;
  --bar-h: 4.625em;
  /* Largeur de la barre fermée. Osmo tient 38em avec « Login » et « Join » ;
     « Connexion » et « Créer un compte » prennent 100px de plus, et comme le
     logo est centré il faut deux fois cette largeur pour ne pas le recouvrir
     (le centre se déplace avec la barre). D'où 50em, qui laisse le même air autour du logo. */
  --bar-w: 50em;
  --container: clamp(992px, 100vw, 1920px);
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --dur: 0.62s;

  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  color: var(--c-light);
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
}

@media (max-width: 767px) {
  .osmo-nav {
    font-size: 16px;
  }
}

/* Le gabarit met une liste à puces par défaut, et ses liens sont soulignés. */
.osmo-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.osmo-nav a {
  color: inherit;
  text-decoration: none;
}

.osmo-nav .nav-menu,
.osmo-nav button.button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.osmo-nav .nav-menu {
  color: inherit;
}

/* --- Coque ---------------------------------------------------------------- */

.osmo-nav .nav-bar__wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--bar-h);
  pointer-events: none;
}

.osmo-nav .nav-bar__width {
  display: flex;
  flex: 0 0 auto;
  flex-flow: column;
  align-items: center;
  gap: 0.375em;
  width: 100%;
  max-width: var(--container);
  padding: 1.25em;
}

.osmo-nav .nav-bar {
  position: relative;
  width: 100%;
  max-width: var(--bar-w);
  border-radius: 0.25em;
  pointer-events: auto;
  transition: max-width var(--dur) var(--ease);
}

.osmo-nav[data-open="true"] .nav-bar {
  max-width: calc(var(--container) - 2.5em);
}

.osmo-nav .nav-bar__back {
  position: absolute;
  inset: 0;
}

/* Le filet du contour : un fond clair très transparent, débordant d'1px. */
.osmo-nav .nav-bar__outline {
  position: absolute;
  inset: calc(var(--stroke) * -1);
  border-radius: 0.4375em;
  background-color: var(--c-light);
  opacity: 0.1;
  pointer-events: none;
}

.osmo-nav .nav-bar__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.375em;
  background-color: var(--c-dark);
  pointer-events: none;
}

/* --- Rangée du haut ------------------------------------------------------- */

.osmo-nav .nav-bar__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.375em;
  padding: 0.4375em;
}

.osmo-nav .nav-bar__menu {
  height: var(--btn-h);
  margin-right: auto;
}

.osmo-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: 0.625em;
  height: 100%;
  padding-left: 0.625em;
  padding-right: 1em;
  border-radius: 0.125em;
}

.osmo-nav .nav-menu__hamburger {
  position: relative;
  width: 1.375em;
  height: 0.4375em;
}

.osmo-nav .nav-menu__hamburger-bar {
  position: absolute;
  top: calc(50% - var(--stroke) / 2);
  left: 0;
  right: 0;
  height: var(--stroke);
  background-color: currentColor;
  transition: transform 0.45s var(--ease);
}

.osmo-nav .nav-menu__hamburger-bar:first-child {
  transform: translateY(-0.1875em);
}

.osmo-nav .nav-menu__hamburger-bar:last-child {
  transform: translateY(0.1875em);
}

.osmo-nav[data-open="true"] .nav-menu__hamburger-bar:first-child {
  transform: rotate(45deg);
}

.osmo-nav[data-open="true"] .nav-menu__hamburger-bar:last-child {
  transform: rotate(-45deg);
}

.osmo-nav .nav-menu__label {
  margin-bottom: 0.0625em;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Logo centré sur la barre, hors flux pour ne pas dépendre des deux côtés. */
.osmo-nav .nav-bar__logo {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  transform: translateX(-50%);
}

.osmo-nav .nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-radius: 0.5em;
}

.osmo-nav .nav-logo svg {
  display: block;
  height: 1.5em;
  width: auto;
}

/* Sur téléphone, le mot cède la place au seul monogramme. Les deux règles
   passent par `svg` : sans cela `.osmo-nav .nav-logo svg { display: block }`
   ci-dessus l'emporterait (une classe de plus, même poids) et le monogramme
   resterait collé au mot. */
.osmo-nav .nav-logo svg.nav-logo__icone {
  display: none;
}

.osmo-nav .nav-bar__buttons {
  display: flex;
  align-items: center;
  height: var(--btn-h);
}

/* Le filet sous la rangée du haut : invisible tant que le panneau est fermé. */
.osmo-nav .nav-bar__line {
  position: absolute;
  bottom: 0;
  left: 0.5em;
  right: 0.5em;
  height: var(--stroke);
  background-color: var(--c-rule);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.osmo-nav[data-open="true"] .nav-bar__line {
  opacity: 1;
}

/* --- Panneau déroulant ---------------------------------------------------- */

/* Osmo anime `grid-template-rows: 0fr → 1fr` avec GSAP. Ici c'est la hauteur
   mesurée qui est animée (même rendu, aucune dépendance). */
.osmo-nav .nav-bar__bottom {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height var(--dur) var(--ease);
}

.osmo-nav .nav-bar__bottom-overflow {
  display: flex;
  flex-flow: column;
  align-items: center;
  overflow: hidden;
}

/* Largeur figée : le contenu ne se recompose pas pendant que la barre s'élargit. */
.osmo-nav .nav-bar__bottom-inner {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  width: calc(var(--container) - 2.5em);
  padding: 1.5em;
}

.osmo-nav .nav-bar__bottom-row {
  display: flex;
  gap: 1.5em;
  width: 100%;
}

.osmo-nav .nav-bar__bottom-col {
  display: flex;
  flex-flow: column;
  gap: 1.375em;
  width: 100%;
  padding: 2.5em;
  opacity: 0;
  transform: translateY(2em);
  transition: opacity 0.4s var(--ease), transform var(--dur) var(--ease);
}

.osmo-nav[data-open="true"] .nav-bar__bottom-col {
  opacity: 1;
  transform: none;
}

.osmo-nav[data-open="true"] .nav-bar__bottom-col:nth-child(2) {
  transition-delay: 0.06s;
}

.osmo-nav[data-open="true"] .nav-bar__bottom-col:nth-child(3) {
  transition-delay: 0.12s;
}

.osmo-nav .nav-bar__bottom-col.is--products {
  border-radius: 1em;
  background-color: var(--c-card);
}

.osmo-nav .nav-bar__bottom-col.is--ad {
  padding: 0;
}

.osmo-nav .nav-bar__tag-row {
  display: flex;
  opacity: 0.8;
}

.osmo-nav .nav-bar__big-a {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-top: 1.0625em;
  padding-bottom: 1.125em;
}

.osmo-nav .nav-bar__big-span {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1;
}

.osmo-nav .nav-bar__big-li[aria-current="page"] .nav-bar__big-span {
  color: var(--c-accent);
}

.osmo-nav .nav-bar__a-tag {
  padding-top: 0.25em;
  padding-left: 0.625em;
}

.osmo-nav .line {
  position: relative;
  width: 100%;
  height: var(--stroke);
  background-color: var(--c-light);
  opacity: 0.08;
}

.osmo-nav .nav-bar__small-ul {
  display: flex;
  gap: 2.5em;
  margin: auto 0 0;
  padding: 1em 0 0;
}

.osmo-nav .nav-bar__small-a {
  display: flex;
  align-items: center;
  padding-top: 0.3125em;
  padding-bottom: 0.25em;
}

.osmo-nav .nav-bar__small-span {
  font-size: 1em;
  line-height: 1;
}

/* --- Soulignement des liens ----------------------------------------------- */

/* Au survol le trait pousse depuis la gauche ; en sortie il file vers la
   droite (le changement d'origine fait tout le travail). */
.osmo-nav [data-underline-link] {
  position: relative;
}

.osmo-nav [data-underline-link]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: var(--stroke);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}

.osmo-nav a:hover [data-underline-link]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- Boutons -------------------------------------------------------------- */

.osmo-nav .button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625em;
  height: var(--btn-h);
  padding: 0 1.125em 0.0625em;
  border-radius: 0.125em;
  color: var(--c-accent-ink);
  white-space: nowrap;
  overflow: hidden;
}

.osmo-nav .button[data-shape="round"] {
  border-radius: 10em;
}

.osmo-nav .button[data-size="full"] {
  width: 100%;
}

.osmo-nav .button-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: var(--c-accent);
  pointer-events: none;
}

.osmo-nav [data-variant="mute"] {
  color: var(--c-light);
}

.osmo-nav [data-variant="mute"] .button-bg {
  background-color: var(--c-mute);
}

.osmo-nav [data-variant="soft"] {
  color: var(--c-light);
}

.osmo-nav [data-variant="soft"] .button-bg {
  background-color: var(--c-rule);
}

.osmo-nav [data-variant="light"] {
  color: var(--c-dark);
}

.osmo-nav [data-variant="light"] .button-bg {
  background-color: var(--c-light);
}

.osmo-nav .button-label__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.osmo-nav .button-label {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.42s var(--ease);
}

/* Le doublon pivote autour d'un centre placé très bas (--y, un pourcentage de
   sa propre hauteur) : à 20 degrés il est rejeté hors du bouton, que
   `overflow: hidden` découpe. Au survol la roue tourne, le texte sort par la
   droite et sa copie entre par la gauche. --y est calculé au chargement. */
.osmo-nav .button-label {
  transform-origin: 50% var(--y, 1200%);
}

.osmo-nav .button-label:nth-child(2) {
  position: absolute;
  transform: rotate(-20deg);
}

.osmo-nav .button:hover .button-label:nth-child(1) {
  transform: rotate(20deg);
}

.osmo-nav .button:hover .button-label:nth-child(2) {
  transform: rotate(0deg);
}

.osmo-nav .eyebrow {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.6875em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.osmo-nav .eyebrow.is--relative {
  position: relative;
}

.osmo-nav .tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.375em 0.1875em;
  border-radius: 0.125em;
  color: var(--c-accent-ink);
  overflow: hidden;
}

.osmo-nav .tag[data-variant="light"] {
  color: var(--c-dark);
}

.osmo-nav .tag[data-shape="round"] {
  border-radius: 10em;
}

/* --- Bannière de la troisième colonne ------------------------------------- */

.osmo-nav .nav-banner {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  border-radius: 1em;
  background-color: var(--c-card);
  overflow: hidden;
}

.osmo-nav .nav-banner__before {
  padding-top: 110%;
}

.osmo-nav .nav-banner__content {
  position: absolute;
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 2.5em;
}

.osmo-nav .nav-banner__tags {
  display: flex;
  justify-content: center;
}

.osmo-nav .nav-banner__center-content {
  display: flex;
  flex: 1 1 0%;
  flex-flow: column;
  align-items: center;
  justify-content: flex-end;
}

.osmo-nav .nav-banner__title {
  text-align: center;
}

.osmo-nav .h-m {
  margin: 0;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-light);
}

.osmo-nav .nav-banner__note {
  margin: 0.75em 0 0;
  font-size: 0.9375em;
  line-height: 1.4;
  color: var(--c-dim);
  text-align: center;
}

.osmo-nav .nav-banner__btn {
  display: flex;
  justify-content: center;
  padding-top: 1.5em;
}

.osmo-nav .nav-bar__mobile-buttons {
  display: none;
  flex-flow: column;
  gap: 0.625em;
}

/* --- Tablette ------------------------------------------------------------- */

@media (max-width: 991px) {
  .osmo-nav .nav-bar__bottom-col.is--ad {
    display: none;
  }
}

/* --- Téléphone ------------------------------------------------------------ */

@media (max-width: 767px) {
  .osmo-nav .nav-bar__width {
    padding: 0;
  }

  .osmo-nav .nav-bar__top {
    height: var(--bar-h);
    padding: 1em;
  }

  .osmo-nav .nav-bar,
  .osmo-nav[data-open="true"] .nav-bar {
    max-width: none;
    border-radius: 0;
  }

  .osmo-nav .nav-bar__outline,
  .osmo-nav .nav-bar__bg {
    border-radius: 0;
  }

  .osmo-nav .nav-bar__line {
    left: 0;
    right: 0;
  }

  .osmo-nav .nav-logo svg.nav-logo__mot {
    display: none;
  }

  .osmo-nav .nav-logo svg.nav-logo__icone {
    display: block;
    height: 1.5em;
    width: auto;
  }

  .osmo-nav .nav-menu__label {
    margin-bottom: 0;
  }

  .osmo-nav .nav-bar__bottom-inner {
    width: 100vw;
    max-height: calc(100dvh - var(--bar-h));
    padding: 1em 1em 1.25em;
    overflow: auto;
  }

  .osmo-nav .nav-bar__bottom-row {
    flex-flow: column;
    gap: 0;
  }

  .osmo-nav .nav-bar__bottom-col {
    gap: 1em;
    padding: 1.25em 2.25em 2em;
  }

  .osmo-nav .nav-bar__bottom-col.is--products {
    gap: 0.5em;
    padding-top: 2em;
    padding-bottom: 1em;
  }

  .osmo-nav .nav-bar__big-a {
    padding-top: 0.8125em;
    padding-bottom: 0.875em;
  }

  .osmo-nav .nav-bar__big-span {
    font-size: 1.25em;
  }

  .osmo-nav .nav-bar__small-ul,
  .osmo-nav .nav-bar__login-button {
    display: none;
  }

  /* Les deux boutons sont posés dans la rangée, pas dans une colonne : ils
     prennent la largeur telle quelle, sans le débord négatif d'Osmo. */
  .osmo-nav .nav-bar__mobile-buttons {
    display: flex;
    width: 100%;
    padding: 0.25em 2.25em 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .osmo-nav *,
  .osmo-nav *::after {
    transition-duration: 0.01ms !important;
  }
}