/* Lisibilité du site de Manuella Devaux, 23 octobre 2026, deuxième passe.

   Tout ici répond à une mesure de ~/.claude/head-of-lisibilite/lisibilite_scan.py, qui
   interroge le navigateur à 390 px et à 1440 px. La première passe a ramené les défauts
   durs de 42 à 11 ; cette seconde passe traite les 11 restants, dont on connaît maintenant
   la règle fautive exacte.

   SUR LA SPÉCIFICITÉ, et pourquoi ces sélecteurs sont si longs.
   Le moteur écrit ses règles sous trois formes qui gagnent contre une règle simple :
     html.route-editorial.atmosphere-natural .organic-reassurance p   (0,3,2)
     html[data-client="manuella-d"] .organic-hero h1 { … !important } (0,2,2 + !important)
   Une déclaration !important ne suffit donc pas : à importance égale, c'est la spécificité
   qui tranche. D'où le préfixe html[data-client] main, qui monte à (0,2,3) et passe devant,
   sans dépendre des classes de route qui ne sont pas sur toutes les pages.

   CE QUI EST CORRIGÉ, et pourquoi
   - Le titre de héros de l'accueil s'affichait à 66 px sur grand écran et 46 px sur
     téléphone, au-dessus d'un corps mesuré à 12 px. Un rapport de 5,5.
   - Les cartes de service, le bandeau de réassurance et le bloc de contact affichaient
     leur texte entre 10,7 px et 14,4 px. Sur un téléphone, ce n'est plus de la lecture.
   - Deux titres de section de l'accueil montaient à 52 et 58 px.
*/

/* ---- échelle générale, pour les titres tombés sur le réglage générique du moteur ------ */
main h2 { font-size: clamp(1.9rem, 1.45vw + 1.32rem, 2.9rem); line-height: 1.14; }
main h3 { font-size: clamp(1.35rem, .75vw + 1.1rem, 1.8rem); line-height: 1.22; }
main .natural-detail__body > h2,
main .prose h2,
main .natural-long-form h2 {
  font-size: clamp(1.9rem, 1.45vw + 1.32rem, 2.9rem);
  line-height: 1.14;
  max-width: 26ch;
}
main .prose h3,
main .natural-detail__body > h3 { font-size: clamp(1.35rem, .75vw + 1.1rem, 1.8rem); line-height: 1.22; }

/* ---- un titre de deux lignes ne doit jamais se toucher -------------------------------- */
main h1, main h2, main h3 { line-height: 1.14 !important; }

/* ---- titres de héros et de section : 66 px au-dessus d'un corps de 12 px --------------- */
html[data-client] main .organic-hero h1,
html[data-client] main .organic-hero__copy h1,
html[data-client] main .natural-internal-hero__copy h1,
html[data-client] main .natural-internal-hero h1 {
  font-size: clamp(2.1rem, 1.1vw + 1.75rem, 3rem) !important;
  line-height: 1.1 !important;
}
html[data-client] main .natural-section-heading h2,
html[data-client] main .natural-service-directory__heading h2,
html[data-client] main .shell > div > h2 {
  font-size: clamp(1.9rem, 1.45vw + 1.32rem, 2.9rem) !important;
  line-height: 1.14 !important;
}

/* ---- plancher de lisibilité du corps --------------------------------------------------
   Chaque sélecteur ci-dessous correspond à une règle du moteur mesurée entre 0,67 rem et
   0,94 rem, c'est-à-dire entre 10,7 px et 15 px à l'écran. */
html[data-client] main .organic-reassurance p,
html[data-client] main .organic-contact p,
html[data-client] main .service-grid--page .service-card p,
html[data-client] main .service-card p,
html[data-client] main details p,
html[data-client] main .natural-audience-card__face p,
html[data-client] main .organic-service__detail p,
html[data-client] main .natural-service-directory__heading p,
html[data-client] main .organic-values__intro,
html[data-client] main .organic-ethics,
html[data-client] main li > div > p {
  font-size: 1rem !important;
  line-height: 1.62 !important;
}
/* son parcours et sa manière de travailler se lisent comme du texte courant : ce sont les
   deux blocs où une visiteuse décide si elle appelle ou non */
html[data-client] main .organic-about__bio p,
html[data-client] main .organic-about__statement p {
  font-size: 1.0625rem !important;
  line-height: 1.68 !important;
}
main p:not([class]) { font-size: 1.0625rem; line-height: 1.68; }

/* ---- longueur de ligne : au-delà d'environ 70 signes, l'œil retombe mal ---------------- */
main .natural-detail__body p,
main .sales-page-section__copy p,
main .natural-page-cta p:not([class]) { max-width: 68ch; }

/* ---- titres lisibles sur les panneaux sombres ------------------------------------------ */
main section[data-page-ambient="approche-content"] .prose :is(h1, h2, h3),
main .contact-aside :is(h1, h2, h3),
main .natural-detail__aside :is(h1, h2, h3),
main .organic-about__statement :is(h1, h2, h3) { color: #fdf6f1 !important; }