/*

Permet de contrôler les CSS de la charte graphique des pages
v2
*/

:root {
    --main-color: #445;   /* Define a color variable named --main-color #146cdf; */
    --second-color: #ff0046;
}


.slidesFilter div p {
    margin-bottom: 30px;
}
    
.slidesFilter img{
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}


.hero-simple {
    padding: 16rem 2rem 2rem!important;
}


.simplex-wrapper{
    margin:auto;
    max-width:1000px;
    padding: 0px 10px;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}


.bg-primary {
    background-color:var(--main-color) !important;
}

h1, h2, h3, h4, h5, h6 {font-weight:700 !important; color:var(--second-color); }


.h1 {
    font-size: 18px;
    color: var(--main-color);
    font-style: italic;
}
.h1 span {
    margin-left:10px;
}

h2 {padding:25px 0px 15px;
    color:var(--main-color);
}
h3 {padding:15px 0px 10px;}
h4, h5, h6 {padding:12px 0px 8px;}

.container-xxl {
        padding-top: 0px !important;
}

a.navbar-brand {color:white !important;}


.navbar-toggler-icon::before { content:"☰"; color:white; padding-top:3px;}
.navbar-toggler-icon { padding-top: 3px; }
.navbar button { border-color:white;}


.imgLogo {
    background-color: var(--main-color);
    width: 150px;
    border-right: 18px solid var(--main-color);
    border-left: 18px solid var(--main-color);
    border-top: 8px solid var(--main-color);
    border-bottom: 8px solid var(--main-color);
}

.bg-light {
    background-color: #eceeef!important;
}

button[type="submit"]{
    padding: 8px;
    background-color: var(--main-color);
    color:white;
}

.maintagline {
    text-align:left;
    font-size:2em;
    font-weight:500;
    padding: 0px 0px 15px!important;
}


.footer a {
    color:white !important;
    text-decoration: none;
}
.footer a:hover {
    color:var(--main-color) !important;
    text-decoration: none !important;
}

.footer {
    color:white !important;
}




/* Simplex CMS rules */




.tagline {
    
}


hr {
    visibility:hidden;
    padding-top:10px;
    padding-bottom :10px;
    color:#FFFFFFFF;
}

.simplex_content {
    line-height: 1.3;
    margin-bottom: 3em;
    text-align:left;
    font-size: 108%;
}   

.simplex_content code {
    
    color:black;

}

.simplex_content h2 { 
    line-height: unset !important;
    font-size:1.5em;
}

.simplex_content h3 { 
    font-size:1.4em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.simplex_breadcrumb {
    margin-top:15px;
    margin-bottom:15px;
    text-align: left;
    color:black !important;
} 

.simplex_breadcrumb a {
    color:black !important;
    font-weight: bold;
}
 
.simplexEditoBlock {
    
}



.simplex_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    border-radius: 0px; 
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}


