/* =========================================================================
   PUNTO PIZZA — TABLETTE  ·  561 → 1024 px
   -------------------------------------------------------------------------
   Jusqu'au 27/07/2026 ce palier n'existait pas : il n'y avait AUCUNE règle
   entre 561 px et l'infini, et les tablettes recevaient la mise en page de
   bureau telle quelle. Hauteur de la barre du haut, mesurée AVANT correction :

       390 px  (téléphone)        158 px
       561 px                     179 px   ⚠️
       600 px                     178 px   ⚠️
       700 px                     178 px   ⚠️
       768 px  (iPad portrait)    178 px   ⚠️  la tablette la plus répandue
       834 px  (iPad Air)         107 px
      1024 px  (iPad paysage)     107 px

   Soit 17 % de la hauteur d'un iPad mangés avant la première pizza.

   ── LA CAUSE, CHIFFRÉE ───────────────────────────────────────────────────
   À 768 px la barre dispose de 708 px (768 − 60 px de marges). Pour tenir
   sur une rangée il lui en faudrait 723 :

       marque 272 + recherche 240 (son min-width) + jour/nuit 44
       + FR|EN 89 + 3 écarts de 26 px  =  723 px

   Il manquait donc 15 px, et le FR|EN était éjecté sur une rangée à lui seul.
   Plus bas c'est pire : à 600 px il faudrait 723 px pour 540 disponibles —
   une seule rangée y est PHYSIQUEMENT IMPOSSIBLE.

   ── LA SOLUTION : DEUX PALIERS (variante D, validée le 27/07/2026) ───────
   Retenue après comparaison de 4 variantes, mesurées en direct à 7 largeurs :
   D est la seule qui améliore TOUTE la plage (les 3 autres réglaient 768 mais
   laissaient 561 → 700 intacts). Comparatif conservé hors ligne, avec le suivi.

   Résultat : 561 → 749 px passent de 178 à 157 px ; 750 → 1024 px à 107 px.

   ⚠️ POURQUOI DES SEUILS EN .98 ET PAS DES ENTIERS
   À la borne exacte (561, 740…), l'arrondi du navigateur fait qu'AUCUNE des
   deux règles ne s'applique : la largeur réelle tombe entre les deux. Constaté
   en mesurant — les variantes à seuils entiers échouaient toutes à 561 px.

   Cartes par ligne (inchangé) : 3 à 768 et 834, 4 à 1024.
   Ordre de chargement : commun → desktop → TABLETTE → mobile
   ========================================================================= */


/* ---- Palier 1 : 561 → 749 px  ·  deux rangées, mais ORGANISÉES ----------
   Sous 750 px, une rangée unique est impossible (voir le calcul ci-dessus).
   Plutôt que de subir la coupure — qui isolait le FR|EN sur une rangée
   entière — on la choisit :

       Rangée 1 :  [logo] Punto Pizza .......... [🌙] [FR|EN]
       Rangée 2 :  [ recherche, pleine largeur ................ ]

   Gain mesuré : 178 → 157 px, et la recherche gagne toute la largeur.
   ------------------------------------------------------------------------ */
@media (min-width: 560.02px) and (max-width: 749.98px) {

  /* row-gap réduit : c'est LUI qui coûtait cher. `gap: 26px` s'applique aussi
     bien entre les colonnes qu'entre les RANGÉES — 26 px de vide séparaient
     donc les deux niveaux de la barre, sans raison. */
  .topbar { column-gap: 16px; row-gap: 12px; padding: 14px 24px; }

  /* La marque prend la place restante et repousse les 2 boutons à droite. */
  .brand { flex: 1 1 auto; }

  /* order: 3 place la recherche APRÈS les boutons dans l'ordre visuel (elle
     est 2e dans le HTML) ; flex-basis 100% la force sur sa propre rangée.
     ⚠️ min-width: 0 est indispensable — sans lui un élément flex garde
     `min-width: auto`, c'est-à-dire la largeur de son contenu, et refuse de
     se réduire. C'est exactement le piège déjà documenté dans commun.css
     à propos du champ de recherche sur téléphone. */
  .search { order: 3; flex: 1 0 100%; min-width: 0; }
}


/* ---- Palier 2 : 750 → 1024 px  ·  une seule rangée ----------------------
   750 px est le seuil MESURÉ où la rangée unique redevient possible.
   ⚠️ Le calcul théorique donnait 715 px et il était FAUX : à 740 px la rangée
   unique ne rentre toujours pas, et comme le palier 2 s'y appliquait déjà on
   cumulait les deux inconvénients (171 px, pire que les 155 du palier 1).
   Seuil trouvé en balayant 730 / 740 / 750 / 760 : bascule entre 740 et 750.
   ------------------------------------------------------------------------ */
@media (min-width: 749.98px) and (max-width: 1024px) {

  /* On récupère les 15 px manquants sans toucher à la TAILLE d'aucun élément :
     6 px sur chacun des 3 écarts, 12 px sur les marges latérales. */
  .topbar { gap: 20px; padding: 18px 24px; }

  /* La recherche peut descendre un peu plus bas avant de forcer un retour à
     la ligne. Elle reste largement au-dessus de sa taille utilisable. */
  .search { min-width: 210px; }
}