/* EOCHE : Confort mobile du blog (2026-08-14, audit UX mobile).
   Charge par blog/index.html et par chaque article, APRES portfolio.css et
   blog.css : ce fichier ne fait que surcharger, les deux fichiers d'origine
   restent intouchables (ils sont cites par les articles deja en production).

   Ce qu'il corrige :
   1. Sous 640 px, portfolio.css passait la navigation en grille 2 colonnes
      pleine largeur : 288 px de menu avant le titre de l'article, soit la
      moitie du premier ecran pour un visiteur venu de Google. La navigation
      devient une rangee defilante au doigt d'environ 50 px.
   2. Cibles tactiles : boutons a 44 px minimum, lien retour agrandi.
   3. Tailles de lecture : FAQ d'article et teasers de cartes a 16 px.
   4. Meme regime zero animation mobile que le reste du site. */

/* ── 1. Navigation compacte sous 640 px ── */
@media (max-width: 640px) {
  .portfolio-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .portfolio-nav::-webkit-scrollbar { display: none; }
  .portfolio-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .portfolio-nav .portfolio-button {
    grid-column: auto !important;
    width: auto !important;
  }
}

/* ── 2. Cibles tactiles ── */
.portfolio-button { min-height: 44px; }
.portfolio-button:active { filter: brightness(0.9); }
.portfolio-nav a:active { filter: brightness(0.82); }
.article-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── 3. Tailles de lecture ── */
.article-faq__item p { font-size: 16px; }
.blog-card p { font-size: 16px; }

/* ── 4. Zero animation sur mobile (meme regime que overrides) ── */
@media (max-width: 1024px) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── Page courante dans la navigation ── */
.portfolio-nav a[aria-current="page"],
.portfolio-nav a[aria-current="true"] {
  border-color: rgba(253, 58, 37, 0.4);
}