@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de styles gère XXXXX
 */

/*
==================================================
    Table of Contents / Sommaire
==================================================
    #Mobile (Portrait)  // 320px
    #Mobile (Landscape) // 576px
    #Tablet (Portrait)  // 768px
    #Tablet (Landscape) // 992px
    #Computer           // 1200px+ > 1250 avec scrollbar 
*/

/*
==================================================
    Mobile (Portrait)   // 320px
==================================================
    Pas besoin de déclarer de média queries
*/

/**
 * D TF FORMATION
 */
.headerFormaTitre {
    background: var(--neutral-dark);
    color:#FFF;
    padding: 8.333333%;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}


.headerFormaTitre .h1 {
    font-size: 170%;
    line-height: 1.1;
    color:#FFF ;
    font-weight: 600;
    margin-bottom: 2rem;
}

.headerFormaTitre .dates {
    text-align:right;
    font-weight: 600;
}

.headerFormaTitre .dates span {
    text-transform: uppercase;
    font-weight: 200;
    font-size: .813rem;
}

/**/
.headerFormaInscription {
    text-align:center;
    background: var(--color-pastel);
    color:var(--neutral-dark);
    padding: 1rem;
}

.headerFormaInscription .h4 {
    font-size: 120%;
    padding-bottom: 1rem;
}

.headerFormaInscription .h4:after {
    content:"";
    position: absolute;
    width: 100px;
    height: 1px;
    background: var(--neutral-main);
    bottom: 0;
    left:calc(50% - 50px);
}

.headerFormaInscription .date {
    font-size: 1.2rem;
}

html.dtfForma .video iframe {
    max-width: 100%;
}

html.dtfForma .intro table {
    width: 100% !important;
}

html.dtfForma .intro pre {
    border: 1px solid var(--color-main);
    padding: .813rem;
    overflow: hidden;
    font-family: var(--font-main);
    font-size: 100%;
    white-space: normal;
}

html.dtfForma .intro pre a {
    color: var(--color-main);
}


/* accordeon */
#accordionFormaDetails button {
    position:relative;
    color:var(--neutral-main);
    background:var(--neutral-pastel);
    border-radius:var(--radius-sm);
    width: 100%;
    text-align: left;
    border: 0;
    padding: .688rem 2rem .688rem 1rem;
    line-height: 1.2;
    font-size: 120%;
    
    transition: none !important;
}

#accordionFormaDetails button:after {
    content:"";
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color:var(--neutral-main);
    position: absolute;
    right: 1rem;
    top: .688rem;
    font-size: 1.5rem;
    line-height: 1;
}

#accordionFormaDetails button[aria-expanded=true] {
    color:#FFF;
    background:var(--focus-main);
}

#accordionFormaDetails button[aria-expanded=true]:after {
    content: "\f106";
    color:#FFF;
    opacity:.5;
}

#accordionFormaDetails button strong {
    text-transform: uppercase;
}

#accordionFormaDetails .card-body {
    padding-left: 0;
    padding-right: 0;
}

/* Gabarit HTML */
#accordionFormaDetails ul,
#accordionFormaDetails ol {
    padding-left: 0;
}

#accordionFormaDetails ul li,
#accordionFormaDetails ol li {
    list-style: none;
    padding: .5rem 0;
    border-bottom: 1px solid var(--neutral-light);
}

#accordionFormaDetails ul li:last-child,
#accordionFormaDetails ol li:last-child {
    border-bottom: 0;
}

#accordionFormaDetails ol li{
    padding-left: 35px;
    position: relative;
}

#accordionFormaDetails ol li:before{
    position: absolute;
    left:0;
    color:var(--color-main);
    font-weight: 800;
    width: 20px;
    text-align: right;
}

#accordionFormaDetails ol li:first-child:before {content:"1.";}
#accordionFormaDetails ol li:nth-child(2):before {content:"2.";}
#accordionFormaDetails ol li:nth-child(3):before {content:"3.";}
#accordionFormaDetails ol li:nth-child(4):before {content:"4.";}
#accordionFormaDetails ol li:nth-child(5):before {content:"5.";}
#accordionFormaDetails ol li:nth-child(6):before {content:"6.";}
#accordionFormaDetails ol li:nth-child(7):before {content:"7.";}
#accordionFormaDetails ol li:nth-child(8):before {content:"8.";}
#accordionFormaDetails ol li:nth-child(9):before {content:"9.";}
#accordionFormaDetails ol li:nth-child(10):before {content:"10.";}

