/* on définit la font demandée dans le body, pour qu'elle s'applique partout */
body {
    font-family: 'Open Sans', sans-serif;
    background: url('../images/purple_smoke.png');
    background-size: contain;
  }
  
  /* on met l'image de bkd sur le header, mais on met aussi un bkd blanc sur le menu */
  header {
    background: url('../images/purple_smoke.png') transparent left top no-repeat;
    background-size: cover;
    color: white;
    text-align: center;

    
  }

  .Logo{
    border-radius: 20%;
    height: 15%;
    width: 15%;
  }

  .Partenaires{
    display: inline-flex;
    padding-top: 1%
  }

  .Sponso {
    height: 5%;
    width : 10%;
    margin-left: 5%;
  }

  .Sponso-gros{
    height: 2%;
    width : 5%;
    margin-left: 5%;
  }
  
  /* Comme dit dans header, on met un fond blanc à la nav (voir maquette mobile) */
  .navbar {
    background-color: #f8f8f8;
  }
  
  /* on surcharge les éléments de bootstrap. Pour surcharger, le "poids" du selecteur/ciblage doit être le même que celui des styles de bootstrap */
  .navbar,
  .navbar-light .navbar-brand,
  .navbar-light .navbar-toggler {
    color: #777;
    font-weight: 800;
  }
  
  /* on créé la barre entre titre et slogan */
  header hr {
    border-width: 3px;
    border-color: white;
    width: 60px;
  }
  
  /* le graphiste nous a donné la size à définir pour navbar-brand */
  .navbar-light .navbar-brand {
    font-size: 18px;
  }
  
  .navbar-toggler,
  .nav-link {
    font-size: 12px;
    text-transform: uppercase;
    transition: 400ms;
  }
  
  header section {
    padding: 1em 0;
  }
  
  header h1 {
    font-size: 50px;
    font-weight: 800;
  }
  
  h1 a {
    color: white;
    text-decoration: none;
  }
  
  header p {
    font-size: 24px;
    font-weight: 300;
  }
  
  
  
  .page-link {
    text-transform: uppercase;
    color: inherit;
    font-size: 0.8em;
  }
  
  .page-link:hover {
    background-color: #dee2e6;
    color: inherit;
  }
  
  aside {
    display: none;
    padding: 2em 0;
  }
  
  footer {
    margin-bottom: 1em;
  }
  
  footer .social-networks {
    margin: 10px 0;
  }
  
  footer .social-networks a {
    font-size: 40px;
    color: black;
  }
  
  footer .links a {
    color: inherit;
  }
  
  
  footer .social-networks a:hover,
  footer .links a:hover {
    color: rgb(107, 6, 138);
    text-decoration: none;
  }
  
  /* device de 768px min (tablette ou +) => md chez bootstrap */
  @media (min-width:768px) {
  
    /* le header est différent, le titre et le slogan disparaissent */
    header {
      padding-bottom: 0;
      /* on retire le padding-bottom car il n'y a plus de titre et slogan, donc plus besoin de cet espacement */
    }
  
    /* on retire le fond blanc de la navbar */
    .navbar {
      background-color: transparent;
    }
  
    /* on met les textes en blancs car l'image de fond est foncée */
    .navbar,
    .navbar-light .navbar-brand,
    .navbar-light .navbar-toggler,
    .navbar-light .navbar-nav .nav-link {
      color: white;
    }
  
    .navbar-light .navbar-nav .nav-link:hover {
      color: rgb(104, 9, 118);
    }
  
  }
  
  /* devide de 992px de large ou plus => lg chez bootstrap */
  @media (min-width:992px) {
    header section {
      display: block;
    }
  
    header h1 {
      font-size: 80px;
    }
  
    /* pour que le texte soit centré sans être trop prêt des bords */
    header p {
      width: 60%;
      margin: auto;
      padding-bottom: 1%;
    }
  
    /* Affichage de la sidebar => on définit couleurs, size et espacement */
    .card-header {
      background: #3d1d67;
      color: white;
      font-weight: 800;
    }
  
    .card a {
      color: black;
    }
  
    .card-categories a {
      text-transform: uppercase;
    }
  
    .card {
      margin: 2em 0;
    }
  
    aside {
      display: block;
    }
  }