/* ============================================================================ SHERPAPM — FONDATION RESPONSIVE PARTAGÉE ---------------------------------------------------------------------------- Fichier canonique unique des garanties responsive transverses. Chargé une seule fois depuis le du layout racine Next (app/layout.tsx), donc valable sur TOUTES les routes : landing, landings verticales, login, tarifs, pages légales et coquille applicative. Ce fichier ne contient QUE des règles transverses et non cosmétiques : il ne change ni la palette, ni la typographie, ni le contenu. Les adaptations propres à une surface vivent dans le CSS de cette surface (landing/page.css, vertical-landing.css, redesign_shell.css). ÉCHELLE DE BREAKPOINTS CANONIQUE — à réutiliser pour tout nouveau code : ≤ 480px téléphone @media (max-width: 480px) ≤ 768px téléphone + tablette @media (max-width: 768px) ≥ 1024px desktop @media (min-width: 1024px) Convention : on écrit en « mobile-last », c'est-à-dire que la mise en page desktop est la règle de base et les media queries `max-width` la dégradent. C'est la convention déjà en place dans tout le dépôt ; en changer aurait imposé de réécrire les 48 000 lignes de CSS existantes. Les valeurs 480 / 768 / 1024 sont les SEULES à utiliser pour du code neuf. Le legacy utilise encore 640 / 720 / 900 / 1100 : ces valeurs sont tolérées là où elles existent déjà, mais ne doivent pas être propagées. ============================================================================ */ /* ============================================================================ 1. GARDE-FOUS DE DÉBORDEMENT ---------------------------------------------------------------------------- Règle de conception : on ne masque JAMAIS un débordement horizontal avec `overflow-x: hidden` sur . Cela ne corrige rien — cela rend le contenu débordant définitivement inatteignable (c'est exactement le symptôme « éléments coupés » remonté sur téléphone) tout en faisant croire aux tests que la page est saine. L'approche retenue : a) empêcher les conteneurs de gonfler (min-width: 0 sur flex/grid) b) rendre les médias fluides (max-width: 100%) c) laisser défiler ce qui est irréductible (.u-scroll-x) ============================================================================ */ /* MOTIF AMPLIFICATEUR — à connaître avant d'écrire une grille. Une piste `1fr` équivaut à `minmax(auto, 1fr)`, et une grille sans `grid-template-columns` crée une colonne implicite `auto`. Dans les deux cas le MINIMUM de la piste vaut la largeur min-content de l'enfant le plus large. Conséquence : il suffit d'UN enfant incompressible pour que la piste gonfle et que TOUS les frères s'étirent avec elle, hors de l'écran. Trois occurrences ont été corrigées ainsi (mesures à 375 px) : .feat-block (landing) 311 → 539 px, 4 blocs sur 8 rognés .impact-stack (landing) 311 → 584 px .billing-main (échéancier) 375 → 433 px, toute la page décalée Le dépôt compte encore ~150 conteneurs `display: grid` sans `grid-template-columns`. Ils ne débordent que si un enfant devient incompressible, donc ils n'ont pas été réécrits en masse — le garde-fou e2e (frontend/e2e/mobile_responsive.spec.ts) les surveille et nomme le coupable exact le cas échéant. Pour tout code NEUF : écrire `minmax(0, 1fr)`. (a) Un enfant de flex/grid a `min-width: auto` par défaut : il refuse de descendre sous la largeur min-content de son contenu et pousse donc son parent hors de l'écran. C'est la cause n°1 de débordement horizontal. On neutralise ce comportement sur les conteneurs de mise en page, jamais sur les éléments de contrôle qui ont besoin d'une largeur plancher. */ .u-min0, .u-min0 > * { min-width: 0; } /* (b) Médias fluides. `svg` est volontairement exclu : les icônes et les graphes de l'application portent des dimensions explicites et vivent déjà dans des conteneurs de défilement — leur imposer max-width les écraserait. */ img, video, canvas, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* (c) Conteneur de défilement horizontal — l'échappatoire propre pour tout contenu irréductible (tableaux larges, matrices, frises, barres d'onglets). Le contenu reste intégralement atteignable au doigt au lieu d'être rogné. */ .u-scroll-x { overflow-x: auto; overflow-y: hidden; /* Inertie iOS + arrêt du chaînage vers le scroll vertical de la page : un balayage horizontal dans un tableau ne doit pas faire défiler la page. */ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* Affordance de défilement. `globals.css` masque toutes les barres de défilement avec `!important` (choix esthétique global) ; sur un conteneur qui défile horizontalement, cela supprime le seul indice visuel disponible. On la rétablit, fine et discrète, uniquement ici. */ scrollbar-width: thin !important; scrollbar-color: rgba(100, 116, 139, .35) transparent; } /* Les descendants directs d'un conteneur défilant doivent conserver leur largeur naturelle, sinon ils se compriment et le défilement ne sert à rien. */ .u-scroll-x > .u-scroll-x__content { min-width: max-content; } .u-scroll-x::-webkit-scrollbar { display: block !important; height: 6px !important; width: 6px !important; } .u-scroll-x::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); border-radius: 99px; } .u-scroll-x::-webkit-scrollbar-track { background: transparent; } /* ============================================================================ 2. LISIBILITÉ DU TEXTE ---------------------------------------------------------------------------- Les identifiants techniques (codes WBS, références de tâche, URLs, e-mails) sont des chaînes sans espace : sans point de césure ils débordent de leur carte au lieu de passer à la ligne. `overflow-wrap: anywhere` autorise la coupure UNIQUEMENT quand le mot ne tient pas — le texte courant n'est pas affecté. ============================================================================ */ @media (max-width: 768px) { p, li, dd, td, th, blockquote, figcaption { overflow-wrap: anywhere; } /* Les titres restent en coupure « normale » : couper un titre au milieu d'un mot est plus dégradant qu'un léger débordement, et `text-wrap: balance` gère déjà l'équilibre des lignes. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } } /* ============================================================================ 3. CONFORT TACTILE ---------------------------------------------------------------------------- Deux niveaux, volontairement distincts — appliquer partout le niveau le plus généreux déformerait les micro-contrôles (bascule de langue, segments) et changerait les proportions de l'en-tête, ce qui n'est pas souhaitable. • plancher : 24 px — exigence WCAG 2.2 AA (2.5.8 Target Size Minimum), appliquée à tout contrôle interactif ; • confort : 40 px — recommandation AAA (2.5.5), réservée aux actions principales, dont la boîte est déjà dimensionnée pour être touchée. Les liens en ligne dans un paragraphe sont exclus des deux niveaux : les agrandir casserait l'interlignage (et la norme les exempte explicitement). ============================================================================ */ @media (max-width: 480px) { button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], select { min-height: 24px; } /* Familles de boutons de l'application — `.lbtn` (landing), `.rd-btn` (coquille), `.btn-*` (landings verticales). Étendre cette liste est le point d'entrée unique pour tout nouveau composant de bouton. */ .lbtn, .rd-btn, .btn-primary, .btn-secondary, .btn-gold, button[type="submit"], input[type="submit"] { min-height: 40px; } /* Les champs de saisie sous 16px déclenchent un zoom automatique sur iOS, qui décale la mise en page et donne l'impression que « ça déborde ». */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select { font-size: max(16px, 1em); } } /* ============================================================================ 4. TABLEAUX ---------------------------------------------------------------------------- Un tableau de données ne se « responsivise » pas en le compressant : les colonnes deviennent illisibles. La règle du projet est le défilement horizontal encadré. `.responsive-table` (globals.css) reste disponible pour les tableaux courts qu'on veut basculer en cartes. ============================================================================ */ .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin !important; } .table-scroll::-webkit-scrollbar { display: block !important; height: 6px !important; } .table-scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); border-radius: 99px; } .table-scroll > table { min-width: max-content; } /* ============================================================================ 5. RESPECT DES PRÉFÉRENCES SYSTÈME ============================================================================ */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } }