@font-face {
    font-family: 'square';
    src: url("/public/font/SquarePeg-Regular.ttf");
    
}
@font-face{
    font-family: 'anton';
    src: url("/public/font/Anton-Regular.ttf");
}
@font-face{
    font-family: 'caveat';
    src: url("/public/font/Caveat-VariableFont_wght.ttf");
}
body{margin:0; padding:0;}
/** framework perso  ***/
.center{text-align: center;}
.justify-cont{justify-content: center;}
.width50{width: 50%;} .width10{width: 10%;}
.width50p{width: 50px;}
.marg-auto{margin:auto;}
.vert{color:#36a780} .rouge{color:rgb(240, 86, 86);} .bleu{color:#35468b}
.box-row{display: flex;flex-direction: row; width: 100%;}
/**  Navigation  **/
.container1{/*background-image: url(../public/images/data-audit.jpg)*/display: flex; flex-direction: column;z-index: 1;width: 100%;min-height: 400px; }
.fond{width: 100%; max-height: 500px;}
.logo img{width: 400px;} .logo{height: 150px;}
.nav-page, .nav-portable{background-color: black; opacity: 0.9; color: white;}
.nav-content{width: 100%;justify-content: space-around; font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif;}
.onglet{font-size: 2em;} .onglet a{color:white; font-weight: bold; text-decoration: none;}
.home{width: 40px; color: white;} .home img{border-radius: 50%; margin-top: 30px;} 
.logo{text-align: center;opacity:0.9;background-color: white;}
.logo p{font-size: 2em;font-weight: bolder; margin-bottom: 0px;margin-top: 0px; padding-bottom: 10px;}
.navigation{display:flex;z-index: 22;width: 100%; position: absolute; top:0;}
#portable{display: none;} .nav-portable{display:flex;} #menu{display: none;}
#destock{display: block;}
i{font-size: 1.5em; padding: 15px;}
/***    accueil        ***/
h1, h3{font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif; font-size: 2.5em;text-align: center;}
      /***  container cartes    ***/
.container2{display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; }
.card{background-color: white; width: 300px; height: 700px; border:2px solid #35ad7f; border-radius: 20px; margin: 10px}
.card-title{height:50px ; text-align: center;} .card-image{height: 150px;} .card-content{height: 250px; padding: 7px;}
.card-title p, .card-content p{font-family: 'square', Tahoma, Geneva, Verdana, sans-serif; font-size: 2em; font-weight: bold;}
.card-image{width: 80%;margin: auto; text-align: center;}

      /***  container acteur ***/
.container3, .container5{background-color: black; padding: 20px}
.content-acteur h2{color: white;text-align: center; font-family: 'anton', Tahoma, Geneva, Verdana, sans-serif;}
.bouton{background-color: #3b4b97; text-align: center; width: 150px; margin: auto; border-radius: 5px;margin-bottom: 5px;} .bouton a{text-decoration: none;color: white; font-size: 2em;font-family: 'square', Tahoma, Geneva, Verdana, sans-serif;font-weight: bold; }
.image-acteur{width: 200px; height: 250px;} .image-acteur img{width: 100%;}
.acteur{display: flex;flex-direction: row; padding: 20px;}
.content{width: 100%; text-align: center;}
.content p, .content h3{color: white; font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif; font-size: 2.2em; font-weight: bold;}
      /*** container assistance ***/
.container4 h2{width: 60%; margin: auto; border: 2px solid #35ad7f; padding: 10px; text-align: center; border-radius: 5px; margin-top: 20px;font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif;font-size: 2em;}
.assistance, .offre, .horaire{display: flex; flex-direction: row; width: 80%; margin: auto; padding-bottom: 10px;}
.image-assistance, .image-offre{width: 40%;display: flex ; flex-direction: column; text-align: center;} .texte-assistance{width: 60%;} .texte-assistance p{font-size: 2.5em; font-family: 'square', Tahoma, Geneva, Verdana, sans-serif;}
      /***  container offre  ***/
 .offre p{color: white;}
 .content-offre h2{color: white;text-align: center; font-family: 'anton', Tahoma, Geneva, Verdana, sans-serif;}
.texte-offre{width: 60%;}
.texte-offre p{font-size: 2.5em; font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif; }
     /*** info localisation magasin ***/
small{color: white;}
.image-maps{display: flex; flex-direction: column; text-align: center;}
.content-magasin h2{color: white;text-align: center; font-family: 'anton', Tahoma, Geneva, Verdana, sans-serif;}
.magasin{display: flex; flex-direction: row; width: 80%;} .image-magasin{width: 50%}
.texte-magasin{width: 50%;} .marge{margin-left: 20px;}
.texte-magasin p{color: white; font-size: 2em; font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif;padding-left: 40px;}
.fondateur{display: flex; flex-direction: column; width: 80%; margin:auto; padding-top: 20px;} .image-fondateur{width: 60%; margin: auto;text-align: center;}
.image-fondateur img{width: 100%;} .texte-fondateur p{font-size: 2em; font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif;}
.footer{text-align: center;} .footer p{color: white; font-family: 'caveat', Tahoma, Geneva, Verdana, sans-serif; font-size: 2em;}
/* Gestion des mobiles  */
/* points de rupture  321 360 410 540 620 720 820 980 1020 1280*/
@media all and (min-width:280) and (max-width: 300px){
      .card{background-color: white; width: 280px; height: 700px;}
}
@media all and (min-width:270px) and (max-width: 540px){
       /** bloc navigation **/
       #portable{display: block;} .nav-portable{display:flex;} #menu{display: none;}
       #destock{display: none;}
       i{font-size: 2em; padding: 15px;}
       .container1{min-height: 250px!important;}
       /** bloc acteur doit etre column **/
        .acteur{flex-direction: column;}
       /** bloc assistance doit etre column  **/
       .assistance{width: 100%; flex-direction: column;}
       .image-assistance{width: 100%;}
       .texte-assistance{width: 80%; margin:auto;}
       .texte-assistance p {font-size: 2em;}
       /**  magasin localisation  **/
       .magasin{width: 100%; flex-direction: column; text-align: center;}
       .texte-magasin{width: 100%; padding-left: 2px;} .texte-magasin p{padding-left: 5px;}
       .image-magasin{width: 100%}
       .marge{margin-left: 5px;} .container3{margin-bottom: 10px;}
       .offre{flex-direction: column; text-align: center;} .image-offre{width: 100%;} 
       .texte-offre{width: 100%;}
       .image-offre img{width: 100%;background-size: cover;}
}