/* ============ POWER CAPITAL — Responsive (4 versions) ============ */

/* ---------- TRÈS GRAND ÉCRAN (≥ 1600px) ---------- */
@media (min-width: 1600px) {
  :root { --max: 1320px; }
  .hero-title { font-size: 42px; }
  .section-title { font-size: 64px; line-height: 64px; }
}

/* ---------- DESKTOP CLASSIQUE (1200–1599px) ---------- */
/* (styles de base, déjà définis dans sections.css) */

/* ---------- TABLETTE (768–1199px) ---------- */
@media (max-width: 1199px) {
  .container { padding: 0 32px; }
  .header-inner { padding: 14px 24px; }
  .nav { gap: 20px; }
  .nav a { font-size: 14px; }

  .hero-title { font-size: 30px; white-space: normal; }

  .section-title { font-size: 42px; line-height: 1.08; }
  .section-title--sm { font-size: 28px; }

  /* On narrower screens, switch justified body text to left-aligned: the columns
     are too narrow for justify, which would open ugly gaps between words. */
  .about-intro-text p,
  .quincunx-text p,
  .product-text p { text-align: left; }

  /* About intro: stack vertical */
  .about-intro-row { flex-direction: column; gap: 32px; }
  .about-intro-image { flex: none; width: 100%; max-width: 100%; height: 360px; }
  .about-intro-text { max-width: 100%; }
  .about-intro-text p { font-size: 17px; }
  .br-pf { display: none; }

  /* Quinconce: stack image over text */
  .quincunx-row, .quincunx-row--reverse { flex-direction: column; gap: 24px; padding: 32px 0; }
  .quincunx-img { flex: none; max-width: 100%; width: 100%; }
  .quincunx-text h3 { font-size: 26px; }

  /* Products: stack image over text, disable sticky stacking */
  .product-card { position: relative !important; top: auto !important; flex-direction: column; gap: 28px; padding: 28px 0; }
  .product-img { flex: none; max-width: 100%; width: 100%; }
  .product-text h3 { font-size: 30px; }

  /* Team: stack visual over members */
  .team-body { flex-direction: column; gap: 40px; align-items: stretch; }
  .team-visual { flex: none; width: 100%; height: 360px; }
  .team-intro { max-width: 100%; }

  /* Footer */
  .footer { padding: 56px 32px 36px; }
  .footer-inner { gap: 40px; }
}

/* ---------- HEADER COMPACT (≤ 980px : la nav ne tient plus avec bouton + toggle) ---------- */
@media (max-width: 980px) {
  .nav { display: none; }            /* desktop nav masquée : remplacée par le burger */
  .header-actions { gap: 12px; }
  .burger { display: flex; }         /* burger visible */
  .mobile-menu { display: flex; }    /* menu mobile activé (replié tant que pas .open) */
}

/* ---------- TÉLÉPHONE (≤ 767px) ---------- */
@media (max-width: 767px) {
  .container { padding: 0 20px; }

  /* Header: logo + compact demo button + lang toggle, all fitting on one row */
  .header-inner { padding: 12px 16px; }
  .header-actions { gap: 8px; }
  .header-inner .btn--primary { padding: 8px 14px; font-size: 13px; }
  .lang-btn, .lang-sep { font-size: 12px; }
  .lang-toggle { gap: 4px; }
  .brand-logo { height: 32px; }
  /* short demo label ("Démo") so the header fits on narrow phones */
  .btn-demo__long { display: none; }
  .btn-demo__short { display: inline; }
  /* hard guarantee: header never overflows, logo + démo + toggle stay on one row */
  .header-inner { width: 100%; max-width: 100%; flex-wrap: nowrap; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .header-actions { flex: 0 0 auto; }
  .btn-demo { white-space: nowrap; }

  .hero { min-height: 520px; }
  .hero-overlay { padding-top: 20vh; }
  .hero-title { font-size: 24px; line-height: 1.25; }

  .about { padding: 64px 0 56px; }
  .section-title { font-size: 30px; line-height: 1.1; }
  .section-title--sm { font-size: 24px; }
  .about-intro-text p { font-size: 17px; text-align: left; }
  .about-intro-image { height: 280px; }
  .image-logo-overlay { width: 120px; }

  .quincunx-text h3 { font-size: 22px; }
  .quincunx-text p { font-size: 16px; }
  .quincunx-img img { height: 220px; }

  .products { padding: 56px 0 72px; }
  .product-text h3 { font-size: 24px; }
  .product-text p { font-size: 15px; text-align: left; }
  .product-img img { height: 240px; }
  .pci-logo-long { height: 38px; }

  .team { padding: 40px 0 56px; }
  .team-visual { height: 300px; }
  .team-members { gap: 28px; }
  .member { gap: 14px; }
  .member-photo { width: 90px; height: 90px; flex: 0 0 90px; }
  .member-info h4 { font-size: 18px; }

  .contact { padding: 56px 16px; }
  .contact-title { font-size: 34px; }
  .contact-inner { max-width: 100%; }
  /* emails wrap instead of overflowing on small screens */
  .footer-mails { font-size: 14px; line-height: 1.9; word-break: break-word; }
  .footer-mails a { display: inline-block; }

  .footer { padding: 48px 20px 32px; }
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-nav { text-align: left; }
  .footer-logo { width: 170px; }
}

/* ---------- TRÈS PETITS TÉLÉPHONES (≤ 360px) ---------- */
@media (max-width: 360px) {
  .header-inner { padding: 10px 12px; }
  .header-actions { gap: 6px; }
  .header-inner .btn--primary { padding: 7px 11px; font-size: 12px; }
  .brand-logo { height: 28px; }
  .hero-title { font-size: 21px; }
  .contact-title { font-size: 30px; }
  /* stack the two footer emails so neither is clipped */
  .footer-mails { display: flex; flex-direction: column; gap: 4px; }
}