/*
 * Ajustements téléphone (≤ 640px), chargés après style.css.
 * Le @media (max-width: 1050px) de style.css a été pensé pour des téléphones
 * sans balise viewport (page affichée à ~980px puis dézoomée) : polices de 30-40px,
 * cartes de 560px... Avec la vraie largeur d'écran (~390px) il faut tout réduire.
 */
@media screen and (max-width: 640px) {
  /* --- Connexion / inscription ------------------------------------------ */
  .center-div {
    position: relative;
    width: auto;
    max-width: 420px;
    height: auto;
    margin: 40px 16px;
    padding: 24px 16px 32px;
  }
  @media (min-width: 452px) {
    .center-div {
      margin: 40px auto;
    }
  }
  .login-block {
    margin-top: 24px;
  }
  .strike {
    margin: 20px 24px;
  }
  .input-login input {
    width: min(260px, 70vw);
  }
  .center {
    display: none;
  }

  /* --- En-tête et menu --------------------------------------------------- */
  /* Les icônes sont en float : sans ça elles dépassent du menu et rétrécissent le bandeau dessous. */
  .right-menu {
    height: auto;
    display: flow-root;
  }
  .logo-top {
    height: 110px;
  }
  .logo {
    width: 90px;
  }
  .fb-img {
    width: 30px;
  }
  .ig-img {
    width: 28px;
  }
  .team-img {
    width: 44px;
    margin: 6px;
  }
  .player-settings,
  .who {
    padding: 6px;
    height: 44px;
    object-fit: contain;
  }

  /* --- Bandeau non-adhérent.e -------------------------------------------- */
  .message .right-box {
    padding: 12px 14px;
  }
  .message .left-box img {
    margin: 16px 10px !important;
    width: 24px !important;
  }
  .warning-text {
    font-size: 19px;
  }
  .warning-p {
    font-size: 15px;
  }

  /* --- Jauge ------------------------------------------------------------- */
  .quota {
    margin: 18px 0 16px;
  }
  .quota-gauge {
    width: 170px;
  }

  /* --- Cartes de session ------------------------------------------------- */
  .open-session {
    font-size: 24px;
    margin-top: 10px;
  }
  .row {
    margin: 12px 16px;
  }
  .column {
    padding: 0;
    margin-bottom: 16px;
  }
  .card {
    height: auto;
    min-height: 0;
    padding-bottom: 20px;
  }
  .form-card {
    margin: 24px 12px 0;
  }
  .startDate,
  .time-text,
  .duration-text,
  .available-text,
  .field-text,
  .come-back {
    font-size: 18px;
  }
  .startDate {
    font-weight: bold;
  }
  .startDate,
  .time-text {
    margin: 4px 0;
  }
  .come-back {
    margin-top: 16px;
  }
  p.practice {
    font-size: 18px;
    margin-top: -8px;
    margin-bottom: 6px;
  }
  img.time {
    width: 20px;
    margin-top: 0;
    vertical-align: -3px;
  }
  img.field {
    width: 26px;
  }
  input.btn-hover,
  a.btn-hover {
    font-size: 18px;
    height: 50px;
    margin: 12px auto 0;
  }
  a.btn-hover.cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
  }
  .admin-button {
    position: static;
    margin: 12px 0 0;
  }
  img.delete-img,
  img.edit-img,
  img.users {
    width: 28px;
    margin: 0 12px;
  }
  .add-button {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* --- Boutons formulaires (connexion, compte) --------------------------- */
  input.login,
  input.register,
  input.create-account {
    width: min(230px, 70vw);
    height: 40px;
    font-size: 17px;
  }
  input.logout {
    height: 40px;
    font-size: 17px;
    margin: 0;
  }

  /* --- Tableaux (admin, participantes) ----------------------------------- */
  th,
  td {
    font-size: 15px;
    padding: 8px 6px;
  }
  th {
    font-size: 16px;
  }
  .session-date {
    font-size: 20px;
    margin: 0 16px;
  }
  .tab {
    margin: 12px;
  }
  .tabset > label {
    padding: 12px 10px 22px;
  }
  .tabset > label::after {
    left: 10px;
  }
  img.red-card {
    width: 22px;
  }
  td img.small-red-card {
    width: 10px;
  }
  .onoffswitch {
    width: 76px;
  }
  .onoffswitch-inner:before,
  .onoffswitch-inner:after {
    font-size: 15px;
  }
  .onoffswitch-switch {
    right: 48px;
  }

  /* --- Stats ------------------------------------------------------------- */
  .div-season-select {
    font-size: 22px;
    margin-bottom: 24px;
  }
  .season-select {
    width: 170px;
    font-size: 18px;
    padding: 8px 12px;
  }
  .card-stats h2 {
    font-size: 20px;
    padding-top: 16px;
  }
  .adherent-counter {
    font-size: 36px;
    margin: 4px 0 16px;
  }
  .lineChart {
    padding: 8px;
  }

  /* --- Ajout de session : 16px minimum pour éviter le zoom auto d'iOS ---- */
  .form-add {
    margin: 24px 16px;
  }
  .form-add input,
  .form-add select {
    font-size: 16px;
  }
  .form-add .input-field {
    max-width: 100%;
  }
  .add-session,
  .generate-session {
    width: min(260px, 80vw);
  }

  /* --- Mon compte -------------------------------------------------------- */
  div.student-profile .card-profile h3 {
    font-size: 24px;
  }
  div.student-profile .table th,
  div.student-profile .table td {
    font-size: 15px;
    word-break: break-word;
  }

  /* --- Qui sommes-nous --------------------------------------------------- */
  .us-center .text-center .add-button {
    display: block;
    margin: 12px 16px;
  }
  .us-btn-text {
    display: inline-block;
    width: auto;
    font-size: 17px;
    padding: 14px 24px;
    margin: 0;
  }
  .clearfix {
    margin: 24px 16px;
    padding: 4px 14px;
    height: auto;
  }
  .img-1,
  .img-2,
  .img-3 {
    float: none;
    display: block;
    width: 110px;
    margin: 8px auto 4px;
  }
  div.clearfix-text-right,
  div.clearfix-text-left {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .clearfix-text-right h1,
  .clearfix-text-left h1 {
    font-size: 24px;
  }
  .clearfix-text-right p,
  .clearfix-text-left p,
  .clearfix li {
    font-size: 16px;
    line-height: 1.5;
  }
  .clearfix ol,
  .clearfix ul {
    padding-left: 22px;
  }
}