/* ================================================
   ARTICLE MOBILE — article-mobile.css
   Projet : E-KOULIBA
   Auteur : Axelle
   ================================================ */

/* -----------------------------------------------
   MODAL ARTICLE — Responsive mobile
----------------------------------------------- */
@media (max-width: 768px) {

  /* ---- Overlay plein écran ---- */
  .article-overlay {
    padding: 70px 12px 40px; /* ← 70px top = descend sous la navbar */
    align-items: flex-start;
  }

  /* ---- Panneau article ---- */
  .article-panel {
    padding: 24px 20px;
    border-radius: 16px;
    max-width: 100%;
  }

  /* ---- En-tête : label + bouton X ---- */
  .article-panel__header {
    margin-bottom: 14px;
  }

  /* ---- Titre article ---- */
  .article-panel__title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  /* ---- Méta : date + durée en colonne ---- */
  .article-panel__meta {
    flex-direction: column;
    gap: 6px;
    font-size: 0.75rem;
    margin-bottom: 14px;
  }

  /* ---- Séparateur ---- */
  .article-panel__sep {
    margin: 14px 0 20px;
  }

  /* ---- Citation intro ---- */
  .article-quote {
    font-size: 0.82rem;
    padding: 12px 16px;
    margin-bottom: 24px;
    line-height: 1.65;
  }

  /* ---- Sections article ---- */
  .article-section {
    margin-bottom: 24px;
  }

  .article-section__title {
    font-size: 0.95rem;
    padding-left: 12px;
    margin-bottom: 10px;
  }

  .article-section__text {
    font-size: 0.82rem;
    line-height: 1.7;
  }

  /* ---- Encarts liste + conseil ---- */
  .article-box {
    padding: 14px 16px;
  }

  .article-box__title {
    font-size: 0.82rem;
  }

  .article-box__text {
    font-size: 0.80rem;
  }

  /* ---- Liste items ---- */
  .article-list li {
    font-size: 0.80rem;
  }

  .article-bullets li {
    font-size: 0.80rem;
    padding: 9px 0 9px 22px;
  }

  /* ---- Bloc code — scroll horizontal ---- */
  .article-code {
    padding: 16px 14px;
    overflow-x: auto;
  }

  .article-code p {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* ---- Conclusion ---- */
  .article-conclusion {
    padding: 20px 18px;
  }

  .article-conclusion__title {
    font-size: 0.9rem;
  }

  .article-conclusion__text {
    font-size: 0.82rem;
    line-height: 1.7;
  }

  /* ---- Supprime hover desktop sur tactile ---- */
  @media (hover: none) {

    .article-box:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    .article-conclusion:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    .article-list li:hover {
      padding-left: 16px !important;
      color: var(--color-text-secondary) !important;
    }

    .article-bullets li:hover {
      padding-left: 22px !important;
      background-color: transparent !important;
    }

    .article-section__title:hover {
      padding-left: 12px !important;
    }

  }

}