/* ============================================================
   Solden — Global fixes (injecté dans toutes les pages)
   ============================================================ */

/* Empêche le scroll horizontal sur iOS Safari + tous navigateurs */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* ============================================================
   Règle les trous gris dans les grilles 1px-gap
   ============================================================ */

/* 2-col grids : dernier enfant seul dans sa rangée → s'étire */
.related-grid .rel-card:last-child:nth-child(odd),
.response-grid .response-cell:last-child:nth-child(odd),
.related-sectors .related-card:last-child:nth-child(odd) {
  grid-column: span 2;
}

/* 3-col grids : 1 seul dans sa rangée → s'étire sur 3 */
.sectors-grid .sector-card:last-child:nth-child(3n+1),
.verdict-grid .verdict-cell:last-child:nth-child(3n+1) {
  grid-column: span 3;
}

/* 3-col grids : 2 dans sa rangée → le dernier s'étire sur 2 */
.sectors-grid .sector-card:last-child:nth-child(3n+2),
.verdict-grid .verdict-cell:last-child:nth-child(3n+2) {
  grid-column: span 2;
}

/* ============================================================
   Footer standard — toutes les pages
   ============================================================ */
footer { background: #0a0e1a; display: block; }

.footer-top {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 48px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(246,243,236,0.08);
  min-height: 80px;
}

.footer-brand {
  position: absolute;
  left: 48px;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.footer-brand .brand-dot { color: #4f46e5; }

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(246,243,236,0.5);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}

.footer-nav a:hover { color: #ffffff; }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 48px;
  display: block;
  text-align: center;
}

.footer-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(246,243,236,0.25);
}

/* ============================================================
   .grid-2col — classe pour les grilles 2 colonnes responsives
   Remplace les inline style="display:grid;grid-template-columns:1fr 1fr"
   ============================================================ */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

/* ============================================================
   RESPONSIVE MOBILE — s'applique à toutes les pages
   global.css est chargé après les <style> inline → cascade OK
   ============================================================ */

/* ---- 900px ---- */
@media (max-width: 900px) {

  /* Padding de base */
  :root { --pad: 24px; }

  /* Footer fixe */
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 24px 24px;
    min-height: unset;
  }
  .footer-brand { position: static; }
  .footer-nav { justify-content: flex-start; }
  .footer-bottom { text-align: left; padding: 12px 24px; }

  /* Footer inline (autre variante, certaines pages) */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Nav hamburger */
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #f5f3ff;
    border-top: 2px solid rgba(79,70,229,0.18);
    border-bottom: 1px solid rgba(79,70,229,0.12);
    padding: 8px 0;
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 12px var(--pad); width: 100%; }
  .dropdown-trigger {
    padding: 12px var(--pad);
    width: 100%;
    justify-content: flex-start;
  }
  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-top: 1px solid rgba(13,17,23,0.10);
    min-width: 0;
    background: #f5f3ff;
  }
  .dropdown-menu a { padding-left: calc(var(--pad) + 16px); }
  .nav-links .btn-cta { margin: 8px var(--pad); align-self: flex-start; }

  /* Hero CTA stack */
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Sections — réduction padding */
  section { padding: 72px var(--pad); }
  .page-hero { padding: 56px var(--pad) 72px; }
  .article-hero { padding: 48px var(--pad) 40px; }
  .article-body { padding: 48px var(--pad); }
  .related-block { padding: 48px var(--pad); }
  .cta-art { padding: 56px var(--pad); }
  .s-manifesto { padding: 72px var(--pad) 0; }

  /* Tables scrollables */
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Grilles class-based → 1 colonne */
  .grid-2col { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .diff-cell { padding: 28px 24px; }
  .sectors-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .response-grid { grid-template-columns: 1fr; }
  .verdict-grid { grid-template-columns: 1fr; }
  .related-sectors { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; border-left: none; }
  .stat-cell { border-left: 1px solid rgba(13,17,23,0.10); }

  /* Grilles 4-col → 2-col */
  .principles { grid-template-columns: repeat(2, 1fr); }
  .principle:nth-child(2) { border-right: none; }
  .principle:nth-child(3),
  .principle:nth-child(4) { border-top: 1px solid rgba(13,17,23,0.10); }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-step:nth-child(2) { border-right: none; }
  .process-step:nth-child(3),
  .process-step:nth-child(4) { border-top: 1px solid rgba(13,17,23,0.10); }

  /* Annule les span sur grilles qui sont maintenant 1-col */
  .related-grid .rel-card:last-child:nth-child(odd),
  .response-grid .response-cell:last-child:nth-child(odd),
  .related-sectors .related-card:last-child:nth-child(odd),
  .sectors-grid .sector-card:last-child:nth-child(3n+1),
  .verdict-grid .verdict-cell:last-child:nth-child(3n+1),
  .sectors-grid .sector-card:last-child:nth-child(3n+2),
  .verdict-grid .verdict-cell:last-child:nth-child(3n+2) {
    grid-column: auto;
  }

  /* Typographie — premiers overrides mobile */
  .page-hero .lede { font-size: 17px; }
  p.intro { font-size: 17px; }
  .pain-content h3 { font-size: 18px; }
}

