/* entete.css — L'ENTÊTE DU SITE, UNE SEULE FOIS (8 sept 2026).
   POURQUOI CE FICHIER EXISTE : le CSS de l'entête était recopié dans les 9 pages. Chaque correction
   demandait 9 modifications, et les copies dérivaient les unes des autres. Verbatim Maxime le
   8 sept : « sur le cell c'est vraiment laid, le numéro de téléphone est pris dans la barre de
   recherche qui est rendue tellement petite qu'on ne peut même plus cliquer dessus. Le header est
   à chier. » C'était vrai : sous 900px la barre gardait ses 4 colonnes côte à côte (logo | recherche
   | téléphone | panier) sur une seule rangée, et le numéro était même masqué (.tel span{display:none}).
   Résultat sur un téléphone : une fente de recherche inutilisable, un pictogramme de téléphone collé
   dessus, et le geste le plus payant du site (appeler) rendu invisible.

   ⚠️ CHARGÉ EN DERNIER, juste avant </head> : les pages ont leur <style> APRÈS le <link> principal,
   donc ce fichier doit venir après elles pour gagner à spécificité égale. Ne le remonte pas.
   Toute correction d'entête se fait ICI désormais — pas dans les 9 pages. */

@media (max-width: 900px) {

  /* On sort de la grille 4 colonnes : 3 rangées empilées.
     1) logo + appeler   2) la recherche pleine largeur   3) la navigation qui défile */
  .topbar .wrap {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 0;
  }

  .topbar .brand, .topbar .wrap > a:first-child { flex: 0 0 auto; }
  .topbar .logo { height: 38px; }

  /* APPELER — le geste le plus payant du site : un vrai bouton, le numéro ÉCRIT, et une cible
     d'au moins 44px de haut (le minimum tactile). Il était réduit à un pictogramme. */
  .topbar .tel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 15px;
    border: 1.5px solid var(--ink, #1c1a15);
    border-radius: 999px;
    font-family: Archivo, system-ui, sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    color: var(--ink, #1c1a15);
    white-space: nowrap;
  }
  .topbar .tel span { display: inline !important; }   /* annule le masquage du numéro */
  .topbar .tel svg { width: 16px; height: 16px; flex: 0 0 auto; }

  .topbar #selChipGlobal { flex: 0 0 auto; margin-left: 0; padding: 9px 14px; min-height: 44px; }

  /* LA RECHERCHE — rangée à elle seule, pleine largeur, cliquable. */
  .topbar .tsearch {
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .topbar .tsearch input { font-size: 16px; }   /* 16px = iOS n'agrandit plus la page au focus */

  /* LA NAVIGATION — une rangée qui défile du doigt plutôt que six liens écrasés. */
  .topbar .nav {
    flex: 1 0 100%;
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    margin: 2px 0 0;
    padding: 10px 0 9px;
    border-top: 1px solid var(--line, #ddd6c8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a { white-space: nowrap; font-size: 14px; }
}

/* Très petits écrans : le numéro reste écrit, on rétrécit juste ce qui l'entoure. */
@media (max-width: 380px) {
  .topbar .logo { height: 32px; }
  .topbar .tel { padding: 9px 12px; font-size: 13.5px; }
  .topbar .nav { gap: 14px; }
}