{/*Pour que le padding soit pris en compte dans le calcule de la largeur pour tout les éléments mais aussi pour tout les éléments before et after*/
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    background:#a9a9a9;
    font-family:Roboto light, sans-serif;
    /*pour charger la police on va sur google fonts puis on copie le lien du css */
    font-size:14px;
    color:rgba(0,0,0,0,0.6);
    margin:0;
    line-height:1.3;  
}

a{
    color:inherit;
    text-decoration: none;
}


/*Première bloc, le topbar */


.topbar{
    background:#0c535d; 
    color:#FFF; 
}


.topbar-logo{
    display:block;
    text-align: center;
    font-size:24px;
    padding:11px 0;  
}

.topbar-nav{
    text-align: center;
    padding-bottom: 50px;
    line-height:1.6;
     
}
.topbar-nav a{
    display: inline-block;
    margin:0 10px;
    color:rgba(255, 255, 255, 0.67);
    transition:color .3s;
    /* la durée de la transition quand on passe le souris sur les liens*/
 }

 .topbar-nav a:hover,
 .topbar-nav a.active{
     color:#d9984b;
     font-weight: bold;
     font-size: 30px;
 }

.accueil::after,
.pages::after,
.services::after,
.ontactez-nous::after{
    display: inline-block;
    background-color: #FFF;
    content: '';
    width: 10px;
    height: 10px;
    background: url(img/barre.png) center center / 10px no-repeat;
    padding-right: 20px;
}

.
 /*icônes réseaux sociaux*/

 .topbar-nav-1{
     color:red;
 }

 .topbar-nav-1 a{
    margin: 0 12px;  
 }

.facebook::before,
.instagram::before,
.linkdin::before,
.twitter::before,
.recherche::before{
    display: inline-block;
    content: '';
    width:20px;
    height: 18px;
    background: url(img/facebook-logo.svg) center center /20px 18px no-repeat;
    margin-right: 5px;
}


.instagram::before{
    background: url(img/instagram-seeklogo.com.svg) center center / 20px 18px no-repeat;
}

.linkdin::before{
    background: url(img/linkdin-logo.svg) center center / 20px 18px no-repeat;
}

.twitter::before{
    background: url(img/twitter-logo.svg) center center / 20px 18px no-repeat;

}

.recherche::before{
    background: url(img/recherche.svg) center center / 20px 18px no-repeat;
}

.topbar-nav-1 a:hover::before{
    border: solid 1px #DBDBDB;
    border-radius: 3px;
    opacity:.64; 
    transition: opacity .3s;
}


.recherche{
    padding: 0px px;
}

/******************************************************************************************************/



/*Deuxième bloc le, bloc central, contient 3 sous-blocs*/

 .container{/*Le container va contenir 3 blocs, un bloc à gauche, un bloc central et un bloc à droite */
     padding:0 15px;
     margin-left: auto;
     margin-right: auto;
 }
 
 .site{
    margin-top: 20px;
    margin-bottom: 20px;
 }



/*1. Le premier sous-bloc, le sous-bloc gauche */

 .sidebar{/*On va aligner les liens et les icônes dans deux colonnes en version mobile, il s'arrange pour que tout rentre dans le bloc*/
    display: flex;
    flex-wrap: wrap;
    margin-bottom:2px;/*Pour espacer la partie de gauche et la partie central dans la version mobile*/
    margin-top: -13px;
 }

 .sidebar-température{
    display: inline-block;
    width: 100%;
    transition:.3s; /*transition pour les icônes*/
    border: solid 19x transparent;
 }

 .sidebar-titre{
     display: block;
     color: #0c535d;
     font-size: 14px;
     border: solid 1px #DBDBDB;
     text-align: center;
     border-radius: 3px;
     font-weight: bold;
     background: #f1f1f1;
 }

.sidebar-titre:hover{
    color:#d9984b;
    font-weight: bold;
}

.sidebar-text{
    display: inline-block;
    color: #FFF;
    font-size: 13px;
    text-align: start;
    margin: 7px 1px;

}


 .main{
     margin-bottom: 20px;
 }

.profil{
    display: none;
}


/*Les liens*/
 .sidebar a {
     display: block;
     width: 50%;
     padding: 0.4em 0; /*Espacement entre les différents liens */
     transition:.3s; /*transition pour les icônes*/
     border: solid 19x transparent;
     padding-left: 10px;
     color: #0c535d;
 }

 /*Les icônes*/
 .sidebar a::before{/*Utilisation de pseudo élément, pour applique des icônes avant tout les élément a de la classe sidebar, permet d'y mettre des icônes avant les textes, ici les parametres sont appliqués à tout les éléments lien*/
     content: '';
     display: inline-block;
     width: 11px;
     height: 9px;
     vertical-align: middle;
     margin-top: -3px;
     margin-right: 15px; /*espace entre les icônes et les textes*/
     opacity:.64; 
     transition: opacity .3s; /*temps de transition d'opacité pour les icônes*/
     background: url(img/icône-home.svg) center center / contain no-repeat;/*Inserction d'icône home, Permet de mettre des icônes en background*/
}

.sidebar .sidebar-messages::before{/*Inserction d'icône messages*/
    background-image:url(img/icône-messages.svg);
}

.sidebar .sidebar-evènement::before{/*Inserction d'icône evènement*/
    background-image:url(img/icône-evènement.svg);
}


