/**
*
* CONTENTS
*
* SETTINGS
* Variables couleur CSS
*
* TOOLS
* box-sixing
* HTML, BODY config
* font-face
* Custom scrollbar pour FF, Edge, Chrome & Safari
* Icones et svg
* Skew transform
* form & erreur gestion
*
* PAGES
* COMPONENTS
* Sidebar fixe
* Navbar header fixe
* switch menu header
*
**/

/**--- font-face ---**/
@font-face {
    font-family: 'ClanOT-Medium', sans-serif;
    src: url("/assets/font/ClanOT-Medium.ttf") format("trueType"),
        url('/assets/font/ClanOT-Medium.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Poppins'),
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/assets/font/poppins-v15-latin/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  
@font-face {
    font-family: 'FF Clan';
    src: local('FF Clan Medium'),
        url('/assets/font/ClanOT-Medium/ClanOT-Medium.woff') format('woff'),
        url('/assets/font/ClanOT-Medium/ClanOT-Medium.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: ClanOT;
    font-style: normal;
    font-weight: 600;
    src: local("ClanOT-NarrowMedium"), url("/assets/font/ClanOT-NarrowMedium.woff") format("woff");
}

@font-face {
    font-family: "ClanOT-NarrowMedium";
    font-style: normal;
    font-weight: 600;
    src: local("ClanOT-NarrowMedium"), url("/assets/font/ClanOT-NarrowMedium.woff") format("woff");
}

@font-face {
    font-family: 'ClanOT-NarrowBook';
    font-style: normal;
    font-weight: normal;
    src: local('ClanOT-NarrowBook'), url("/assets/font/ClanOT-NarrowBook.woff") format('woff');
    }
    
@font-face {
    font-family: 'ClanOT-NarrowThin';
    font-style: normal;
    font-weight: normal;
    src: local('ClanOT-NarrowThin'), url("/assets/font/ClanOT-NarrowThin.woff") format('woff');
    }
    
@font-face {
    font-family: 'ClanOT-NarrowNews';
    font-style: normal;
    font-weight: normal;
    src: local('ClanOT-NarrowNews'), url("/assets/font/ClanOT-NarrowNews.woff") format('woff');
    }
    
@font-face {
    font-family: 'ClanOT-NarrowBold';
    font-style: normal;
    font-weight: normal;
    src: local('ClanOT-NarrowBold'), url("/assets/font/ClanOT-NarrowBold.woff") format('woff');
    }
    
@font-face {
    font-family: 'ClanOT-NarrowBlack';
    font-style: normal;
    font-weight: normal;
    src: local('ClanOT-NarrowBlack'), url("/assets/font/ClanOT-NarrowBlack.woff") format('woff');
    }
    
@font-face {
    font-family: 'ClanOT-NarrowUltra';
    font-style: normal;
    font-weight: normal;
    src: local('ClanOT-NarrowUltra'), url("/assets/font/ClanOT-NarrowUltra.woff") format('woff');
    }


.font-ff-clan {
    font-family: 'FF Clan'!important;
}

.font-Roboto {
    font-family: 'Roboto', sans-serif;
}

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  
body {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    color: var(--main-color_paragraphe);
}

body.inscription > .bg {
    background: url("/assets/img/other.png") top center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100%;
    width: 100%;
    position: fixed;
    /* top: 86px; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-filter: blur(15px);
}
body.inscription > .bg::after {
    content:"";
    background-color: rgba(255,255,255,.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    width: 100%;
    z-index: 1;
}

body.p-prestation-assistance-am .bg,
body.p-prestation-forfait-am .bg {
    background: var(--white)!important;
}

.home {
    font-family: 'FF Clan';
}

.dashboard-Module {
    /* margin-top: 13em !important; */
    /* padding-top: 2em;    */
}

.dashboard-Module article > div {
    border-radius: 20px;
}

.dashboard-Module  .entete-bloc {
    text-align: center;
}

.dashboard-Module .titre-bloc  {
    margin-top: 1em;
}

.dashboard-Module .entete-bloc h1 {
    font-size: 15px;
}

.dashboard-Module .entete-bloc h1.number {
    font-size: calc(7 * var(--basePX));
}

.dashboard-Module .carousel-control-next, 
.dashboard-Module .carousel-control-prev {
    opacity: 1;
    width: 31px;
}

.dashboard-Module .btn {
    font-family: 'ClanOT-NarrowNews';
    font-weight: normal;
    font-size: 18px !important;
    padding: 0.5em 1.5em;
}

.dashboard-Module .container-profil h1 {
    font-size: calc(6 * var(--basePX) + 4px);
    font-family: 'FF Clan', sans-serif;
} 

.dashboard-Module .container-profil h2,
.dashboard-Module .container-besoin h2 {
    letter-spacing: 6.8px;
}

.dashboard-Module .container-profil h3,
.dashboard-Module .container-besoin h3  {
    letter-spacing: 1.8px;
    font-size: 27px;
}

.dashboard-Module .entete-bloc svg {
    width: 81px;
    height: auto;
}

.container-formation .entete-bloc svg {
    width: 60px;
    height: auto;
}
.container-formation h3.subtitle {
    text-align: left;
    font-size: 24px;
    line-height: 31px;
    font-family: 'ClanOT-NarrowNews';
}
.container-formateur-dispo svg {
    color: var(--color_demande);
}

.container-solutions p {
    color: var(--color_demande);
    font-family: 'FF Clan';
    font-size: 25px;
    line-height: 40px;
}

.container-temoignage p {
    font-size: 17px;
    line-height: 20px;
    color: #070505;
}

.container-messagerie {
    text-align: center;
}

.container-messagerie a.btn {
    padding: 0;
}

.container-messagerie svg {
    width: 100%;
}

@media (max-width: 500px) {
    body.notConnected.home .dashboard {
        background-color: #fff;
        padding-bottom: .5rem;
    }
    body.notConnected.home .mainnavheader .navbar-brand {
        margin-left: 0;
    }
}

/* quand pas connecté */
.resetStyle {
    flex-grow: 0;
}
/* --- quand pas connecté */

body .mainfooter,
body .main {
    position: relative;
    /*z-index: 2;*/
}

.recherche {
    position: relative;
    z-index: 1;
}
.recherche + .mainfooter {
    display: none
}

._md-nav-bar-list ._md-nav-button {
    font-family: ClanOT;
    text-transform: Capitalize;
    font-weight: 300;
}

md-menu-item > .md-button {
    font-family: ClanOT;
    text-transform: Capitalize;
    font-weight: 300;
}

/** Main **/
.main {
    /* padding-top: 144px; */
    min-height: 100%;
    padding-bottom: 5.5em;
}

.bodyMain {
    background: url("/assets/img/accueil.png") no-repeat center top;
    /* background-size: auto; */
    padding-top: 2em;
    padding-bottom: 2em;
    min-height: 100%;
    background-size: cover;
}


@media (max-width: 1200px) {
    .bodyMain {
        /* background-position-y: 235px; */
        padding-top: 37px;
    }
}

@media (max-width: 992px) {
    .bodyMain {
        /* background-position-y: 175px; */
        padding-top: 37px;
    }
}


/**--- Skew transform ---**/
.skew-transform--top-to-bottom {
    transform: translateZ(0) skew(360deg, 6deg);
}
/* corrige l'effet skew pour les enfants */
.skew-transform--top-to-bottom > *,
.skew-transform--top-to-bottom > a {
    transform: translateZ(0) skew(360deg, -6deg);
}

.skew-transform--bottom-to-top {
    transform: translateZ(0) skew(360deg, -6deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.skew-transform--bottom-to-top--4deg {
    transform: translateZ(0) skew(360deg, -4deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* corrige l'effet skew pour les enfants */
.skew-transform--bottom-to-top > *,
.skew-transform--bottom-to-top > a,
.skew-transform--bottom-to-top > hr {
    transform: translateZ(0) skew(360deg, 6deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.skew-transform--bottom-to-top--4deg > *,
.skew-transform--bottom-to-top--4deg > a,
.skew-transform--bottom-to-top--4deg > hr {
    transform: translateZ(0) skew(360deg, 4deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (min-width: 991.01px) {
    .skew-transform--bottom-to-top__lg {
        transform: translateZ(0) skew(360deg, -6deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .skew-transform--bottom-to-top__lg > * {
        transform: translateZ(0) skew(360deg, 6deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}


/*------------------------------*\
    #PAGE INDEX
/*------------------------------*/
/*------------------------------*\
    #COMPONENTS
/*------------------------------*/

.hidden {
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -10000px;
    width: 1px;
 }

.navbar .form-control {
    padding      : .75rem 1rem;
    border-width : 0;
    border-radius: 0;
}


/* pour pallier la position sticky du parent qui a un z-index supérieur, ce n'est pas normal car il n'y a pas de style en contre ordre :/ */
.md-standard-list-container.md-autocomplete-suggestions-container, .md-virtual-repeat-container.md-autocomplete-suggestions-container {
    z-index: 1000!important;
}





/* Visualisation d'une annonce ======================================================== */
.disabled {
    /* Make the disabled links grayish*/
    color: gray !important;
    /* And disable the pointer events */
    pointer-events: none;
}


/* Formulaire ajout/modification annonce ======================================================== */
.fieldset {
    position: relative;  
}


.p-dashboard md-autocomplete {
    background-color: transparent;
}
.p-dashboard md-autocomplete md-autocomplete-wrap input{
    border: var(--main-color_freelance) 1px solid;
    border-radius: 30px;
    height: 40px!important;
    background-color: #f9f9f9;
}

/* ********************************** */
.progress-circle {
    position: relative;             /* pour servir de référent */
    box-sizing: border-box;         /* prise en compte bordure dans la dimension */
    font-size: 6em;                 /* pour définir les dimensions */
    width: 1em;                     /* fixe la largeur */
    height: 1em;                    /* fixe la hauteur */
    border-radius: 50%;             /* rendu aspect circulaire */
    border: .15em solid #CDE;       /* couleur de fond de l'anneau */
    background-color: #FFF;         /* couleur de fond de la progress bar */
}
.progress-masque {
    position: absolute;
    width: 1em;                     /* 100% de la largeur */
    height: 1em;                    /* 100% de la hauteur */
    left: -.15em;                   /* décalage de la largeur bordure de la gauge */
    top: -.15em;                    /* décalage de la largeur bordure de la gauge */
    clip: rect(0, 1em, 1em, .5em);  /* par défaut seule la partie droite est visible */
}
.progress-circle[data-value^='5']:not([data-value='5']):not([data-value^='5.']) .progress-masque,
.progress-circle[data-value^='6']:not([data-value='6']):not([data-value^='6.']) .progress-masque,
.progress-circle[data-value^='7']:not([data-value='7']):not([data-value^='7.']) .progress-masque,
.progress-circle[data-value^='8']:not([data-value='8']):not([data-value^='8.']) .progress-masque,
.progress-circle[data-value^='9']:not([data-value='9']):not([data-value^='9.']) .progress-masque,
.progress-circle[data-value^='100'] .progress-masque {
    clip: rect(auto, auto, auto, auto);
}
.progress-barre,
.progress-sup50 {
    position: absolute;
    box-sizing: border-box;         /* prise en compte bordure dans la dimension */
    border-width: .15em;            /* largeur bordure de la gauge */
    border-style: solid;
    border-color: var(--main-color_freelance);
    border-radius: 50%;             /* rendu aspect circulaire */
    width: 1em;                     /* largeur à 100% */
    height: 1em;                    /* hauteur à 100% */
    clip: rect(0, .5em, 1em, 0);    /* on ne garde que la partie gauche */
}
.progress-sup50 {
    display: none;
    clip: rect(0, 1em, 1em, .5em);
}
.progress-circle[data-value^='5']:not([data-value='5']):not([data-value^='5.']) .progress-sup50,
.progress-circle[data-value^='6']:not([data-value='6']):not([data-value^='6.']) .progress-sup50,
.progress-circle[data-value^='7']:not([data-value='7']):not([data-value^='7.']) .progress-sup50,
.progress-circle[data-value^='8']:not([data-value='8']):not([data-value^='8.']) .progress-sup50,
.progress-circle[data-value^='9']:not([data-value='9']):not([data-value^='9.']) .progress-sup50,
.progress-circle[data-value^='100'] .progress-sup50 {
    display:block;
}
.progress-circle:after {
    content: attr(data-value) "%";  /* récup. valeur de progression */
    font-size: 0.15em;              /* taille de la font en % du parent */
    height: 100%;                   /* centrage dans le parent */
    display: flex;
    align-items: center;
    justify-content: center;
  
    /*-- pour effet shadow intérieur --*/
    border-radius: 50%;
    /*box-shadow: 0 0 .5em rgba(0, 0, 0, .5) inset;*/
}

.progress-circle.red {
    border-color: #F8E0E0;          /* couleur de fond de la barre */
}
.progress-circle.red .progress-masque {
    border-color: #B40000;          /* couleur de la barre d'avancement */
}