/* *********************************************** */
/*                                                 */
/*                    Smartphone                   */
/*                                                 */
/* **********************************************  */

@media screen and (max-width: 810px)
  { 
    *                /* * pour toucher le navigateur pour Smartphone*/
      {
        margin: 0;
        padding: 0; 
        font-family: 'Times New Roman', Times, serif;
        font-size: x-large;
      }              /* fin de * pour Smartphone */                      

    H1               /* touche tous les H1 pour Smartphone */
      {
        text-align: center;
        padding-top: 1%;
        font-size: 100%;  
      }              /* fin de h1 pour Smartphone */

    H2               /* touche tous le h2 pour Smartphone */
      {
        text-align: center;
        padding-right: 6%;
        padding-left: 6%;
        font-size: 80%; 
      }              /* Fin de h2 pour Smartphone */

    p                /* touche tous les p pour Smartphone */
      {
        padding-left: 1%;
        padding-right: 1%;
        font-size: 50%;
      }              /* Fin de p pour Smartphone */

      strong
        {
          font-style: normal;
          font-size: 100%;
        }

    p.alinea         /* Touche toute les classes alinéa dans les p pour Smartphone */
      {
        text-indent: 40px;
      }              /* Fin de alinea  pour Smartphone */

    p.asterix        /* Touche toutes les classes asterix dans les p pour Smartphone */
      {
        font-size: 40%;
      }              /* Fin de asterix pour Smartphone */

/* *************************************************** */
/*                                                     */
/*            Style qui s'apllique au header           */
/*                                                     */
/* *************************************************** */

    .reseau li         /* Touche les li des .reseau pour Smartphone */
      {
        list-style-type: none;    /* Style qui s'applique aux listes pour retirer les points */
      }                 /* fin de .reseau li pour Smartphone */

    .reseau img         /* Touche les img des .reseau pour Smartphone */
      {
        width: 30px;    /* Modifie la taille des icones réseau */
      }                 /* Fin de .reseau img pour Smartphone */

    .reseau             /* Touche .reseau pour Smartphone */
      {
        position: fixed;      /* fixed pour que les icones restent en place */
        top: 15%;       /* top pour determiner la distance à partir du haut de la page */
        left:1%;        /* left pour la disrance à partir de la gauche de la page */
      }                 /* Fin de .reseau pour Smartphone */

/* *************************************************** */
/*                                                     */
/*            Style qui s'apllique au body             */
/*                                                     */
/* *************************************************** */

    main
      {
        padding-top: 1%;
        height: 1400px;
      }

    .Version_Grand_Ecran{display: none;}

    .container
      {
        background-color: white;
        opacity: 0.85;
        margin: 7%;
        margin-left: 15%;
        padding: 2%;
        border-radius: 5%;

        #img_01        /*  touche la photo dans la page index.php  */
          {         
            width: 40%;
            border-radius: 30%;
            display: block;
            margin: auto;
          }            /* Fin de #img_01 pour Smartphone */

        #img_02        /*  touche la photo dans la page A_propos_de_moi.php  */
          {         
            width: 40%;
            border-radius: 30%;
            display: block;
            margin: auto;
          }             /* Fin de #img_02 pour Smartphone */



        #a_propos_01{display: none;}



/**********************************************************************/
/*                                                                    */
/* Modification
 l'affichage du 1er container dans la page index.php   */
/*                                                                    */
/**********************************************************************/

        .version1   /* .version1 est la version adapté pour Smartphone */
          {    
            .container1_v1
              {
                text-align: center;
                font-size: large;
              }
          }         /* Fin de version1 pour Smartphone */ 

        .version2   /* .version2 est la version adapté pour Grand Ecran */
          {
            display: none;  /* Déactivation de l'affichage de cette version */
          }         /* Fin de .version2 pour Smartphone */

        .version3
          {
            display: none;  /* Déactivation de l'affichage de cette version */
          }         /* Fin de .version3 pour Smartphone */

  /* Modifie l'affichage du container dans : horaire_et_tarif.php  */      

        #id_tarif_et_horaire
          {
            display: none;
          }  

        #img_03       /*  touche la photo dans : horaire et tarif  */
          {
            width: 90%;
            border-radius: 5%;
            display: block;
            margin: auto;
            display: none;
          }             /* Fin de #img_03 pour Smartphone */

        #img_04
          {          /*  touche la photo dans : horaire et tarif  */
            width: 90%;
            border-radius: 8%;
            display: block;
            margin: auto;
            display: none;
          }           /* Fin de #img_04 pour Smartphone */

        .horaire_2
          {
            display: none;
          }

        .contenu_H_et_T   /* touche la classe .contenu_H_et_T dans la page horaire_et_tarif.php  */
          {
            .horaires
              {
                width: 90%;

                .les_horaires
                  {
                    list-style-type: none;
                    display: flex;
                    flex-flow: column;
                    align-items: justify;        
                    /* color: rgb(212, 79, 101); */

                    li
                      {
                        font-size: 70%;
                        line-height: 20px;
                      }                         /* fin de li */
                    }                           /* fin de les horaires */
                }

            .tarif
              {
                display: none;
                width: 50%;
              }                             /* fin de .tarif */
          }

/* Fin de modification dans la page horaire_et_tarif.php */


      }                                 /* fin de .container */

    .footer
      {
        margin-left: 20px;;
        display:flex;
        position: absolute;
        top: 1300px;
        color: aliceblue;

        a
          {
            color: aliceblue;
            font-size: 100%;
          }

        .footer01
          {
            width: 100%;
          }                             /* fin de footer01 */

        .footer02
          {
            margin-left: 40px;
          }                             /* fin de footer02 */
      }                               /* Fin de .footer */

  }                                  /******* THE END *********/


form{
  display: block;
  margin-left: 20%;
}                                 /* fin de form */