/*
===============================================================================
 SI ARBEZ — SI-RESPONSIVE.CSS
 À charger EN DERNIER.

 Principe :
 1. Les sidebars "rappels / paramètres / score" disparaissent sur petit écran.
 2. Les sidebars qui sont indispensables à la navigation deviennent une
    barre horizontale compacte, pas un bandeau vertical.
 3. Les grilles complexes s'empilent.
===============================================================================
*/

/* ---------- Écrans intermédiaires ---------- */

@media (max-width: 1100px) {
  main {
    min-width: 0;
  }

  /* Sécurise tous les layouts main + sidebar. */
  main:has(> .sidebar) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .rightbar {
    max-width: 100%;
  }
}

/* ---------- Largeur desktop intermédiaire ---------- */

/*
 * Certains QCM de réseaux utilisent trois colonnes avec des minimums fixes
 * dans une zone déjà réduite par une sidebar. Entre 1101 et 1580 px, on
 * passe la grille de laboratoire à deux colonnes et le tracé sur toute
 * la largeur pour éviter le débordement horizontal.
 */
@media (max-width: 1580px) and (min-width: 1101px) {
  main:has(> .sidebar) .lab-grid {
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr) !important;
  }

  main:has(> .sidebar) .lab-grid > .plot-panel {
    grid-column: 1 / -1 !important;
  }
}

/* ---------- Tablette / petit écran : traitement des sidebars ---------- */

/*
 * Les QCM existants passent généralement en une seule colonne entre
 * 1050 et 1100 px. Si on attend 900 px, la sidebar devient alors un gros
 * bandeau au-dessus des questions. On traite donc la sidebar dès 1100 px.
 */
