/* ================================================================ FRENCHY IA — Base de mise en page partagée À charger après tokens.css, avant le style propre à la page. Cette feuille traite les causes récurrentes de débordement horizontal sur téléphone. Aucun « overflow-x: hidden » global : il masquerait le symptôme en rendant le contenu débordant inatteignable, au lieu de corriger ce qui déborde. ================================================================ */ :root { /* Hauteur de la barre d'onglets basse, marge de sécurité comprise. */ --tabbar-h: 58px; /* Encoches et barre de gestes des téléphones récents. Vaut zéro partout ailleurs, donc sans effet sur les autres appareils. Indispensable une fois le site installé en PWA : en plein écran, la barre basse se retrouverait sinon sous la barre de gestes. */ --safe-haut: env(safe-area-inset-top, 0px); --safe-bas: env(safe-area-inset-bottom, 0px); --safe-gauche: env(safe-area-inset-left, 0px); --safe-droite: env(safe-area-inset-right, 0px); --page-gouttiere: 16px; --page-max: 1200px; } @media (min-width: 769px) { :root { --page-gouttiere: 24px; } } /* ── FONDATIONS ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { /* Empêche l'agrandissement automatique du texte quand un téléphone passe en paysage, qui casse les mises en page calibrées. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* Le contenu ne peut pas être plus large que l'écran. Sans cette borne, un enfant trop large étire le corps entier et fait défiler toute la page latéralement. */ max-width: 100%; /* La marge de 8 px que tout navigateur pose par défaut sur le corps. AUCUNE feuille du site ne la retirait — ni layout.css, ni les feuilles de page. Sur les pages sombres elle passait inaperçue, le fond du corps se propageant au canevas ; mais la barre du haut, elle, s'arrêtait à 8 px de chaque bord, et son filet avec — un décrochement visible aux deux extrémités, sur toutes les pages. Ici plutôt que dans chaque feuille : c'est le genre de règle qu'on oublie exactement une fois de trop. */ margin: 0; } /* ── MÉDIAS ────────────────────────────────────────────────────── */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* Rétabli pour les icônes en ligne, dont la hauteur est fixée volontairement et que « height: auto » écraserait. */ svg[width][height] { height: revert; } /* ── TEXTE ─────────────────────────────────────────────────────── */ /* Une URL ou une référence sans espace ne se coupe pas et pousse son conteneur au-delà de l'écran. Cas courant sur les pages légales. */ p, li, td, th, dd, h1, h2, h3, h4 { overflow-wrap: break-word; } /* ── TABLEAUX ──────────────────────────────────────────────────── */ /* Un tableau ne se comprime pas en dessous de la largeur de son contenu : celui des CGU mesure 506 px sur un écran de 375. Plutôt que d'écraser les colonnes jusqu'à l'illisible, on le fait défiler à l'intérieur de son propre cadre. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-scroll > table { min-width: 480px; } /* Filet de sécurité pour les tableaux non encapsulés : ils défilent au lieu d'emporter la page avec eux. */ @media (max-width: 768px) { main table, article table, section table, .section table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } } /* ── CONTENEUR ─────────────────────────────────────────────────── */ .conteneur { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: calc(var(--page-gouttiere) + var(--safe-gauche)) calc(var(--page-gouttiere) + var(--safe-droite)); } /* ── ESPACE POUR LA BARRE D'ONGLETS ────────────────────────────── */ /* La barre basse est fixe : sans cette réserve, elle recouvrirait la fin du contenu, et notamment le dernier bouton d'un formulaire. */ /* Ce seuil suit celui de `.tabbar` dans nav.css. Les deux doivent bouger ensemble : la barre visible sans cette réserve recouvre la fin du contenu. */ @media (max-width: 1100px) { body.avec-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-bas)); } } /* ── CIBLES TACTILES ───────────────────────────────────────────── */ /* 44 px est le minimum recommandé pour être atteint au doigt sans viser. En dessous, les erreurs de clic deviennent fréquentes. */ @media (pointer: coarse) { button, .btn, [role="button"], nav a { min-height: 44px; } } /* ATTENTION : ce plancher donne une HAUTEUR, pas un CENTRAGE. Un lien nu qui le recoit voit son texte se coller en haut de la cible — c'est ce qui decalait « Annuler » de 12 px dans la barre de publication. Les elements concernes posent donc `display: inline-flex; align-items: center` avec leur propre regle (voir `.nav .logo`, `.fy-fil a` et `.nav-right a` dans barre.css). On ne le fait pas ici : `.nav-links a` du tiroir mobile est un bloc pleine largeur, et `inline-flex` le retrecirait au texte. */ /* ── BOUTONS ET LIENS PARTAGES ─────────────────────────────────── */ /* Venus d'accueil.css, que SEUL index.html charge. « Annuler » sur la page de publication et « Voir tout » sur le feed portaient ces classes et restaient des liens nus soulignes : la classe etait ecrite, elle avait l'air juste, elle ne peignait rien. Deplacees, pas recopiees — une seconde definition finit toujours par diverger. */ .fy-btn { display: inline-block; background: var(--fy-violet); color: var(--fy-nuit); font-size: 1.03rem; font-weight: 600; padding: 16px 28px; border-radius: 12px; text-decoration: none; transition: background .18s ease; } .fy-btn:hover { background: var(--fy-violet-vif); color: var(--fy-nuit); } .fy-btn-grand { font-size: 1.06rem; padding: 18px 34px; border-radius: 13px; } .fy-lien { color: var(--fy-violet); text-decoration: none; font-size: .91rem; } .fy-lien:hover { color: #bfb4ff; } .fy-lien-fort { color: var(--fy-violet); text-decoration: none; font-size: .97rem; font-weight: 600; } .fy-lien-fort:hover { color: #bfb4ff; } .fy-lien-sobre { color: var(--fy-gris); text-decoration: none; font-size: .94rem; } .fy-lien-sobre:hover { color: var(--fy-encre); } .fy-dim { color: var(--fy-sourd, #6e6c88); } .fy-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .69rem; font-weight: 500; letter-spacing: .1em; } /* ── UTILITAIRES ───────────────────────────────────────────────── */ .masque-mobile { } .masque-bureau { display: none; } @media (max-width: 768px) { .masque-mobile { display: none !important; } .masque-bureau { display: revert; } } /* Respecte le réglage système de réduction des animations. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────────────────── CONTRÔLES DE FORMULAIRE ───────────────────────────────────────────────────────────────────────── */ /* Un