/*
 * @autor : dynamic creative
 * @date : 2023
 * @version : Bootstrap 5
 */

/* ---------------------------- */
/*	   Mise en page générale	*/
/* ---------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --font-family : 'Open Sans', sans-serif;
    --color-principal : #ffffff;
    --color-bt : #ffffff;
    --color-foot : #ffffff;
}


body {background-color:var(--bg-color); background-image: var(--bg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; backdrop-filter: blur(var(--bg-blur));}
.container {max-width: 1260px;}
a {text-decoration: none;}

/**/
section {min-height: 100vh; font-family:var(--font-family); color:var(--color-principal); font-size:16px; padding:20px 0;}
#profil {max-width: 500px; margin:0 auto;}
.profil-pic {height:var(--logo-height);}
.profil-pic img {object-fit: cover; height: 100%; width:auto;}
h1 {font-size:24px; font-weight: 600; margin-top:10px;}
.item-bt {margin:20px 0;}
.item-bt a {width:100%; display: inline-flex; padding:1.428em 1.2em; border-radius: 40px; color:var(--color-bt); font-size:14px; text-transform: uppercase; line-height: 1; opacity: 1; transition: all 350ms ease; justify-content: center; align-items: center;}
.item-bt a i {font-size: 24px; margin-right:10px; transition: all 350ms ease;}
.item-bt a:hover {opacity: 0.8;}
.item-bt a:hover i {margin-right:20px;}

.fonction {display: block; font-size: 12px; padding-top:3px;}

.item-collapse {position: relative; margin:0;}
.item-collapse a:after {content:'\f078'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right:20px; top:50%; transform: translateY(-50%); font-size: 16px; color:#fff; transition: all 350ms ease;}
.item-collapse a[aria-expanded="true"]:after {transform: translateY(-50%) rotate(180deg);}
.bloc-collapse .item-bt a {/*padding:12px 20px;*/}

.item-collapse a[aria-expanded="true"] {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

.bloc-collapse > div {padding:20px; background:rgba(0,0,0,0.2); border-bottom-right-radius: 16px; border-bottom-left-radius: 12px;}
.bloc-collapse > div > div {margin:0;}
.bloc-collapse > div > div:not(:last-child) {padding-bottom:10px;}

#reseaux {display:flex; justify-content: center; align-items: center;}
#reseaux .item-reseau {padding:0 10px; font-size:30px;}
#reseaux .item-reseau a {color: #fff; border: 1px solid #fff; border-radius: 50px; width: 40px; height: 40px; display: block; font-size: 24px; transition: all 350ms ease;}
#reseaux .item-reseau a:hover {opacity: 0.8;}

/*style 2*/
.style-2 .item-bt a {position: relative; padding-left: 50px; padding-right: 50px; display:block;}
.style-2 .item-bt a i {position: absolute; left: 30px; top: 50%; transform: translateY(-50%);}

/*foot*/
.foot {color:var(--color-foot); font-size:14px;}
.foot a {color:var(--color-foot);}
.foot a:hover {color:var(--color-principal);}

/*responsive*/
@media screen and (max-width: 480px) {
    .item-bt a {padding:1.2em 1em;}
}