/* Echelle fluide des grands titres, chargee APRES tailwind.build.css.
 *
 * Mesure du 2026-08-21 sur index.html, viewport 1366x768 :
 *   - le h1 du hero reste a 96 px (le palier `lg:` s'ouvre des 1024 px, mais
 *     sa valeur est calibree pour 1920), casse en trois lignes de 274 px de
 *     haut, et la section hero mesure 825 px pour un viewport de 768 ;
 *   - le document scrolle de 14 px horizontalement : `overflow-x:hidden` etait
 *     pose sur body seul, ce qui ne retient rien, le debordement remonte a html.
 * Sur un ecran de portable, la page ne tient donc qu'a 75 % de zoom.
 *
 * Le principe : les paliers fixes de Tailwind deviennent un clamp qui suit la
 * largeur reelle. La borne haute REPREND la valeur d'origine, donc au-dela de
 * ~1900 px le rendu est inchange ; c'est entre 1024 et 1900 px que le titre
 * cesse d'etre surdimensionne. Les paliers sous `lg:` (mobile, tablette) ne
 * sont pas touches, ils etaient deja justes.
 *
 * Le ciblage passe par la classe arbitraire elle-meme (`[class*="..."]`) et non
 * par un selecteur de page : le meme titre porte la meme classe sur les 15
 * pages, un seul bloc les corrige toutes, et une page future qui reutilise le
 * palier herite du correctif sans y penser.
 */

/* Scroll horizontal de 14 px, mesure a 1366 et 1280 : le halo decoratif
 * `-right-6` de la carte #chiffres (index.html:712) sort du conteneur, et
 * `overflow-x:hidden` etait pose sur body seul, ce qui ne retient rien -- le
 * debordement remonte a html, qui scrolle. Le poser sur html N'EST PAS la
 * solution : `overflow-x` non-visible sur html supprime aussi le scroll
 * VERTICAL du document (verifie : scrollY bloque a 0, scrollHeight = viewport).
 * On clippe donc a la source, sur la section qui porte le halo. Le halo est
 * flou a 40 px et deja transparent a son bord : la coupe ne se voit pas.
 */
#constat { overflow: clip; }

@media (min-width: 1024px) {
  /* h1 des pages locales et audit. ORDRE IMPORTANT : le h1 d'accueil porte
     `md:text-[5rem]` ET `lg:text-[6rem]`, et ces selecteurs ont la meme
     specificite -- le palier `lg` doit donc etre declare EN DERNIER pour
     l'emporter, comme le fait la cascade de Tailwind elle-meme. */
  [class*="md:text-[4.5rem]"] { font-size: clamp(2.5rem,  3.7vw, 4.5rem); }
  [class*="md:text-[5rem]"]   { font-size: clamp(2.75rem, 4.1vw, 5rem); }
  /* h1 du hero d'accueil : 96 px a 1920, 67 px a 1366 */
  [class*="lg:text-[6rem]"]   { font-size: clamp(3rem,    4.9vw, 6rem); }
  /* h2 de section (md:text-[3.25rem]) et h2 de la FAQ (md:text-[2.75rem]) */
  [class*="md:text-[3.25rem]"]{ font-size: clamp(2.25rem, 2.7vw, 3.25rem); }
  [class*="md:text-[2.75rem]"]{ font-size: clamp(2rem,    2.3vw, 2.75rem); }
  /* chapo du hero (md:text-[1.375rem]) */
  [class*="md:text-[1.375rem]"]{ font-size: clamp(1.125rem, 1.15vw, 1.375rem); }
}

/* Ecran court : le hero ne reclame plus toute la hauteur quand il n'en a pas
   besoin, sinon les 100dvh poussent la preuve sociale entierement hors champ. */
@media (min-width: 1024px) and (max-height: 900px) {
  #accueil { padding-top: 6rem; padding-bottom: 2rem; }
}