/* ════════════════════════════════════════════════════════════════
   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; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE CONTACT : règles mobile renforcées (5 mai 2026)
   Charge global, override le inline. Garantit le rendu mobile
   même si le <style> inline a une cascade imprévue.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  /* Frontispiece compactée */
  .frontispiece { padding: 50px 22px 36px !important; }
  .fp-h { font-size: clamp(2.4rem, 7vw, 4rem) !important; line-height: 1.05 !important; letter-spacing: -1.5px !important; }
  .fp-eyebrow::before, .fp-eyebrow::after { width: 32px !important; }
  .fp-eyebrow { font-size: 9.5px !important; letter-spacing: 2.5px !important; gap: 10px !important; margin-bottom: 18px !important; }

  /* Contact-section compactée */
  .contact-section { padding: 40px 18px 80px !important; }
  .contact-inner {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    max-width: 100% !important;
  }
  .contact-info { position: static !important; top: auto !important; }
  .ci-block { padding: 24px 22px !important; margin-bottom: 14px !important; }

  /* Form-card en pleine largeur */
  .form-card { padding: 30px 22px 28px !important; }
  .fields { grid-template-columns: 1fr !important; gap: 16px !important; }
  .subject-options { grid-template-columns: 1fr !important; }
  .form-card form .field input,
  .form-card form .field textarea,
  .form-card form .field select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .form-card form textarea { min-height: 140px !important; }

  /* Bouton submit pleine largeur sur mobile */
  .form-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .btn-submit { width: 100% !important; justify-content: center !important; }
  .form-note { text-align: center !important; }
}

@media (max-width: 700px) {
  .frontispiece { padding: 40px 16px 30px !important; }
  .fp-h { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .fp-sub { font-size: 1.1rem !important; line-height: 1.5 !important; }

  .contact-section { padding: 30px 14px 70px !important; }
  .contact-inner { gap: 22px !important; }
  .ci-block { padding: 20px 16px !important; }
  .ci-h { font-size: 1.4rem !important; }
  .ci-quote { font-size: 1.1rem !important; }
  .ci-list li { padding: 12px 0 !important; gap: 10px !important; }

  .form-card { padding: 24px 16px 22px !important; }
  .form-h { font-size: 1.9rem !important; line-height: 1.1 !important; }
  .form-sub { font-size: 1rem !important; }
  .form-card form .field input,
  .form-card form .field textarea,
  .form-card form .field select {
    font-size: 16px !important; /* >=16px évite le zoom auto iOS */
    padding: 12px 14px !important;
  }
  .subject-opt label { font-size: 0.95rem !important; padding: 12px 14px !important; }
  .consent { padding: 14px 16px !important; font-size: 0.95rem !important; }
  .btn-submit { padding: 16px 24px !important; font-size: 12.5px !important; }
}

@media (max-width: 480px) {
  .frontispiece { padding: 30px 12px 24px !important; }
  .contact-section { padding: 24px 10px 60px !important; }
  .ci-block { padding: 16px 14px !important; }
  .form-card { padding: 20px 14px !important; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE INDEX : section M.A.U.F.R.A.S. — briques compactes mobile
   (5 mai 2026, 14h45 — fix Stéphane "blocs énormes sur mobile")
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .maufras-section { padding: 60px 22px !important; }
  .maufras-h { font-size: clamp(2.4rem, 7vw, 4.4rem) !important; letter-spacing: -1.5px !important; margin-bottom: 16px !important; }
  .maufras-sub { font-size: 1.15rem !important; line-height: 1.5 !important; margin-bottom: 36px !important; }
  .bricks { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; max-width: 100% !important; }
  .brick { padding: 14px 8px !important; aspect-ratio: 0.85 !important; }
  .brick .letter { font-size: 2rem !important; }
  .brick .name { font-size: 0.95rem !important; }
  .brick .resp { font-size: 7.5px !important; letter-spacing: 1.2px !important; }
}

@media (max-width: 700px) {
  .maufras-section { padding: 50px 16px !important; }
  .maufras-eyebrow { font-size: 9px !important; letter-spacing: 2.8px !important; }
  .maufras-h { font-size: clamp(2rem, 8vw, 3.2rem) !important; letter-spacing: -1px !important; }
  .maufras-sub { font-size: 1.02rem !important; max-width: 100% !important; padding: 0 4px !important; margin-bottom: 28px !important; }
  .bricks { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .brick { padding: 12px 6px !important; aspect-ratio: 0.95 !important; gap: 6px !important; }
  .brick .letter { font-size: 1.7rem !important; }
  .brick .name { font-size: 0.88rem !important; line-height: 1.1 !important; }
  .brick .resp { font-size: 7px !important; letter-spacing: 1px !important; }
}

@media (max-width: 480px) {
  .maufras-section { padding: 40px 12px !important; }
  .maufras-h { font-size: 2rem !important; letter-spacing: -0.5px !important; }
  .maufras-sub { font-size: 0.95rem !important; }
  .bricks { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .brick { aspect-ratio: 1.1 !important; padding: 14px 8px !important; }
  .brick .letter { font-size: 1.9rem !important; }
  .brick .name { font-size: 0.92rem !important; }
}