style.css

#bloc_page{
    width: 900px;
    margin: 00 auto;
   
  }
  @media all and (max-device-width: 480px) and (max-width: 780px)
  {
      
      #bloc_page{
      width: auto;
      background: white;
      margin: auto;
      diplay: block;
        
   
    }
  }
  
  
  body{
   background:#FFFAFA;
  }
  
  /*Header*/
  #imagehaute{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0px;
  width: 100px;
  height: 100px;}
  
  /*Nav*/
  
  nav{
  display: inline;
  
  }
  nav li{
    display: inline-block;;
    margin-right: 10px;
   }
  
   nav ul{
     list-style-type: none;
   }
  
    
  nav a{
    font-size: 15 px;
    color:#cc5897;
    padding-bottom: 3px;
    border-radius: 10px;
    text-decoration: none;
  }
  
  nav a:hover{
    color: #c798a2;
    border-bottom: 3px solid #cc5897
  }
  
  
  /*article*/
  
  article{
  display: inline-block;
  text-align: center;
  font-family: cursive;
  width: auto;
  border: 1px solid #cc5897;
  vertical-align :top;
  border-radius: 10px;
  
  }
  
  /*section*/
  
  section{
    border: 1px solid #c798a2;
    display: inline-block;
    vertical-align: top;
    width: auto;
    border-radius: 10px;
      
  }
  
  /*Evenements*/ /*Cours*/
  #cours{
  width: auto;
  font-family: cursive;
  }
  
  
  #cours a{
    font-size: 15 px;
    color:#cc5897;
    padding-bottom: 3px;
    border-radius: 10px;
    text-decoration: none;
    font-family: cursive;
  }
  #cours a:hover{
    color: #c798a2;
    border-bottom: 3px solid #cc5897
    font-family: cursive;
  }
  
  /*Actualites*/
  #actualite{
  width: auto;
  font-family: cursive;
  text-align: center;
  }
  
  
  /*Photo1*/
  .photo1{
    text-align: center;
    border-radius: 10px;
    float: none;
  }
  
  /*Contact*/
  
  .reseau{
    text-align: center;
    font-family: cursive;
  }
  
  
  /*formulaire*/
  :required{
    background-color: rgba(255, 0, 0, 0.425);
    font-family: cursive;
  }
  
  
  form {
    /* Uniquement centrer le formulaire sur la page */
    margin: 0 auto;
    width: 400px;
    position: relative;
    top: 50px;
    /* Encadré pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #cc5897;
    border-radius: 1em;
  }
  
  form div + div {
    margin-top: 1em;
  }
  
  label {
    /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
    display: inline-block;
    width: 90px;
    text-align: right;
  }
  
  input, textarea {
    /* Pour s'assurer que tous les champs texte ont la même police.
       Par défaut, les textarea ont une police monospace */
    font: 1em cursive;
  
    /* Pour que tous les champs texte aient la même dimension */
    width: 300px;
    box-sizing: border-box;
  
    /* Pour harmoniser le look & feel des bordures des champs texte */
    border: 1px solid #999;
  }
  
  :focus{
    background-color:azure;
  }
  
  textarea {
    /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
    vertical-align: top;
  
    /* Pour donner assez de place pour écrire du texte */
    height: 5em;
  }
  
  .bouton {
    /* Pour placer le bouton à la même position que les champs texte */
    padding-left: 90px; /* même taille que les étiquettes */
  
  }
  
  bouton {
    /* Cette marge supplémentaire représente grosso modo le même espace que celui
       entre les étiquettes et les champs texte */
    margin-left: .5em;
  }
  
  /*Evenements*/
  
  
  /*Footer*/
  footer{
  text-align: center;
   
  }