/* ========================================================= MOBILE — SITE PUBLIC Feuille à part, chargée EN DERNIER et entièrement enfermée dans des requêtes media. Deux conséquences voulues : · rien ici ne peut modifier l'affichage sur un écran large — les règles n'existent tout simplement pas au-delà des seuils ; · tout ce qui concerne le tactile est au même endroit, et se retire d'une seule ligne dans _head.ejs si ça ne convient pas. Elle n'est PAS chargée par le panel d'administration, qui n'utilise que admin.css : le panel reste à traiter séparément. ───────────────────────────────────────────────────────────────────────── POURQUOI LA LARGEUR ET NON LA DÉTECTION D'APPAREIL On ne cherche pas à reconnaître « un téléphone ». Lire le user-agent se trompe : une tablette, un téléphone en paysage, une fenêtre de bureau réduite, un écran partagé — tous mal classés, et ça se dégrade à chaque nouvel appareil. La largeur de la fenêtre décrit la seule chose qui compte ici : la place disponible et la façon dont on vise. ───────────────────────────────────────────────────────────────────────── LES DEUX SEUILS, ET POURQUOI CEUX-LÀ 1100 px la planche de la barre de navigation s'arrête là (skin.css) et laisse place à une barre dessinée en CSS. C'est exactement à partir de ce point qu'on peut agrandir ses boutons sans risquer de les décaler du bandeau peint. 860 px seuil déjà retenu par ui.css pour replier la barre et le pied de page. On s'aligne plutôt que d'en inventer un de plus. Les cotes tactiles visent 44 px : c'est la recommandation d'Apple, Google dit 48. Mesuré avant correction sur un écran de 390 px, la barre offrait des cibles de 21 px de haut portant un texte de 9,9 px. ========================================================= */ /* --------------------------------------------------------- 1 & 2. SOUS 1100 px — BARRE COMPACTE ET MENU DÉROULANT UN SEUL RÉGIME, ET NON DEUX. Il y en avait deux : entre 861 et 1100 px la barre restait dépliée avec ses six libellés, et le menu déroulant ne prenait le relais qu'en dessous. Ce régime intermédiaire ne tenait pas — six libellés ne rentrent pas dans la largeur, ils passaient à la ligne et débordaient au-dessus et en dessous du bandeau doré, qui lui garde une hauteur fixe. Le seuil du menu déroulant est donc remonté à 1100 px, exactement là où la planche dessinée s'arrête. Une seule bascule au lieu de deux : au-dessus, l'image et ses quatre zones relevées au pixel ; en dessous, cette barre-ci. Plus de bande intermédiaire à maintenir, et plus de largeur à laquelle la barre soit cassée. TROIS COLONNES, LE LOGO AU MILIEU. `1fr auto 1fr` : les deux colonnes latérales font la même largeur quoi qu'elles contiennent, donc la colonne centrale tombe au centre GÉOMÉTRIQUE de la barre. Le logo y est centré pour de bon — en disposition flexible il dérivait dès que la gauche et la droite n'avaient pas le même contenu, ce qui se voyait franchement sur téléphone. La colonne de droite est vide aujourd'hui. Elle est conservée plutôt que supprimée : c'est elle qui tient le logo au centre, et c'est là que viendra se poser une action de droite le jour où il en faudra une. Tout est en CSS : aucun script n'intervient, l'ouverture repose sur la case à cocher posée dans site/_head.ejs. --------------------------------------------------------- */ @media (max-width: 1100px) { .site-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: auto; margin: 14px 10px 0; padding: 6px 12px; height: auto; min-height: 0; } /* HAUTEUR FERMÉE FIXÉE À 56 px. Laissée en `auto`, la barre retombait à 80 px alors que son plus grand enfant visible en fait 44 : plusieurs feuilles lui imposent une hauteur à des seuils différents (84, 62, 52 px selon la largeur) et je n'ai pas réussi à isoler laquelle l'emportait ici. Plutôt que d'empiler une surcharge de plus en espérant tomber juste, on donne à l'état fermé une valeur explicite : 44 px de bouton plus 6 px de rembourrage de part et d'autre. `:has()` distingue les deux états : fermée elle est figée, ouverte elle reprend sa hauteur naturelle pour laisser le menu se déplier dessous. Sans ça, un menu ouvert serait coupé. */ .site-nav:not(:has(.nav-bascule:checked)) { height: 56px; } /* LE BOUTON D'OUVERTURE, dessiné en CSS. Trois traits : la barre du milieu est le fond de l'élément interne, les deux autres ses pseudo-éléments. Aucune image, aucune police d'icônes — donc rien à télécharger et une netteté parfaite à toute densité d'écran. `margin: 0` N'EST PAS DÉCORATIF. Le burger est un