/* ---- 560px ---- */
@media (max-width: 560px) {

  :root { --pad: 20px; }

  /* Sections */
  section { padding: 56px var(--pad); }
  .page-hero { padding: 40px var(--pad) 28px; }
  .article-hero { padding: 32px var(--pad) 24px; }
  .article-body { padding: 32px var(--pad); }
  .related-block { padding: 32px var(--pad); }
  .cta-art { padding: 40px var(--pad); }
  .s-manifesto { padding: 56px var(--pad) 0; }

  /* H1/H2 — hiérarchie portrait 375px */
  .hero h1 {
    font-size: clamp(38px, 10.5vw, 46px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
  }
  .hero h1 .em {
    font-size: 1.04em;
    color: var(--indigo);
    letter-spacing: -0.03em;
  }
  .page-hero h1    { font-size: clamp(26px, 8vw, 44px); }
  .article-hero h1 { font-size: clamp(22px, 7.5vw, 34px); }
  .contact-left h1 { font-size: clamp(26px, 8vw, 40px); }
  h2               { font-size: clamp(22px, 7vw, 36px); font-weight: 400; }
  p.intro, .lede   { font-size: 17px; }
  .faq-q           { font-size: 16px; padding: 20px 0; }
  .pain-content h3 { font-size: 16px; }
  .ob-content h3   { font-size: 18px; }
  .rule-title      { font-size: 17px; }

  /* Grilles 2-col → 1-col */
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: none; border-top: 1px solid rgba(13,17,23,0.10); }
  .principle:first-child { border-top: none; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-top: 1px solid rgba(13,17,23,0.10); }
  .process-step:first-child { border-top: none; }

  /* process-hero (fonctionnement) → 1 colonne */
  .process-hero { grid-template-columns: 1fr !important; }
  .ph-step { padding: 20px 16px; border-right: none !important; border-top: 1px solid rgba(13,17,23,0.10); }
  .ph-step:first-child { border-top: none; }

  /* Rule-items (tarifs) */
  .rule-item { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .rule-num { padding-top: 0; }

  /* Composants — padding réduit */
  .phase-card     { padding: 24px 20px; }
  .dash-cell      { padding: 20px 16px; }
  .highlight-note { padding: 20px; }
  .cs-cell        { padding: 24px 16px; }
  .form-card      { padding: 24px 20px; }

  /* Contact */
  .contact-wrap { padding-bottom: 64px; }

  /* Boutons — taille tactile minimum */
  .btn-cta { min-height: 48px; font-size: 16px; }

  /* Mid-page CTA bar */
  .mid-cta-inner { flex-direction: column; align-items: flex-start; }

  /* Hero */
  .hero { padding-top: 40px; }
  .hero-proof { margin-bottom: 40px; }
  .hero-bridge { margin: 20px 0 26px; }

  /* Brand — plus lisible sur mobile */
  .brand { font-size: 24px !important; }

  /* Hero kicker (typewriter) — centré + wrap */
  .hero-kicker {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 4px 10px; font-size: 9.5px; margin-bottom: 20px;
  }
  .hero-kicker::before { display: none; }
  #tw-text { display: inline; max-width: 100%; }

  /* Hero homepage — centré portrait */
  .hero h1, .hero .hero-bridge { text-align: center; }
  .hero .lede { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-ctas { align-items: center; }
  .hero-proof { text-align: center; }

  /* Page-hero secteurs — centré portrait */
  .page-hero h1 { text-align: center; }
  .page-hero .lede { text-align: center; margin-left: auto; margin-right: auto; }

  /* CRITIQUE — margin parasite @900px non scopé au nav, décale tous les .btn-cta */
  .hero-ctas .btn-cta,
  .hero-ctas .btn-secondary,
  .s-cta .btn-cta,
  .mid-cta-inner .btn-cta { margin-left: 0 !important; margin-right: 0 !important; }

  /* CRITIQUE — "Règlement automatique" déborde (.ct-node en row sans wrap) */
  .ct-node { flex-wrap: wrap !important; }
  .ct-annotation { width: 100% !important; padding-left: 0 !important; margin-top: 6px !important; }
  .ct-anno-text { white-space: normal !important; font-size: 14px !important; transform: none !important; }

  /* Mid-cta-bar — centré sur portrait */
  .mid-cta-inner { align-items: center !important; text-align: center; }

  /* Constat-stats — centré en colonne */
  .constat-stats .cs-cell { text-align: center; align-items: center; }
  .constat-stats .cs-label { margin-left: auto; margin-right: auto; }

  /* Cards — centrées sur portrait */
  .diff-cell { text-align: center; }
  .diff-cell .diff-num { display: block; }
  .sector-card { text-align: center; align-items: center; }

  /* Hero dashboard — colonnes resserrées */
  .hero-dashboard__row { grid-template-columns: 60px 1fr auto !important; font-size: 12px; }
  .hero-dashboard__amount { font-size: 11px; min-width: 0; }

  /* Compare-table — force le scroll horizontal (4 colonnes) */
  .compare-table { min-width: 640px; }
  .compare-wrap { max-width: 100%; }

  /* Footer — centré portrait */
  .footer-top { align-items: center !important; text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-bottom { text-align: center !important; }
}