/* ════════════════════════════════════════
   CORRECTIFS MOBILE — à charger APRÈS
   style1.css et style3.css
════════════════════════════════════════ */

@media (max-width: 768px) {

  /* La sidebar (80px) n'existe plus visuellement :
     tout ce qui utilise var(--sidebar-w) s'adapte automatiquement */
  :root{
    --sidebar-w: 0px;
    --topbar-h: 60px;
  }

  /* La sidebar verticale devient une barre de navigation en bas */
  .sidebar{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:60px;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    padding:.4rem 0;
    gap:0;
    border-right:none;
    border-top:1px solid var(--border);
    z-index:200;
  }
  .sidebar .sidebar-spacer{ display:none; }
  .s-link{ width:42px; height:42px; }
  .s-link::after{ display:none; } /* les info-bulles au survol ne servent à rien au doigt */

  /* La barre du haut n'a plus besoin de réserver la place de la sidebar */
  .app-topbar{
    padding:0 1rem;
  }
  .topbar-center{ display:none; }
  .topbar-user .user-name{
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Contenu principal : plus de marge à gauche, marge en bas pour ne pas
     passer sous la nouvelle barre du bas + les barres d'action */
  .main,.mainn{
    margin-left:0;
    padding:1rem;
    padding-bottom:130px;
  }

  /* Les barres d'action fixes en bas passent au-dessus de la barre de nav */
  .page-footer,.form-footer{
    left:0;
    bottom:60px;
    padding:.75rem 1rem;
    flex-wrap:wrap;
    gap:.6rem;
  }
  .form-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .pf-actions,.nav-buttons{
    width:100%;
    flex-wrap:wrap;
  }
  .pf-actions .btn,.nav-buttons .btn{
    flex:1;
    justify-content:center;
  }
  .total-container{ width:100%; }

  /* Pages d'authentification */
  .auth-bar{ padding:0 1rem; }
  .auth-wrap,.landing-wrap{ padding:1.25rem; }
  .auth-card,.landing-card{ padding:1.75rem 1.25rem; }

  /* Étapes du formulaire d'ajout d'animal */
  .stepper-container{ padding:.75rem 1rem; }
  .step-label{ font-size:.65rem; }
  .step-circle{ width:28px; height:28px; font-size:.75rem; }

  /* Page Statut/Transfert : la sidebar de style3 n'existe pas ici,
     donc pas besoin de réserver 64px */
  .contenu-central{ max-width:100%; padding:16px; }

  /* En-têtes de sections avec bouton : on empile proprement */
  .welcome,.animals-list-header{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
  .welcome button,.animals-list-header button{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 420px){
  /* Les 6 cases du code OTP débordaient sur très petit écran */
  .otp-inputs{ gap:.4rem; }
  .otp-box{ width:42px; height:52px; font-size:1.15rem; }

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