/* =============================================
   PAGE 3 — responsive3.css
   Responsive pour la page À propos
   ============================================= */

/* =============================================
   <= 1440px
   ============================================= */
@media (max-width: 1440px) {
  .ext-section,
  .mkt-section,
  .defi-section,
  .modele-section,
  .strat-section,
  .focused-section,
  .hubs-section,
  .capa-section {
    width: 100%;
    max-width: 100%;
  }
}

/* =============================================
   TABLETTE (max 1024px)
   ============================================= */
@media (max-width: 1024px) {

  /* ---- Header ---- */
  .nav { display: none !important; }
  .header-cta .btn-outline-dark,
  .header-cta .btn-dark { display: none !important; }
  .hamburger { display: flex !important; }

  /* ---- Hero ---- */
  .hero-content { flex-direction: column; padding: 40px 24px 48px; gap: 40px; }
  .p2-title { width: 100%; font-size: 48px; }
  .p2-desc { width: 100%; }
  .p2-photo-wrap { width: 100%; height: 360px; }
  .p2-photo { width: 100%; height: 100%; }

  /* ---- Extension ---- */
  .ext-section { flex-direction: column; padding: 60px 32px; gap: 32px; }
  .ext-col1 { flex: none; width: 100%; }
  .ext-title { width: 100%; font-size: 32px; }
  .ext-desc { width: 100%; }
  .ext-card { width: 100%; height: auto; }
  .ext-card--blue { padding: 28px 24px; }

  /* ---- Marketplace ---- */
  .mkt-section { padding: 60px 32px; }
  .mkt-title { width: 100%; font-size: 32px; }
  .mkt-grid { flex-direction: column; align-items: stretch; }
  .mkt-card { width: 100%; height: auto; }
  .mkt-card--photo { height: 260px; }

  /* ---- Défi ---- */
  .defi-section { padding: 60px 32px; }
  .defi-title { width: 100%; font-size: 32px; }
  .defi-cards { flex-wrap: wrap; justify-content: center; }
  .defi-card { width: calc(50% - 10px); height: auto; }

  /* ---- Modèle ---- */
  .modele-section { height: auto; padding: 60px 32px; }
  .modele-inner { padding: 0; gap: 32px; }
  .modele-title { width: 100%; font-size: 32px; }
  .modele-flow { flex-wrap: wrap; justify-content: center; }
  .modele-bigbox { width: 100%; height: auto; flex-direction: column; padding: 28px 24px; gap: 28px; }
  .modele-photos { justify-content: center; }
  .modele-photo { width: 45%; height: 260px; }

  /* ---- Stratégie ---- */
  .strat-section { padding: 60px 32px; }
  .strat-title { width: 100%; font-size: 32px; }
  .strat-row { flex-direction: column; gap: 16px; }
  .strat-card--small { width: 100%; height: auto; }
  .strat-card--big { width: 100%; height: auto; flex-direction: column; padding: 32px; }
  .strat-big-img { width: 100%; height: 220px; align-self: center; }

  /* ---- Focused ---- */
  .focused-section { padding: 60px 32px; gap: 40px; }
  .focused-title { width: 100%; font-size: 32px; }
  .focused-layout { flex-direction: column; gap: 32px; }
  .focused-photo { width: 100%; height: 320px; }

  /* ---- Hubs ---- */
  .hubs-section { padding: 60px 32px; }
  .hubs-title { width: 100%; font-size: 32px; }
  .hubs-subtitle { width: 100%; }
  .hubs-cards { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .hubs-card { width: calc(50% - 8px); }

  /* ---- Capacité ---- */
  .capa-section { padding: 60px 32px; }
  .capa-title { width: 100%; font-size: 32px; }
  .capa-layout { flex-direction: column; align-items: stretch; gap: 24px; }
  .capa-col { width: 100%; }
  .capa-item { width: 100%; }
  .capa-photo { width: 100%; height: 300px; }
}

/* =============================================
   MOBILE (max 768px)
   ============================================= */
@media (max-width: 768px) {

  /* ---- Header ---- */
  .header-inner { height: auto; padding: 12px 16px; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
  .nav { display: none !important; }
  .header-cta .btn-outline-dark, .header-cta .btn-dark { display: none !important; }
  .header-contact { font-size: 14px; }
  .hamburger { display: flex !important; margin-left: auto; }

  /* ---- Hero ---- */
  .p2-title { font-size: 34px; }
  .p2-label { font-size: 16px; }
  .p2-desc { font-size: 15px; }
  .hero-buttons { flex-direction: column; gap: 12px; }
  .btn-cyan, .btn-outline-cyan { width: 100%; height: 54px; justify-content: center; }
  .p2-photo-wrap { height: 240px; }

  /* ---- Extension ---- */
  .ext-section { flex-direction: column; padding: 48px 20px; gap: 24px; }
  .ext-title { font-size: 26px; width: 100%; }
  .ext-desc { font-size: 16px; width: 100%; margin-top: 8px; }
  .ext-card { width: 100%; height: auto; }
  .ext-card-content { padding: 28px 24px 4px; }
  .ext-card-title { font-size: 20px; }
  .ext-card-text { font-size: 16px; }
  .ext-card--blue { padding: 24px 20px; gap: 16px; }
  .ext-round-photo { width: 120px; height: 120px; }
  .ext-quote { font-size: 18px; line-height: 1.5; }

  /* ---- Marketplace ---- */
  .mkt-section { padding: 48px 20px; gap: 28px; }
  .mkt-title { font-size: 24px; width: 100%; }
  .mkt-grid { flex-direction: column; gap: 16px; }
  .mkt-card { width: 100%; height: auto; padding: 32px 20px; gap: 24px; }
  .mkt-card--photo { height: 220px; padding: 0; }
  .mkt-card-title--red, .mkt-card-title--white { font-size: 18px; }
  .mkt-list li span { font-size: 15px; }

  /* ---- Défi ---- */
  .defi-section { padding: 48px 20px; gap: 24px; }
  .defi-title { font-size: 24px; width: 100%; }
  .defi-desc { font-size: 16px; }
  .defi-cards { flex-direction: column; align-items: stretch; gap: 12px; }
  .defi-card { width: 100%; height: auto; padding: 20px; flex-direction: row; align-items: center; gap: 16px; }
  .defi-card-text { font-size: 16px; }
  .defi-conclusion { font-size: 18px; line-height: 1.5; }

  /* ---- Modèle ---- */
  .modele-section { height: auto !important; padding: 48px 20px; }
  .modele-inner { padding: 0; gap: 24px; }
  .modele-title { font-size: 26px; width: 100%; }
  .modele-flow { flex-direction: column; align-items: center; gap: 12px; }
  .modele-arrow { transform: rotate(90deg); }
  .modele-flow-box { width: 100%; max-width: 280px; }
  .modele-bigbox { width: 100%; height: auto; flex-direction: column; padding: 24px 20px; gap: 20px; }
  .modele-biglist li span { font-size: 15px; }
  .modele-photos { flex-direction: column; gap: 12px; }
  .modele-photo { width: 100%; height: 220px; }

  /* ---- Stratégie ---- */
  .strat-section { padding: 48px 20px; gap: 28px; }
  .strat-title { font-size: 24px; width: 100%; }
  .strat-row { flex-direction: column; gap: 12px; }
  .strat-card--small { width: 100%; height: auto; padding: 28px 20px; }
  .strat-card-title { font-size: 26px; }
  .strat-card-text { font-size: 15px; }
  .strat-card--big { width: 100%; height: auto; flex-direction: column; padding: 24px 20px; gap: 20px; }
  .strat-big-content { padding-bottom: 0; }
  .strat-big-img { width: 100%; height: 200px; object-position: center; }
  .strat-list li span { font-size: 15px; }

  /* ---- Focused ---- */
  .focused-section { padding: 48px 20px; gap: 32px; }
  .focused-title { font-size: 26px; width: 100%; }
  .focused-layout { flex-direction: column; gap: 24px; }
  .focused-photo { width: 100%; height: 260px; flex-shrink: 1; }
  .focused-list { gap: 16px; }
  .focused-item { gap: 14px; }
  .focused-letter-box { width: 60px; height: 60px; flex-shrink: 0; }
  .focused-letter { font-size: 30px; }
  .focused-label { font-size: 18px; }
  .focused-desc { font-size: 14px; }

  /* ---- Hubs ---- */
  .hubs-section { padding: 48px 20px; gap: 28px; }
  .hubs-title { font-size: 26px; width: 100%; }
  .hubs-subtitle { width: 100%; font-size: 15px; }
  .hubs-cards { flex-wrap: wrap; gap: 12px; }
  .hubs-card { width: calc(50% - 6px); height: 160px; }
  .hubs-country { font-size: 18px; }
  .hubs-expansion { font-size: 16px; }
  .hubs-presence-title { font-size: 17px; flex-wrap: wrap; }
  .hubs-presence-text { font-size: 14px; }

  /* ---- Capacité ---- */
  .capa-section { padding: 48px 20px; gap: 32px; }
  .capa-title { font-size: 24px; width: 100%; }
  .capa-layout { flex-direction: column; gap: 20px; }
  .capa-col { width: 100%; gap: 12px; }
  .capa-item { width: 100%; min-height: 70px; padding: 0 16px; }
  .capa-item span { font-size: 15px; }
  .capa-photo { width: 100%; height: 260px; }

  /* ---- Contact (réutilisé depuis page2.css) ---- */
  .contact-section { height: auto !important; }
  .contact-inner { flex-direction: column; padding: 40px 20px; gap: 32px; }
  .contact-title { font-size: 36px; width: 100%; }
  .contact-subtitle { font-size: 20px; }
  .contact-desc { font-size: 15px; width: 100%; }
  .contact-btn-call { width: 100%; justify-content: center; }
  .contact-form-box { width: 100%; height: auto; padding: 28px 20px; }
  .contact-form-title { font-size: 22px; }
  .contact-sep { width: 100% !important; }
  .contact-btn-send { width: 100%; justify-content: center; }
}

/* =============================================
   PETIT MOBILE (max 480px)
   ============================================= */
@media (max-width: 480px) {

  .p2-title { font-size: 28px; }
  .ext-title, .mkt-title, .defi-title,
  .modele-title, .strat-title, .focused-title,
  .hubs-title, .capa-title { font-size: 22px; }

  .ext-card--blue { padding: 20px 16px; }
  .ext-quote { font-size: 16px; }
  .ext-round-photo { width: 100px; height: 100px; }

  .defi-card { padding: 16px; }

  .hubs-card { width: calc(50% - 6px); height: 140px; }
  .hubs-country { font-size: 16px; }

  .focused-letter-box { width: 52px; height: 52px; }
  .focused-letter { font-size: 26px; }

  .strat-card-title { font-size: 22px; }
  .modele-flow-box { max-width: 240px; }
  .modele-flow-text { font-size: 15px; }

  .contact-title { font-size: 28px; }
}