/* ============================================================
   RESPONSIVE.CSS — Cabinet House & Co
   ============================================================ */

/* ── Par défaut — grille équipe 3 colonnes ── */
.team-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ── TABLETTE LARGE (max 1100px) ── */
@media (max-width: 1100px) {
  .left { width: 36%; }
  .grid { gap: 14px; }
  .member-circle { width: 110px; height: 110px; }
  .member-name   { font-size: 0.85rem; }
}

/* ── TABLETTE (max 900px) ── */
@media (max-width: 900px) {
  .left { width: 32%; }
  .grid { gap: 12px; }
}

/* ── MOBILE (max 780px) — bascule en colonne ── */
@media (max-width: 780px) {

  html, body {
    overflow: auto !important;
    height: auto !important;
  }

  .wrapper {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
    width: 100%;
  }

  /* ── Panneau gauche → EN HAUT ── */
  .left {
    width: 100% !important;
    height: auto !important;
    min-height: auto;
    flex-shrink: 0;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
  }

  .left-slide {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .left-border { display: none; }
  .left::after { display: none; }

  .left-header {
    position: relative;
    z-index: 5;
    padding: 24px 24px 0;
    flex-direction: column;
    align-items: flex-start;
    animation: none;
  }

  .left-logo { width: 100px; }
  .left-header .subtitle { display: block; font-size: 10px; margin-top: 10px; }
  .left-header .dash { display: block; }

  .left-nav {
    position: relative;
    z-index: 5;
    padding: 16px 24px 24px;
    animation: none;
  }

  .left-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .left-nav ul li a {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
  }

  .left-partners {
    position: relative;
    z-index: 5;
    padding: 0 24px 20px;
  }

  /* ── Panneau droit → EN BAS ── */
  .right {
    width: 100% !important;
    height: auto !important;
    overflow-x: hidden;
    overflow-y: visible !important;
    padding: 28px 16px 48px;
    flex: none;
  }

  .right-label { font-size: 9px; margin-bottom: 20px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ── Équipe — 2 colonnes ── */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
  }

  .member {
    width: 100%;
    overflow: hidden;
  }

  .member-circle {
    width: 90px !important;
    height: 90px !important;
  }

  .member-name   { font-size: 0.8rem; }
  .member-role   { font-size: 0.7rem; }
  .member-detail { grid-column: 1 / -1; }
  .detail-inner  { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .detail-dash   { margin: 0 auto 16px; }

  /* Footer */
  .footer-top    { flex-direction: column; gap: 24px; }
  .footer-cols   { gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

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

  .left-header { padding: 18px 16px 0; }
  .left-logo { width: 80px; }
  .left-nav { padding: 12px 16px 18px; }
  .left-nav ul { gap: 4px 12px; }
  .left-nav ul li a { font-size: 0.75rem; }
  .left-partners { padding: 0 16px 14px; }

  .right { padding: 20px 12px 40px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .team-grid { grid-template-columns: 1fr 1fr; }
  .member-circle { width: 80px !important; height: 80px !important; }

  .footer-cols { flex-direction: column; gap: 16px; }
  .footer-logo-img { width: 70px; }
}

/* ── TRÈS PETIT MOBILE (max 380px) ── */
@media (max-width: 380px) {

  .left-logo { width: 64px; }
  .left-nav ul li a { font-size: 0.68rem; }

  .right { padding: 16px 10px 32px; }
  .grid { grid-template-columns: 1fr; gap: 10px; }

  .card-title { font-size: 0.72rem; }
  .card-tag   { font-size: 7px; }
  .card-meta  { font-size: 8.5px; }

  .team-grid { grid-template-columns: 1fr 1fr; }
  .member-circle { width: 70px !important; height: 70px !important; }
  .member-name   { font-size: 0.75rem; }
}