/* ==========================================================================
   L'en-tête, partagée par les quatre onglets.

   Ces règles vivaient dans home.css. Elles en sortent parce que l'en-tête est
   devenue un partiel (site/partiels/entete.html) : la laisser stylée par la
   feuille de l'accueil aurait donné une nav non stylée sur les trois autres
   pages, ce qui est arrivé et se voyait — la pilule d'install tombait sous le
   sélecteur de langue, en texte orange nu.

   Déplacées VERBATIM, pas réécrites. Chargées après i18n.css, comme elles
   l'étaient dans home.css, pour que leurs surcharges du sélecteur de langue
   continuent de gagner.
   ========================================================================== */

header {
  padding: 0 20px;
  background: transparent;
  border-bottom-color: transparent;
}

/* ⚠️ Ce bloc ANNULAIT le fond de `main.css`, et c'était un bug visible : la
   bande de l'en-tête restait transparente, donc le contenu défilait
   LISIBLEMENT à côté et au-dessus de la pilule. Mesuré sur /tellys et
   /application, où le titre de page et les cartes de vitrine traversaient le
   chrome. La neutralisation venait du déplacement verbatim depuis home.css,
   où la pilule flotte sur le hero : correct au repos, faux dès qu'on défile.

   La matière est celle du fond de la barre d'onglets, un rang plus bas
   (`onglets.css`, `.tabs::before`) : un voile sombre flouté, pleine largeur.
   Ce n'est pas un choix neuf. C'est la troisième tentative documentée là-bas,
   la seule qui ait tenu : un dégradé laissait le texte lisible dans le fondu,
   un aplat noir faisait un rectangle sur la section claire. Reprendre le bleu
   de `main.css` aurait posé deux matières différentes l'une sur l'autre.

   Le filet reste transparent : entre l'en-tête et la barre, une ligne se lit
   comme le bord d'une boîte, et la direction n'en veut pas. */
header.scrolled {
  background: rgba(8, 8, 10, .82);
  border-bottom-color: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  max-width: 940px;
  margin: 18px auto 0;
  padding: 9px 9px 9px 20px;
  gap: 16px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-pill);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ⚠️ `--header-h` n'est pas décoratif : `onglets.css` y colle la barre de
   sections (`top: var(--header-h)`). Mesurée, la boîte de l'en-tête ne faisait
   que **61 px** pour un token à **78** : la barre se collait donc 17 px sous la
   fin de l'en-tête, et cette gouttière restait transparente. Le contenu y
   défilait lisiblement, en lanière nette entre deux voiles.

   `min-height` rend le token VRAI par construction, au lieu de le corriger à
   une valeur mesurée qui redeviendrait fausse au premier changement de police,
   de langue ou de hauteur de pilule. Seulement au-dessus de 900 px : en
   dessous, l'en-tête repasse en `static` et la barre n'est plus collante, donc
   il n'y a pas de gouttière à fermer. */
@media (min-width: 900px) {
  header { min-height: var(--header-h); }

  /* Sans JavaScript, `.scrolled` n'est jamais posée et l'en-tête redevient
     transparente : le bug revient en entier. L'en-tête est alors voilée en
     permanence. Sur les trois onglets de contenu ça ne coûte rien, il n'y a
     pas de hero sous elle ; sur l'accueil c'est un voile sur le haut du hero,
     au repos, et c'est une dégradation préférable à du texte qui traverse le
     chrome. `main.css` pose `js` sur <html> dès que le script tourne. */
  html:not(.js) header {
    background: rgba(8, 8, 10, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Dans la nav, le logo se resserre d'un poil. Le reste du look vit dans
   main.css, avec le composant. */
.nav-brand img { width: 18px; height: 18px; }

.nav-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* ⚠️ main.css pose `.cta-block { width: 100% }` — pensé pour un bloc de hero.
   Dans la nav, ce 100 % écrase le sélecteur de langue, dont `overflow:hidden`
   avale alors le bouton EN sans rien signaler. */
.cta-block--nav { width: auto; flex: 0 0 auto; }

.nav-brand,
.lang-switcher { flex: 0 0 auto; }

/* Le sélecteur de langue perd son propre cadre : dans une pilule qui en a
   déjà un, un second contour se lit comme une boîte — et la direction n'en
   veut aucune. */
.lang-switcher {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

/* Dans la nav, les boutons se resserrent : la pilule est déjà étroite. Le
   reste du look (mono, actif en blanc discret) vit dans i18n.css, avec le
   composant. */
.lang-btn { padding: 7px 8px; }

/* Le seul bouton blanc de la page. Il n'est délibérément PAS orange :
   l'accent est réservé au primaire du hero — une seule pilule d'accent à
   l'écran, c'est la règle de la direction. */
.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--blanc);
  color: var(--noir);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}

/* Pas de blanc pur sur le site (consigne de la propriétaire, 2026-09-02) :
   la pilule reste en `--blanc` et c'est la lueur qui signale le survol.
   Un aplat plus clair que `--blanc` n'existe plus. */
.nav-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(247, 247, 250, .55);
}
.nav-pill:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }