@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: rgb(54,167,128)} .rouge{color:red;}

.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 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;} .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;}
   h2.bleu{color:#3b4b97; text-align: center; font-family: 'anton',Tahoma, Geneva, Verdana, sans-serif; font-size: 1.6em;}  
      /***  container offre  ***/
.offre{display: flex; flex-direction: row; justify-content: space-around;}
 .center{text-align: center;}
 .content-offre h2{color: black;text-align: center; font-family: 'anton', Tahoma, Geneva, Verdana, sans-serif;}
.texte-offre{width: 400px; border:2px solid #35ad7f; border-radius: 15px;}
.texte-offre p{color:black;font-size: 2em; font-family: cursive, Tahoma, Geneva, Verdana, sans-serif; }
     .image-offre{text-align: center;}
     /*** container footer ***/
     .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;}
       
       /**  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;}
}