/* ============================================================================
   L'EN-TÊTE SIMPLE — 17/09/2026
   ----------------------------------------------------------------------------
   « Je voudrais quelque chose de plus simple. » Donc : pas de verre, pas de
   flou, pas de pilule, pas de formulaire, pas de menu plein écran, aucun
   mouvement. Le fond du site, un filet, et trois choses : la marque, les
   entrées, le numéro.

   CE QUI LE SÉPARE DU PREMIER, QUI ÉTAIT MAL FAIT :
   · la marque est en variante COMPACTE — sous 120 px de large, l'enseigne
     complète ne se lit plus (README du logo) ;
   · 28 px d'air à l'intérieur de l'enveloppe, là où il n'y en avait aucun ;
   · le numéro est à part, derrière un filet vertical, et pas au milieu des
     liens de navigation ;
   · aucun bouton bleu : c'est ce qui faisait « gabarit acheté ».
   ========================================================================== */

.tete-s {
  position: sticky; top: 0; z-index: 40;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.tete-s .dedans {
  width: var(--large); margin-inline: auto;
  padding-inline: 28px;
  display: flex; align-items: center; gap: 28px;
  min-height: 76px;
}
.tete-s .marque-s { display: inline-flex; align-items: center; text-decoration: none; }
/* « BATI+ » SEUL, EN VECTORIEL (Youri, 17/09 : « dans le header met le logo simple
   BATI + »). L'enseigne complete y tenait dans 93 x 42 px, dont une baseline haute
   de 3,5 px : une trame grise, plus un texte. Le fichier est vectorise depuis SON
   bandeau du 14/09 par 04-matiere/logo/vectoriser-lettres.py, donc net a toutes les
   definitions, sans fond a composer et sans `mix-blend-mode`. */
.tete-s .marque-s img { display: block; height: 42px; width: auto; }

.tete-s nav { margin-left: auto; }
.tete-s nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.tete-s nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--texte-2); text-decoration: none;
  transition: color .18s var(--mouvement-courbe);
}
.tete-s nav a:hover { color: var(--texte); }
.tete-s nav a:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 4px; }

.tete-s .tel-s {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-left: 28px; border-left: 1px solid var(--trait);
  font-family: Mono, monospace; font-size: 15px; letter-spacing: .01em;
  color: var(--texte); text-decoration: none; white-space: nowrap;
}
.tete-s .tel-s:hover { color: var(--accent-clair); }

/* le menu au doigt : une case à cocher, aucun script */
.tete-s .case-s { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tete-s .bascule-s {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto; cursor: pointer; color: var(--texte-2);
}
.tete-s .bascule-s span, .tete-s .bascule-s span::before, .tete-s .bascule-s span::after {
  content: ""; display: block; width: 18px; height: 1px; background: currentColor;
}
.tete-s .bascule-s span::before { transform: translateY(-6px); }
.tete-s .bascule-s span::after { transform: translateY(5px); }

@media (max-width: 860px) {
  .tete-s .dedans { padding-inline: 14px; min-height: 66px; gap: 14px; }
  /* l'en-tete perd 10 px de haut au doigt : la marque suit, sinon elle touche
     le filet du bas. */
  .tete-s .marque-s img { height: 32px; }
  .tete-s .bascule-s { display: inline-flex; }
  .tete-s nav {
    position: fixed; inset: 66px 0 auto 0; margin: 0;
    max-height: 0; overflow: hidden;
    background: var(--fond); border-bottom: 1px solid transparent;
    transition: max-height .3s var(--mouvement-courbe), border-color .2s;
  }
  .tete-s nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 16px; }
  .tete-s nav a { min-height: 50px; font-size: 16px; border-bottom: 1px solid var(--trait); }
  .tete-s nav li:last-child a { border-bottom: 0; }
  .tete-s .case-s:checked ~ nav { max-height: 70vh; border-bottom-color: var(--trait); }
  .tete-s .tel-s { padding-left: 14px; font-size: 14px; }
}