/* public/css/responsive.css */

/* Tablettes et mobiles */
@media (max-width: 768px) {

  /*hauteur de l'image parchment_middle_720.png 720 x 218*/
  :root {
    --middle-segment-height: 218px;
  }
	
  .parchment-middle-segment {
			width: 100vw;
			height: var(--middle-segment-height, 218px);
			background-image: url('./../images/parchment_middle_720.png');
	}


  .container {
    width: 95%;
  }

  /* header h1 {
    font-size: 1.5rem;
  }

  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.2rem;
  } */
  .user-info {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  table {
    width: 100%;
    font-size: 0.7rem;
  }

  th, td {
    padding: 0.5rem;
  }

  .button {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
  }

  .button-disabled {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
  }


}

/* Mobiles */
@media (max-width: 480px) {

  /*hauteur de l'image parchment_smrt_middle.png 390 x 120*/
  :root {
    --middle-segment-height: 120px;
  }

  .parchment-middle-segment {
			width: 100vw;
			height: var(--middle-segment-height, 120px);
			background-image: url('./../images/parchment_smrt_middle.png');
	}

  /* header h1 {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 1.2rem;
  }
  h2 {
    font-size: 1.1rem;
  } */

  .form-group {
    margin-bottom: 1rem;
  }

  .level-tabs {
    display: flex;
    flex-direction: column;
  }

  .level-tab {
    margin-bottom: 0.5rem;
  }

  .button  {
    padding: 0.5rem;
    font-size: 0.8rem;
  }

  .button-disabled {
    padding: 0.5rem;
    font-size: 0.8rem;
  }

  table {
    width: 100%;
    font-size: 0.6rem;
  }

  /*Les boutons dans un tableau sont plus petits sur mobile */ 
  /* table .button {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
  } */

}