/* =====================================================================
   DARNÉO · Mobile (≤ 767 px) — refonte 2026
   Objectif : textes centrés de façon homogène sur toutes les pages,
   listes lisibles, tableaux défilables. Aucun changement desktop.
   Chargé par components/_nav.html (toutes les pages) + index + pages générées.
   ===================================================================== */

/* Tableaux : toujours défilables horizontalement dans leur conteneur */
.overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 767px) {

  /* ---------- Règle générale : contenu centré ---------- */
  main, main section, .article-content,
  main h1, main h2, main h3, main h4, main p,
  section h1, section h2, section h3, section h4, section p {
    text-align: center !important;
  }
  /* Texte justifié des articles (grands espaces sur mobile) → centré */
  .article-content p, .article-content li,
  .article-content.prose p, .article-content.prose li,
  .article-content.prose-lg p, .article-content.prose-lg li {
    text-align: center !important;
    text-justify: auto;
  }

  /* Listes : puce collée au texte (sinon elle reste à gauche, loin du texte centré) */
  main ul:not(.list-none):not([class*="space-y"]):not([role="list"]),
  main ol:not(.list-none),
  .article-content ul, .article-content ol {
    list-style-position: inside;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .article-content li > p { display: inline; }

  /* Listes à icônes (✓, pictos) : bloc centré, lignes centrées */
  main ul[class*="space-y"] > li.flex,
  main ul > li.flex {
    justify-content: center;
    text-align: center;
  }
  main ul[class*="space-y"] > li.flex > span:last-child,
  main ul > li.flex > div { text-align: center; }

  /* Cartes : contenu centré, pictos centrés */
  .home-card, .darneo-card-feature,
  main .rounded-xl.bg-white, main .rounded-2xl.bg-white, main .rounded-2xl.border {
    text-align: center !important;
  }
  .home-card.flex-col, .home-card.flex:not(.flex-row) { align-items: center; }
  .home-card > .material-symbols-outlined,
  main .rounded-xl.bg-white > .material-symbols-outlined { display: flex !important; justify-content: center; margin-left: auto; margin-right: auto; }

  /* Accueil : lignes « picto + texte » (réseau, propriétaires à distance) en colonne centrée */
  body.darneo-home #reseau li.home-card,
  body.darneo-home #mdm li.home-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
  }
  body.darneo-home #mdm .flex.flex-col,
  body.darneo-home #reseau .text-center { align-items: center; }

  /* Accueil : étapes « Comment ça marche » centrées (numéro au-dessus) */
  body.darneo-home .home-process-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
  }

  /* Offres : titre / prix / texte centrés, liste ✓ en bloc centré lisible */
  #offres .home-card, main [id^="offre-"] { align-items: center; }
  main [id^="offre-"] ul { align-self: center !important; text-align: left !important; display: inline-block !important; max-width: 20rem; }
  main [id^="offre-"] ul > li.flex, main [id^="offre-"] ul > li { justify-content: flex-start !important; text-align: left !important; }
  main [id^="offre-"] ul > li > span { text-align: left !important; }
  main [id^="offre-"] a { align-self: stretch; }

  /* Boutons et liens d'action centrés */
  main .flex.flex-col:has(> a), section .flex.flex-col:has(> a) { align-items: stretch; }
  main .flex.flex-wrap { justify-content: center; }

  /* Exceptions : formulaires, FAQ, fil d'Ariane, tableaux restent alignés à gauche */
  form, form *, details p, details summary,
  table, table *, nav[aria-label="Fil d'Ariane"], nav[aria-label="Fil d'Ariane"] * {
    text-align: left !important;
  }
  form .text-center, form button { text-align: center !important; }
  details summary { justify-content: space-between; }

  /* Tableaux : cellules plus compactes */
  table th, table td { padding: .55rem .6rem !important; font-size: .85rem; }
}