/* --------------------------------------------------------------------------- LISIBILITÉ SUR TÉLÉPHONE --------------------------------------------------------------------------- L'interface a été dessinée pour un écran d'ordinateur : elle compte plus de 250 déclarations entre 7 et 11 px, parfaitement lisibles à 60 cm d'un écran 24 pouces, illisibles à bout de bras sur un téléphone au soleil. Reprendre ces 250 déclarations une par une casserait la densité voulue sur poste fixe. Cette feuille agit donc comme un PLANCHER : elle ne s'applique qu'en dessous de 700 px, et se contente de relever ce qui est trop petit. Elle est chargée en DERNIER, après toutes les autres — d'où l'usage assumé de !important sur les règles de rattrapage, la plupart des sélecteurs d'origine étant plus spécifiques (.client-card small, .catalog-tags span, etc.). Point non négociable : 16 px sur les champs de saisie. En dessous, Safari iOS ZOOME automatiquement la page à la prise de focus, et l'utilisateur se retrouve à faire défiler latéralement un formulaire qu'il vient d'ouvrir. --------------------------------------------------------------------------- */ @media (max-width: 700px) { body { font-size: 16px; line-height: 1.5; } /* Plancher général : rien ne descend sous 13 px dans le corps de texte. */ small, em, .eyebrow, .form-hint, .muted-copy, .sync, .empty-hint, .empty-history, .directory-summary, .metrics small, .metrics em, .client-card small, .client-card b, .client-identity span, .operation-alert, .catalog-card p, .catalog-subheading p, .catalog-heading p { font-size: 13px !important; line-height: 1.45; } /* Pastilles et étiquettes : 11 px au lieu de 8 ou 9. Elles restent plus petites que le texte courant, mais redeviennent déchiffrables. (La vue « Aujourd'hui » n'est plus dans cette liste depuis 0.32.222 : elle a sa propre échelle téléphone dans today.css, plus grande — ce plancher à 11 px la plafonnait.) */ .catalog-tags span, .catalog-status, .status-pill, .participant-badges i, .client-identity .billed-with, .source-badge { font-size: 11px !important; } /* Saisie : 16 px minimum, sinon Safari iOS zoome à la prise de focus. */ input, select, textarea { font-size: 16px !important; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; } textarea { min-height: 88px; } /* Cibles tactiles : 44 px, seuil courant d'accessibilité au doigt. */ button, .primary-button, .secondary-button, .link-button, a.primary-button, a.secondary-button { min-height: 44px; font-size: 15px; } .participant-actions button, .palanquee-header button, .client-card-actions button { min-height: 38px; font-size: 12px; } /* Barre de navigation : six entrées ne tiennent pas sur 38 px de haut. Elle défile horizontalement, avec des libellés lisibles et des zones cliquables à la bonne taille. */ .topbar nav { height: auto !important; padding-bottom: 4px; gap: 4px; } .topbar nav a, .topbar nav > details > summary { flex: 0 0 auto !important; min-height: 44px; padding: 8px 14px; font-size: 15px; white-space: nowrap; } .brand small { font-size: 12px !important; } /* Titres : la hiérarchie doit rester lisible sans écraser la largeur. */ .page-heading h1 { font-size: 26px; } .catalog-heading h2, .catalog-card h3, .client-card strong { font-size: 18px; } /* Tableaux denses : ils défilent dans leur conteneur plutôt que de forcer la page à défiler latéralement. */ .preview-table-wrap, .price-type-grid-scroll, .cylinder-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .preview-table, .cylinder-table { font-size: 13px; } /* (0.32.252) LA PAGE D'UNE SORTIE — « participants et palanquées ». Mesurée à 375 px, elle gardait cinq familles de textes à 8–10 px (les faits de la sortie, les statistiques et guides d'une palanquée, les libellés des formulaires de palanquée, les précisions d'un participant) : lisibles au bureau, illisibles au ponton. Même plancher que le reste : 13 px, et 16 px pour les valeurs. */ .outing-facts dt, .outing-facts small, .palanquee-guides, .palanquee-stats, .palanquee-participants > h3, .palanquee-staff-fieldset legend, .palanquee-inline-form label, .palanquee-inline-form fieldset legend, .palanquee-inline-form .palanquee-staff-picker small, .inline-team-form label, .participant-card span { font-size: 13px !important; line-height: 1.4; } .outing-facts dd, .participant-card strong { font-size: 16px !important; } .palanquee-header button { min-height: 44px; font-size: 14px; } .palanquee-role-button { min-height: 30px; padding: 3px 11px; font-size: 11px; } /* Les propositions de site et le champ « Privé » : rangs de 10 px, précisions de 8 px, étoiles de 9 px. */ .site-proposal-rank { width: 26px; height: 26px; font-size: 12px; } .outing-site-proposal-list small, .field-title, .option-expiry-block .field-title { font-size: 13px !important; line-height: 1.35; } .site-proposal-stars em { font-size: 12px; } .outing-site-history > summary { font-size: 14px; min-height: 44px; } } /* Très petits écrans : on relâche encore les marges latérales, la place gagnée sert au texte. */ @media (max-width: 420px) { .app-shell > section { margin-left: 12px; margin-right: 12px; } .page-heading { padding-left: 12px; padding-right: 12px; } .form-grid { gap: 12px; } } /* (0.50.088) AUCUN DÉBORDEMENT DE PAGE À 375 PX (constat 082 : Paramètres › Caisse 683 px, Référentiels et Catalogue 744 px, Réservation en ligne 892 px) : les onglets et les gestes d'en-tête passent à la ligne, les tableaux défilent dans leur cadre, les dialogues tiennent dans l'écran, centrés. */ @media (max-width: 767px) { .catalog-tabs { flex-wrap: wrap; margin: 0 12px 14px !important; } .catalog-heading, .catalog-heading .heading-actions { flex-wrap: wrap; } .catalog-heading .heading-actions > button { flex: 1 1 auto; } table.data-table, table.discount-table, table.ticket-z-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } dialog { max-width: calc(100vw - 16px) !important; margin: auto !important; left: 0; right: 0; box-sizing: border-box; } dialog form, dialog .form-grid { max-width: 100%; } fieldset { min-width: 0; } form.settings-form { grid-template-columns: minmax(0, 1fr) !important; } form.settings-form > * { min-width: 0; max-width: 100%; } input[type="file"] { min-width: 0; width: 100%; max-width: 100%; } .reservation-payment-panel > header { flex-wrap: wrap; gap: 8px; } .settings-form input, .settings-form select, .settings-form textarea { max-width: 100%; box-sizing: border-box; } }