/* ============================================================
   ismAI — mobile.css
   Corrections responsive + Navigation mobile inter-articles
   ============================================================ */

/* ── 0. NAV DESKTOP — breakpoint intermédiaire (1100px) ──────
   7 liens + brand + contrôles saturent la nav sur ~1024-1100px.
   On compresse gap et padding avant de basculer en mobile.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 761px) {
  nav {
    padding: 14px 24px !important;
  }
  .nav-links {
    gap: 14px !important;
  }
  .nav-links a {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
}

/* ── 1. BASE MOBILE FIXES ──────────────────────────────────── */
@media (max-width: 760px) {

  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .flow,
  .filter-chain,
  .terminal,
  .crm,
  .arch,
  .aflow,
  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 11.5px !important;
    line-height: 1.9 !important;
    padding: 20px 16px !important;
    word-break: normal;
    white-space: pre;
  }

  .airtable-snap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .airtable-table { min-width: 560px; }

  .opening {
    padding: 20px 18px !important;
    font-size: 16px !important;
    border-left-width: 3px;
  }

  .lead      { font-size: 16px !important; padding-left: 16px; }
  .pq        { font-size: 17px !important; padding-left: 18px; }
  .vision, .teaser { padding: 24px 18px !important; }
  .box       { padding: 20px 18px !important; }

  .stats            { grid-template-columns: 1fr 1fr !important; }
  .toc-list         { grid-template-columns: 1fr !important; }
  .bio              { grid-template-columns: 1fr !important; }
  .compare          { grid-template-columns: 1fr !important; }
  .duality, .level-row, .level { grid-template-columns: 1fr !important; }
  .threats, .ba     { grid-template-columns: 1fr !important; }
  .threat-card.full { grid-column: 1 !important; }
  .era-compare      { grid-template-columns: 1fr !important; }
  .aflow-row        { grid-template-columns: 1fr !important; }
  .jobcard-row      { grid-template-columns: 1fr !important; }
  .crm-field        { grid-template-columns: 1fr !important; }
  .archi-row        { grid-template-columns: 1fr !important; }

  .arch-row   { flex-direction: column !important; }
  .arch-arrow { transform: rotate(90deg); height: 20px !important; width: auto !important; margin: 0 auto; }

  .continuum         { flex-direction: column !important; gap: 20px !important; }
  .continuum::before { display: none !important; }

  .msg      { flex-direction: column; gap: 4px; }
  .msg-from { min-width: auto !important; }
  .log-src  { min-width: 80px !important; font-size: 10px !important; }

  .editorial-img img { height: 200px !important; }
  .article-img img   { max-width: 100%; height: auto !important; }

  footer {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    padding: 28px 20px !important;
  }
  .footer-links, .f-links { flex-wrap: wrap; justify-content: center; }

  .hero-banner { padding: 48px 20px 40px !important; }
  .body        { padding: 40px 16px 60px !important; }

  .meta-bar  { flex-wrap: wrap; gap: 12px; }
  .read-time { margin-left: 0 !important; width: 100%; }

  .lang-btn { padding: 10px 14px !important; min-height: 44px; }

  .card        { padding: 24px 20px !important; }
  .section     { padding: 40px 16px !important; }
  .hero        { padding: 56px 16px 48px !important; }
  .hero-stats  { display: none !important; }
  .about       { padding: 40px 16px !important; }
  .about-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .xp          { grid-template-columns: 1fr !important; }
  .nl-wrap     { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 16px !important; }

}

/* ── 2. NAVIGATION MOBILE ENTRE ARTICLES ──────────────────── */
/*
   Placée dans le HTML juste après <nav> (dans le flux).
   Sur mobile : sticky top:0, z-index 99 (sous la nav site z-index:100).
   Sur desktop : display:none — la version desktop en fin d'article prend le relais.
*/

.art-nav {
  display: none;
}

@media (max-width: 760px) {

  .art-nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 46px;
    align-items: stretch;
    background: rgba(11, 13, 11, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(200, 168, 75, 0.20);
  }

  .art-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #9a9490;
    padding: 0 8px;
    min-height: 44px;
    transition: color .15s, background .15s;
    border: none;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
  }

  .art-nav-btn:active {
    color: #c8a84b;
    background: rgba(200, 168, 75, 0.10);
  }

  .art-nav-btn.disabled {
    opacity: 0.22;
    pointer-events: none;
  }

  .art-nav-center {
    flex: 0 0 48px;
    border-left:  1px solid rgba(200, 168, 75, 0.15);
    border-right: 1px solid rgba(200, 168, 75, 0.15);
    font-size: 17px !important;
    letter-spacing: 0 !important;
  }

  .art-nav-arrow {
    font-size: 13px;
    flex-shrink: 0;
  }

  .art-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 88px;
    display: inline-block;
  }

}

/* ── 3. VERSION DESKTOP (fin d'article) ───────────────────── */

.art-nav-desktop { display: none; }

@media (min-width: 761px) {
  .art-nav-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 24px 0;
    border-top: 1px solid var(--border, #e0dbd4);
    gap: 16px;
  }

  .art-nav-desktop a,
  .art-nav-desktop span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted, #9a9490);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
    padding: 8px 0;
  }

  .art-nav-desktop a:hover { color: var(--acc, #c8a84b); }

  .art-nav-desktop .center-link {
    color: var(--acc, #c8a84b);
    border: 1px solid rgba(200, 168, 75, 0.3);
    padding: 8px 16px;
  }
  .art-nav-desktop .center-link:hover {
    background: rgba(200, 168, 75, 0.06);
  }

  .art-nav-desktop .disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
  }
}

/* ── FIX LANG : la nav unique utilise span.fr / span.en
   Les règles html[data-lang] sont posées dans chaque <style> inline
   + dans le snippet <head>. Ici on s'assure juste que .art-nav
   reste en display:flex quelle que soit la langue. ────────── */
@media (max-width: 760px) {
  /* La nav est UNIQUE — plus de doublon fr/en — donc pas de conflit */
  .art-nav {
    display: flex !important;
  }
  /* Les span.fr / span.en à l'intérieur sont gérés par les règles html[data-lang] */
}