/**/
#accordionFormaDetails .card-body h4,
#accordionFormaDetails .card-body h4 span {
    color:var(--color-main) !important;
    font-weight: 800 !important;
    font-size: 1.313rem !important;
}

#accordionFormaDetails .card-body h5,
#accordionFormaDetails .card-body h5 span {
    color:var(--neutral-main) !important;
    font-weight: 400 !important;
    font-size: 1.313rem !important;
}

#accordionFormaDetails .card-body h6,
#accordionFormaDetails .card-body h6 span {
    color:var(--color-main) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/**/
#accordionFormaDetails .card-body blockquote {
    font-style: italic;
    position: relative;
    padding-left: 40px
}
#accordionFormaDetails .card-body blockquote:before {
    content:'"';
    position: absolute;
    left:0;
    top:0;
    font-size: 300%;
    color:var(--color-main);
    line-height: .7;
}

#accordionFormaDetails .card-body pre {
    border: 1px solid var(--color-main);
    padding: .688rem;
    overflow: hidden;
    font-family: var(--font-main);
    font-size: 100%;
    white-space: normal;
}

#accordionFormaDetails .card-body pre a {
    color: var(--color-main);
}


/* Caractéristiques */
#accordionCaract .certif {
    background-color:var(--color-main);
    color:#FFF;
    text-align: center;
    padding: .688rem;
    font-weight: 800;
    font-size: 1.313rem; 
}

#accordionCaract .certif span {
    font-style: italic;
    font-size: 1rem; 
}

/* Témoignages */
#accordionTem .one {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--neutral-light);
}

#accordionTem .one p {
    margin-bottom: 0;
    font-style: italic;
}

#accordionTem .one iframe {
    width: 100%;
    height: 200px;
}

/**
 * ASIDE
 */
html.dtfForma aside h3 {
    font-weight: 800;
}

html.dtfForma aside h3 {
    color: var(--neutral-main) !important;
    text-transform: none;
    padding-bottom: .813rem;
    margin-top:1.313rem;
    border-bottom: 2px solid var(--color-main);
    font-size: 1rem;
    display: block;
}

html.dtfForma aside ul {
    padding-left: 0;
    margin-left: 0 !important;
    list-style: none;
    width: 100%;
}

html.dtfForma aside ul li {
    line-height: 1.2;
    text-align: right;
}

html.dtfForma aside ul li a {
    padding: .5rem 0;
    font-size: .813rem;
    display: block;
    text-align: right;
    color:var(--neutral-main);
}

html.dtfForma aside ul li a:hover {
    color:var(--focus-main) !important;
}

html.dtfForma .formaDate {
    display: block;
    background: var(--color-pastel);
    border-radius:var(--radius-sm);
    padding: 1rem;
    margin-right: 1rem;
}

    html.dtfForma .formaDate:last-child {
        margin-right: 0;
    }

html.dtfForma .formaDate strong {
    display: block;
}

/**
 * Listing équipe
 */
.listingTeam .nav-tabs{
    border:0;
    width: 100%;
    margin-bottom: 2rem;
}
 
.listingTeam .nav-tabs .nav-item .nav-link {
    background: var(--neutral-pastel);
    color:var(--neutral-main);
    border-radius:var(--radius-lg);
    text-align: center;
    margin-bottom: 1rem;
    margin-right: 1rem;
    border:0;
    font-size: .813rem;
}

.listingTeam .nav-tabs .nav-item .nav-link.active {
    background: var(--color-main);
    color:#FFF;
}

.listingTeam .tab-content{
    width: 100%;
}
 

.listingTeam .one {
    display: block;
    position: relative;
    margin-bottom: 2rem;
    float: left;
    width: 100%;
}

