.main-menu > .nav-item > a, .main-menu > .nav-item > .submenu-toggle { font-size: 0.82rem; } .main-menu > .academy-link { font-size: 1rem; } @media (max-width: 850px) { .main-menu > .nav-item > a, .main-menu > .nav-item > .submenu-toggle, .main-menu > .academy-link { font-size: 1rem; } } /* ─────────────────────── Entre 851 et 1109 px, le menu ne rentrait pas Le menu francais a besoin de 1109 px. En dessous, et jusqu'au basculement en menu mobile a 850 px, la page defilait lateralement : 209 px de debordement a 900 px de large, 9 px a 1100. La charte avait prevu le remede — une reduction a .77rem entre 851 et 1100 — mais il n'a jamais rien fait : cette regle vit dans brand-alignment.css, et la presente feuille, chargee apres, reimpose .82rem sans media. A specificite egale, c'est la derniere qui parle. On la reaffirme donc ici, ou elle a le dernier mot, et on la prolonge jusqu'a 1240 : c'est la largeur en dessous de laquelle le menu a corps plein ne tient plus dans la coquille. */ @media(max-width:1240px) and (min-width:851px){ .main-menu>.nav-item>a,.main-menu>.nav-item>.submenu-toggle,.main-menu>.academy-link{font-size:.77rem;letter-spacing:.1em} } /* ────────────────── Les titres débordaient de leurs colonnes étroites LE MÉCANISME. La typographie des titres grandit avec la largeur de l'écran — `h1` jusqu'à 100 px, `h2` jusqu'à 72 — alors que la coquille `--shell` plafonne à 1080 px et cesse de grandir vers 1112. Passé cette largeur, le texte continue de croître et sa colonne, non. Dans une mise en page à deux colonnes, un mot un peu long finit par sortir de la sienne et recouvrir la voisine. Et il ne peut pas se couper : la charte pose `hyphens:none` sur les titres, volontairement. CE QU'ON A MESURÉ. Environ soixante-dix titres concernés, sur quinze gabarits, en français comme en anglais. Trois recouvrements confirmés au pixel : « accompagnement » sur /a-la-carte/ (630 px de mot dans 343 px de colonne, il passe sur la liste des questions), « Understanding » sur /en/faq/, « complémentaire, » sur /analyse/. Rien à 1280, ça apparaît entre 1440 et 1680 et s'aggrave jusqu'à 1920. LE CHOIX. Léon, le 29 août 2026, parmi trois options : plafonner la typo UNIQUEMENT dans les colonnes étroites. Les titres pleine largeur gardent leur ampleur — ce sont ceux des pages qu'on regarde le plus — et seuls les titres de colonne se calment. LES VALEURS ne sont pas choisies au jugé. Pour chaque cas mesuré : corps maximal = corps actuel x largeur de colonne / largeur du mot. Le pire demandait 39,2 px pour un `h2` (« accompagnement ») et 76,1 px pour un `h1` (« considering »). D'où 4.75rem pour les h1. Les h2 sont descendus à 2.3rem après remesure : à 2.45 il restait « accompagnement » à 14 px dehors et « Understanding » à 7 px. La liste des grilles vient des feuilles elles-mêmes, pas d'une devinette : ce sont toutes celles dont une piste fait `minmax(2xx-3xx px, …)`. Les paniers, l'administration et le pied de page en sont écartés : ils ne portent pas de titre d'affichage. */ :is(.analysis-faq__grid,.analysis-mode__grid,.analysis-process__grid,.analysis-split, .bespoke-faq__grid,.bespoke-process__grid,.bespoke-split, .choice-guide__grid,.commerce-hero__grid,.contact-layout, .color-boundaries__grid,.color-hero__grid,.color-palette__grid,.color-split,.color-trainer__grid, .faq-sections section, .final-faq__grid,.final-process,.final-profile,.final-split, .formations-faq__grid,.formations-hero__grid,.hero-grid,.method__grid, .housing-boundaries__grid,.housing-hero__grid,.housing-offer__grid,.housing-split,.housing-trainer__grid, .neuro-definition__grid,.neuro-faq__grid,.neuro-hero__grid,.neuro-objectives__grid, .neuro-offer__grid,.neuro-pedagogy__grid,.neuro-trainer__grid, .services-faq__grid,.services-intro__grid,.services-limits__grid,.services-method__grid, .sessions-faq__grid,.sessions-intro__grid,.sessions-quality__grid, .interior-hero) :is(h1,.h1){font-size:clamp(3rem,5.2vw,4.7rem)} :is(.analysis-faq__grid,.analysis-mode__grid,.analysis-process__grid,.analysis-split, .bespoke-faq__grid,.bespoke-process__grid,.bespoke-split, .choice-guide__grid,.commerce-hero__grid,.contact-layout, .color-boundaries__grid,.color-hero__grid,.color-palette__grid,.color-split,.color-trainer__grid, .faq-sections section, .final-faq__grid,.final-process,.final-profile,.final-split, .formations-faq__grid,.formations-hero__grid,.hero-grid,.method__grid, .housing-boundaries__grid,.housing-hero__grid,.housing-offer__grid,.housing-split,.housing-trainer__grid, .neuro-definition__grid,.neuro-faq__grid,.neuro-hero__grid,.neuro-objectives__grid, .neuro-offer__grid,.neuro-pedagogy__grid,.neuro-trainer__grid, .services-faq__grid,.services-intro__grid,.services-limits__grid,.services-method__grid, .sessions-faq__grid,.sessions-intro__grid,.sessions-quality__grid) :is(h2,.h2){font-size:clamp(2.15rem,3.6vw,2.3rem)} /* LES TITRES NE RÉTRÉCISSAIENT PAS SUR TÉLÉPHONE. La règle ci-dessus vaut clamp(3rem, 5.2vw, 4.7rem) : le PLANCHER est 3rem, soit 48 px. En dessous de 923 px de large, 5.2vw passe sous ce plancher — et le titre reste donc à 48 px quelle que soit la finesse de l'écran. Sur un Android de 360 px, le plus répandu du parc, le titre débordait : « Neuroarquitectura », « Formations », « Prénoms & Numérologie » sortaient du cadre, coupés au milieu d'un mot, entraînant avec eux le texte de présentation et les boutons d'achat. On ne touche pas à la règle d'origine : au-delà de 600 px, rien ne change. En dessous, le titre reprend sa liberté — 9vw entre 1,9rem et 3rem. À 600 px pile, 9vw vaut 54 px, plafonné à 3rem = 48 px : la jonction avec la règle du dessus est continue, sans saut visible. */ @media (max-width: 600px) { :is(.analysis-faq__grid,.analysis-mode__grid,.analysis-process__grid,.analysis-split, .bespoke-faq__grid,.bespoke-process__grid,.bespoke-split, .choice-guide__grid,.commerce-hero__grid,.contact-layout, .color-boundaries__grid,.color-hero__grid,.color-palette__grid,.color-split,.color-trainer__grid, .faq-sections section, .final-faq__grid,.final-process,.final-profile,.final-split, .formations-faq__grid,.formations-hero__grid,.hero-grid,.method__grid, .housing-boundaries__grid,.housing-hero__grid,.housing-offer__grid,.housing-split,.housing-trainer__grid, .neuro-definition__grid,.neuro-faq__grid,.neuro-hero__grid,.neuro-objectives__grid, .neuro-offer__grid,.neuro-pedagogy__grid,.neuro-trainer__grid, .services-faq__grid,.services-intro__grid,.services-limits__grid,.services-method__grid, .sessions-faq__grid,.sessions-intro__grid,.sessions-quality__grid, .interior-hero) :is(h1,.h1){font-size:clamp(1.9rem,9vw,3rem)} }