/* ════════════════════════════════════════════════════════════════
   RESPONSIVE CADRIA — règles mobile globales (1er mai 2026)
   Chargé après _nav.css et _footer.css, override !important
   ════════════════════════════════════════════════════════════════ */

/* ─── BREAKPOINT 1100px : tablette, sous-menus ouvrent en accordéon ─── */
@media (max-width: 1100px) {
  /* First-bar compacte */
  .first-bar {
    padding: 10px 16px !important;
    font-size: 10.5px !important;
    letter-spacing: 1.5px !important;
    gap: 10px !important;
    line-height: 1.45;
  }
  .first-bar .star {
    width: 16px !important; height: 16px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  .first-bar .fb-long { display: none !important; }
  .first-bar .fb-short { display: inline !important; }
  
  /* Hero pivot index : 1 colonne sur tablette/mobile */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 50px 24px 70px !important;
    gap: 36px !important;
  }
  .hero-right { order: 2; margin-top: 8px; }
  .pivot-h1 { font-size: clamp(2rem, 6vw, 3.5rem) !important; }
  .pivot-h1 .past { font-size: 0.7em !important; line-height: 1.15 !important; }
  .pivot-h1 .now { font-size: 1em !important; line-height: 1.05 !important; }
  
  /* Promesses pivot : 1 colonne sur tablette */
  .pivot-promises { grid-template-columns: 1fr 1fr !important; gap: 8px 16px !important; }
  
  /* Cockpit photo */
  .cockpit-block { max-width: 100% !important; padding: 14px !important; }
  
  /* Formats (Flash/Standard/Profond) compactés */
  .formats { gap: 12px !important; }
  .fmt { padding: 14px !important; }
  .fmt-time { font-size: 1.6rem !important; }
  
  /* Actions : boutons moins larges */
  .actions { flex-direction: column; align-items: stretch; gap: 12px !important; }
  .btn { width: 100% !important; text-align: center !important; }
  .btn-stack { width: 100% !important; }
}

