/* * Pilote — socle adaptatif (CONVERGENCE-LOT1, décision Pierre 21/09/2026). * * Une seule version de Pilote : le desktop doit être utilisable de 768 px à * 1280+ px. Ce fichier est le SOCLE — il pose les règles communes à tous les * écrans. Les corrections par écran vivent dans leur propre gabarit. * * ── RÈGLE DE BREAKPOINTS (unique, non négociable) ─────────────────────────── * * Trois paliers, et trois seulement : * * 768 px plancher tablette portrait (iPad portrait = 768×1024) * 1024 px tablette paysage (iPad paysage = 1024×768) * 1280 px plancher desktop plein (poste du salon) * * CONVENTION DE BORNE — un palier INCLUT la largeur de l'appareil qu'il nomme : * * @media (max-width: 1279.98px) tout ce qui est SOUS le desktop plein * @media (max-width: 1024px) tablette paysage et moins (1024 INCLUS) * @media (max-width: 768px) tablette portrait et moins ( 768 INCLUS) * @media (max-width: 767.98px) téléphone — HORS SCOPE LOT1 * * L'inclusion n'est pas un détail : un iPad paysage fait EXACTEMENT 1024 px et * un iPad portrait EXACTEMENT 768 px. Une borne `1023.98` les laisserait du * mauvais côté de la règle — c'est le défaut qu'a révélé la mesure WebKit sur * la vue scindée Clients, restée en deux colonnes à 1024. * * Seule la borne haute garde le `.98` : `1279.98` garantit que **1280 px et * au-delà ne sont JAMAIS touchés par ce fichier**. C'est la contrainte dure du * lot — le salon travaille à 1280+ et ne doit constater aucune différence. * * **AUCUNE règle de ce fichier ne vit hors d'une media query.** La première * version en laissait quatre blocs (media, `.app-content`/`.module-frame`, * utilitaires de grille) : ils ne changeaient aucun pixel dans la fixture * d'audit, mais faisaient passer le `max-width` calculé de `none` à `100%` à * 1440 px — le critère « toutes les règles bornées sous 1280 » échouait donc, * même sans différence visible. Corrigé : le `:root` de jetons est la seule * déclaration hors bande, et il ne produit aucun style par lui-même. * * Les valeurs sont aussi exposées en variables CSS ci-dessous. Elles servent à * la documentation et au JS ; CSS n'autorise pas les variables dans une * condition de media query, les trois littéraux ci-dessus restent donc les * seuls autorisés dans le code du socle. * * ── PORTÉE ────────────────────────────────────────────────────────────────── * * Chargé sur toutes les pages par templates/base.html. */ :root { /* Paliers canoniques — source unique de vérité. */ --bp-tablet-portrait: 768px; --bp-tablet-landscape: 1024px; --bp-desktop: 1280px; } /* ══════════════════════════════════════════════════════════════════════════ 1. ZÉRO DÉBORDEMENT HORIZONTAL DE PAGE ══════════════════════════════════════════════════════════════════════════ On ne masque PAS le débordement (`overflow-x: hidden` sur body) : cela cacherait le symptôme, casserait `position: sticky` et rendrait du contenu inatteignable. On traite les trois causes réelles : a) les media qui ne savent pas se réduire, b) les enfants de flex/grid, dont la taille minimale par défaut est `auto` — un enfant large empêche alors son conteneur de rétrécir, ce qui est LA cause la plus fréquente de débordement, c) les mots insécables (URLs, références) dans le texte. */ @media (max-width: 1279.98px) { img, video, canvas, svg:not([width]), table, pre { max-width: 100%; } img, video { height: auto; } /* (b) — le correctif décisif. Sans `min-width: 0`, un enfant de flex/grid refuse de passer sous sa largeur de contenu. */ .app-content, .module-frame { min-width: 0; max-width: 100%; } .module-frame > *, .app-content > * { min-width: 0; } } /* (c) — les longues chaînes sans espace. */ @media (max-width: 1024px) { .module-frame { overflow-wrap: break-word; } } /* ══════════════════════════════════════════════════════════════════════════ 2. TABLEAUX LARGES — DÉFILEMENT CONFINÉ ══════════════════════════════════════════════════════════════════════════ Un tableau de gestion ne se replie pas en tablette : on ne peut ni supprimer des colonnes (l'information est utile) ni les empiler (on perd la lecture en lignes). Il défile donc HORIZONTALEMENT DANS SON PROPRE CONTENEUR, jamais en emportant la page avec lui. `.table-scroll` est appliqué explicitement par les gabarits, jamais globalement : `overflow` crée un contexte de rognage qui couperait les menus déroulants et les entêtes collants des écrans qui en ont. */ /* Actif UNIQUEMENT sous 1280 : au-dessus, `.table-scroll` est un div nu et le rendu du poste du salon est strictement celui d'avant — y compris les ombres de bord, qui sont un ajout visuel. */ @media (max-width: 1279.98px) { .table-scroll { max-width: 100%; overflow-x: auto; /* Inertie tactile sur iPad. */ -webkit-overflow-scrolling: touch; /* Ombre de bord : signale qu'il reste du contenu à droite. `local` la fait disparaître une fois le bord atteint. */ background: linear-gradient(to right, var(--bg-surface, #fff) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), var(--bg-surface, #fff) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } /* Le tableau garde sa largeur naturelle à l'intérieur du conteneur. */ .table-scroll > table { max-width: none; } } /* ══════════════════════════════════════════════════════════════════════════ 3. GRILLES — DÉGRADÉ ORDONNÉ ══════════════════════════════════════════════════════════════════════════ Utilitaires pour les gabarits repris en P4. Une grille déclarée en colonnes fixes déborde en tablette ; `auto-fit` + `minmax` la fait se réorganiser toute seule, sans palier supplémentaire à maintenir. */ @media (max-width: 1279.98px) { .grid-adaptive { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .grid-adaptive-sm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } } /* ══════════════════════════════════════════════════════════════════════════ 4. CIBLES TACTILES ══════════════════════════════════════════════════════════════════════════ Sous 1280 px on est sur un écran tactile : les cibles conçues à la souris sont trop petites. 40 px est le compromis retenu (44 px Apple, mais les barres d'action denses de la caisse ne tiennent plus). */ @media (max-width: 1279.98px) { .btn, .navbar-link, button:not(.btn-inline):not(.studio-sidebar-hide):not(.studio-sidebar-show) { min-height: 40px; } } /* ══════════════════════════════════════════════════════════════════════════ 5. BARRES D'OUTILS ET FILTRES ══════════════════════════════════════════════════════════════════════════ Les barres d'action en `display: flex` sans `wrap` sont la deuxième cause de débordement après les enfants de grille. On les autorise à passer à la ligne. */ @media (max-width: 1279.98px) { .toolbar, .filters, .page-actions, .module-header { flex-wrap: wrap; } } /* ══════════════════════════════════════════════════════════════════════════ 6. BARRE SUPÉRIEURE (thème classic) — COMPACTION EN TABLETTE ══════════════════════════════════════════════════════════════════════════ Le thème par défaut n'a pas de barre latérale : les modules vivent dans une barre supérieure en `overflow-x: auto`, dont la barre de défilement est masquée (`scrollbar-width: none`). En tablette les derniers modules sortent donc de l'écran SANS aucun indice visuel qu'ils existent — le contenu reste atteignable, mais rien ne le laisse deviner. Deux corrections, l'une après l'autre : - compacter les entrées pour en faire tenir davantage, - dégrader le bord droit en fondu quand il reste des modules à droite. Le repli latéral du thème `studio` est traité dans pilot-studio-skin.css, au plus près de la barre latérale qu'il pilote. */ @media (max-width: 1279.98px) { body.pds-admin .navbar-logo { margin-right: 16px; } body.pds-admin .navbar-link { padding: 8px 10px; gap: 4px; } } @media (max-width: 1024px) { body.pds-admin .navbar-inner { padding: 0 10px; } body.pds-admin .navbar-link { padding: 8px; font-size: 12px; } /* Fondu de bord : signale qu'il reste des modules hors champ. `local` fait disparaître le fondu une fois la fin atteinte. */ body.pds-admin .navbar-links { background: linear-gradient(to right, var(--nav-bg, #1F1D26) 30%, rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,0), var(--nav-bg, #1F1D26) 70%) 100% 0; background-repeat: no-repeat; background-size: 24px 100%, 24px 100%; background-attachment: local, local; } }