/* ============================================================================ _responsive_guard.css — filet responsive des propositions ---------------------------------------------------------------------------- Injecte par wrap_proposal() APRES _design_system.css et AVANT {{HEAD_EXTRA}}. POURQUOI : _design_system.css couvre tres bien les classes canoniques (.clients-grid, .invest-table, .cover-*, ...). Ce qui deborde en pratique, ce sont les sections ECRITES A LA MAIN d'une proposition a l'autre : grilles et rangees flex en style inline, tableaux custom, courriels/URLs insecables. Ce fichier est le filet generique pour ces cas la. REGLES DE SURETE : - `@media screen` uniquement -> le PDF (@media print) et le desktop ne bougent JAMAIS. Rien ici ne s'applique au-dessus de 760px. - Les selecteurs inline sont limites aux elements SANS class (`:not([class])`) pour ne jamais ecraser une regle canonique du design system. - Pas de `* { min-width: 0 }` global : la memoire documente que ca casse les conteneurs flex/grid (section social ecrasee a 79px). On cible les enfants directs de .page-inner. Ce filet ne remplace PAS le gate QA (qa_gate.py) : il reduit le nombre de corrections manuelles, le gate reste l'autorite qui dit si un lien part. ============================================================================ */ @media screen and (max-width: 760px) { /* --- 1. Aucun scroll horizontal, jamais ------------------------------- */ html, body { overflow-x: hidden; } .canvas, .page, .page-inner { max-width: 100%; } /* --- 2. Medias qui debordent de leur colonne -------------------------- */ /* JAMAIS `height: auto` ici : ce selecteur a la meme specificite que les regles du design system (.cover-mark img { height: 60px }) et, arrivant apres, il les ecraserait -> un logo en SVG data-URI sans dimensions intrinseques s'effondre a 0 (regression constatee sur la couverture Equerre, 2026-07-31). On ne borne que la largeur. */ .page-inner img, .page-inner svg, .page-inner video, .page-inner canvas, .page-inner iframe { max-width: 100%; } /* --- 3. Enfants de page qui refusent de retrecir ---------------------- */ /* Cible (pas de `*` global, qui ecrase les conteneurs flex/grid) : deux niveaux sous .page-inner. Le 2e niveau est indispensable — les vrais cas sont des ENFANTS de grille (.clients-stats > *, .legal-grid > *, .signatures > *) qui gardent leur largeur min-content, debordent de leur colonne et se font rogner par `.page { overflow: hidden }` SANS jamais creer de scroll horizontal (page Signature d'Equerre rognee de 27px). */ .page-inner > *, .page-inner > * > * { min-width: 0; } /* Les memes, cibles par classe : independant de la profondeur du markup, qui varie d'une proposition a l'autre (thd et aeropur imbriquent une couche de plus que equerre). Liste = les grilles canoniques du design system. */ .clients-stats > *, .clients-grid > *, .legal-grid > *, .signatures > *, .options > *, .option > *, .case-stats > *, .free-grid > *, .toc-grid > *, .next-steps > *, .steps > *, .team-grid > *, .mvv-grid > *, .context-grid > *, .greeting-grid > *, .value-hero > *, .social-cols > * { min-width: 0; } /* Un nom de forfait est un mot long dans une carte etroite : on le coupe plutot que de le laisser rogner par la carte (`.option` clippe). */ .option .opt-name, .option .opt-name em { overflow-wrap: anywhere; } /* --- 4. Grilles et rangees ecrites en style inline -------------------- */ /* Uniquement les elements sans class : une grille qui porte une class canonique est deja geree par _design_system.css. */ .page-inner [style*="grid-template-columns"]:not([class]) { grid-template-columns: 1fr !important; } .page-inner [style*="display:flex"]:not([class]), .page-inner [style*="display: flex"]:not([class]) { flex-wrap: wrap !important; } /* --- 5. Couverture : la grille 1.4fr / 1fr ne s'effondre jamais -------- */ /* Bug du design system : `.cover-foot` est en display:grid, et sa regle mobile lui donne `flex-direction: column` — inerte sur une grille. Le titre client (Swear Display 45px) impose alors sa largeur min-content a la 1re colonne, pousse la colonne meta hors de la page, et `.page { overflow: hidden }` la COUPE en silence (constate sur TGV et Battures, 10-13px). */ .cover-foot { grid-template-columns: 1fr !important; gap: 24px !important; } .cover-foot > * { min-width: 0; } /* --- 6. Tableaux custom ----------------------------------------------- */ /* Un tableau de 4-5 colonnes avec des montants en `white-space: nowrap` ne peut pas rentrer dans 375px : il est coupe par `.page { overflow: hidden }` sans provoquer le moindre scroll horizontal, donc invisible pour le detecteur de debordement (colonnes "/ annee" de Groupe Secure et "Total" de Battures purement absentes du telephone). Cause : le `white-space: nowrap` inline sur les cellules de montants donne au tableau une largeur min-content superieure au telephone. On le neutralise. `break-word` et pas `anywhere` : on ne coupe un mot que s'il ne rentre vraiment pas seul. Ca suffit pour 2-3 colonnes. */ .page-inner table { width: 100% !important; max-width: 100% !important; } .page-inner th, .page-inner td { overflow-wrap: break-word; white-space: normal !important; } /* 4 colonnes ou plus : la mise en page AUTO ne peut pas descendre sous la largeur min-content de l'ensemble -> le tableau reste trop large et se fait couper. `table-layout: fixed` garantit qu'il tient, la 1re colonne (libelle) garde un tiers de la largeur pour eviter les coupures en plein mot, et on resserre typo et gouttieres. `:has()` cible uniquement ces tableaux la : les 2-3 colonnes canoniques (.invest-table, .compare-table) ne bougent pas. */ .page-inner table:has(tr > *:nth-child(4)) { table-layout: fixed; font-size: 12px; } /* `!important` sur la typo des cellules : les montants portent souvent un `font-size: 17px` INLINE (Swear Display) qui, sinon, force chaque valeur a passer sur deux lignes. */ .page-inner table:has(tr > *:nth-child(4)) th, .page-inner table:has(tr > *:nth-child(4)) td { padding-left: 6px !important; padding-right: 6px !important; font-size: 12.5px !important; } .page-inner table:has(tr > *:nth-child(4)) th:first-child, .page-inner table:has(tr > *:nth-child(4)) td:first-child { width: 32%; } /* Entetes : l'interlettrage large des libelles majuscules ("AUJOURD'HUI") est ce qui les casse en 3 lignes dans une colonne etroite. */ .page-inner table:has(tr > *:nth-child(4)) th { font-size: 10px !important; letter-spacing: 0.03em !important; line-height: 1.25; } /* --- 7. Texte long : courriels, URLs, references ---------------------- */ /* PAS de `h1` : `.cover-client h1` demande explicitement `overflow-wrap: normal` au design system (le nom du client ne se coupe jamais), et ce selecteur, a specificite egale et injecte apres, l'ecraserait. */ .page-inner p, .page-inner li, .page-inner dd, .page-inner h2, .page-inner h3, .page-inner h4, .page-inner em, .page-inner strong, .page-inner span, .page-inner .row strong { overflow-wrap: break-word; } .page-inner a[href^="mailto:"], .page-inner a[href^="http"], .page-inner code, .page-inner pre { overflow-wrap: anywhere; } } /* ============================================================================ OPT-IN : tableau -> cartes empilees (pattern valide sur la demo Battures) ---------------------------------------------------------------------------- Pour un tableau de 3+ colonnes qui reste illisible meme retreci. Marquage : ajouter class="breakable" sur la table, et data-label="Intitule de colonne" sur chaque cellule du corps. Sous 760px le thead disparait et chaque ligne devient une carte dont les champs sont prefixes par leur data-label. Sans data-label, la carte s'affiche quand meme, sans intitules. (Aucun exemple en balises ici : ce fichier finit inline dans un