/* *********************************************** */
/*                                                 */
/*                    Grand écran                  */
/*                                                 */
/* **********************************************  */

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


    H1                 /* touche tous les H1 Grand écran */
      {
         text-align: center;
        padding-top: 1%;
        font-size: 200%;  
       }               /* fin de h1 */

    H2                 /* touche tous les h2 Grand */
      {
        text-align: center;
        padding-top: 20px;
        font-size: 100%; 
      }                 /* fin de h2 */

    p                   /* Touche tous les p paragraphe Grand Ecran */
      {
        padding-left: 6%;
        padding-right: 6%;
        font-size: 70%;
      }

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

    p.alinea           /* Touche tous les paragraphes p de class alinea */
      {
        text-indent: 40px;  /* creation d'un alinéa */
      }                 /* fin de p.alinea */
    
    p.asterix         /* Touche tous les paragraphes p de class asterix */
      {
        font-size: 40%;    /* diminution de la taille de la police dans le cas d'un asterix */
      }                /* fin de p.asterix */

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

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

    .reseau img                     /* Modifie la taille des Icones reseaux sociaux */
      {
        width: 40px;
      }                             /* fin de .reseau img */

    .reseau
      {
        position: fixed;            /* position : fixed pour que les icones restent en place */
        top: 15%;                   /* top pour la distance par rapport au haut de la page */
        left:1%;                    /* left pour la distance à partir de la gauche */
      }                             /* fin de .reseau */

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

    main                            /* main pour toucher le corps de site */
      {
        padding-top: 1%;
        height: 1400px;             /* determination de la hauteur de la page de manière à pouvoir caler le footer en bas */
      }


    .Version_Smarphone
      {
        display: none;
      }

    .container                       /* touche le conteneur de contenu à afficher */
      {
        background-color: white;
        opacity: 0.85;
        margin: 5%;
        margin-left: 14%;
        padding: 2%;
        border-radius: 10%;
        letter-spacing: 0.5px;

        #img_01
          {                         /*  touche la photo dans la page index.php  */
            width: 80%;
            border-radius: 30%;
            display: block;
            margin: auto;
            margin-top: -5%;
          }                          /* fin de #img_01 */


        #img_03
          {                         /*  touche la photo dans la page horaire_et_tarif.php  */
            width: 90%;
            border-radius: 3%;
            display: block;
            margin: auto;
          }

        #img_04
          {                         /*  touche la photo dans la page horaire_et_tarif.php  */
            width: 90%;
            border-radius: 3%;
            display: block;
            margin: auto;
            display: none;
          }

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

        .version1   /* .version1 est la version adapté pour Smartphone */
          {
            display: none;  /* Déactivation de l'affichage de cette version */
          }         /* Fin de version1 pour Smartphone */
        
        .version2   /* .version2 est la version adapté pour Grand Ecran */
          {
            .contenu /*  modifie l'affichage dans index.php de .contenu */
              {
                display: flex;

                .col1
                  {
                    /* background-color: aqua; */
                    width: 70%;
                    margin: auto;
                    /* padding-left: 20%; */
                  } 

                  .col2
                    {
                      width: 30%;
                    }
              }   /* fin de .contenu dans index.php */
          }       /* Fin de .version2 pour Grand Ecran */

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


/* Modifie l'affichage du container dans la page A_propos_de moi.php */
        .a_propos
          {
            display: flex;
            #img_02     /*  touche la photo dans la page A_propos_de_moi.php  */
              {      
                margin-top: 3%;
                margin-left: 20%;
                width: 35%;
                border-radius: 30%;            
              }       /* Fin de modification de la photo #img_02 */
            .col3
              {
                width: 50%;
              } 
            .col4
              {
                width: 50%;
              }
          }
/* fin de modification du container dans A_propos_de_moi.php */


/* Modifie l'affichage du container dans : horaire et tarifs.php  */
        .horaire_2
          {
            display: none;
          }
        .contenu_H_et_T   /* touche la classe .contenu_H_et_T dans la page horaire_et_tarif.php  */
          {
            display: flex;
            .col_horaires
              {
                width: 50%;
                .les_horaires
                  {
                    list-style-type: none;
                    display: flex;
                    flex-flow: column;
                    align-items: center;        
                    /* color: rgb(212, 79, 101); */

                    li
                      {
                        font-size: 70%;
                        line-height: 20px;
                      }
                  }
              }

            .col_tarif
              {
                /* display: none; */
                width: 50%;
              }
          }
      } /* Fin de container */
  
    .footer
      {
        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 */
  }                                     /* Fin de @media  */
 

form
  {
    display: block;
    margin-left: 20%;
  }