* {
	padding: 0px;
	margin: 0px;
    box-sizing: border-box;
}

.accueil{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    width: 100%;

}



.home{
    margin-top: 50px;
}
.realisations{
    display: flex;
    width : 100%;
    margin: 2%;
}

.mep{
    width:50%;
}
.realisation{
    margin: 10px;
    display: flex;
    justify-content: center;
}

.realisation p {
    width: 100%;
    margin: 10px;
    padding: 5px;
    text-align: center;
}

.realisation h4 {
    width: 100%;
    margin: 10px;
    padding: 5px;
    text-align: center;
    text-decoration: underline;
}
.realisation img {
    width: 200px ;
}

.outils{
    display: flex;
    justify-content: center;
}

#bouton{
    margin: 10px;
    text-align: center;
}

.outils #design{
    width: 50%;
}

.outils #img{
    width: 100%;
    border : solid white 2px;
}

.thaurin{
    width: 70px;
    margin: 5px;
}
.thaurin:hover{
    width: 75px;
}

.icone{
    width: 30px;
    margin: 5px;
}
.icone:hover{
    width: 35px;
}

.outils ul{
    list-style-type: none;
}

.myoutils{
    width: 50%;
}

header{
    background-color: black;
    z-index: 2;
    width: 100%;
    position:sticky;
    top: 0;
}

#ovh{
    display: flex;
    justify-content: center;
}

#ovh img{
    width:250px;
}

.page h2, #ban{
    width: 100%;
    display: flex;
    justify-content: center;
}
.page h3{
    margin: 1%;
    width: 100%;
    border-bottom: solid #666;
    color : #666;
}
.text{
    margin : 2ex;
}
.page p{
    color : black;
    font-size: 16px;
}
.me{
    margin: 2ex;
    display: flex;
    justify-content: center;
}

.me p{
    color: black;
}
.column {
    display: inline-block;
    text-align: center;
    width : 40%;
    padding: 1px;
}


img,svg{
    width: 100px;
}
#title{
    display: flex ;
    justify-content: center;
}

#logoTimeline{
    float : right;
}

