/* =====================================================================
   Adaptations responsives (mobile / tablette)
   ---------------------------------------------------------------------
   Les pages sont en styles inline à colonnes/largeurs fixes (export Claude
   Design). On ne cible QUE des sélecteurs fiables — éléments (header, nav),
   noms de propriété CSS ([style*="grid-template-columns"]) et attribut src —
   car le runtime re-sérialise les valeurs de style inline. Le rendu bureau
   reste inchangé : les overrides ne s'appliquent qu'en dessous de 860px.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Garde-fou : aucun défilement horizontal. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Médias fluides. */
img, iframe { max-width: 100%; }

/* Grandes images de contenu (photo héro + fresque des âges) : hauteur
   proportionnelle au lieu d'une hauteur figée qui les écrase quand la largeur
   rétrécit. La largeur est déjà bornée par max-width:100% ci-dessus. */
img[src*="znumywujzgg69c8m1lup"],
img[src*="fresque-ages"] { height: auto !important; }

@media (max-width: 860px) {
  /* Header : empiler le logo au-dessus du menu, menu centré et compact. */
  header { flex-direction: column !important; gap: 14px !important; padding: 18px 5vw !important; }
  header nav { justify-content: center !important; }
  header nav a { font-size: 15px !important; }

  /* Empiler toutes les grilles multi-colonnes en une seule colonne. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Autoriser le repli des rangées flex : sans ça, une rangée trop large
     (ex. les stats du héros D.O. / Tous âges / Techniques douces) impose une
     largeur > écran et fait déborder toute la section. */
  [style*="display: flex"] { flex-wrap: wrap !important; }

  /* Cadre décoratif derrière la photo héro : hauteur figée (597px) qui
     déborde sur la section suivante → masqué sur mobile. La photo reste. */
  [style*="height: 597px"] { display: none !important; }

  /* CTA "Prendre rendez-vous" de l'en-tête : plus compact sur mobile
     (allège le bloc foncé sans retirer l'appel à l'action principal). */
  header nav a[href*="doctolib"] { padding: 8px 18px !important; font-size: 14px !important; }

  /* Stats du héros (D.O. / Tous âges / Techniques douces) : empilées
     verticalement, séparateurs verticaux 1px masqués (inutiles à la verticale). */
  .hero-stats { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
  .hero-stats > div[style*="width: 1px"] { display: none !important; }
}