/* feuille de style*/

/* provisoire*/
/*
.haut{
   top: 260px;
*/
/*Élément décalé de 260px vers le bas p/r à une origine*/
/*
} 
*/

div iframe{
   border: solid  0pt;
   box-sizing: border-box;
}

/* A affiner*/

/*Fonts Google*/
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

*{
    font-family: "Comic Neue", cursive;
    color: black;
    text-align: center;
}
 
/*Style Du corp de l'écran*/


body{      
      background-repeat: no-repeat; 
      background-size: 100%;
      background-position: bottom;
      background-color: rgba(153, 217, 234,1);
      /*background: linear-gradient(top, #3366FF, #FFCC00);*/
      padding: 0pt;
      margin: 0pt;
      }
      
/* Style du header*/
header{
    box-sizing: border-box;
    height: 100px;
    width: 96%;
    
    display:flex;
    align-items: center;
    justify-content: space-around ;
    
    border-radius: 10px;
    box-shadow: 3px 7px 5px rgb(0 0 99) ;
    margin: 3pt 2% 0 2%;
    padding: 0px;
    color: blue;
    background: gold;
}

.logo_club{
    height: 90%;
    display: none;
}

.logo_text{
    font-family: mistral,  comic, georgia;
    font-style: oblique;
    font-size: 20pt;
    text-align: center;
}

#compteur{
    font-family: comic, georgia;
    font-style: oblique;
    font-size: 14pt;
    text-align: center;
    display: none;
}

/* Style du menu navigation*/
nav{
    float: top;
    box-sizing: border-box;
    margin-top: 6pt;
    padding-top : 0pt;
    align-content: center;
    justify-content: center;
    }

.hide{
    display: none;
}

.styleBouton{                                    /*style version téléphone*/
    box-sizing: border-box;
    width: 105px;                               /*largeur bouton*/
    display: flex;                                /*affichage flexible*/
    flex-flow: column wrap;                 /*affichege en colone*/
    justify-content: center;                   /*Aligne le texte dans la hauteur du bouton*/
    text-align: center;                           /*Aligne le texte dans la largeur du bouton*/
       
    border: 2px inset indigo;               /*Bordure*/
    border-radius: 10px;
    box-shadow: 3px 7px 9px aqua inset; /*Ombre*/
   
    background-color: yellow;                  /*Couleur Fond*/
    
    font-size: 8pt;
 }
 
  .styleBouton:hover{                               /*Couleur bouton survolé*/
        box-shadow: 3px 7px 9px yellow inset;
        background-color: aqua;
  } 
     
.hauteurBouton{
     height:25px;  
}

/*Styles navigation spécifiques pour les écrans de taille moyenne type tablette*/
  @media screen and (min-width: 600px) and (max-width: 849px){
      
     .logo_club{
          display: inline-block;
      }
      .logo_text{
          font-size: 30pt;
      }
      .styleBouton{         
          font-size: 8pt;
      }
      }
  /*Styles navigation spécifiques pour les grands écrans type écrans d'ordinateur*/
  @media screen and (min-width: 850px){
      
    #compteur{
        display: inline-block;
    }
    .logo_club{
        display: inline-block;
    }
    .logo_text{
        font-size: 36pt;
    }
    .styleBouton{
        width: auto;
        padding: 0pt 5pt;
        font-size: 9pt;
        display: inline-block;
        flex-direction:  row;
        align-content: center;
        justify-content: space-around ;
        float: left;
    }
}
  
    /*styles pour les pages générales*/
   
.divCorps{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 550pt;
    margin: 0pt;
    padding: 0pt;
    box-sizing: border-box;
   
}

article{
     box-sizing: border-box;
     height: 100%;
}

aside{
     box-sizing: border-box;
     height: 100%;
}

.titresH2{
    padding: 1pt;
    margin: 1pt;
    border: 1pt;
}

.agenda{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 35%;
   
    /*z-index : 1;*/
    z-index: 1;
}

.contenu{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 2 1 65%;
}

/*Styles navigation spécifiques pour les grands et moyens écrans type écrans d'ordinateur & tablette*/
@media screen and (min-width: 600px){

    .divCorps{
        flex-direction: row;
    }

    agenda{      
        flex-direction: column;
        flex: 1 1 35%;
    }

    .contenu{
        flex-direction: column;
        flex: 2 1 65%;
    }   
    
    
    
}