/* =============================================================
   Osmetheca — Overrides responsive mobile
   Préparé le 21 mai 2026

   Ce fichier contient UNIQUEMENT des règles dans des @media
   queries (max-width: 768px). Aucune règle ne s'applique au
   desktop. La version desktop reste 100% identique.

   Couvre :
   1. Nav burger mobile (header)
   2. Homepage piliers grid
   3. Homepage Trois lectures (decouvertes)
   4. Hero-inner stacking sur fiches piliers
   5. Layout content padding & TOC
   ============================================================= */

/* Élements injectés visibles seulement en mobile : par défaut cachés */
.menu-toggle { display: none; }
.menu-overlay { display: none; }

@media (max-width: 768px) {

  /* === 1. HEADER & NAV BURGER ===================================== */

  .site-header-inner {
    padding: 14px 18px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  .brand {
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    flex: 1 1 auto !important;
  }
  .brand-tagline { display: none !important; }

  /* Cacher la nav desktop, search et lang-switch */
  .nav { display: none !important; }
  .site-search { display: none !important; }
  .lang-switch { display: none !important; }

  /* Bouton burger */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    gap: 5px;
    flex: 0 0 auto;
    z-index: 102;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    touch-action: manipulation;
    pointer-events: auto;
    position: relative;
  }
  .menu-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #1a1a1a;
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Overlay menu plein écran */
  .menu-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: #fafaf7;
    z-index: 101;
    padding: 90px 28px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    visibility: hidden;
  }
  .menu-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  /* Bouton de fermeture en haut à droite */
  .menu-overlay-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    touch-action: manipulation;
  }
  .menu-overlay-close::before,
  .menu-overlay-close::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 1.5px;
    background: #1a1a1a;
    border-radius: 1px;
  }
  .menu-overlay-close::before { transform: rotate(45deg); }
  .menu-overlay-close::after { transform: rotate(-45deg); }

  /* Barre de recherche en haut de l'overlay.
     IMPORTANT : font-size >= 16px sur iOS Safari pour éviter le zoom auto
     lors du focus sur l'input. */
  .menu-overlay-search {
    margin-bottom: 28px;
  }
  .menu-overlay-search input {
    width: 100%;
    box-sizing: border-box;
    font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
    padding: 14px 16px;
    outline: none;
    -webkit-appearance: none;
  }
  .menu-overlay-search input:focus {
    border-color: #1a1a1a;
  }
  .menu-overlay-search input::placeholder {
    color: #888;
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 400;
  }

  .menu-overlay nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
  }
  .menu-overlay nav a {
    font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
  }
  .menu-overlay nav a:last-of-type { border-bottom: 0; }
  .menu-overlay nav a.active { font-weight: 700; }


  /* === 2. HOMEPAGE PILIERS GRID =================================== */

  .piliers {
    padding: 48px 20px !important;
  }
  .piliers-inner {
    max-width: 100% !important;
  }
  .piliers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }
  .pilier-card {
    padding: 22px 14px !important;
    min-height: 0 !important;
  }
  .pilier-card-num {
    font-size: 24px !important;
    margin-bottom: 16px !important;
    line-height: 1 !important;
  }
  .pilier-card h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.15 !important;
  }
  .pilier-card-desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }


  /* === 3. HOMEPAGE TROIS LECTURES (decouvertes) =================== */

  .decouvertes {
    padding: 48px 20px !important;
  }
  .decouvertes-inner {
    max-width: 100% !important;
  }
  .decouvertes-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 32px !important;
    overflow-x: visible !important;
  }
  .decouverte-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .decouverte-image {
    aspect-ratio: 16 / 9 !important;
  }
  .decouverte-image-num {
    font-size: 30px !important;
    top: 14px !important;
    left: 18px !important;
  }
  .decouverte-cat {
    font-size: 10px !important;
    margin: 18px 20px 8px !important;
  }
  .decouverte-titre {
    font-size: 22px !important;
    margin: 0 20px 12px !important;
    line-height: 1.2 !important;
  }
  .decouverte-extrait {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 20px 20px !important;
  }

  /* Section-head global responsive (titre + intro) */
  .section-head {
    margin-bottom: 32px !important;
    padding: 0 4px !important;
  }
  .section-head h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .section-head .section-intro,
  .section-intro {
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 0 8px !important;
  }
  .section-head .section-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 18px !important;
  }


  /* === 4. HERO-INNER STACKING (fiches piliers) ==================== */

  .hero {
    padding: 0 !important;
  }
  .hero-inner,
  .hero-inner:has(.hero-image-wrap) {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 28px 20px 32px !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }
  .hero-image-wrap {
    aspect-ratio: 16 / 10 !important;
    max-height: 280px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .hero-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .hero h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
    margin: 0 0 16px !important;
    word-wrap: normal;
    overflow-wrap: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
    letter-spacing: -0.025em !important;
  }
  /* Titre h2 des sections homepage (Trois lectures, Une passionnée…) :
     même taille que les h2 des fiches piliers pour cohérence visuelle */
  .section-head h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 14px !important;
  }
  /* Pilier-card homepage : titres alignés avec le système */
  .pilier-card h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  .pilier-card-num {
    font-size: 26px !important;
  }
  /* Decouverte titles (Oud, Baccarat Rouge 540, Grasse…) */
  .decouverte-titre {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  /* Footer titles */
  .footer-col h4 {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
  }
  .hero-lead {
    font-size: 18px !important;
    line-height: 1.6 !important;
    padding: 4px 0 4px 18px !important;
    margin: 0 0 18px !important;
    border-left-width: 2px !important;
    font-weight: 300 !important;
  }
  .hero-meta {
    font-size: 11px !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    letter-spacing: 0.10em !important;
  }
  .hero-meta span {
    display: inline-block !important;
  }
  .eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 12px !important;
  }


  /* === 5. LAYOUT CONTENT (padding + TOC) ========================== */

  .layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 28px 24px 56px !important;
    max-width: 100% !important;
  }
  /* Sommaire latéral caché en mobile */
  .toc {
    display: none !important;
  }
  /* main.content : padding latéral PAR DÉFAUT pour les pages sans .layout
     (contact, methodologie, auteur, mentions, etc.). Le sélecteur
     .layout main.content vient ENSUITE (plus spécifique) et annule
     ce padding pour les fiches piliers où c'est .layout qui le porte. */
  main.content {
    padding: 28px 24px 48px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .layout main.content,
  .layout > main.content,
  .layout main {
    padding: 0 !important;
  }

  /* Tailles de typographie cohérentes pour TOUTES les pages sans .section
     (contact, mentions, methodologie partiellement, auteur partiellement)
     Ces sélecteurs ciblent main.content h2/h3/p/li direct ainsi que
     dans des <section> sans classe. */
  main.content > section > h2,
  main.content > section > h3,
  main.content > h2,
  main.content > h3,
  main.content > section h2:not(.section h2),
  main.content > section h3:not(.section h3),
  main.content h2:not(.section h2):not(.section-head h2):not(.angle-left h2),
  main.content h3:not(.section h3) {
    word-wrap: break-word;
    letter-spacing: -0.015em !important;
  }
  main.content h2:not(.section h2):not(.section-head h2):not(.angle-left h2) {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin: 36px 0 18px !important;
  }
  main.content h3:not(.section h3) {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 28px 0 14px !important;
  }
  main.content > section > p,
  main.content > section > ul,
  main.content > section > ol,
  main.content > p,
  main.content > ul,
  main.content > ol {
    font-size: 18px !important;
    line-height: 1.7 !important;
    font-weight: 300 !important;
  }
  main.content > section > ul li,
  main.content > section > ol li,
  main.content > ul li,
  main.content > ol li {
    font-size: 18px !important;
    line-height: 1.7 !important;
    font-weight: 300 !important;
  }
  /* Pages avec page-hero (contact, mentions) : adapter le hero padding */
  .page-hero {
    padding: 48px 24px 40px !important;
  }
  .page-hero h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
  }
  .page-hero .lead,
  .page-hero p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
  /* Pages avec hero (methodologie, auteur) : déjà couvert par .hero-inner
     mais s'assurer du padding hero */
  .hero {
    padding: 0 !important;
  }
  /* 404 et autres mains spéciales */
  main.error-main {
    padding: 60px 24px 80px !important;
    max-width: 100% !important;
    text-align: center;
  }
  main.error-main h1,
  main.error-main .error-title {
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.02em !important;
  }
  main.error-main p,
  main.error-main .error-message {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
  }

  /* Pages avec classes spécifiques (contact-motif, etc.) */
  .contact-motif,
  .contact-section p,
  .mentions-section p,
  main.content .lead {
    font-size: 18px !important;
    line-height: 1.7 !important;
    font-weight: 300 !important;
  }
  .section {
    margin-bottom: 32px !important;
  }
  .section h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin: 44px 0 22px !important;
    word-wrap: break-word;
    letter-spacing: -0.015em !important;
  }
  .section h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 32px 0 16px !important;
    letter-spacing: -0.01em !important;
  }
  .section p,
  .section li {
    font-size: 18px !important;
    line-height: 1.7 !important;
    font-weight: 300 !important;
  }
  .section ul,
  .section ol {
    padding-left: 22px !important;
  }
  /* Tableaux scrollables horizontalement plutôt que collés */
  .data-table-wrap,
  .section table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    font-size: 12.5px !important;
    min-width: 100%;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px !important;
    white-space: normal !important;
  }
  /* Pull-quotes centrés en mobile — réduire le guillemet géant
     qui chevauche le texte en desktop default 90px */
  .pull-quote {
    margin: 32px 0 !important;
    padding: 62px 20px 50px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .pull-quote::before {
    font-size: 52px !important;
    top: 14px !important;
  }
  .pull-quote::after {
    font-size: 52px !important;
    bottom: -18px !important;
  }
  .pull-quote-attr {
    font-size: 11px !important;
    margin-top: 22px !important;
  }
  .pull-quote-attr::before {
    font-size: 52px !important;
    line-height: 0.5 !important;
    margin-top: 22px !important;
    padding-bottom: 14px !important;
  }
  /* Signature-grid 1 colonne */
  .signature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .signature-cell {
    padding: 16px !important;
  }


  /* === 6. SECTION "VOIX D'OSMETHECA" — centrer en mobile ============
     En desktop la section .angle-grid est en grid 2 colonnes (titre à gauche
     + citation à droite). En mobile il n'y a pas la colonne citation, donc
     on centre le bloc titre pour qu'il soit uniforme avec les autres
     titres de section (.section-head text-align: center). */

  .angle-section,
  .angle-grid {
    text-align: center !important;
  }
  .angle-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }
  .angle-left {
    text-align: center !important;
  }
  .angle-left .section-eyebrow {
    display: inline-flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .angle-left h2 {
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  /* Le contenu texte revient en alignement gauche (plus lisible) */
  .angle-text {
    text-align: left !important;
    margin-top: 24px !important;
  }
  .angle-text p {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
  .angle-right {
    text-align: left !important;
  }
  .angle-right .closing-quote {
    margin: 0 0 16px !important;
    padding-left: 18px !important;
  }


  /* === 7. FOOTER (uniforme sur toutes les pages) ==================
     La classe réelle utilisée est .footer-top (pas .footer-grid).
     En desktop : 4 colonnes. En mobile : 1 colonne, contenu aéré. */

  .site-footer {
    padding: 48px 24px 28px !important;
    margin-top: 48px !important;
  }
  .site-footer-inner {
    max-width: 100% !important;
  }
  .footer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  .footer-brand {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }
  .footer-tagline {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }
  .footer-col h4 {
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 12px !important;
  }
  .footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .footer-col li {
    margin-bottom: 8px !important;
  }
  .footer-col a,
  .footer-col p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .footer-bottom {
    padding-top: 24px !important;
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    align-items: flex-start !important;
  }
}

/* === PAGE RECHERCHE ============================================== */
/* Styles de base pour les résultats de recherche groupés (desktop + mobile).
   Hors @media car ces classes n'existent que sur recherche.html. */

body.page-recherche .recherche-form {
  margin: 24px 0;
}
body.page-recherche .recherche-input {
  width: 100%;
  box-sizing: border-box;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px;
  padding: 14px 18px;
  outline: none;
  -webkit-appearance: none;
}
body.page-recherche .recherche-input:focus {
  border-color: #1a1a1a;
}
body.page-recherche .recherche-input::placeholder {
  color: #888;
  font-weight: 400;
}
body.page-recherche .recherche-meta {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666;
  margin: 18px 0;
}
body.page-recherche .recherche-results {
  margin-top: 16px;
}
body.page-recherche .recherche-empty {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: #666;
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}
body.page-recherche .recherche-group {
  margin-bottom: 36px;
}
body.page-recherche .recherche-group-title {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #666;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.page-recherche .recherche-group-count {
  color: #aaa;
  font-weight: 500;
  margin-left: 4px;
}
body.page-recherche .recherche-result {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.15s;
}
body.page-recherche .recherche-result:hover {
  background: rgba(0,0,0,0.02);
}
body.page-recherche .recherche-result:last-child {
  border-bottom: 0;
}
body.page-recherche .recherche-result-title {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
body.page-recherche .recherche-result-eyebrow {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}
body.page-recherche .recherche-result-desc {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: #444;
}

/* Sur la page recherche en mobile, ajuster le padding du main */
@media (max-width: 768px) {
  body.page-recherche main.recherche-page {
    padding: 28px 24px 48px !important;
  }
  body.page-recherche main.recherche-page h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
  }
  body.page-recherche .lead {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
  body.page-recherche .recherche-input {
    padding: 14px 16px !important;
  }
  body.page-recherche .recherche-result-title {
    font-size: 18px !important;
  }
  body.page-recherche .recherche-result-desc {
    font-size: 15px !important;
  }
}

/* === Tablette portrait (≤ 640px) : ajustements supplémentaires === */

@media (max-width: 640px) {
  .piliers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pilier-card h3 { font-size: 18px !important; }
  .pilier-card-num { font-size: 22px !important; }
}

/* === Très petit mobile (≤ 380px) : 1 colonne pour piliers ======= */

@media (max-width: 380px) {
  .piliers-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   iPad et tablettes portrait/paysage (769 px à 1180 px)
   Largeur intermédiaire : la version desktop affiche déjà bien
   mais la nav est trop dense, le TOC scrolle mal, le padding
   est trop important et le corps de texte trop petit pour la
   lecture confortable. Ces overrides ciblent UNIQUEMENT cette
   plage. Au-dessus de 1180 px, le desktop reste 100% intact.
   ============================================================ */

@media (min-width: 769px) and (max-width: 1180px) {

  /* Header nav : aérer */
  .site-header-inner {
    padding: 20px 28px !important;
    gap: 24px !important;
  }
  .brand {
    flex-shrink: 0 !important;
  }
  .nav {
    gap: 22px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  .site-search-input {
    width: 110px !important;
  }

  /* Layout content : réduire le padding latéral pour gagner de la place */
  .layout {
    padding: 60px 32px 80px !important;
    grid-template-columns: 220px 1fr !important;
    gap: 48px !important;
  }
  main.content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* TOC : forcer sticky avec offset header sticky */
  .toc {
    position: sticky !important;
    top: 110px !important;
    align-self: start !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
  }

  /* Pages spéciales (méthodologie, auteur, contact, mentions) :
     réduire le padding latéral pour mieux occuper l'espace iPad */
  main.content:not(.layout main) {
    max-width: 100% !important;
    padding: 64px 56px !important;
  }
  .page-hero {
    padding: 80px 56px 64px !important;
  }
  .hero {
    padding: 0 !important;
  }
  .hero-inner {
    padding: 60px 56px !important;
    max-width: 100% !important;
  }

  /* Typographie corps : augmenter pour lecture confortable iPad */
  .section p,
  .section li,
  main.content > section > p,
  main.content > section > ul,
  main.content > section > ol,
  main.content > section > ul li,
  main.content > section > ol li,
  main.content > p,
  main.content > ul li {
    font-size: 18px !important;
    line-height: 1.75 !important;
  }
  .section h2,
  main.content > section > h2,
  main.content > h2:not(.section-head h2):not(.angle-left h2) {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .section h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .hero-lead {
    font-size: 19px !important;
    line-height: 1.6 !important;
  }
  .lead {
    font-size: 19px !important;
    line-height: 1.6 !important;
  }
  .section-intro {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
  .pull-quote {
    font-size: 1.45rem !important;
    line-height: 1.6 !important;
  }
  .footer-col a,
  .footer-col p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Trois lectures homepage : 2 colonnes (au lieu de 3 ou 1) */
  .decouvertes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  /* Piliers homepage : 4 colonnes (déjà OK desktop) - on garde */
}