body{font-family:'PT Sans', sans-serif;padding:0;margin:0}
#pindex{position:relative}
h1{font-size:40px;color:#FFF;margin-top:10px}
h3{color:#000}
h4{color:#000;font-size:22px;margin:3.6% 0 0;}
h2{font-size:30px;}
p{font-size:16px;}
.conteneurNoFlex{position:relative;min-height:100px}
.displayFlex{display:flex;margin-top:0 !important}
.divPositionIcone{text-align:center}
h3.couleur1{color:#b2377c;}
h3.couleur2{color:#FFF}
h3.couleur1, h3.couleur2{font-size:16px;margin:0 0 20px;text-transform:uppercase}
#strateContact h2 a, #strateContact h2 a:hover{color:#f2f2f2;text-decoration:none}
.changeBg1{background:#7c7c7c;}
.changeBg1 .sub_article h2, .changeBg1 .sub_article h3, .changeBg1 .sub_article h4, .changeBg1 .sub_article p {color:#fff}
.changeBg2{background:#000}
a[name]:hover{color:#000;text-decoration: none;}

header{background:#FFF;text-align:center;}
header h1, header p{margin:10px 0;}
.container-fluid{padding-right: 6%;padding-left: 6%;}
.container{padding:0;width:100%}

/*nav{align-items:center;background:#FFF;border-bottom:2px solid #20565f;line-height:3em;position:sticky;top:0;display:block;z-index:100;vertical-align:middle}
nav ul{padding:12px 0;margin:0 auto;text-align:center;width:90%}
nav ul li{list-style:none;display:inline-block}
nav ul li a{color:#000;font-size:18px;text-decoration:none;padding:14px 20px 12px}
nav ul li a:hover{border-bottom:2px solid #20565f;text-decoration:none}
nav div{background:#000;border-radius:50%;height:4em;padding:0 10px 0 8px;margin:0 8%;width:68px}
*/

.navbar{padding:10px;margin-bottom:0;align-items:center;background:#FFF;border-bottom:2px solid #000;line-height:3em;position:sticky;top:0;display:block;z-index:100;vertical-align:middle}
nav #logo{background:#000;border-radius:50%;height:4em;padding:0 10px 0 8px;margin:0 -2% 2%}

nav .logo{height:3em;margin:6px auto 0;width:auto}
.navbar-default .navbar-nav > li > a {color: #1D619B;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{color: #1D619B;text-decoration: underline;}

header hgroup{background:#20565f;color:#FFF;text-align:center;padding:10px 0;margin:0 auto 0}
header hgroup h2{margin:0.4% auto 0.4%}

section{color:#FFF;padding:0 !important;margin:0 !important;width:100%}

article{float:none !important;margin:0 auto !important;padding:0.5% 0 1%;flex-shrink: 2;width:100% !important}
article h2 a, h2{color:#FFF;margin:1.8% auto 0.4%;}
.sub_article{color:#FFF;float:none;padding:0;margin:1% auto;width:80%}
.sub_article div{border-bottom:1px solid #AAA;margin:0}
.sub_article ul li {font-size: 16px;}
.sub_article div img.icomc, .sub_article2 .divPositionIcone img.icomc.icoTitre{background: #7c7c7c;height: auto;width: 46px;padding:6px 10px;border-radius:20px;}

div img.icomc.icoTitre{margin:0 auto -20px}

footer{background:#FFF;color:#000;line-height:4em;text-align:center}
footer p{color:#000}

section p{margin:30px auto 0;width:100%}
.conteneurFlex, .conteneurFlex section{background:#FFF;margin:1% auto;}
p, ul li, em a, .borderAlgo a, section h2, section h2 a{color:#000}
aside{background:#FFF;border:1px dashed #000;flex-grow:2;order:2;position:fixed !important;top:26%;right:50px;z-index:200;opacity:0.8;padding:1%}
.algotab{color:#000;display:inline-block;margin:2%;text-align:center;vertical-align:top}
.borderAlgo{border-left:1px solid #000;color:#000;margin:10px 0 10px 20px;padding-left:10px}
.borderAlgo p{width:100%}
.paddingdiv{padding:2%}
.divnote{background:#000;border:2px solid #aaa;border-radius:8px;color:#FFF;margin:auto;margin-bottom:2%;padding:1% 2%;text-align:center;}
.sur2col{column-count: 2;}
.textAlignCent{text-align:center}
circle, rect{display:inline}
.rect000Border{border:1px solid #000;padding:0 20px}
.column2{-webkit-columns: 2 auto;-moz-columns: 2 auto;columns: 2 auto; }
.artNoBorder{border:none !important}

.sub_article .sub_article.displayFlex{width:100%}
.sub_article2{color:#FFF;float:none;padding:10px 0 0;margin:2% auto;width:50%}
.sub_article2 ul{padding:0;margin:0}
.sub_article2 ul li{list-style:none}
.sub_article2 ul li p{margin-top:6px}
.sub_article2 div img.icomc{background: #7c7c7c;height: auto;width:8%;padding:1% 2%;border-radius: 18px;}
.sub_article2 div{border:none;width:80%}
.sub_article2 div p{margin-top:20px;}
.sub_article2 div ul{margin:3% 0;padding:0 2% 0 0}
.sub_article2 div ul li{border-radius:50px;display:inline;background:#000;color:#fff;line-height:2.2em;margin:1% 2% 1% 0;padding:0.6% 2.6%;}
.sub_article2 .borderOui{background:transparent;border-bottom:1px solid #AAA;}
.sub_article2 .divPositionIcone{width:100%}
article.secExpForm{text-align:center}
.secExpForm.margeLeft{margin-left:16px;}
.secExpForm.margeRight{margin-right:16px;}
.sub_article.secExpForm, .sub_article2.secExpForm {text-align:left}
article .btn{background:#20565f;font-size:16px;font-weight:bold;margin:30px auto 20px;width:200px}
article .btn:hover{background:#20565f}
.btn a, .btn a:hover{color:#FFF;text-decoration:none}
article .btn{background:#20565f;font-size:16px;font-weight:bold;margin:30px auto 20px;width:200px}
article .btn.btn-outline-secondary{background:transparent;border:1px solid #000;font-size:12px}
article .icomc{width:10%}
.divWidthIcone{width:20% !important}
.pictoSection{background : #b2377c;border:2px solid #fff; border-radius:50%;margin:14% 10% 0 ;padding:6% 12%;width:80px}
.sub_article2.imageProjets .artNoBorder{margin:0 auto;text-align:center}
.sub_article2.imageProjets .artNoBorder a img{margin:30px 10px 0;border:8px solid #000}
#strateContact h3.couleur1{color: #7c7c7c;}

.modal-dialog{background-color:#FFF;border-radius:6px;max-width:70%!important;overflow-hidden}
.modal-dialog::after{clear:both !important}
.modal-body{float:right;overflow:auto;padding:20px;width:70%}
.modal-footer{float:left;padding-top:2%;border:none !important;width:30%}
.modal-footer{font-size:16px}


#myBtnTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #AAA; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtnTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

@media (max-width: 576px) {
	h1{font-size:26px}
	h2{font-size:18px}
	nav #logo{margin-left:10px}
	.sub_article{padding:0;margin-left:16px}
	.displayFlex .pictoSection{margin:30px auto 0 !important;width:32% !important}
	.divWidthIcone{width:36% !important}
	.sub_article2, .sub_article2.displayFlex{padding:10px 0 !important}	
	.sub_article2 ul{margin:20px 0 0}	
	.sub_article2.imageProjets .artNoBorder a img.img-responsive{margin:30px auto 0 !important}
	.sub_article.row.margeLeft, .sub_article2.secExpForm{margin-left:16px !important}
	.sub_article2.secExpForm{margin-right:0 !important}
	footer{line-height:1.6em;padding:10px}

	}

@media (max-width: 768px) {
	h1{font-size:26px}
	h2{font-size:18px}
	nav #logo{margin-left:10px}
	.row{margin-right:0;margin-left:0;}
    .conteneurNoFlex{display:table;margin:auto;width:80%;padding:2%}
    .conteneurNoFlex section{margin:2% auto}
	aside{top:40px;left:0;width:100%;padding:2%;column-count: 3;}
	.algotab{margin:0.4%}
	article{padding:1% 0 4%;}
	article, table{width:100%}
	h3.couleur1, h3.couleur2{margin:0 0 30px}
	.column2{-webkit-columns: 1 auto;-moz-columns: 1 auto;columns: 1 auto;}
	.smDisplayBlok{display:block !important;width:50%}
	.displayFlex, .displayFlex div, .displayFlex .divWidthIcone{display:block;text-align:center;width:100% !important}
	.displayFlex .pictoSection{margin:4% 0 0;padding:2% 4%;width:18%}
	.sub_article2, .sub_article2.displayFlex{padding:10px 0 0}
	.sub_article2 ul{text-align:center;padding:2% 0;}
	.sub_article2 div ul li{font-size:16px;line-height:2.6em}
	.sub_article2.imageProjets .artNoBorder a img.img-responsive{margin:30px auto 0 !important}
	.sub_article.row.margeLeft, .sub_article2.secExpForm{margin-left:16px !important}
	.sub_article2.secExpForm{margin-right:0 !important}
	nav.displayFlex div{width:14% !important}
	nav #logo{width:70px}
	.sub_article{padding:0 20px;width:100%;}
	footer{line-height:1.6em;padding:10px}
	.modal-dialog{background-color:#FFF;border-radius:6px;width:100%!important}
	.modal-dialog:after{clear:both !important}
	.modal-body{padding:20px;width:100%!important}
	.modal-footer{display:none !important;width:auto !important}
}

@media (max-width: 992px) {
	.sub_article{width:96%}
	.sub_article2{padding:10px 10px 0 0}
	.sub_article2 div ul li{line-height:2.6em}
	.divWidthIcone{width: 26% !important}
}