/* =============================================================================
   YAHEMMA — Responsive
   Breakpoints : 320 / 375 / 768 / 1024 / 1440
   ============================================================================= */

/* --- Tablette et inférieur (< 1024px) --- */
@media (max-width: 1023px) {
  .nav-desktop,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-orbit:not(.is-settled) {
    grid-template-rows: min(380px, 85vw);
    --orbit-radius: min(32vw, 150px);
    --orbit-card-w: min(200px, 58vw);
  }

  .services-orbit.is-settled {
    grid-template-columns: repeat(2, 1fr);
  }

  .domains-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .domains-fan:not(.is-dealt) {
    grid-template-rows: 240px;
  }

  .domains-fan.is-dealt {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-timeline {
    flex-direction: column;
    gap: 1.5rem;
  }

  .method-timeline::before {
    top: 0;
    bottom: 0;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(
      to bottom,
      var(--color-primary),
      var(--color-secondary),
      var(--color-purple)
    );
  }

  .method-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 0;
  }

  .method-step__number {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .method-step__icon {
    display: none;
  }

  .method-step__body {
    padding-top: 0.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .infra-arrow {
    display: none;
  }

  .infra-flow {
    gap: 1rem;
  }

  .infra-node {
    max-width: none;
    flex: 1 1 calc(50% - 1rem);
  }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
  :root {
    --section-padding: var(--section-padding-sm);
    --header-height: 64px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Sur mobile étroit : pas d’orbite, placement direct */
  .services-orbit:not(.is-settled),
  .services-orbit.is-settled {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    grid-template-rows: none;
    animation: none;
    transform: none;
  }

  .services-orbit .services-orbit__card {
    grid-area: auto;
    width: auto;
    opacity: 1;
    transform: none;
    animation: none !important;
    pointer-events: auto;
  }

  .why-list {
    grid-template-columns: 1fr;
  }

  .domains-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile : pas d’éventail, grille directe */
  .domains-fan:not(.is-dealt),
  .domains-fan.is-dealt {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    grid-template-rows: none;
  }

  .domains-fan .domains-fan__card {
    grid-area: auto;
    width: auto;
    opacity: 1;
    transform: none;
    animation: none !important;
    pointer-events: auto;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 2.5rem);
    padding-bottom: 3rem;
  }

  .hero__engagements {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .infra-node {
    flex: 1 1 100%;
  }

  .logo-tagline {
    display: none;
  }

  .solution-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Très petit mobile (< 375px) --- */
@media (max-width: 374px) {
  .domains-grid,
  .domains-fan:not(.is-dealt),
  .domains-fan.is-dealt {
    grid-template-columns: 1fr;
  }

  .container {
    padding-inline: 1rem;
  }

  .card {
    padding: 1.25rem;
  }

  .hero__title {
    font-size: 1.75rem;
  }
}

/* --- Grand écran (≥ 1440px) --- */
@media (min-width: 1440px) {
  .hero__content {
    max-width: 780px;
  }
}

/* --- Impression --- */
@media print {
  .site-header,
  .nav-toggle,
  .nav-mobile,
  .cta-section,
  .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding-top: 2rem;
    color: black;
  }

  a {
    text-decoration: underline;
  }
}