/* ========================================================================== BAZA-S305 — LE TÉLÉPHONE DE app.baza.fr REDEVIENT UN TÉLÉPHONE -------------------------------------------------------------------------- CAUSE RACINE MESURÉE SUR LE LIVE (2026-09-02, https://app.baza.fr, Chromium réel, 12 combinaisons écran × zoom) : `.device-screen` a une LARGEUR CONSTANTE (`--phone-screen`, 400px) et une HAUTEUR ASSERVIE À LA FENÊTRE (`min(884px, calc(100dvh - 64px))` dans src/index.css, resserrée en `calc(100dvh - 168px)` par la vitrine S261). Les deux dimensions varient donc INDÉPENDAMMENT : aucun rapport largeur/hauteur n'est imposé nulle part, et aucune mise à l'échelle proportionnelle n'existe. Dès que la fenêtre est moins haute que ~1050px, l'écran s'écrase en largeur constante : fenêtre CSS 1366×638 → écran 400×470 → rapport 0,851 « presque carré » fenêtre CSS 1093×510 → écran 400×342 → rapport 1,170 PAYSAGE fenêtre CSS 1024×472 → écran 400×304 → rapport 1,316 PAYSAGE Le contenu n'était pas « comprimé » par une police : il était rendu dans une boîte de 400px de large et de 300 à 500px de haut, donc coupé en bas (bouton « Se connecter avec Apple » tronqué) et collé à la barre d'onglets. CORRECTIF — deux règles, aucun changement de police : 1. le viewport de RÉFÉRENCE est réduit PROPORTIONNELLEMENT : sa hauteur suit la place disponible entre 884px et 608px, et sa largeur SUIT cette hauteur au rapport verrouillé 400/760, plafonnée à 400px. On passe donc d'un 400×884 (rapport 0,452) à un 320×608 (rapport 0,526) : ce sont deux téléphones RÉELS, et entre les deux l'application est mise en page à une largeur de téléphone réelle, donc ses textes gardent leur taille NATIVE. Jamais carré, jamais paysage, jamais étiré. 2. seulement si le plus petit téléphone (320×608) ne tient toujours pas, c'est le téléphone ENTIER — cadre, bordure, écran, application, ombres — qui est réduit d'un SEUL facteur (`transform: scale`), exactement comme une maquette photographiée de plus loin. AUCUNE police n'est retouchée dans les deux cas : `src/index.css` n'est pas modifié et ce fichier ne contient aucune déclaration `font-size`. INVARIANTS RESPECTÉS - Servi depuis `public/` + `` : Vite ne le fusionne PAS dans `assets/index-*.css`. L'empreinte de la coque CSS GELÉE S141 reste byte-identique — aucun re-pin, PWA sans réinstallation. - `src/index.css` n'est PAS touché. Aucune taille de police n'est modifiée, ni ici ni ailleurs : ce fichier ne contient AUCUNE déclaration `font-size`, `line-height` ni `zoom`. - Portée STRICTEMENT desktop/tablette large (`min-width: 768px`), c'est-à-dire exactement le domaine où la coque téléphone existe. Sous 768px les wrappers sont `display: contents` (mobile réel plein écran) et AUCUNE règle de ce fichier ne peut s'appliquer : mobile, PWA installée et bundles iOS/Android ne sont pas concernés. - Mode desktop natif S224/S226 (`?bazaDesktop=1`, fenêtre pleine) : neutralisé. - Les surcharges gagnent par SPÉCIFICITÉ (`html body .device .device-…`, soit (0,2,2) contre (0,1,2) pour S261) : l'ordre d'injection des feuilles n'a aucune importance. - Aucune animation, aucune couleur, aucune image, aucune donnée. ========================================================================== */ /* -------------------------------------------------------------------------- GARDE DE MOTEUR — division de longueurs. Le facteur d'échelle est un NOMBRE obtenu par `tan(atan2(hauteur, hauteur))` (seule façon standard de diviser deux longueurs en CSS ; CSS Values 4). Si le moteur ne sait pas le faire, `--s305-k` serait invalide et `transform: scale()` retomberait sur `none` : le téléphone dépasserait alors de la scène. On enferme donc TOUT le correctif dans un `@supports` — sur un moteur trop ancien, rien ne s'applique et le rendu reste celui d'aujourd'hui. Mesuré vrai sur Chromium 1228 (Chrome/Edge 111+, Safari 15.4+, Firefox 108+). -------------------------------------------------------------------------- */ @supports (width: calc(1px * tan(atan2(2px, 1px)))) { @media (min-width: 768px) { :root { /* Géométrie de RÉFÉRENCE du téléphone (inchangée : ce sont les valeurs déjà validées de la coque S63/S108, atteintes aujourd'hui dès que la fenêtre est assez haute). */ --s305-w-max: 400px; /* = --phone-screen — le plus grand téléphone montré */ --s305-w-min: 320px; /* largeur de téléphone réel la plus petite prévue */ --s305-bezel: 12px; /* = --phone-bezel */ --s305-ratio: 0.5263158; /* 400 / 760 — rapport largeur/hauteur VERROUILLÉ */ --s305-ref-h-max: 884px; /* 400 x 884 → rapport 0,452 (téléphone haut) */ --s305-ref-h-min: 608px; /* 320 x 608 → rapport 0,526 (téléphone court) */ /* Bande verticale réservée au décor, REPRISE TELLE QUELLE de l'existant (aucun dégagement n'est réduit : les marges d'en-tête et de pied de la vitrine S261 restent celles qui ont été recettées). 768–1023px : coque téléphone seule → 64px (src/index.css) ≥ 1024px : vitrine marketing S261 → 168px (s261-…css) */ --s305-reserve: 40px; /* Place réellement disponible pour le téléphone ENTIER (cadre compris). */ --s305-avail-h: max(0px, calc(100dvh - var(--s305-reserve))); --s305-avail-w: max(0px, calc(100dvw - 56px)); /* 2 × padding de `.device` */ /* Hauteur d'écran de référence : la place disponible, mais TOUJOURS dans la fourchette d'un téléphone réel. C'est CE nombre qui remplace la hauteur libre d'aujourd'hui — la source de la déformation. */ --s305-ref-h: clamp( var(--s305-ref-h-min), calc(var(--s305-avail-h) - 2 * var(--s305-bezel)), var(--s305-ref-h-max) ); /* Largeur de RÉFÉRENCE : elle SUIT la hauteur, au rapport verrouillé, et ne dépasse jamais 400px. C'est ici que le viewport de référence est réduit « proportionnellement » plutôt qu'étiré : hauteur 884 → 465 → plafonné à 400 (rapport 0,452) hauteur 760 → 400 (rapport 0,526) hauteur 608 → 320 (rapport 0,526) Entre 320 et 400px de large, l'application est mise en page à une largeur de téléphone RÉELLE et ses textes gardent leur taille NATIVE : on n'a pas encore commencé à réduire l'image. */ --s305-ref-w: min( var(--s305-w-max), max(var(--s305-w-min), calc(var(--s305-ref-h) * var(--s305-ratio))) ); /* Encombrement du téléphone à l'échelle 1 (écran + les deux bordures). */ --s305-frame-h: calc(var(--s305-ref-h) + 2 * var(--s305-bezel)); --s305-frame-w: calc(var(--s305-ref-w) + 2 * var(--s305-bezel)); /* Facteur UNIQUE de réduction. Jamais > 1 : on n'agrandit jamais un téléphone au-delà de sa taille réelle (aucun flou d'échantillonnage). */ --s305-k: min( 1, tan(atan2(var(--s305-avail-h), var(--s305-frame-h))), tan(atan2(var(--s305-avail-w), var(--s305-frame-w))) ); } /* L'écran interne cesse de suivre la fenêtre : il prend la hauteur de RÉFÉRENCE. C'est la correction de la cause racine. */ html body .device .device-screen { width: var(--s305-ref-w); height: var(--s305-ref-h); max-height: none; } /* Le téléphone entier est réduit d'un seul facteur, depuis son centre. `transform` ne modifie PAS la boîte de mise en page : le cadre reste centré par le flex de `.device`, et son rendu peint — homothétique — tient par construction dans la bande réservée (`--s305-avail-h`). */ html body .device .device-frame { transform: scale(var(--s305-k)); transform-origin: center center; } /* La boîte de mise en page du cadre (non réduite) peut dépasser la scène alors que son rendu peint, lui, tient : sans cela le navigateur afficherait une barre de défilement fantôme sur une scène pourtant entièrement visible. Rien n'est masqué : le téléphone peint est INCLUS dans la scène à tous les paliers mesurés. */ html body .device { overflow: hidden; /* Marge verticale du décor ramenée de 28px à 12px : ces 32px rendus au téléphone se traduisent DIRECTEMENT en texte plus grand (le facteur d'échelle monte d'autant). La marge horizontale, elle, est intacte. */ padding-block: 12px; } } /* Vitrine marketing S261 (≥ 1024px) : bande réservée à l'en-tête et au pied, valeur EXISTANTE reprise sans changement. */ @media (min-width: 1024px) { :root { --s305-reserve: 144px; } } /* Mode DESKTOP NATIF (S224/S226) : l'application occupe toute la fenêtre, il n'y a plus de téléphone à mettre à l'échelle. Neutralisation complète. */ @media (min-width: 900px) { :root[data-baza-desktop='1'] body .device .device-screen { width: auto; height: 100dvh; max-height: none; } :root[data-baza-desktop='1'] body .device .device-frame { transform: none; } :root[data-baza-desktop='1'] body .device { overflow: auto; } } } /* -------------------------------------------------------------------------- BAZA-S305 — GARDE D'ORIENTATION : DÉFAUT PRÉEXISTANT MESURÉ, CORRIGÉ ICI. `src/index.css` affiche l'écran « Tournez votre téléphone en mode portrait » sous `@media (orientation: landscape) and (max-height: 480px)`, avec ce commentaire : « exclut naturellement le desktop ». MESURÉ FAUX sur le live : une fenêtre Chrome desktop de 1280x720 à 125 % de zoom donne un viewport CSS de 1024x472 — paysage ET plus court que 480px — et l'overlay vert PLEIN ÉCRAN recouvre alors toute la page publique. La coque téléphone n'existe qu'à partir de 768px de large : dans ce domaine, il n'y a aucun téléphone à retourner, donc la garde n'a rien à garder. Elle est neutralisée ici, et LÀ SEULEMENT. Sur mobile réel (< 768px), qui est sa seule cible légitime, la règle d'origine reste intacte et intouchée. Hors du `@supports` ci-dessus : cette correction ne dépend d'aucune fonctionnalité CSS récente et doit s'appliquer sur tous les moteurs. -------------------------------------------------------------------------- */ @media (min-width: 768px) { html body .device .orientation-guard { display: none; } }