/* ========================================================================= PUNTO PIZZA — MOBILE · téléphones (≤ 560 px) ------------------------------------------------------------------------- Chargé en DERNIER : à spécificité égale, ces règles l'emportent sur celles de commun.css. C'est ce qui permet d'écrire ici uniquement les DIFFÉRENCES, sans avoir à répéter tout le style. ⚠️ Le seuil de 560 px est répété dans controller/filtres.js (ECRAN_ETROIT, pour le texte d'invite court) : garder les deux d'accord. Ce que fait ce fichier, en résumé : · en-tête « disposition G » : la marque prend toute la 1re ligne, le jour/nuit passe en absolu dans le coin, la recherche s'étire ; · les 5 filtres se partagent la largeur à parts égales, sans défilement ; · 2 cartes par ligne ; panneau Ingrédients en plein écran ; · les 2 pilules (zone, PDF) se partagent une ligne. ========================================================================= */ @media (max-width: 560px){ .topbar { padding: 14px 16px; gap: 14px; padding-top: max(14px, env(safe-area-inset-top)); } /* ---- En-tête mobile « disposition G » (validée le 23/07/2026) --------- AVANT : recherche + jour/nuit + FR|EN se partageaient UNE ligne. Il fallait ramener min-width de .search à 170px pour tout faire tenir, et le champ ne valait plus que ~200px — trop discret et trop court. MAINTENANT : • le TÉLÉPHONE repasse sous « Punto Pizza » (position statique) ; • le bouton JOUR/NUIT prend le coin haut-droit, la place qu'occupait le téléphone — il est donc sorti du flux (position absolue) ; • la MARQUE prend toute la 1re ligne, la RECHERCHE + le FR|EN passent ensemble sur la 2e ; • le FR|EN est resserré pour rendre de la largeur à la recherche. Résultat mesuré à 375px : la recherche passe de ~200 à ~257px, sans changer de hauteur ni provoquer de défilement horizontal. L'adresse ne bouge pas (elle reste sous le bandeau). Variante G, validée en maquette. */ /* La marque occupe la 1re ligne entière ; padding-right réserve la place du bouton jour/nuit absolu pour que le titre ne passe pas dessous. */ .brand { flex: 1 0 100%; padding-right: 52px; } /* Téléphone sous le titre (et non plus dans le coin) */ .brand-tel { position: static; margin-top: -9px; font-size: 14px; } /* -9px : compense le padding tactile, cf. regle de base */ /* Jour/nuit calé dans le coin haut-droit, hors du flux */ .theme-toggle { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; font-size: 16px; } /* La recherche s'étire sur toute la place libre de sa ligne (flex:1) ; min-width:0 pour qu'elle puisse le faire. Elle garde son aspect standard (translucide). */ .search { min-width: 0; } /* FR|EN resserré : segments étroits, pour laisser la largeur à la recherche */ .lang-toggle { padding: 3px; } .lang-seg { padding: 7px 7px; font-size: 12.5px; letter-spacing: .04em; } /* Filtres : TOUS visibles sur une ligne (partage égal de la largeur, aucun scroll) */ .filters-label { padding: 18px 12px 0; font-size: 10px; letter-spacing: .2em; } .filters-label + .filters { padding-top: 8px; } .filters { padding: 18px 12px 4px; gap: 6px; flex-wrap: nowrap; overflow: hidden; } .chip { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 4px; font-size: 11px; letter-spacing: 0; gap: 4px; white-space: nowrap; overflow: hidden; } /* tous à la même largeur */ .chip-dot { width: 6px; height: 6px; } .results-count { padding: 8px 16px 0; text-align: center; } /* compteur centré, sous les filtres */ /* Barre sous-filtres : bouton Ingrédients + compteur, resserrée sur mobile */ .subfilters { padding: 10px 14px 0; gap: 10px; } .subfilters .results-count { padding: 0; } /* Panneau ingrédients : PLEIN ÉCRAN sur mobile */ .overlay:has(.ing-panel) { padding: 0; } .ing-panel { max-width: 100%; width: 100%; height: 100%; max-height: 100vh; border-radius: 0; padding: max(16px, env(safe-area-inset-top)) 16px 0; } /* ⚠️ Même correction qu'en commun.css : le padding du bas est porté par le PIED, pas par le panneau — sinon le contenu défile sous la barre (05/08/2026). Ici il absorbe en plus la zone sûre de l'iPhone. Les marges négatives reprennent les 16 px horizontaux du panneau, pas les 24 px du grand écran. */ .ing-foot { bottom: 0; margin: 6px -16px 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); } .info { padding: 18px 16px 0; } /* Adresse en une ligne discrète + les 2 raccourcis en dessous. Les pilules sont resserrées pour que « Zone de livraison » et « Voir la carte » tiennent côte à côte sur la largeur d'un téléphone. */ .info-addr { font-size: 13px; } /* ⚠️ LES TROIS PILULES NE TIENNENT PAS SUR UNE SEULE LIGNE — MESURÉ, ET CE N'EST PAS UNE QUESTION DE RÉGLAGE (04/08/2026). L'utilisateur a demandé une seule ligne. Essayé, et ça ne marche pas : avec `flex: 1` les pilules se partagent la largeur à parts égales, mais leur CONTENU (icône + libellé) est plus large que la part reçue et **déborde du cadre arrondi** — les icônes sortaient visiblement des pilules. Mesuré, contenu débordant de chaque pilule : 360 px → 17 / 11 / 8 px 375 px → 15 / 9 / 6 px 414 px → 8 / 2 ⚠️ ET AUCUN RÉGLAGE NE SAUVE LA LIGNE UNIQUE. Balayage complet : padding ramené de 10 à 5 px, gap de 7 à 4, police de 11,5 à 10,5 — les trois passent sur DEUX lignes dans tous les cas. Il n'y a pas la place pour « Zone livraison » + « Le menu (PDF) » + « Distributeur » sur 375 px. 🪤 ET MA PREMIÈRE MESURE AVAIT DIT L'INVERSE, parce qu'elle testait le mauvais critère : je regardais si la RANGÉE débordait (elle ne débordait pas, chaque pilule faisant bien 1/3) au lieu de regarder si le CONTENU débordait de sa pilule. ➜ **Pour un élément à largeur imposée, mesurer `scrollWidth - clientWidth` de l'élément lui-même, pas de son parent.** ✅ `flex: 0 1 auto` : chaque pilule reprend sa largeur naturelle, rien ne déborde, et la troisième passe proprement sur une deuxième ligne. Coût : 54 px de hauteur. */ .info-actions .pill { flex: 1 1 0; min-width: 0; justify-content: center; } /* ⚠️ UNE SEULE LIGNE, exigée le 04/08 : « moi je le veux sur 1 ligne ». Ça ne tient QUE grâce aux libellés courts « Zone » et « Menu » (data.js) : avec « Zone livraison » et « Le menu (PDF) », mesuré, la page déborde sous 400 px quel que soit le resserrement — jusqu'à une police de 9,5 px. ⚠️ Si un de ces trois libellés s'allonge, la ligne cassera ici, en silence. Remesurer à 360 px : c'est la largeur qui commande. */ .info-actions { flex-wrap: nowrap; } /* ⚠️ RANGÉE CENTRÉE (04/08/2026) : « le distributeur, mets-le au milieu ». Seule la 2e ligne ne porte qu'une pilule ; `justify-content: center` la centre — et centre du même coup les deux du haut, ce qui rend l'ensemble symétrique au lieu d'un bloc collé à gauche avec un trou à droite. ⚠️ Centrer UNIQUEMENT la 3e n'est pas possible en flex sans la sortir du flux : on centre donc la rangée entière, c'est le comportement voulu. */ .info-actions { justify-content: center; } /* ⚠️ L'ADRESSE SUR UNE SEULE LIGNE (04/08/2026, sa demande). Elle se coupait en deux (« …des Moulins, / 83200 Toulon ») parce que `.brand` réserve 52 px à droite pour le bouton jour/nuit, qui est en position absolue. ⚠️ CE BOUTON EST EN HAUT (top: 14px, 44 px de haut) : à la hauteur de l'adresse, cette réserve ne protège plus rien. La marge négative la lui reprend — sans toucher au titre ni au téléphone, qui eux passent bien à côté du bouton. ⚠️ `nowrap` est un GARDE-FOU, pas le mécanisme : si l'adresse s'allongeait un jour, elle serait tronquée proprement plutôt que de repasser sur deux lignes sans prévenir. Remesurer si `PIZZERIA.adresse` change. */ /* ⚠️ `max-width` INDISPENSABLE : sans lui, `nowrap` laisse la BOÎTE prendre la largeur du texte (l'`overflow` ne borne que le contenu peint), et à 320 px l'adresse sortait de la page — défilement horizontal, mesuré. */ .brand-adr { margin-right: -52px; max-width: calc(100% + 52px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⚠️ RESSERRÉ POUR LA LIGNE UNIQUE (04/08). Avec les libellés courts, il manquait encore 6 px à « Distributeur » à 360 et 375 px — son contenu débordait du cadre arrondi. padding 10→7 et gap 7→5 le rentrent, sans toucher à la taille du texte (11,5 px) ni à la cible tactile (44 px). */ .pill { padding: 11px 5px; font-size: 11.5px; letter-spacing: 0; gap: 4px; } .pill .pill-ico { font-size: 15px; } .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 14px 40px; } /* 2 cartes par ligne */ .card { padding: 16px 10px 14px; gap: 10px; } .card-name { font-size: 15px; } /* BADGE « VÉGÉ » — le retrait de 8 px est un CHOIX DE L'UTILISATEUR, revenu dessus le 06/08 : *« je préférerais avant comment il était placé, là il est trop collé au bord de la card »*. Il avait été descendu à 4 px pour qu'il cesse de mordre la photo ; le remède se voyait plus que le mal. ⚠️ NE PAS LE REDESCENDRE POUR « CORRIGER » LE CHEVAUCHEMENT. À cette largeur c'est structurel, pas un réglage : la carte fait 152 px, la photo 112, il ne reste que 10 px de chaque côté — et le badge anglais en mesure à lui seul 59,7 (contre 48,3 en français). Mesuré : à 8 px du bord, AUCUN couple police/rembourrage lisible n'atteint zéro. Le coller au coin était la seule issue géométrique, et elle a été refusée. ➜ Le léger recouvrement du bord de la photo est ASSUMÉ ici. */ .card-vege { top: 8px; right: 8px; padding: 4px 8px; } /* ⚠️ L'ANGLAIS SEUL EST RÉDUIT — demande explicite du 06/08 : *« le Végé laisse tel qu'il est, ne le touche pas ; par contre le Veggie réduis-le un peu pour qu'il ne déborde pas sur la photo »*. « VEGGIE » mesure 55,3 px contre 48,3 pour « VÉGÉ » : c'est le mot anglais, et lui seul, qui ne tient pas. Le sélecteur s'appuie sur `documentElement.lang`, posé par applyLang() (controller/filtres.js) — donc il suit la bascule FR|EN sans rechargement. ⚠️ NE PAS APPLIQUER CETTE RÈGLE AU FRANÇAIS : elle rendrait plus petit un badge qu'il a validé tel quel. ⚠️ 8,5 px EST MESURÉ, pas choisi à l'œil — et c'est le bon point d'arrêt. Deux essais avant : 7,5 px jugé trop petit, puis 8 px encore un peu petit. À 8,5 le badge anglais fait **45,2 px**, donc PLUS LARGE que le français (44,3) : il ne se lit plus comme un parent pauvre. Morsure de la photo, relevée : **0 à 375, 420 et 560 px**, et **0,9 px à 360** — soit MOINS que le français au même endroit (2,2 px), lequel est validé tel quel. C'est ce qui rend ce réglage sûr. ⚠️ Au-delà (9 px), on retombe au niveau de débord du français. */ html:lang(en) .card-vege { font-size: 8.5px; padding: 3.5px 5px; } .medaillon, .medaillon-img { width: 112px !important; height: 112px !important; } /* photo un peu plus petite pour tenir à 2 colonnes */ .overlay { padding: 10px; } .sheet { padding: 22px 18px; } /* Fenêtre carte : PLEIN ÉCRAN, la carte remplit tout l'espace dispo */ .overlay:has(.sheet-map) { padding: 0; } .sheet-map { max-width: 100%; width: 100%; height: 100%; max-height: 100vh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); padding-top: max(14px, env(safe-area-inset-top)); } .sheet-map .map-square { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; margin-top: 10px; } } /* ---- Écrans étroits : les 4 derniers pixels (04/08/2026) -------------- À 360 px, chaque bulle reçoit ~113 px alors que l'image + « Distributeur » en mesurent 117 : le contenu débordait du cadre arrondi de 4 px. ⚠️ ON NE TOUCHE PAS AU MOT — décision de l'utilisateur : « Distributeur » reste entier. Les 4 px sont donc repris sur l'IMAGE, 19 → 15 px de haut, et seulement là où ils manquent. Sur 375 px et au-delà, rien ne change. */ @media (max-width: 374px) { /* 15 px ne suffisait pas : il restait 2 px. 12 px les rend, et l'image reste lisible — on distingue la silhouette de la machine, ce qu'un emoji ne donnait pas. Mesuré après coup : plus aucun débordement. */ .pill .pill-img { height: 12px; } .pill { letter-spacing: -.2px; } } /* ---- Très petits écrans (iPhone SE 1re génération, 320px) -------------- */ /* Placé APRÈS la média-query 560px pour l'emporter dans la cascade. */ @media (max-width: 340px) { /* À cette largeur, les 2 pilules côte à côte deviennent trop étroites pour leur libellé (mesuré : il manque ~10px). On les laisse donc reprendre leur largeur naturelle et passer sur 2 lignes — plus lisible qu'un texte à l'étroit. */ /* ⚠️ À 320 px la ligne unique déborde de la PAGE : on rend aux pilules leur largeur naturelle et elles repassent sur deux lignes. Mesuré — aucun réglage ne fait tenir trois pilules sur 320 px. */ .info-actions { flex-wrap: wrap; } .info-actions .pill { flex: 0 1 auto; } /* ⚠️ L'ADRESSE REPASSE SUR DEUX LIGNES À 320 px, ET C'EST VOULU. `white-space: nowrap` donne à la ligne un `min-content` égal à la largeur du texte entier : le bloc de la marque ne pouvait plus rétrécir en dessous et poussait TOUT — mesuré, « Pizzas au feu de bois », « Punto Pizza » et l'adresse sortaient de 33 px, avec défilement horizontal à la clé. Le `nowrap` n'a de sens que là où l'adresse tient vraiment : dès 360 px. */ .brand-adr { margin-right: 0; max-width: 100%; white-space: normal; } }