/* =====================================================================
   responsive.css — Optimisation mobile partagée (Maryline SORET)
   ---------------------------------------------------------------------
   PRINCIPE : ce fichier ne contient QUE des règles à l'intérieur de
   media queries « petit écran » (<= 600px et <= 400px) + quelques
   garde-fous anti-débordement universels et inoffensifs.
   => Le rendu ORDINATEUR et TABLETTE (>600px) reste STRICTEMENT identique.
   Lié APRÈS le <style> inline de chaque page : en cas d'égalité de
   spécificité, ces règles mobiles l'emportent.
   ===================================================================== */

/* ---- Garde-fous universels (sans risque desktop) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; }            /* aucun défilement horizontal */
img, svg, iframe, video, table { max-width: 100%; }  /* rien ne dépasse la largeur */
/* Les longs mots/URL/e-mails ne créent pas de débordement horizontal */
p, li, h1, h2, h3, h4, a, .footer-address, .article-body, .legal-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* =====================================================================
   CORRECTIF CIBLÉ — grille personnalisée de la page Contact
   La page Contact utilise une grille inline à 3 colonnes
   (280px 1fr 1fr) avec des enfants placés en dur (grid-column:3, etc.)
   qui ne se réorganisait PAS sur mobile -> contenu coupé.
   On repasse en colonne flex : les placements de grille sont alors
   ignorés et les blocs s'empilent dans l'ordre logique
   (portrait -> infos -> formulaire -> horaires).
   ===================================================================== */
@media (max-width: 768px) {
  .contact-layout,
  .map-layout {
    display: flex !important;
    flex-direction: column;
    gap: 2.5rem !important;
  }
  /* la carte (iframe) repasse au-dessus du bloc adresse, pleine largeur */
  .map-layout > * { width: 100%; }
}

/* Grilles inline « 2 colonnes égales » présentes dans certaines pages
   (détoxication, naturopathie) : passage en 1 colonne sur petit écran
   pour rester lisible (les fr ne débordent pas mais 2 colonnes sont
   trop étroites sur téléphone). */
@media (max-width: 600px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   PALIER 1 — TÉLÉPHONES & GRANDS MOBILES  (<= 600px)
   ===================================================================== */
@media (max-width: 600px) {

  /* --- Navigation : gouttières réduites, plus de place au logo --- */
  .nav-inner { padding: 0 1.2rem; }

  /* --- Suppression du DOUBLE PADDING latéral ---
     Les conteneurs internes gardaient 3rem de chaque côté même sur mobile,
     ce qui écrasait le contenu. La gouttière est désormais portée par
     section.block uniquement. */
  .container,
  .block-inner,
  .naturopathe-inner { padding-left: 0; padding-right: 0; }

  /* --- Rythme vertical des sections resserré --- */
  section.block,
  .naturopathe-section { padding: 3rem 1.2rem; }
  footer { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }

  /* --- Espacement des grilles (déjà en 1 colonne) --- */
  .two-col,
  .contact-grid,
  .naturopathe-inner { gap: 2.5rem; }

  /* --- Bandeaux / héros : hauteurs adaptées au petit écran --- */
  .page-hero { height: 300px; }
  .page-hero-content { padding: 2rem 1.2rem; }
  .page-bandeau { min-height: 130px; padding: 1.8rem 1.2rem; }

  /* --- Cartes & blocs : padding interne réduit pour gagner en largeur utile --- */
  .card, .tarif-card { padding: 1.6rem; }
  .contact-section { padding: 1.6rem; }
  .article-wrap, .legal-wrap { padding: 2.5rem 1.2rem; }
  .blog-card-body { padding: 1.5rem; }
  blockquote { padding: 1.1rem 1.3rem; margin: 2rem 0; }
  .article-highlight { padding: 1.1rem 1.3rem; }

  /* --- Image d'article un peu moins haute pour limiter le scroll --- */
  .article-img { aspect-ratio: 16 / 10; margin-bottom: 2rem; }

  /* --- Confort tactile : boutons --- */
  .btn, .btn-primary, .btn-terra, .btn-outline {
    padding: .9rem 1.7rem;          /* hauteur cible >= 44px */
    min-height: 44px;
  }

  /* --- Pied de page : liens qui passent à la ligne proprement --- */
  .footer-links { flex-wrap: wrap; gap: .9rem 1.4rem; justify-content: center; }

  /* --- Tableau horaires : lisible plein largeur --- */
  .hours-table { font-size: .9rem; }
}

/* =====================================================================
   PALIER 2 — PETITS TÉLÉPHONES  (<= 400px : iPhone SE, petits Android)
   ===================================================================== */
@media (max-width: 400px) {

  .nav-logo { font-size: 1.05rem; }
  .nav-inner { padding: 0 1rem; }

  section.block,
  .naturopathe-section { padding: 2.5rem 1rem; }

  .page-hero { height: 260px; }
  .page-hero-content { padding: 1.6rem 1rem; }
  .page-bandeau { min-height: 110px; padding: 1.5rem 1rem; }

  .article-wrap, .legal-wrap { padding: 2rem 1rem; }
  .card, .tarif-card, .contact-section, .blog-card-body { padding: 1.3rem; }

  /* Typographies les plus grosses légèrement réduites (sous le clamp mini) */
  .blog-card-title { font-size: 1.3rem; }
  .t-price .amt { font-size: 2.2rem; }
  .footer-address { font-size: .78rem; }
  .footer-links a { font-size: .76rem; }
}