a { 
text-decoration: none;
transition: all 0.3s ease; 
}
a:hover { color:#3399CC; }
.container-fluid { max-width: 1770px; }
.tm-container-small { max-width: 1050px; }
.btn { border-radius: 0; }
.btn-primary {
background-color: #3399CC;
border: 0;
border-radius: 5px;
padding: 12px 50px 14px;
font-size: 1.2rem;
}

.btn-primary:hover,
.btn-primary:focus {
background-color:#086969;
}

.btn-primary.disabled, 
.btn-primary:disabled {
background-color: #3399CC;
pointer-events: all;
cursor: not-allowed;
}

.form-control {
padding: 10px 20px;
width: 100%;
height: auto;
}

.form-group { margin-bottom: 25px; }
.tm-btn-big { padding: 12px 90px 14px; }

.navbar-toggler:focus { box-shadow: none; }
.navbar-brand {
color: #3399CC;
font-size: 1.6rem;
}

.navbar-brand i { font-size: 2rem; }

.tm-hero {
min-height: 200px;
background-image:url(../IMAGES/hero.jpg);
}

.tm-mt-60 { margin-top: 60px; }
.tm-mb-50 { margin-bottom: 50px; }
.tm-mb-74 { margin-bottom: 74px; }
.tm-mb-90 { margin-bottom: 90px; }
.tm-text-primary { color: #3399CC; }
.tm-text-secondary { color: #CC6699; }
a.tm-text-primary:hover { color:#666666; }
.tm-bg-gray { background-color: #EEEEEE; }
.tm-input-paging {
width: 40px;
border-radius: 0;
border: 1px solid #CCCCCC;
background: #f4f4f4;
text-align: center;
}

.nav-item { margin-right: 30px; }
.nav-item:last-child { margin-right: 0; }

.nav-link {
color: white;
border-bottom: 4px solid transparent;
font-size: 1.2rem;
}

.nav-link-1.active,
.nav-link-1:hover {
border-color: #33CCFF;
}

.nav-link-2.active,
.nav-link-2:hover {
border-color: #FF6666;
}

.nav-link-3.active,
.nav-link-3:hover {
border-color: #33CC66;
}

.nav-link-4.active,
.nav-link-4:hover {
border-color: #CC66CC;
}

.nav-link-5.active,
.nav-link-5:hover {
border-color: #bcc724;
}

.nav-link-6.active,
.nav-link-6:hover {
border-color: #66b4cc;
}

.tm-search-input {
width: 360px;
border-radius: 0;
padding: 12px 15px;
color: #3399CC;
border: none;
}

.tm-search-input:focus {
border-color: #3399CC;
box-shadow: 0 0 0 0.25rem rgb(0 153 153 / 0.25);
}

.tm-search-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #3399CC;
opacity: 1; /* Firefox */
}

.tm-search-input::-ms-input-placeholder { /* Microsoft Edge */
color: #3399CC;
}

.tm-search-btn {
color: white;
background-color: #3399CC;
border: none;
width: 100px;
height: 50px;
margin-left: -1px;
}

p, .tm-text-gray { color: #999; }
.tm-text-gray-light { color: #CCC; }
.tm-text-gray-dark { color: #666; }

.tm-video-item {
position: relative;
overflow: hidden;
text-align: center;
cursor: pointer;
}

.tm-video-item img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}

.tm-video-item figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.tm-video-item figcaption::before,
.tm-video-item figcaption::after {
pointer-events: none;
}

.tm-video-item figcaption,
.tm-video-item figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.tm-video-item figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}

.tm-video-item h2 {
word-spacing: -0.15em;
font-weight: 300;
}

.tm-video-item h2,
.tm-video-item p {
margin: 0;
}

.tm-video-item p {
letter-spacing: 1px;
font-size: 68.5%;
}

.tm-gallery div.d-block { animation: show .5s ease; }

@keyframes show {
0% {
    opacity: 0;
    transform: scale(0.9);
}
100% {
    opacity: 1;
    transform: scale(1);
}
}

.tm-paging-link {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
font-size: 1.1rem;
color: #999;
background-color: #EEEEEE;
margin: 10px;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease;
}

.tm-paging-link:hover,
.tm-paging-link.active {
background-color: #3399CC;
color: #fff; 
}

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
background: #030c17;
}

figure.effect-ming img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 2px solid #fff;
box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.4,1.4,1);
transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
font-size: 1.3em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover h2 {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption { background-color: rgba(58,52,42,0); }
figure.effect-ming:hover img { opacity: 0.4; }

.tm-footer-links li {
list-style: none;
margin-bottom: 5px;    
}

.tm-footer-links li a { color: #999999; }
.tm-footer-links li a:hover { color: #3399CC; }

.tm-bg-gray{
    background: black; 
}

.tm-social-links li {
list-style: none;
margin-right: 15px;
}

.tm-social-links li:last-child { margin-right: 0; }

.tm-social-links li a  {
color: #999999;
width: 44px;
height: 44px;
display: flex;
background-color: #fff;
align-items: center;
justify-content: center;
}

.tm-social-links li a:hover {
color: #fff;
background-color: #3399CC;
}

.tm-footer { font-size: 0.95rem; }
.tm-footer-title { font-size: 1.4rem; }

/* Videos */
#tm-video-container {
max-height: 400px;
overflow: hidden;
background-color: #333;
margin-bottom: 90px;
position: relative;
}

#tm-video {
display: block;
width: 100%;
height: auto;
}

#tm-video-control-button {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1000;
color: #e1e1e1;
}

.tm-video-details {
height: 100%;
padding: 40px;
}



@media (max-width: 991px) {
.navbar-collapse {
    position: fixed;
    top: 50px;
    right: 0px;
    background: white;
    width: 150px;
    padding: 15px;
}

.tm-container-content { max-width: 870px; }
.tm-contact-form, .tm-address-col, .mapouter { max-width: 100%; }
.tm-people-row { max-width: 900px; }
}

@media (max-width: 767px) {
.tm-paging-col { flex-direction: column; }
.tm-paging { flex-wrap: wrap; }
.tm-about-img-text { max-width: 640px; }
.tm-about-2-col, .tm-about-3-col { margin-bottom: 50px; }
}

@media (max-width: 575px) {
.tm-container-content { max-width: 420px; }

.tm-search-form {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    justify-content: center;
}

.tm-search-input {
    width: 100%;
    max-width: 360px;
}

.tm-people-row { max-width: 420px; }
}

@media (max-width: 400px) {
.tm-btn-big { padding: 12px 50px 14px; }
}

@media (max-width: 334px) {
.tm-social-links {
    flex-wrap: wrap;
    justify-content: start !important;
}

.tm-social-links li { margin-right: 3px; }
}

table {
    width : 100%;
    table-layout: fixed;

}


.image-resize{
    width: auto;
}


.h6, h6 {
    font-size: .75rem !important;
    font-weight: 500;
    font-family: Roboto,Helvetica,Arial,sans-serif;
    line-height: 1.5em;
    text-transform: uppercase;
}

.name h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}



a .material-icons {
    vertical-align: middle;
}

.fixed-top {
    position: fixed;
    z-index: 1030;
    left: 0;
    right: 0;
}

.profile-page .page-header {
    height: 380px;
    background-position:center;
}

.page-header {
    height: 100vh;
    background-size: cover;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
}

.header-filter:after, .header-filter:before {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
}

.header-filter::before {
    background: rgba(0,0,0,.5);
}

.main-raised {
    margin: -60px 30px 0;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}

.main {
    background: #FFF;
    position: relative;
    z-index: 3;
}

.profile-page .profile {
    text-align: center;
}

.profile-page .profile img {
    max-width: 160px;
    width: 100%;
    margin: 0 auto;
    -webkit-transform: translate3d(0,-50%,0);
    -moz-transform: translate3d(0,-50%,0);
    -o-transform: translate3d(0,-50%,0);
    -ms-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

.img-raised {
    box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2);
}

.rounded-circle {
    border-radius: 50%!important;
}

.img-fluid, .img-thumbnail {
    max-width: 100%;
    height: auto;
}

.title {
    margin-top: 30px;
    margin-bottom: 25px;
    min-height: 32px;
    color: #3C4858;
    font-weight: 700;
    font-family: "Roboto Slab","Times New Roman",serif;
}

.profile-page .description {
    margin: 1.071rem auto 0;
    max-width: 600px;
    color: #999;
    font-weight: 300;
}

p {
    font-size: 14px;
    margin: 0 0 10px;
}

.profile-page .profile-tabs {
    margin-top: 4.284rem;
}

.nav-pills, .nav-tabs {
    border: 0;
    border-radius: 3px;
    padding: 0 15px;
}

.nav .nav-item {
    position: relative;
    margin: 0 2px;
}

.nav-pills.nav-pills-icons .nav-item .nav-link {
    border-radius: 4px;
}

.nav-pills .nav-item .nav-link.active {
    color: #fff;
    background-color: #3399CC;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
}

.nav-pills .nav-item .nav-link {
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
    min-width: 100px;
    color: #555;
    transition: all .3s;
    border-radius: 30px;
    padding: 10px 15px;
    text-align: center;
}

.nav-pills .nav-item .nav-link:not(.active):hover {
    background-color: rgba(200,200,200,.2);
}


.nav-pills .nav-item i {
    display: block;
    font-size: 30px;
    padding: 15px 0;
}

.tab-space {
    padding: 20px 0 50px;
}

.profile-page .gallery {
    margin-top: 3.213rem;
    padding-bottom: 50px;
}

.profile-page .gallery img {
    width: 100%;
    margin-bottom: 2.142rem;
}

.profile-page .profile .name{
    margin-top: -80px;
}

img.rounded {
    border-radius: 6px!important;
}

.tab-content>.active {
    display: block;
}

/*buttons*/
.btn {
    position: relative;
    padding: 12px 30px;
    margin: .3125rem 1px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.428571;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    border: 0;
    border-radius: .2rem;
    outline: 0;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    will-change: box-shadow,transform;
}

.btn.btn-just-icon {
    font-size: 20px;
    height: 41px;
    min-width: 41px;
    width: 41px;
    padding: 0;
    overflow: hidden;
    position: relative;
    line-height: 41px;
}

.btn.btn-just-icon fa{
    margin-top: 0;
    position: absolute;
    width: 100%;
    transform: none;
    left: 0;
    top: 0;
    height: 100%;
    line-height: 41px;
    font-size: 20px;
}
.btn.btn-link{
    background-color: transparent;
    color: #999;
}

/* dropdown */

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 11rem !important;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: .25rem;
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
}

.dropdown-menu.show{
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
}


.dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu a:active, .dropdown-menu a:focus, .dropdown-menu a:hover {
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
    background-color: #3399CC;
    color: #FFF;
}
.show .dropdown-toggle:after {
    transform: rotate(180deg);
}

.dropdown-toggle:after {
    will-change: transform;
    transition: transform .15s linear;
}


.dropdown-menu .dropdown-item, .dropdown-menu li>a {
    position: relative;
    width: auto;
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    color: #333;
    font-weight: 400;
    text-decoration: none;
    font-size: .8125rem;
    border-radius: .125rem;
    margin: 0 .3125rem;
    transition: all .15s linear;
    min-width: 7rem;
    padding: 0.625rem 1.25rem;
    min-height: 1rem !important;
    overflow: hidden;
    line-height: 1.428571;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.dropdown-menu.dropdown-with-icons .dropdown-item {
    padding: .75rem 1.25rem .75rem .75rem;
}

.dropdown-menu.dropdown-with-icons .dropdown-item .material-icons {
    vertical-align: middle;
    font-size: 24px;
    position: relative;
    margin-top: -4px;
    top: 1px;
    margin-right: 12px;
    opacity: .5;
}

.nbpoints{
    font-size: 1.5em;
    color: black;
}

.star{
    padding : 2px;
    font-size : 30px;
}

.starhover{
    color:rgb(255,196,0);
}

.erreur {
    color: red;
    font-family: "Roboto Slab","Times New Roman",serif;
    font-size: 2em;
    text-align: center;
    margin : 2rem;

}

.conteneur{
    display: flex;
}

.left{
    flex-grow: 1;
    width: 60%;
}

.right{
    flex-grow: 1;
    width: 40%;
    margin-right: 5%;
    margin-top: 5%;
}

.right h2{
    text-align: center;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .conteneur{
        display: block
    }
    
    .left{
        margin: 10%;
    }
    
    .right{
        text-align: center;
        margin: 10%;
    }
}

.log{
    padding-left: 30%;
    text-align:left;
    
}

.log p{
    font-size: 1em;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');



table {
  width: 100%;
  border-spacing: 0;
  border-radius: 1em;
  overflow: hidden;
}

thead {
 visibility: hidden;
 position: absolute;
 width: 0;
 height: 0;
}

th {
  background: #3399CC;
  color: #fff;
}

td:nth-child(1) {
  background: #3399CC;
  color: #fff;
  border-radius: 1em 1em 0 0;
}

th, td {
  padding: 1em;
}

tr, td {
  display: block;
}

td {
  position: relative;
}

td::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  padding-left: 1em;
  font-weight: 600;
  font-size: .9em;
  text-transform: uppercase;
}

tr {
  margin-bottom: 1.5em;
  border: 1px solid #ddd;
  border-radius: 1em;
  text-align: right;
}

tr:last-of-type {
  margin-bottom: 0;
}

td:nth-child(n+2):nth-child(odd) {
  background-color: #ddd;
}


@media only screen and (min-width: 768px) {
  
  table {
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #ddd;
  }
  
  thead {
    visibility: visible;
    position: relative;
  }
  
  th {
    text-align: left;
    text-transform: uppercase;
    font-size: .9em;
  }
  
  tr {
    display: table-row;
    border: none;
    border-radius: 0;
    text-align: left;
  }
  
  tr:nth-child(even) {
  background-color: #ddd;
}
  
  td {
    display: table-cell;
  }
  
  td::before {
    content: none;
  }
  
  td:nth-child(1) {
    background: transparent;
    color: #444;
    border-radius: 0;
  }
  
  td:nth-child(n+2):nth-child(odd) {
    background-color: transparent;
  }
  
  
}

.center{
    text-align: center;
}