* {
   box-sizing: border-box;
}

body
{
   font-family: verdana,arial,helvetica,sans-serif;
   font-size: 90%;
   background-color: #848bd6;
   margin: 0px;
}

a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   color: #990000; /* Les liens seront en rouge au lieu de bleu */
}

a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: #990000;
}

a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   color: #990000; /* Le lien sera écrit en rouge */
}

h1
{
   font-weight: bold;
   font-size: 24px;
   text-align: center;
}

h1 span
{
   display: block;
   font-size: 22px;
   padding-top: 10px;
}

h1.acceuil
{
   font-size: 18px;
}

h2
{
   font-weight: bold;
   font-size: 20px;
}

.center
{
   text-align: center;
}

header
{
   background: #efd5b4;
}

.navbar
{
   overflow: hidden;
   background-color: #1b4d92;
}

.navbar a /* Style the navigation bar links */
{
   float: left;
   display: block;
   color: white;
   text-align: center;
   padding: 14px 20px;
   text-decoration: none;
   font-size: 15px;
   font-weight: bold;
}

.navbar a:hover /* Change color on hover */
{
   background-color: #3a5ba0;
   color: white;
}

.navbar a.right /* Right-aligned link */
{
   float: right;
   padding: 8px 20px;
}

.navbar div.search
{
   float: right;
   padding: 12px 20px;
}

.content
{
   max-width: 1600px;
   margin: auto;
}

.contenu
{
   background-color: #efd5b4;
   padding: 1em; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   margin-bottom: 15px;
}

.box
{
   display: inline-block;
   max-width: 480px;
   vertical-align: top;
   padding: 1em;
}

.acheter img
{
   margin: 0px 2px;
}

.retour
{
   font-size: 18px;
}

.iframe-container
{
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   height: 0;
}

.iframe-container iframe
{
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
}

.row /* Column container */
{  
   display: -ms-flexbox; /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE10 */
   flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */

.side /* Sidebar/right column */
{
   -ms-flex: 30%; /* IE10 */
   flex: 30%;
   background-color: #848bd6;
   padding: 20px;
}

.side a /* Tous les liens se trouvant dans side */
{
   color: black;
   text-decoration: none; /* Les liens ne seront plus soulignés */
}

.side a:hover /* Quand on pointe sur un lien du side */
{
   color: #990000;
   text-decoration:underline;
}

.side a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   color: black;
}

.side li
{
   line-height: 1.5;
   font-size: 12px;
   font-weight: bold;
   list-style-type: none /* Retirer les puces */
}

.accordion
{
   background-color:#1b4d92;
   color: white;
   cursor: pointer;
   margin: 10px;
   padding: 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   font-weight: bold;
   transition: 0.4s;
}

.active, .accordion:hover
{
   background-color: #efd5b4;
   color: black;  
}

.panel
{
   padding: 0 18px;
   display: none;
   background-color: #d8ddf8;
   overflow: hidden;
}

@media screen and (min-width:300px)
{
.columns {
   -webkit-columns: 2 150px;
   -moz-columns: 2 150px;
   columns: 2 150px;
  }
}

.main /* Main column */
{   
   -ms-flex: 70%; /* IE10 */
   flex: 70%;
   background-color: #848bd6;
   padding: 20px;
}

footer
{
   padding: 5px 20px;
   background: #efd5b4;
}

.liens
{   
   text-align: center;
   color: #990000;
   padding: 0px 0px 20px;
   text-decoration: none;
   font-size: 15px;
   font-weight: bold;
}

/* Responsive layout - when the screen is less than 768px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px)
{
    body {
        font-size: 80%;
    }
    .row {   
        flex-direction: column;
    }
    .tablet {
        display: none;
  }
}

/* Responsive layout - when the screen is less than 480px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 480px)
{
    body {
        font-size: 80%;
    }
    .navbar a {
        float: none;
        width: 100%;
    }
    .phone {
        display: none;
  }
}