/* Media query pour les smartphones portrait */
@media screen and (max-width: 480px) and (orientation: portrait) {

/* ==================================
  Mettre les containers en cascade
=====================================*/

  .header,
  .button-container-haut,
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 98%;
  }
  
 .footer {
    width: 96%;
	font-size: 0.8em;
	margin-top: 4px;
	
}
/* ====================
  button-container haut
=======================*/

  /* Alignement horizontal des boutons du container haut */
  .button-container-haut {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    width: 90%;
  }

  .button-haut {
    font-size: 0.8em;
	height:2.2vh;
    color: black;
	border-radius:3vw;
  }
  
/* ================
  button-container
==================*/

  .button-container,
  .content {
    width: 98%;
    max-width: 98%;
    padding: 10px;
    margin-top: 4px;
	border-radius: 5px;
  }
  
  .button-container {
    margin-right:0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
  }
   
    /* Styles pour les boutons */
  .button-container .button {
	width: calc(45% - 10px); 
	border-radius:3vw;
  }
  
  /* Styles pour les boutons */
  .button-container .button,
  .button span {
  font-size: 0.8em;
  }

/* ================
  Content container
==================*/

 .content {
	margin-left:0px;
  }

/* =======================
  Styles pour les images
  =======================*/
  .header img,
  .content p img {
    max-width: 95%;
    height: auto;
  }
  
  .image-large {
    width: 90vw;
    height: auto;
    max-width: 100%;   
}

/* =======================
  Styles pour les textes
  =======================*/
  .content p,
  .same-size-img-text-Massage,
  .dynamic-heading,
  .title,
  .content h1,
  .content h2 {
    font-size: 0.9em;
  }

  .same-size-img-text-Massage {
    margin-left: 2px;
  }

  .dynamic-heading {
    color: orange;
  }
  
  body,
  p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
  }

/* =======================
  Styles pour les listes
  =======================*/
  ul,
  ul li {
    font-size: 0.8em;
    margin-left: 5px;
  }
/* =======================
  Styles pour les tableaux
  =======================*/
  .Tab-prix {
    width: 100%;
    font-size: 0.8em;
  }
}