.listingTeam .one .photo {
    width:5rem;
    height: 5rem;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.listingTeam .one img {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
}

.listingTeam .one .text {
    width: calc(100% - 5rem);
    margin-left: 5rem;
    float: left;
    padding: .5rem .5rem .5rem 1rem;
}


.listingTeam .one .text .job {
    font-size: 13px;
        font-size: .813rem;
}

.listingTeam .one .text .name,
.listingTeam .one .text .job {
    display: block;
}

.listingTeam .one .text .social {
    display: block;
    margin-top: .5rem;
}

.listingTeam .one .text .social a {
    margin-right: 1rem;
    color: #C9C9C9;
}

.listingTeam .one .btn {
     font-size: .688rem;
}

`/**/
    .dtfForma .listingTeam .one .text {
        font-size: 13px;
        font-size: .813rem;
    }


.dtfForma .listingTeam .one .btn {
     display: none;
}

/**
 * Page profil user
 */
.userProfil {
    margin-top: 4rem;
}

.userProfil .photo {
    width:180px;
    height:180px;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.userProfil .photo img {
    min-width: 180px;
}

.userInfos h1 {
    font-size: 2rem;
    color:var(--color-main);
    font-weight:800;
    margin: 2rem 0;
    text-align: center;
}

.userInfos h1 .pseudo {
    text-transform: lowercase;
    color:var(--neutral-main);
    font-size: 50%;
    text-align: center;
}

.userInfos > div {
    clear: both;
    margin-bottom: 1rem;
    float: left;
    width: 100%;
}

.userInfos .label{
    margin-bottom: 1rem;
    display: inline-block;
    font-weight: 800;
    width: 25%;
    font-size: .813rem;
    text-align: right;
    float: left;
    color: var(--neutral-light);
    /*display: none;*/
}

.userInfos .definition{
    display:block;
    float:left;
    color:#000;
    width: 72%;
    padding-left: 3%;
}

.userInfos .label,
.userInfos .definition{
    font-size: .813rem;
}

.userProfil .bio{
    margin-top: 3rem;
}

.userProfil ul{
    margin-left: 0;
    padding-left: 0;
}

.userProfil ul li{
    list-style: none;
    padding: .5rem 0;
    border-bottom: 1px solid var(--neutral-light)
}

.userProfil a.fal,
.userProfil a.fas,
.userProfil a.fa,
.userProfil a.fab {
    color:var(--color-main) !important;
    padding: .813rem;
}
/*
==================================================
    Mobile (Landscape)  // 576px
==================================================
*/
@media screen and (min-width: 576px) {


}/*/mediaquery*/


/*
==================================================
    Tablet (Portrait)   // 768px
==================================================
*/
@media screen and (min-width: 768px) {
/**
 * D TF FORMATION
 */
.container-main#dtfForma {
    padding-right: 0;
    padding-left: 0;
}

html.dtfForma .jumbotron,
html.dtfFormDevis .jumbotron {
    height: 60vh;
}

.headerFormaTitre {
    box-shadow: 4px 0 8px rgba(0,0,0,.2);
    padding: 2rem;
}

/* accordeon */
#accordionFormaDetails button:after {
    top: .5rem;
}


/* Témoignages */
#accordionTem iframe {
    width: 100%;
    height: 400px;
}

/**
 * Listing équipe
 */
.dcms15 aside {
    display: none;
}

.listingTeam .one {
    width: 48%;
    height: 150px;
    margin-right: 4%;
}

    .listingTeam .one:nth-child(2n) {
        margin-right: 0;
    }

}/*/mediaquery*/


/*
==================================================
    Tablet (Landscape)  // 992px
==================================================
*/
@media screen and (min-width: 992px) {

/**
 * Page profil user
 */
.userInfos h1 {
    font-size: 2rem;
    color:var(--color-main);
    font-weight:800;
    margin: 2rem 0;
    text-align: left;
}

.userInfos .label {
    text-align: left;
}

.userInfos .definition {
    border-left: 1px solid var(--neutral-pastel);
}

}/*/mediaquery*/


/*
==================================================
    Computer    // 1200px+ > 1250 avec scrollbar 
==================================================
*/
@media screen and (min-width: 1200px) {
/**
 * Listing équipe
 */
.listingTeam .one {
    width: 32%;
    height: 150px;
    margin-right: 2%;
}

    .listingTeam .one:nth-child(2n) {
        margin-right: 2%;
    }

    .listingTeam .one:nth-child(3n) {
        margin-right: 0;
    }

}/*/mediaquery*/