/* ─── BREAKPOINT 700px : mobile ─── */
@media (max-width: 700px) {
  /* First-bar ULTRA compacte */
  .first-bar {
    padding: 8px 12px !important;
    font-size: 9.5px !important;
    letter-spacing: 1.2px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    line-height: 1.4;
  }
  .first-bar .star {
    width: 12px !important; height: 12px !important;
    font-size: 10px !important;
  }
  .first-bar > span:not(.star) {
    flex: 1; text-align: center;
    font-size: 9.5px !important;
    letter-spacing: 1.2px !important;
  }
  
  /* Topnav compact */
  .topnav { padding: 14px 16px !important; }
  
  /* Hero plus compact */
  .hero { padding: 40px 18px 50px !important; gap: 28px !important; }
  .hero-left { gap: 0 !important; }
  
  /* Reg-alert slim */
  .reg-alert-slim {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
  .reg-alert-slim .reg-text { font-size: 11px !important; min-width: 0 !important; }
  
  /* Pivot text plus serré */
  .pivot-overline { font-size: 0.95rem !important; line-height: 1.5 !important; padding-left: 12px !important; }
  .pivot-h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  .pivot-h1 .past { font-size: 0.65em !important; }
  .pivot-lead { font-size: 1.05rem !important; line-height: 1.45 !important; margin: 20px 0 16px !important; }
  
  /* Promesses : 1 colonne */
  .pivot-promises { grid-template-columns: 1fr !important; gap: 8px !important; }
  
  .pivot-signature { font-size: 0.95rem !important; padding-top: 14px !important; }
  
  /* Sections internes : padding réduit, grilles 1 colonne */
  .section { padding: 50px 18px !important; }
  .s-h { font-size: clamp(1.8rem, 5vw, 2.6rem) !important; line-height: 1.15 !important; }
  .s-sub { font-size: 1rem !important; }
  
  /* Profil hero */
  .prof-hero { padding: 60px 18px 50px !important; }
  .prof-hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; line-height: 1.15 !important; }
  .hero-sub { font-size: 1rem !important; line-height: 1.55 !important; }
  
  .prof-inner { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 !important; }
  
  /* Disclaimer périmètre */
  .hero-perimetre { font-size: 10px !important; padding-left: 10px !important; line-height: 1.5 !important; }
  
  /* Grilles internes : 1 colonne */
  .situations-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .situation-card { padding: 18px !important; }
  .situation-card p { font-size: 0.95rem !important; line-height: 1.55 !important; }
  
  .changes-list { gap: 18px !important; }
  .change-item { padding: 18px 16px !important; }
  .change-item h3 { font-size: 1.15rem !important; line-height: 1.25 !important; }
  .change-item p { font-size: 0.95rem !important; line-height: 1.55 !important; }
  .change-num { font-size: 2rem !important; }
  
  .outputs-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .output-box { padding: 18px !important; }
  .output-box h4 { font-size: 1.1rem !important; line-height: 1.25 !important; }
  .output-box p { font-size: 0.95rem !important; line-height: 1.5 !important; }
  
  /* Hub profils.html : grid 1 colonne */
  .profils-grid { grid-template-columns: 1fr !important; gap: 14px !important; padding: 0 18px !important; }
  .profil-card { padding: 22px 18px !important; }
  .profil-card h2 { font-size: 1.4rem !important; }
  .profil-pitch { font-size: 0.95rem !important; line-height: 1.45 !important; }
  .profil-num-badge { font-size: 2.6rem !important; }
  
  /* CTA section */
  .cta-section { padding: 50px 18px !important; }
  .btn-group { flex-direction: column !important; gap: 12px !important; }
  .btn-group .btn { width: 100% !important; text-align: center !important; }
  
  /* profils-nav (autres profils / autres villes) */
  .profils-nav { padding: 24px 18px !important; }
  .profils-nav-inner { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .profil-links { flex-wrap: wrap !important; gap: 8px !important; }
  .profil-link { font-size: 11px !important; padding: 6px 10px !important; }
  
  /* Filter-bar (hub profils) */
  .filter-inner {
    padding: 12px 18px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .filter-label {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(201,164,82,0.25) !important;
    margin-bottom: 6px !important;
  }
  .filter-btn { font-size: 9.5px !important; padding: 7px 10px !important; letter-spacing: 1.2px !important; }
  
  /* Genese timeline */
  .timeline { padding-left: 24px !important; }
  .tl-item { padding: 22px 0 28px 16px !important; }
  .tl-item::before { left: -34px !important; width: 12px !important; height: 12px !important; }
  .tl-title { font-size: 1.4rem !important; }
  .tl-desc { font-size: 1rem !important; line-height: 1.6 !important; }
  
  /* Footer compact (déjà dans _footer.css mais on assure) */
  footer.cadria-footer { padding: 50px 18px 30px !important; }
  footer.cadria-footer .foot-h { font-size: 1.6rem !important; margin-bottom: 30px !important; }
  footer.cadria-footer .foot-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  footer.cadria-footer .foot-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    margin: 30px auto 0 !important;
  }
  
  /* Hero credentials index */
  .hero-credentials { font-size: 9.5px !important; letter-spacing: 1.2px !important; }
}

/* ─── BREAKPOINT 480px : très petit mobile ─── */
@media (max-width: 480px) {
  .first-bar {
    padding: 7px 10px !important;
    font-size: 8.5px !important;
    letter-spacing: 1px !important;
  }
  .first-bar > span:not(.star) {
    font-size: 8.5px !important;
    letter-spacing: 1px !important;
  }
  .first-bar .star { width: 10px !important; height: 10px !important; font-size: 9px !important; }
  
  .topnav { padding: 12px 14px !important; }
  
  .hero { padding: 30px 14px 40px !important; }
  .section { padding: 40px 14px !important; }
  .prof-hero { padding: 50px 14px 40px !important; }
  
  .pivot-h1 { font-size: 1.7rem !important; }
  .s-h { font-size: 1.6rem !important; }
  .prof-hero h1 { font-size: 1.7rem !important; }
  
  .hero-sub { font-size: 0.95rem !important; }
}