/* =============================================================
   Responsive : points de rupture.
   Chargé en DERNIER pour l'emporter sur les styles de base
   (même spécificité = la dernière règle gagne).
   Rupture unique à 1024px (bascule bureau / mobile-tablette).
   ============================================================= */

/* Au-dessus de 1024px : l'aside (formulaire / diagnostic) est visible en permanence,
   donc pas de CTA doublon dans le hero, ni de barre flottante. */
@media (min-width: 1024px) {
  .floating-cta { display: none; }
  .hero__cta { display: none; }
}

/* En dessous de 1024px : passage en colonne unique */
@media (max-width: 1023px) {
  .shell {
    --shell-pad: clamp(12px, 4vw, 18px);
    display: block;
    padding-bottom: 36px;
  }
  .shell::before,
  .shell::after { display: none; }

  /* Nav pleine largeur sur violet */
  .nav {
    background: var(--purple);
    margin-inline: calc(-1 * var(--shell-pad));
    padding: 16px clamp(16px, 5vw, 24px);
  }

  .main { display: block; }
  .main > * { margin-top: 20px; }
  .main > *:first-child { margin-top: 0; }

  /* Hero à plat sur violet, pleine largeur (l'image de fond reste bureau) */
  .hero {
    background: var(--purple);
    margin-inline: calc(-1 * var(--shell-pad));
    padding: 8px clamp(16px, 5vw, 24px) 46px;
    min-height: 0;
    overflow: hidden;
  }

  /* Le hero pleine largeur n'a plus besoin du halo débordant */
  .hero__halo { display: none; }

  /* Aside : plus de sticky, passe sous le contenu */
  .lead {
    position: static;
    margin-top: 18px;
  }
}

/* Résultat du diagnostic : la mise en page « détachée » (desktop) repasse en
   pile simple dès que la fenêtre devient étroite. */
@media (max-width: 760px) {
  .diag-result { grid-template-columns: 1fr; }
  .modal--diag.is-result .modal__card { background: var(--surface); box-shadow: var(--shadow-pop); padding: var(--card-pad); }
  .modal--diag.is-result .modal__head { position: static; }
  .modal--diag.is-result .modal__eyebrow { display: flex; }
  .modal--diag.is-result .diag-result { display: grid; }
  .modal--diag.is-result .diag-result__main { position: static; width: auto; background: transparent; box-shadow: none; padding: 0; }
  .modal--diag.is-result .diag-result__aside { position: static; width: auto; box-shadow: none; padding: clamp(20px, 2.4vw, 26px); background: var(--surface-2); }
  /* Radar : plus grand, légende passée dessous (au lieu de la comprimer à droite).
     Sélecteur .is-result pour battre la version compacte du desktop. */
  .diag-radar { flex-direction: column; gap: 10px; }
  .modal--diag.is-result .radar { max-width: 320px; }
  .radar__legend { flex-direction: row; justify-content: center; gap: 22px; }
}

/* « Cas par métier » sur petit écran : le rail latéral devient une rangée
   d'onglets à défilement horizontal posée au-dessus du contenu, et les
   cartes passent sur une seule colonne. */
@media (max-width: 760px) {
  /* Bloc simple : le rail (flex-row scrollable) est un bloc pleine largeur qui
     contient ses onglets ; en le laissant dans un flex-column stretch, la largeur
     min-content des onglets « nowrap » débordait la page. */
  .cases__layout { display: block; }
  .cases__rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .cases__rail::-webkit-scrollbar { display: none; }
  .rail-btn { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 9px 15px; scroll-snap-align: start; }
  .rail-btn.is-active { padding: 9px 15px; }
  .rail-btn__arrow { display: none; }
  .cases__detail { border-left: none; padding-left: 0; }
  .cases__grid { grid-template-columns: 1fr; }
}

/* Méthode : les 4 phases côte à côte se replient en 2 colonnes puis 1 sur petit écran */
@media (max-width: 620px) {
  .method-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .method-steps { grid-template-columns: 1fr; }
}