/* ============================================================
   responsive-section.css — Section iPhone & Responsive
   Plein écran · iPhone massif (80vh) · Typo Apple System
   ============================================================ */

/* ── Variable typo Apple ─────────────────────────────────── */
#responsive-section {
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* ── SECTION RACINE : PLEIN ÉCRAN ────────────────────────── */
#responsive-section {
  background: #0a0a0a;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 10%;
  position: relative;
  overflow: hidden;
}

/* Ligne ambre subtile en haut — transition depuis le noir MacBook */
#responsive-section::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(224,120,32,0.30) 30%,
    rgba(224,120,32,0.60) 50%,
    rgba(224,120,32,0.30) 70%,
    transparent 100%
  );
}

/* ── GRID : Texte gauche / iPhone droite ─────────────────── */
#responsive-section .responsive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

/* ── TEXTE ────────────────────────────────────────────────── */
#responsive-section .responsive-label {
  font-family: var(--font-apple);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(58% 0.14 48);
  margin-bottom: 24px;
}

#responsive-section .responsive-title {
  font-family: var(--font-apple);
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #F5F5F5;
  margin-bottom: 28px;
}

#responsive-section .responsive-desc {
  font-family: var(--font-apple);
  font-size: 1.05rem;
  line-height: 1.85;
  font-weight: 400;
  color: rgba(245,245,245,0.55);
  margin-bottom: 44px;
}

/* ── BADGES ──────────────────────────────────────────────── */
#responsive-section .responsive-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#responsive-section .resp-badge {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,245,0.16);
  color: rgba(245,245,245,0.55);
  font-family: var(--font-apple);
  font-size: 0.70rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.22s ease, color 0.22s ease;
}
#responsive-section .resp-badge:hover {
  border-color: oklch(58% 0.14 48 / 0.60);
  color: oklch(58% 0.14 48);
}

/* ── DEVICE : iPhone tenue par une main ────────────────────── */
#responsive-section .responsive-device {
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
}

.iphone-hand-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iphone-hand-img {
  height: 75vh; /* Taille imposante mais équilibrée */
  width: auto;
  display: block;
  z-index: 2;
}

/* ── RESPONSIVE BREAKPOINTS ──────────────────────────────── */
@media (max-width: 1100px) {
  #responsive-section { padding: 0 5%; }
  #responsive-section .responsive-grid { gap: 40px; }
}

@media (max-width: 900px) {
  #responsive-section {
    padding: 80px 6%;
    min-height: auto;
  }
  #responsive-section .responsive-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  #responsive-section .responsive-badges { justify-content: center; }
  #responsive-section .responsive-device { order: -1; }
  .iphone-hand-img { height: 60vh; }
}

@media (max-width: 480px) {
  #responsive-section { padding: 60px 5%; }
  #responsive-section .responsive-title { font-size: 2.2rem; }
  .iphone-hand-img { height: 50vh; }
}