@media (max-width: 1100px) {

  /*
   * QCM classiques :
   * la sidebar contient rappels, catégorie, difficulté, score...
   * Elle n'est pas nécessaire pour répondre => on la supprime.
   *
   * :not(:has(.nav)) protège les exerciseurs dont la sidebar est un sommaire.
   */
  main > aside.sidebar:not(:has(.nav)) {
    display: none !important;
  }

  main:has(> aside.sidebar:not(:has(.nav))) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  /*
   * Exerciseurs à chapitres (ex. modeleur) :
   * le sommaire reste accessible, mais devient une rangée de boutons.
   */
  main > aside.sidebar:has(.nav) {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  main > aside.sidebar:has(.nav) > .card:not(:has(.nav)) {
    display: none !important;
  }

  main > aside.sidebar:has(.nav) > .card:has(.nav) {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  main > aside.sidebar:has(.nav) > .card:has(.nav) > h2 {
    display: none !important;
  }

  main > aside.sidebar:has(.nav) .nav {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding: 2px 2px 7px;
  }

  main > aside.sidebar:has(.nav) .nav button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 54px;
    min-height: 42px;
    justify-content: center;
    white-space: nowrap;
  }

  /* Réaffiche le libellé si une ancienne règle tablette le masquait. */
  main > aside.sidebar:has(.nav) .nav button span:last-child {
    display: inline !important;
  }

  /*
   * Exerciseurs en .app (ex. pompe à pistons) :
   * la navigation par étapes quitte la colonne de gauche et devient un strip.
   */
  .app {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app > .sidebar {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 0 8px !important;
    margin: 0 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  .app > .sidebar > h2 {
    display: none !important;
  }

  .app > .sidebar .step-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: max-content;
  }

  .app > .sidebar .step-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 120px;
    min-height: 42px;
  }

  /* Les barres annexes ne doivent pas revenir sur mobile. */
  .rightbar {
    display: none !important;
  }

  /* Grilles générales */
  .si-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.trace-grid, .schema-card, .liaison-wrap, .sizing-grid,
         .implant-wrap, .robust-grid, .rapp-layout, .clearn-layout,
         .cad-layout, .rev-layout, .pivot-grid, .pivot-study-grid,
         .pivot-stop-layout) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Les entêtes des exerciseurs doivent pouvoir se contracter. */
@media (max-width: 1100px) {
  .app > .topbar,
  .topbar {
    max-width: 100%;
    min-width: 0;
  }

  .app > .main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

  body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  main,
  .main,
  .stage,
  .container,
  .content {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  main {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 14px !important;
  }

  /* Grilles à deux ou trois colonnes */
  :where(.grid2, .grid3, .hero-grid, .learning-grid, .rule-grid, .bool-grid,
         .lab-grid, .lab-one, .compare-grid, .stage-example-grid,
         .scale-compare, .metric-grid, .general-card, .arch-controls,
         .robust-compare, .robust-methods, .robust-driver-grid,
         .cad-function-row, .cad-action-row, .rev-op-row, .clearn-choices) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Cartes */
  :where(.card, .qcard, .chapter-card) {
    max-width: 100%;
    padding: 15px;
    border-radius: 14px;
  }

  /* Zone tactile des réponses */
  :where(.choice, .option, .answer, .clearn-choice) {
    min-height: var(--si-touch);
  }

  .choice input[type="radio"],
  .choice input[type="checkbox"],
  .option input[type="radio"],
  .option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  /* Actions : jamais de bouton min-width qui force le débordement */
  :where(button, .btn, .check-btn, .btn-tool, .si-btn) {
    min-height: 42px;
  }

  :where(.row, .actions, .quiz-actions, .footer-nav, .plan-actions,
         .video-toolbar, .rapp-nav, .clearn-nav, .cad-view-actions,
         .cad-exercise-actions, .rev-action, .robust-challenge-actions) {
    max-width: 100%;
  }

  :where(.row, .actions) > button,
  :where(.row, .actions) > .btn {
    min-width: 0 !important;
  }

  /* Champs : 16 px évite le zoom automatique d'iOS. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Code et formules */
  pre,
  .code,
  .codeblock,
  .code-block {
    font-size: .9rem;
  }

  /* Sticky pédagogiques : sur téléphone ils masquent trop de contenu. */
  :where(.construction-sticky, .sticky-mini) {
    position: static !important;
    top: auto !important;
    backdrop-filter: none !important;
  }

  /* Navigation d'étapes longue : scroll horizontal local uniquement. */
  :where(.stage-pills, .rapp-tabs, .data-sequence, .quiz-progress) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  /* Tableaux usuels : texte plus compact. */
  :where(.table, .table-mini, .activation-table, .loss-demo-table,
         .choice-table) {
    font-size: .88rem;
  }

  :where(.table, .table-mini, .activation-table, .loss-demo-table,
         .choice-table) th,
  :where(.table, .table-mini, .activation-table, .loss-demo-table,
         .choice-table) td {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* KPI : éviter les nombres coupés. */
  .kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kpi .value,
  .value {
    overflow-wrap: anywhere;
  }

  /* Canvas / visualisations */
  .network-wrap {
    min-height: 0 !important;
  }

  .network-svg {
    height: auto !important;
    min-height: 220px;
  }
}

/* ---------- Petit téléphone ---------- */

@media (max-width: 560px) {

  main {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  :where(.card, .qcard, .chapter-card) {
    padding: 12px;
    border-radius: 12px;
  }

  /* Galerie et grilles résiduelles */
  :where(.gallery, .mem-grid, .sizing-kpis, .robust-controls,
         .robust-values, .rapp-relations, .rapp-var-legend,
         .cad-target, .cad-target-current) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Les boutons d'action principaux prennent la largeur disponible. */
  :where(.row, .actions, .quiz-actions, .footer-nav) {
    align-items: stretch;
  }

  :where(.row, .actions) > button,
  :where(.row, .actions) > .btn,
  .check-btn {
    flex: 1 1 100% !important;
    width: 100%;
  }

  /* Side-nav de chapitres : chips plus compactes. */
  main > aside.sidebar:has(.nav) .nav button {
    min-width: 48px;
    padding: 8px 10px;
  }

  main > aside.sidebar:has(.nav) .nav .num {
    width: 26px;
    height: 26px;
  }

  /* Dans les exerciseurs par étapes on garde numéro + titre, sans sous-titre. */
  .app > .sidebar .step-label small {
    display: none !important;
  }

  .app > .sidebar .step-btn {
    min-width: 105px;
  }

  /* Certaines visualisations ont volontairement une largeur interne.
     Le débordement doit rester dans leur conteneur scrollable. */
  .plan-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Formules */
  .formula {
    font-size: clamp(.9rem, 4vw, 1.05rem);
  }
}

/* ---------- Très petit écran ---------- */

@media (max-width: 380px) {

  body {
    font-size: .94rem;
  }

  :where(.card, .qcard, .chapter-card) {
    padding: 10px;
  }

  main > aside.sidebar:has(.nav) .nav button span:last-child {
    display: none !important;
  }

  .app > .sidebar .step-btn {
    min-width: 92px;
  }
}

/* ---------- Téléphone en paysage ---------- */

@media (max-height: 520px) and (orientation: landscape) {
  :where(.construction-sticky, .sticky-mini, .sidebar, .rightbar) {
    position: static !important;
  }
}

/* Sur téléphone, aucune barre latérale ne doit rester affichée. */
@media screen and (max-width: 768px) {
  .sidebar,
  main > aside.sidebar,
  .app > .sidebar {
    display: none !important;
  }
}