.sidebar a:hover, /*Les liens et les icônes vont changer d'apparence pendant le passage du souris sur les liens */
.sidebar a.active{ /*Style de Fil d'actualité, bordure, arrière plan*/
    color:#d9984b;
    border: solid 1px #DBDBDB;
    border-radius: 3px;
    background: #FFF;
    font-weight: bold;
}

.sidebar a:hover::before, /* Permet d'augmenter l'opacity des icônes quand on passe dessus */
.sidebar a.active::before{
    opacity:2;
}
/**************************************************************************/





/*2. Le deuxième sous-bloc, le sous-bloc central */
.card {
    border: solid 1px #dbdbdb;
    background: #F1F1F1;
    border-radius: 3px;
    margin-bottom: 15px;
}

.card:last-child{
    margin-bottom: 0;
}

.card-header {
   padding:10px;
   position: relative;
}


.card-title{
   font-weight: bold;
   color:#0c535d;
   font-size: 30px;
   margin-bottom: 6px 0;
}

.card-title:hover{
color: #0ac775;
}

.card-sous-titre{
   color: rgba(0, 0, 0, 0.38);
   font-size: 12px;
   font-size: 18px;
}

.card-body p:first-child{/*Mettre de la marge en haut sur les premières paragraphes de tout les éléments p*/
    margin-top: 0;
}

.card-body p:last-child{/*Mettre de la marge en bas sur les derniers paragraphes de tout les éléments p*/
    margin-bottom: 0;
}
 
.card-body{
    padding: 0 10px 20px 10px;
}

.card-body a{
    text-decoration: underline;
    color: #000;
   
}
.card-body .fullwidth{
    display: block;
    position: relative;
    opacity: .70;
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
}

/*Footer*/
 .card-footer{
     border-top: solid 1px #dbdbdb;
     background: #fbfbfb;
     display: flex;
     padding: 0 10px;
     font-size: 12px;
     color: #dbdbdb;
     padding: 10px;
     justify-content: space-between; /*  pour placer  la classe .card-like tout à gauche et la classe .card-commentaire tout à droire */
 }


.card-footer a:hover{/*Les éléments du footer seront selectionner quand on passera desssus*/
    text-decoration: underline;
    color: aqua;
}

.card-like::before, /*Pout placer l'icône au début*/
.card-commentaire::before{/*Appliquer les meme paramètres pour la classe card-commentaire, séparer les deux classes par une virgule*/
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(img/icône-jaime.svg) center center / 20px 18px no-repeat;
    margin-right: 5px;

}

.card-commentaire::before{
    background: url(img/icône-commentaire.svg) center center / 18px 17px no-repeat;
}
/***************************************************************************************************/



/*3. Le trosième  sous-bloc, le sous-bloc droit*/

.aside{
    padding-top: 0;
}

.card-header{
    padding: 10px 10px;
}

.aside-title{ 
    margin-top: 0;
    margin-bottom: 5px;
    color: #0c535d;
    font-size: 20px;
}

.aside-title:hover{
    color: #d9984b;
}


.aside-vidéo-surveillance{
    display: inline-block;
    width: 100%;
    transition:.3s; /*transition pour les icônes*/
    border: solid 19x #a9a9a9;    
}


.aside-body{
    font-size: 15px;
    margin: 10px 10px;
    color: #FFF;
}

.aside-detail{
    color:#0c535d;
    font-weight: bold;
}

.aside-detail:hover{
    color: #d9984b;
}


.friend-avatar{
    width: 73px;
    height: 73px;
    flex: none; /*Utile de préciser si l'élément parant est en display flex*/
    margin-right: 10px;
}

.footer{
    display: flex; 
    background-color: #0c535d; 
    padding-top: 50px;
    

}

.footer-adresse{
    display: block;
    width: 300px;
    height: 100px;
    padding-left: 50px;
    padding-right: 100px;
    color:#FFF;
    font-size: 13px;
}

.footer-adresse:hover{
    color: #d9984b;
}

.footer-nav{
    display: block;
    font-size: 12px;
    color: #FFF;
    padding-right: 80px;
}

.footer-nav:hover{
    color: #d9984b;
}




/*Paramètre d'écran, du version mobile au version pc*/

 @media only screen and (min-width: 520px){
/* ces règles sont appliquées pour différencier la version mobile de la version pc */
/*On va inspeter pour voir à quel moment ca casse sur l'écran afin de méttre en place des paramètres adaptatifs*/
/*ici le règle media s'applique lorque la largeur dépasse 520px, sinon il restera en version mobile*/
  
    /*1. L'entête(header)*/
    
.topbar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:64px;
    padding:0 25px;
}
.topbar-logo,
 .topbar-nav{
    padding:0; /*On veut plus qu'ils aient un padding dans la version pc*/
}
.topbar-nav a{
    margin: 0 20px;
}


    

@media only screen and (min-width: 950px){/* ces règles sont appliquées pour différencier la version mobile de la version pc */
   
   /* Le container*/
   
    .site{
        display: flex;
    }

    .profil{
        display: block;
    }

    /* 1. Le Bloc en haut à gauche */
    .sidebar{
        width: 310px;
        flex: none;
        display: block; 
    }

    .sidebar a {
        width: 100%;
    }

      /* 1. Le Bloc en haut à droite */
    .aside{
        width: 350px;
        flex: none;


    /* 1. Le Bloc central */
    }
    .main{/*La partie centrale*/
         width: 100%;
         margin-left: 30px;
         margin-right: 30px;
         
    }
}