.simplexRoundBorderWhiteBox {
		background-color: rgb(255, 255, 255);
		border: 0px;
		border-radius: 10px;
		color: rgb(80, 35, 20);
		font-size: 0.9875rem;
		font-family: 'Flame Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
		-webkit-box-pack: center;
		justify-content: center;
		margin: 5px 0px;
		padding: 12px 24px 12px 12px;
	}
	
	.simplexRoundBorderMaroonBox {
		background-color: rgb(78, 35, 20);
		border: 0px;
		border-radius: 10px;
		color: rgb(245, 235, 220);
		font-size: 0.9375rem;
		font-family: 'Flame Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
		-webkit-box-pack: center;
		justify-content: center;
		margin: 5px 0px;
		padding: 12px 24px 12px 12px;
	}
	
	.simplexRoundBorderGreenBox {
		background-color: rgb(27, 135, 55);
		border: 0px;
		border-radius: 10px;
		color: rgb(245, 235, 220);
		font-size: 0.9375rem;
		font-family: 'Flame Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
		-webkit-box-pack: center;
		justify-content: center;
		margin: 5px 0px;
		padding: 12px 24px 12px 12px;
	}
	
	.simplexRoundBorderRedBox {
		background-color: rgb(214, 35, 0);
		border: 0px;
		border-radius: 10px;
		color: rgb(245, 235, 220);
		font-size: 0.9375rem;
		font-family: 'Flame Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
		-webkit-box-pack: center;
		justify-content: center;
		margin: 5px 0px;
		padding: 12px 24px 12px 12px;
	}


	/* filter */

    .simplex_filter {
        display: flex; 
        flex-wrap: wrap; 
        justify-content: left; 
    }
    
    .simplex_filter img{
        clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    }

    .simplex_item_filter {
       padding: 6px 10px 15px 10px;
       margin-bottom: 55px;
       box-sizing: border-box;
       width: 100%;
       text-align: left;
       height: 17em;
       padding-top: 16px;
       cursor: pointer;
       /* transition: opacity 1s ease,transform 1s ease; */
    }



    @media (max-width:768px){
        .simplex_filter h2 {
            margin: 0px 0px 0px 0px!important;
        }
        
        .simplex_item_filter  {
            margin-bottom: 25px;
        }
        
        .simplex_item_filter p {
            margin-top: 0px;
        }
        
        .cs-lines {
            margin: 0px 15px;
        }
        
        .simplex_image {
            
        }
    }

    @media (min-width: 768px) {
        .simplex_item_filter {
            width: calc(50% - 10px); 
        }
         .simplex_filter h2 {
            /* margin: 10px 0px 0px 0px!important; */
        }
    }

    @media (min-width: 992px) {
        .simplex_item_filter {
            width: calc(33.333% - 10px); 
        }
    }

    .simplex_item_filter a:hover,
    .simplex_item_filter a:focus {
        text-decoration: none;
        color: inherit;
    }

    .simplex_item_filter img {
        width: 100%;
        height: calc(100% * 25 / 36);
        object-fit: cover;
        object-position: top;
        display: block;
        border-radius: 0px;
        margin-bottom: -8px;
    }

    .simplex_item_filter a,
    .simplex_item_filter a:hover {
        text-decoration: none;
        color: inherit;
    }

    .simplex_filter a .tagline {
        text-decoration: none;
        color: black;
    }

    .simplex_filter a h2 {
        text-decoration: underline;
    }

    .simplex_filter h2 {
        margin-top: -20px !important;
        padding: 25px 0px 0px 0px;
    }
    .simplex_item_filter .tagline {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; 
        overflow: hidden; 
        max-height: 2.8em; 
        line-height: 1.4em; 
    }


 /* showcode */
    
    .showcode {
        width:100%;
        padding:20px;
        background-color:#d4efff;
        color:black;
        font-size:14px;
        font-family: Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;
        display: block;
        overflow:auto;
    }



     /* Linkedin */
    .linkedin-signature{
        padding:20px 0px;
        display:flex;
    }

    .linkedin-signature .content{
        font-size:0.8em;
    }

    .linkedin-signature .content{
        display:inline-block;
    }

    .linkedin-signature .content span {
        display:block;
    }

    .linkedin-signature .fullname {
        color: var(--main-color);
        font-size:1.2em;
        font-weight: 400;        
    }
    
    .linkedin-signature a {
        background-color:  var(--main-color);
        margin-top: 4px;
        padding: 3px 10px;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        border:1px solid #00bfff;
        display: block;
        font-weight: 600;
        margin-left: -5px;
    }
    
    .linkedin-signature a:hover {
        background-color: #000000;
        border:1px solid #00bfff;
    }


    .linkedin-signature img {
        border: 1px solid deepskyblue;
        margin-top: 4px;
    }


    /* spacer */
    
    div.spacer {
    display:block;
    padding-top:25px !important;
        
    }

    /* summaryzone */
    summaryzone {
        display: block;
        margin:20px 0px;
        font-size:1em;
    }
    
    summaryzone a{
        margin:20px 0px;
        font-size:1em;
        color:black;
    }



    /* tooltip-box */
    .tooltip-box {
        margin:30px 0px;
        padding:30px 20px 25px 20px;
        display:block;
        border:1px dotted #00bfff;
        position:relative;
        border-radius:4px;
    }

    span.tooltip-label {
        position:absolute;
        top:-13px;
        height:25px;
        background-color: var(--main-color);
        color:white;
        padding:3px 10px;
        left:10px;
        border-radius:4px;
        font-size:0.8em;
        font-weight:500;
    }




    /* Knowledge */

    .simplex_answer {
	    padding-bottom: 10px !important;
		margin-bottom: 13px !important;
		margin-top: 10px !important;
		border-left: 1px dotted  var(--main-color) !important;
		padding-left: 10px;
		margin-left: 10px;
		
	}
	
	.simplex_question {
		color: var(--main-color);
		padding-top:20px;
		padding-top:5px;
		
	}