/*
 Theme Name: SEMAPA
 Theme URI: danslemeal.fr
 Author: meal
 Author URI: danslemeal.fr
 Description: SEMAPA, template par danslemeal.fr
 Template: twentynineteen
 License: GNU General Public License v3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Version: 1.0.0
*/

/* Ajouter la police Google Fonts Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

* {text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.relative,.valign{position:relative}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}select{-moz-appearance:none;-webkit-appearance:none;appearance:none}.valign{top:50%;transform:translateY(-50%)}.bgfull{background-repeat:no-repeat!important;background-position:center center!important;-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important}.nopad{padding:0!important}.pt50{padding-top:50px!important}.pb50{padding-bottom:50px}.pt100{padding-top:100px}.pb100{padding-bottom:100px}.fullh{min-height:100vh}.noverflow{overflow:hidden!important}
.fleft {float:left} .mb0 {margin-bottom: 0!important} .mb50 {margin-bottom:50px} .mt50 {margin-top:50px} .mt100 {margin-top:100px} .mb100 {margin-bottom:100px} .caps {text-transform: uppercase} .block {display:block} .reg {font-weight:400} .medium {font-weight: 500} .hide {visibility: hidden}
.halign {margin:0 auto; display: inline-block;} button:focus {outline:0px} .light {font-weight: 300} a:hover, a:active, a:focus {outline:0}
*:focus {outline: 0 !important;}.barry {color:white}.align-start {align-items:start!important} .t-right {text-align: right} .t-left {text-align: left} .no-scroll{overflow:hidden}
.text-right{text-align: right}.mt0{margin-top:0!important}.pt0{padding-top:0!important}.text-left{text-align:left!important} .ml0 {margin-left:0!important}

body {font-family: 'Roboto', sans-serif;  -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transition: background-color 0.3s ease-in-out;background-color: #f7f6f6}
#page {max-width: 1680px;margin: 0 auto;background: #fff;}

h1, h2, h3, h4, h5, h6 {font-family: 'Roboto'}
h1:not(.site-title):before, h2:before {display: none}
h2 {margin-bottom:50px; font-size:48px; color:#363638; font-weight:700}

.page-titre {font-size:48px; font-weight:bold; padding-left: 50px; color:#363638; margin-bottom:50px; margin-top:20px}

.bgbleu {background-color: #E1F1F6 }
.bleu {color:rgb(40, 180, 213)}

a {text-decoration: none}
a:visited {color:inherit}

.bgw {background: white}


#contenu {padding:50px}
#contenu h1 {color: #4B4A4D;
    font-size: 40px;
    margin-left: 0;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 40px;}

#corps {padding:50px}
#corps h2 {margin-bottom: 15px;
    font-size: 30px;}
#corps a {color:inherit!important;}

.wp-block-image figcaption {color: #767676;
    font-size: 0.71111em;
    line-height: 1.6;
    margin: 0;
    padding: 0.5rem; text-align:left}

.onlymob {display: none!important}

header {padding:40px 0 40px 0;}
.logo-semapa {width:300px!important;position:relative}
.logo-head {padding-left: 50px; height:100px}

.menu-open {position: absolute;left:50px}

.nav-head {
    text-align: right;
    top: 50px;
    z-index: 20;
  }

.nav-head .acces {
  display: inline-block; margin-right:40px;

}

.lien-inactif a {opacity:0.3}

.menu-button, .search-button {float:left}
.search-button {margin-left:20px}
.menu-button img, .search-button img {width:80px}

.bouton-bleu {background-color:#78BFD0; color:black; text-transform: uppercase; padding:10px 25px 8px 25px; border-radius:20px; font-size:12px; margin-left: 50px}
.bouton-bleu:hover {background-color:#78BFD0; color:black;}

.bouton-bleu img {width: 30px;margin-left: 10px; top:-2px}

.bouton-noir {background-color:black; color:white; text-transform: uppercase; padding:10px 25px 8px 25px; border-radius:20px; font-size:12px; margin-left: 25px}
.bouton-noir:hover {background-color:black; color:white;}

.bouton-noir img {width: 30px;margin-left: 10px; top:-2px}

.breadcrumb {margin-left:50px; color:#00A4BE; text-transform: uppercase; font-weight: 500; font-size:15px; margin-top:30px; margin-bottom: 30px}
.breadcrumb span, .breadcrumb a {margin-left:15px; margin-top:2px}
.breadcrumb a {color:inherit}
.breadcrumb a:first-child {margin-left:0px; margin-top:0px}
.breadcrumb .arrow {margin-left:15px; color:#FED2E1; margin-top:2px; font-weight:bolder}

select {-webkit-tap-highlight-color: rgba(0,0,0,0); -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;}

button.telecharger {text-transform: uppercase;
    display: block;
    margin-top: 30px;
    color: white;
    border-radius: 25px;
    top: 0;
    background: #363638;
    z-index: 5;
    padding: 10px 40px;
    position: relative;
    font-size: 12px;}

/* Cacher initialement les sous-menus */
.menu-item-has-children ul {
    display: none;
}

/* Montrer le sous-menu quand la classe est active */
.menu-parent-show ul {
    display: block;
}

ul.sub-menu {list-style-type: none; font-weight:normal; padding-left:0; font-size:25px}
#menu-semapa ul.sub-menu li::after {display: none}
#menu-semapa li {list-style-type: none!important}

.nav-miniprojet {display: inline-block;
    float: none; margin-top:0}


.diapo-projet-mini .legende {color: #767676;
    font-size: 15px;line-height: 1.5;
    margin: 0;
    padding: 0.5rem; padding-bottom:0;
    text-align: center; display:block}


.accroche {font-size: 52px;
        line-height: 65px;
        font-weight: bolder;
        color: #00A4BE;
        display: block;
        margin-top: 0px;
        max-width: none; text-align:left}
.accroche    .outline {
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 2px #00A4BE;
        letter-spacing: 1px;}


#diapo-pleine-largeur {padding-left:50px; padding-right:50px; padding-bottom:50px}
#diapo-pleine-largeur .diapo-full .vignette {height:700px; width:100%}
#diapo-pleine-largeur .progress-bar-projets .progression {margin-top:-10px; position:relative}
#diapo-pleine-largeur .legende {
    font-size: 20px;
    color: #4B4A4D;
    padding-left: 25px;
    padding-top: 20px;
    max-width: 75%;
    display: block;
}
#diapo-pleine-largeur .custom-prev-full, #diapo-pleine-largeur .custom-next-full {float: left;
    display: block;
    width: 100px;
    margin-top: 50px;}

.legende-mini {color: #767676;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem;
    padding-bottom: 0;
    text-align: left;
    display: block;}

.custom-prev-miniprojet, .custom-next-miniprojet {margin-top:25px!important}

.savoirplus a {font-size: 29px;
    font-weight: bold;
    line-height: 1.6;
    color: #363638;
    text-decoration: none;
}

.savoirplus a:before {
    content: '';
    background: #4B4A4D;
    width: 100%;
    height: 1px;
    display: block;
}
.savoirplus a:last-child:after {
    content: '';
    background: #4B4A4D;
    width: 100%;
    height: 1px;
    display: block;
}

.savoirplus h4 {font-size: 15px;
    font-weight: medium;
    margin-bottom: 25px;text-transform:uppercase}


.diapo-vertical .vignette {height:450px!important}



/* RECHERCHE */

input[type="search"] {padding: 10px 25px 8px 25px;
    border-radius: 20px;
    font-size: 12px;}

#search-popup {padding:25px 50px!important}
#close-search {top:0px!important}



#search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 180, 213, 0.9);
    z-index: 9999;
}

#search-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#close-search {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.search-results {margin-left:0!important}

.search #dev {
    padding: 50px; padding-top:0;
    font-size: 22px;
    color: #4B4A4D;
    line-height: 38px;
}

.search #dev h1 {font-size:30px; margin-bottom:50px}
.search #dev h2 {font-weight: 700;
    font-size: 22px;
    margin-top: 15px;
    padding-right: 0px;
    display: block;}

.search #dev .col-lg-3 {margin-bottom:50px}
.search .breadcrumb img {width:15px!important}

.search article {font-size: 16px;
    line-height: 22px;}
.search article button {margin-left:0}

.search .link-more {display:none}

.search-query {    font-weight: bold;
    color: #4FBED7;}

.search .nav-links {background-color: black;
    color: white;
    text-transform: uppercase;
    padding: 15px 20px 15px 15px;
    border-radius: 20px;
    font-size: 12px;
    margin:0 auto;display:block}

.search .nav-links a {color:white}
.search .nav-links .current {font-weight: 900;
    text-decoration: underline;
    color: #4fbed7;}
.pagination .nav-links > * {padding:15px!important}

.hfeed .entry .entry-header {margin:0;font-weight: 700;
    font-size: 24px;
    margin-top: 10px;
    padding-right: 0px;
    display: block;
    padding: 20px; padding-bottom:0}

.search .entry-title {font-weight: 700;
    font-size: 24px;
    margin-top: 0px; margin-bottom:15px;
    padding-right: 0px;
    display: block;text-decoration: none}
    .search .entry-title a {text-decoration:none}
    .entry .entry-title:before{display:none}
.entry .entry-content, .entry .entry-summary {max-width:100%; padding:20px; margin:0; padding-top:0;font-size: 18px;
    line-height: 25px;
    display: block;}
.entry .entry-content, .entry .entry-summary img {width:100%!important}
.search .post-thumbnai {margin-top:0}
.search .entry-content img {width:100%; margin-bottom:15px; margin-top:15px}
.search .excerpt_part {font-size: 18px;
    line-height: 25px;
    display: block;}
.search .entry .entry-content p {margin:0}

.page-template-page-simple #dev {
    padding: 50px;
    font-size: 22px;
    color: #4B4A4D;
    line-height: 38px;
}

.page-template-page-simple #dev a {color: inherit;}

.page-template-page-simple h2 {margin-bottom:20px; margin-top:50px}


/* ACCUEIL */
#diapo-intro {padding: 0 50px;position:relative}
#diapo-intro-mob {display:none}

#actualites, #projets {padding:100px 0px }
.card-bg-image {height: 200px;}
.card-date {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
}

#actualites {margin-left:50px}

#actualites .row {
    /* display: flex;
    flex-wrap: wrap;
    margin: -15px; */
    position:relative
}

#actualites .row .col-md-4 {
    display: grid;
    align-content: flex-start;
    grid-template-rows: minmax(0, 1fr) auto;
}

#actualites .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}


#actualites .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limiter à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#actualites .card-body {min-height:270px}


#actualites .actualites-nav {display:block; margin:0 auto; position: relative;text-align: center}
#actualites .arrow-nav {display: inline-block;}
#actualites .progress-bar {top:-50px}
#actualites .progress-actu {display: inline;}

#actualites .actualites-nav .cercle-next img {
    transform: rotate(40deg);
    width: 50px;
    margin-top: 21px;
    margin-left: -2px;
}

#actualites .actualites-nav .cercle-prev img {
  transform: rotate(50deg);
  width: 50px;
  margin-top: 24px;
  margin-left: 1px;
}




#diapo-intro  .slideshow {
    position: relative;
}



#diapo-intro .slide-content {
  bottom: 50px;
  width: 100%;
  text-align: center;
  color: #28B4D5;
  font-size: 25px;
}

#diapo-intro .slide-content .slide-title, #diapo-intro .slide-content-mob .slide-title  {
    opacity: 0.5; font-size:24px; text-transform: uppercase; font-weight:bold; color:white; margin-bottom:20px
}
#diapo-intro .slide-content a, #diapo-intro .slide-content-mob a {text-decoration: none;}

#diapo-intro .slick-slide {height:80vh!important}

.diapo-index .slick-slide {height:80vh!important; position: relative;width:100vw!important;
  height: 100%;
  transition: transform 0.5s ease;
}
.diapo-index .slide .vignette {position:absolute; width:80%; height:100%; right:50px; top:0}

#intro .progress-bar {width:calc(100% - 100px)!important}


#intro .contenu {
  z-index: 2;
  top: 50%;
  left: 50px;
  line-height: 1;
  position: absolute;
  overflow: hidden;
}

#intro .contenu h1 {
  font-size: 120px;
  text-transform: uppercase;
  font-weight: bold;
}

#intro .visible {
  position: relative;
  color: black;
  text-shadow:
    1.5px 1.5px 0 #000,
   -1.5px -1.5px 0 #000,
    1.5px -1.5px 0 #000,
   -1.5px 1.5px 0 #000,
    1.5px 1.5px 0 #000;
  white-space: nowrap;
}

#intro .remplissage {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-shadow:
    2px 2px 0 #000,
   -2px -2px 0 #000,
    2px -2px 0 #000,
   -2px 2px 0 #000,
    2px 2px 0 #000;
  transition: width 0.5s ease;
}






.progres {
height:1px; background:black; width:70%; max-width:600px; position:relative; margin:0 auto
}

.progres .ligne, .progres .ligne-mob {width:0; height:15px; background:#28B4D5; transition: width 1s ease-in-out;top: -7px;position:absolute}
.progres .ligne.animated, .progres .ligne-mob.animated {
    width: 100%;
}




.swiper-wrapper {height:70vh!important; position: relative}
#diapo-intro .row {position: absolute; left:20px;
    width: 100%;
    bottom: 60px;
    z-index: 9;}
#diapo-intro:before {content: "";
    position: absolute;
    top: 0;
    left: 50px;     width: calc(100% - 100px);
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
    z-index: 2;}



/* DIAPO ACTU */

    .diapo-actu {
    width: 100%;
    overflow: hidden;
  }

  .diapo-actu .slick-slide {
    width: 60vw!important;
    height: 700px;
    margin-right: 90px;
    transition: transform 0.5s ease;
  }

  .diapo-actu .slick-center {
    z-index: 1;
  }

  .diapo-actu .slick-track {
    display: flex;
    overflow: hidden;
    margin-left: 0;
  }

  .diapo-actu .slick-list {
    padding:0 20% 0 0 !important;
  }


  .diapo-actu .slide {
    padding: 50px; position:relative;
    box-shadow: inset 0 0 0 30px #E5F1F4;
  }

  .diapo-actu .slide .vignette {position:absolute; width:95%; height:70%; left:0; top:0}



  .cercle-prev,
  .cercle-next {
    width: 80px;
    height: 80px;
    border: 2px solid #363638;
    border-radius: 50%;
    border-left-color: transparent;
    transform: rotate(0deg);
  }

  .cercle-prev {
    transform: rotate(220deg);
  }
    .cercle-prev img {transform: rotate(50deg);
    width: 40px;
    margin-top: 15px;
margin-left: 20px;
}

  .cercle-next {
    transform: rotate(50deg);
    margin-left: -2.2px;
  }
    .cercle-next img{    transform: rotate(40deg);
    width: 40px;
    margin-top: 18px;
    margin-left: 20px;}

.custom-prev, .custom-next, .custom-prev-projets, .custom-next-projets, .custom-prev-chantier, .custom-next-chantier, .custom-prev-miniprojet, .custom-next-miniprojet  {float: left;
    display: block;
    width: 80px; margin-top:50px}




.jauge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  position: relative;
}

.jauge-item {
  width: 20px;
  height: 20px;
  background-color: #363638;
  border-radius: 50%;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}

.jauge-line {
  width: 2px;
  height: 15px;
  background-color: #363638;
  margin-right: 5px;
}

.jauge-trait {position:absolute; width:2px; height:20px; top:-10px; background-color:black; left:25%}
.jauge-trait:nth-child(2n) {left:50%}
.jauge-trait:last-child {left:75%}



.diapo-actu .slide.slick-active .jauge-item:nth-child(-n + 1) {
  background-color: #ff6600;
}

.diapo-actu .slide.slick-active .jauge-item:nth-child(-n + 2) {
  background-color: #ffcc00;
}

.diapo-actu .contenu {position: absolute;left:50px; top:70%; padding:30px}
.diapo-actu .contenu .categories a {text-transform: uppercase;color: #4AA2BB; text-decoration: none; font-weight:700}
.diapo-actu .contenu h3 {font-weight:700; font-size:27px; margin-top:10px}
.diapo-actu .contenu a, .diapo-actu .contenu a:visited {color:inherit; text-decoration: none}

.actu-liste {margin-top:40px}
.actu-liste .col-lg-4 {position:relative;
}

.actu-liste .actu-home {}
.actu-liste {
    height: auto;
    margin-right: 50px;}
.actu-liste .contenu {    position: relative;
    left: 0;
    top: 0;
    padding: 0 30px 0 0px;}
.actu-liste .contenu .categories a {text-transform: uppercase;color: #4AA2BB; text-decoration: none; font-weight:700}
.actu-liste .contenu h3 {font-weight:700; font-size:24px; margin-top:10px; padding-right:0px; display:block}
.actu-liste .contenu a, .actu-liste .contenu a:visited {color:inherit; text-decoration: none}
.actu-liste .vignette {position: relative;
    width: 100%;
    height: 300px;
    left: 0;
    top: 0;}


.progress-bar, .progress-bar-projets, .progress-bar-chantier {
  width: 60%; margin-top:85px; margin-left:50px;
  height: 2px; display:inline-block;
  background-color: black;
  position: relative; border-radius:0; overflow:visible
}
.progress-bar-projets {width:80%}
.progress, .progress-projets, .progress-chantier { position:absolute; top:-10px;
  width: 0;
  height: 20px;
  background-color: #28B4D5;
  transition: width 0.5s ease; border-radius:0
}


#projets h3 {
    display: block;
}

.loading #projets h3 {
    display: none;
}


#projets {margin-left:50px; padding-top:100px}
  #projets h3 {font-size:80px;  color: black; letter-spacing: 1px; line-height:0.9;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 2px black;
position: absolute; top:-50px; left:0; z-index:3; max-width:450px}

#projets .inside-nav, #actualites .inside-nav {float: left;display: block;top: 5px;position:relative}

#projets h2, #actualites h2 {    display: block;  float: left;}

.diapo-projets {padding-bottom:0px; margin-top: 50px}
.diapo-projets .slick-slide {
  width: 48vw!important;
  margin-right: 1%;
  position:relative;
  padding-bottom:50px!important
}

.diapo-projets .slick-track {
  display: flex;
}

.diapo-projets .slick-list {
  padding:50px 0 0 0!important;
}

.diapo-projets .slide {
  padding: 0;
}

.diapo-projets .slide .blocbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 85%;
  background-color: white;
  z-index: 1;
}

.diapo-projets .slide .vignette {
  position: relative;
  width: 100%;
  height: 100%;
}





.equerre-t-h {position: absolute; top:0; right:0; width:30%; height:20px; background:#78BFD0}
.equerre-t-v {position: absolute; top:0; right:0; width:20px; height:20%; background:#78BFD0}
.equerre-b-h {position: absolute; bottom:0; left:0; width:30%; height:20px; background:#78BFD0}
.equerre-b-v {position: absolute; bottom:0; left:0; width:20px; height:20%; background:#78BFD0}



    .diapo-projets .slide .blocinte {position:relative; width:95%; height:100%; left:50px; right:0; top:50px; z-index:2}
        .diapo-projets .slide .blocinte .description {    width: 100%;
    padding:25px 50px 25px 50px;font-size:22px;
    background: #D9EEF3;
    color: black;
    position: relative;
    bottom: 0;}
          .diapo-projets .slide .blocinte .description span {display: block; max-width:90%; font-size:1em}
    .diapo-projets .slide .vignette {position:relative; display:block; width:100%; height:400px; left:0px; right:0; top:0px; }


/*
NOUVELLE VERSION DIAPO
*/

.progression, .progression-chantier {
  display: block;
  width: 100%;
  height: 15px;
  border-radius: 0px;
  overflow: hidden;

  background-color: #f5f5f5;
  background-image: linear-gradient(to right, #28B4D5, #28B4D5);
  background-repeat: no-repeat;
  background-size: 0 100%;

  transition: background-size .4s ease-in-out;
}

.trait {
    position: absolute;
    top: 0;
    height: 15px;
    width: 1px;
    background-color: #000;
}




#villedurable {background:white; padding-left:50px; padding-right:50px; padding-top:0px; padding-bottom:100px;position:relative}
#villedurable .row {margin-left:0; margin-right:0}
#villedurable .bg-vd {width:100%; height:850px}
#villedurable .bg-vd-l {width:100%; height:auto}
#villedurable .content {padding:0; position:absolute; width:100%; bottom:0}
#villedurable .contenu {padding:75px; color:white; max-width:650px; position: relative;}
#villedurable .layer {background:rgba(54, 54, 56, 0.9); width:100%; height:100%; position: absolute;}
#villedurable .label {color:#58b2d1; font-size:20px; font-weight:bold; display: block}
#villedurable h3 {font-weight:bolder;margin-top:30px; margin-bottom: 30px; font-size:39px}
#villedurable .bouton-bleu {    display: block;margin-top: 30px;margin-left: 0;}
#villedurable .preb {width:100%;position:absolute;z-index:2;bottom: 75px; text-align: center; margin-left:10%}
#villedurable .bandeau {background:rgba(88, 178, 209, 0.7);  height:50px; width:600px; margin:0 auto}


#chantiersdirect {background-color:#C6E5ED; padding-left:50px; padding-top:100px; padding-bottom:100px; overflow:hidden}
#chantiersdirect .vignette h4 {font-size: 19px;
    position: absolute;
    top: -18px;
    left: -1px;
    font-weight: 700;
    opacity: 1;
    text-transform: uppercase;
    color: black;}




.diapo-direct .slick-list {overflow:visible}
.diapo-direct {    max-width: 100%;  margin-right: 50px; margin-top:50px}
.diapo-direct .slide {  position:relative;}
.diapo-direct .vignette {height:350px; margin-left:15%; position: relative; width:70%}
.diapo-direct h3 {position: absolute;  bottom: 50px;font-size: 60px;    left: 50px; z-index:2; color: #363638}

.diapo-direct .vignette::before {content: "";
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.6), transparent);
    z-index: 2;}

.diapo-direct .slide::before {content:''; background-color: #363638; height:20px; width:30%; position:absolute;z-index:2; top:-20px; right:15%}


    .progress-chantier.active1 {  width: 50%;}

  .progress-bar-chantier {width:80%}

  .progress-bar-chantier .jauge-trait {position:absolute; width:2px; height:20px; top:-10px; background-color:black; left:14%}
  .progress-bar-chantier .jauge-trait:first-child {left:28%}
  .progress-bar-chantier .jauge-trait:last-child {left:42%}

/* NOS OPERATIONS */

#carte {    width: 100%;height: 800px;}
#operations {background-color:#E1F0F5; padding:50px; padding-top:100px}
#operations .thumb {width:80%; height:350px; margin:0 auto; margin-bottom:100px}
#operations .thumb:before {content: "";
    position: absolute;
    top: 0;
    left: 0px;     width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent);
    z-index: 2;}
#operations h3 {font-weight:bold; font-size:45px; position: absolute; left:-75px; bottom: 50px; z-index:2}
#operations h4 {font-weight: bold;
    font-size: 22px;
    position: absolute;
    left: -75px;
    bottom: 5px;
    z-index: 2;
    opacity: 1;color:#78BFD0}
#operations a, #operations a:visited {color:black}
#operations .equerre-t-h {position: absolute; top:0; right:0; width:30%; height:20px; background:#78BFD0; z-index:2}
#operations .equerre-t-v {position: absolute; top:0; right:0; width:20px; height:30%; background:#78BFD0; z-index:2}

/* .mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-zoom-out {
    display: none!important;
} */


/* MENU LATERAL */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 180, 213, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display:none;
  z-index:18
}

.side-menu {
  position: fixed;
  top: 0;
  right: -33%;
  width: 33%;
  height: 100%;
  background-color: white;
  overflow-y: auto;
  transition: right 0.3s ease-in-out;
  z-index:19;
  padding:50px
}

.side-menu::after {content: ""; width:20px; height:95%; top:2.5%; display: block; background:#29B4D5; position: absolute; left:-10px}

.side-menu.menu-opened {
  right: 0; overflow: scroll;
}

.overlay.active {display: block; opacity:0.9}
.overlay span {font-size:16.5em;  color: transparent; letter-spacing: 10px; line-height:0.9;
-webkit-text-stroke: 2px white;
position: absolute; bottom: -42px;
    left: 0; z-index:1; display: block;}

.menu-button {
  cursor: pointer;
}

#menu-semapa {font-size:40px; font-weight: bold;list-style-type: none;padding-left:0; clear: left; margin-top:150px}
#menu-semapa a { color:#363638; text-decoration: none}
#menu-semapa li {line-height:2;}
#menu-semapa li::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgb(40, 180, 213);
}

.menu-close img, .reseaux img {width:80px}
.menu-close {float: left;display: block; cursor: pointer}
.search {margin-left:0px}
.side-menu .reseaux {margin-top:50px;text-transform:uppercase; font-weight: 600;color:rgb(40, 180, 213); font-weight:500}
.side-menu .reseaux span {clear: left; display: block; margin-bottom:15px; font-size:18px}
.reseaux img {float:left}
.reseaux img {margin-right:20px}

.nodesk {display:none}

/* NEWSLETTER */
form.mailpoet_form {padding:10px 0!important}
#mailpoet_form_1 .mailpoet_text, #mailpoet_form_1 .mailpoet_textarea {width:200px!important; font-size:16px; background-color: #00A4BE}
.mailpoet_form_column {flex-grow:0!important}
#mailpoet_form_1 .mailpoet_form_column:not(:first-child) {margin-left:0!important;}
.mailpoet_form .mailpoet_submit {background-color: #00A4BE}
form.mailpoet_form input[type="submit"] {font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: black;
    font-family: 'Roboto', sans-serif;
    border-radius: 0;margin-top:0.5px!important;
    padding:12px 9px 10px 9px!important}
form.mailpoet_form input[type="submit"]:hover {background-color: #00A4BE;}
input[type="email"] {border:0; color:black; padding:6px!important}
label {
    cursor: pointer;
    color: #555;
    display: block;
    padding: 10px;
    margin: 3px;
color:black}


#mailpoet_form_1 {border-radius: 0px;
    color: #000000;
    text-align: left;
    width: 400px!important;
    display: block;
    padding: 0;}
#mailpoet_form_1 .mailpoet_message {color: white;
    font-size: 15px;
    text-align: left!important;
    padding: 0;}


/* ------------ */
/* FOOTER */
/* ------------ */

footer {background-color: #1E1E1E; color:white; padding:50px; text-align: center}
footer h4 {font-size: 10px; text-transform: uppercase;color:#28B4D5;}
footer span {font-weight:bold; font-size:22px; line-height:31px; max-width:430px; display:block}
footer .accesrapide span::before {content: ''; width:100%; height:1px; background-color:#28B4D5; display: block}
footer .accesrapide span:last-child::after {content: ''; width:100%; height:1px; background-color:#28B4D5; display: block}
footer .accesrapide span {line-height: 2}
footer .accesrapide a, footer .accesrapide a:active, footer .accesrapide a:visited, footer .accesrapide a:focus {color:white}
footer .res img {width:60px}
footer a {text-decoration: none}
footer .res a {display:block; margin-bottom:5px}
footer .row {max-width: 1680px; margin:0 auto; text-align: left}
footer .logo-w {width:125px;    float: left;
    display: block;}
    footer .logo-paris { width:125px;
        display: inline; margin-left:25px}
footer .second {margin-top:50px}
footer .adresse {font-size:13px; font-weight: normal; display:block; float:left;line-height: 1.2;
    float: left;
    max-width: 300px;
    padding-left: 20px;
}
footer .liens-sup {text-transform: uppercase; font-size:13px; font-weight: normal; position:absolute;bottom: 0;right:10px}
  footer .liens-sup a, footer .liens-sup a:visited {color:white}
footer .liens-sup a {margin-left:25px}
footer .liens-sup a:first-child{margin-left:0px}
footer .mentions {margin-top:50px;font-size:10px; text-transform: uppercase; color:grey}
footer .mentions a, footer .mentions a:visited {color:grey}
footer .mentions a {margin-left:25px}
footer .mentions a:first-child{margin-left:0px}


/* ------------ */
/* PAGE ACTUALITES */
/* ------------ */

#toutesactualites {background-color: #E1F1F6; padding:50px; position: relative;}
#toutesactualites::before {content: '';
    background-color: #5DC0D2;
    height: 25px;
    position: absolute;
    top: -25px;
    right: 0;
    width: 35%;}
    #toutesactualites::after {content: '';
        background-color: #5DC0D2;
        height: 25px;
        position: absolute;
        bottom:0;
        left: 0;
        width: 35%;}
.page-template-actualites .thumb { width: 99%;
    height: 300px;
    margin-left: -20px;
    margin-top: -20px; display: inline-block;}
.page-template-actualites .filter-dropdowns {margin-bottom:50px}
.page-template-actualites .filtered-posts .row {margin-left:0; padding-left:0}
.page-template-actualites .filtered-posts .col-lg-4 {margin-left:0; padding-right:50px; margin-bottom:50px}
.page-template-actualites .actu-single {padding-top:20px}
.page-template-actualites .actu-single h3 {font-size:22px; color:#363638; font-weight: bolder; line-height:1.3; padding:20px; display: block; max-width:90%}
.page-template-actualites .actu-single a {color:black; text-decoration: none}
.page-template-actualites .contenu {background:white}
.page-template-actualites .categories {font-size:13px; text-transform: uppercase; font-weight:bold; color:#5DC0D2}
.page-template-actualites .date {font-size:13px; text-transform: uppercase; font-weight:bold; color:#363638}
.page-template-actualites .post-info {text-align: center;margin-left:-20px}

.custom-select-operation, .custom-select-thematique {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-size:18px; font-weight:bold; background:white; padding:10px 15px; border:1px solid #363638;
}

.custom-select-operation::before, .custom-select-thematique::before {
  content: "FILTRER PAR ";
  color:#00A4BE;
}

.custom-select-operation select, .custom-select-thematique select {
  padding-left:20px; font-weight:bold;
  color: black;text-transform: uppercase;
  font-size:18px; background: transparent; border:0px;margin-right:20px
}

.custom-select-operation::after, .custom-select-thematique::after {content:url(img/select-arrow.svg); width:15px;display: inline-block;
    position: absolute;
    right: 10px;
    top: 12px;}

.load-more-container {text-align: center; margin-top:0px; margin-bottom:50px}
#load-more-btn {font-weight:bold; color:#363638; font-size:17px; text-transform: uppercase; background-color: transparent; border:1px solid #363638; padding:15px 25px 15px 25px; border-radius:15px; margin:0 auto}

.filtered-posts ul {
    opacity: 1; /* Assurez-vous que l'élément est visible par défaut */
    transition: opacity 0.5s ease; /* Vous pouvez ajuster la durée et la fonction de transition selon vos préférences */
}

.filtered-posts ul.loading {
    opacity: 0.5; /* Ou toute autre valeur pour indiquer le chargement en cours */
}

.filtered-posts .col-xl-4 {margin-bottom:50px; padding-right:50px}
    /* ------------ */
    /* ARTICLE ACTUALITES */
    /* ------------ */

.single #main {max-width: 80%;  margin: 0 auto; padding-top:100px; padding-bottom:100px; text-align: center}
.single .categories, .single .date-publication{font-size:18px; font-weight:500; text-transform: uppercase; color:#00A4BE; display:inline-block}
.single .categories:first-child {font-weight:900}
.single .article-contenu {text-align:left;font-size: 22px;line-height: 39px; padding:50px}
.single .date-publication {color:#363638; font-weight:500;}
.single h1 {color:#363638; font-size:48px; margin: 25px auto 50px; display: block; font-weight:900; max-width: 800px}
.single .img-top {margin: 0 auto;max-width: 85%;}
.single .img-top img {width:100%}
.single .legende {margin-bottom:50px; font-size:18px; font-weight:300; color:#363638; margin-top:15px}
.single .boite-projet {background-color: #9FD8E4; padding:50px; color:black; text-align: left}
.single .boite-projet span {display: block; max-width: 600px; font-size:22px; line-height:39px; font-weight: bold}
.single .boite-projet h3 {font-size:16px; margin-bottom: 20px; display: block; text-transform: uppercase; font-weight:bold}
.single .boite-projet .lien a {font-weight:bold; font-size:29px; line-height:50px; color:black; text-decoration: none; display: block}
.single .boite-projet .lien a::after {content:''; width:100%; height:1px; background-color:black; display: block}
.single figure {margin-bottom:0}
.single h4 {margin-top:50px;}
.single .img-top img {max-width:800px}

/* ------------ */
/* OFFRES D'EMPLOI */
/* ------------ */
.page-header-img {width:100%; height:600px; padding:50px; position: relative; padding-top:0; padding-bottom:0}
  .page-header-img .bgfull {height:100%}
.page-header-img h1 {color:white; font-size:48px; display: block; position: absolute; bottom:0px; left:50px}

#offresemploi {background-color: #E1F0F5; padding:80px; position:relative}
#offresemploi .offre {background: white; padding:50px; color:black; margin-bottom:50px}
#offresemploi h2 {font-size:34px; margin-bottom:0}
#offresemploi .offre button.postuler {  background-color: #78BFD0;
    color: black;
    text-transform: uppercase;
    padding: 10px 25px 8px 25px;
    border-radius: 20px;
    font-size: 12px;margin-top:25px}
#offresemploi .offre .date {margin-bottom:50px; font-size:15px; font-weight:normal;}
#offresemploi .offre .type {font-size: 21px}
#offresemploi .offre .description {font-size:21px; font-weight:normal; line-height:2; max-width:750px; display: block}
#offresemploi .offre a, #offresemploi .offre a:visited {color:inherit; text-decoration: none}
#offresemploi .offre button.fiche {color:white; text-transform: uppercase;
    display: block;
    margin-top: 0;
    color: white;
    border-radius: 25px;
    top: 0; font-size:12px;
    background: #363638;
    z-index: 5;
    padding: 10px 25px 8px 25px;
    position: absolute;}
#offresemploi .offre .bulle-bouton {position: relative;
    display: inline-block;
    width: 450px;margin-top:0px}
#offresemploi .offre .bulle-bouton .pdf {background-color: #E1F0F5;
    position: absolute;
    z-index: 1;
    right: 166px;
    padding: 10px 25px 8px 40px;
    top: 0;
    border-radius: 25px;
    font-size: 12px; }

#offresemploi::after {
    content: '';
    background-color: #5DC0D2;
    height: 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35%;}


/* --------------
SINGLE PROJETS
-------------- */

.page-header-projets {width:100%; height:calc( 100vh - 250px); padding:50px; position: relative; padding-top:0; padding-bottom:0}
  .page-header-projets .bgfull {height:100%; position:relative}
  .page-header-projets .logo-projet {
      position: absolute;
      top: 0px;
      left: 50px;
      width: auto;
      background: white;
      font-weight: 600;
      padding: 15px 15px 15px 15px;
      font-size: 30px;
      color: #363638;
  }

#presentation {padding:50px; padding-top:0;font-size:22px; color:#4B4A4D; line-height:38px}
.page-template-operation-presentation h1 {
    color:#4B4A4D;
    font-size: 48px;
    margin-left:0;
    font-weight: 900; margin-top:50px; margin-bottom:50px
}
.page-template-operation-presentation h2 {font-size: 35px;
    margin-bottom: 20px;}
.select-projet {position: absolute; bottom:50px; left:50px;padding:15px 40px 15px 40px; background: white;}
/* .select-projet:after {content: '';display: block;position: absolute;right: 25px;top: 22px;width: 20px;height: 20px;background: url('img/select-arrow-down.png') center center no-repeat; background-size: contain;} */
.page-template-operation-presentation ul {padding-left:1rem}



.select-projet span {color:#363638; font-size:15px; font-weight:bold; text-transform: uppercase;}

#select-contenu { color:#00C0D9; font-size:15px; font-weight:bold; text-transform: uppercase; border:0; text-align: center}

#presentation h3 {text-transform: uppercase;
    font-weight: bolder;
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 50px;}
#presentation .acteurs {background: #D9EDF3; font-size:18px; line-height:24px; padding:50px; color:#4B4A4D;}
#presentation .acteurs h4 {color:#00C0D9; font-size:22px; line-height:26px; font-weight:bold; text-transform: uppercase; margin-bottom:25px}
#presentation .chiffres {color:#00B6D8; text-transform: uppercase; font-weight:bold; font-size:20px; margin-top:100px; position: relative; padding-left:50px; margin-left:50px}
  #presentation .chiffres::before {content:''; width:10px; height:100%; position: absolute;left:0; top:0; background-color:#00B6D8}
#presentation .chiffres h4 {font-size:55px;  color: white; letter-spacing: 1px; line-height:0.9;
-webkit-text-fill-color: white;
-webkit-text-stroke: 2px #00B6D8; text-transform: none}

#presentation-diapo {padding:50px!important; background-color: #D9EDF3; margin-top:100px}
#presentation-diapo .diapo-projet {padding:0px; margin-top:-150px}
#presentation-diapo .vignette {height:700px; width:100%}
#presentation-diapo .slick-slide {width: 100vw}
#presentation-diapo .progress-bar-chantier {width:80%}
#presentation-diapo .legende {font-size:20px; color:#4B4A4D; padding-left:25px; padding-top:20px; max-width:75%; display:block}

#presentation-diapo .progress-bar-chantier .jauge-trait {position:absolute; width:2px; height:20px; top:-10px; background-color:black; left:14%}
#presentation-diapo .progress-bar-chantier .jauge-trait:nth-child(2n) {left:20%}
#presentation-diapo .progress-bar-chantier .jauge-trait:nth-child(3n) {left:40%}
#presentation-diapo .progress-bar-chantier .jauge-trait:nth-child(4n) {left:60%}
#presentation-diapo .progress-bar-chantier .jauge-trait:nth-child(5n) {left:80%}
#presentation-diapo .progress-bar-chantier .jauge-trait:nth-child(6n) {left:100%}


#objectifs {padding: 50px!important;font-size:22px; color:#4B4A4D; line-height:38px; padding-top:100px!important}
#objectifs .diapo-projet-mini .vignette {width:100%; height:350px; max-width:600px}
#objectifs .diapo-projet-mini .slide {width:100%; height:350px}
#objectifs .nav-miniprojet {display:inline-block; float:none}
#objectifs .objectifs-accroche {font-size:62px; line-height:75px; font-weight:bolder; color:#00A4BE; display: block; margin-top:50px; max-width:400px}
#objectifs .objectifs-accroche .outline {-webkit-text-fill-color: white; -webkit-text-stroke: 2px #00A4BE; letter-spacing: 1px; color:white}

#programme {padding:50px; background-color: #D9EDF3;font-size:22px; color:#4B4A4D; line-height:38px; }
#programme .programme-accroche {font-size:52px; line-height:65px; font-weight:bolder; color:#00A4BE; display: block; margin-top:50px; max-width:400px}
#programme .programme-accroche .outline {-webkit-text-fill-color: none; -webkit-text-stroke: 2px #00A4BE; letter-spacing: 1px; color:transparent}
#programme h5 {font-weight:900; color:#00A4BE; font-size:38px; line-height:45px}
#programme .content-prg {padding-right:50px}
#programme .content-prg::after {content:''; width:100%; background-color:#00A4BE; height:1px; display: block; margin-bottom:30px; margin-top:15px}
#programme .content-prg::before {content:''; width:100%; background-color:#00A4BE; height:1px; display: block; margin-bottom:15px}
#programme .surface, #programme .details {font-size:18px; line-height:25px;color:#4B4A4D}
#programme .programme-details {margin-top:80px}
#programme p {margin-bottom: 0}

#calendrier {padding:50px; background-color: #5DC0D2;font-size:22px; color:#4B4A4D; line-height:38px; }

.contenu-actu .date {position: relative; margin-left:60px;font-size: 13px;font-weight: 500;text-transform: uppercase;}
.contenu-actu .date::before {content:''; width:40px; height:1px; background-color: black; display: inline-block; position: absolute; left:-50px; top:7px}
.contenu-actu .categories {color:#00A4BE;font-size: 13px;font-weight: 500;text-transform: uppercase;}

.post-actu-nav .cercle-next img {
    transform: rotate(40deg);
    width: 50px;
    margin-top: 15px;
    margin-left: -1px;}

.custom-prev-miniprojet {margin-left:0}


#gabarit-colonnes #projet {padding:50px; font-size:22px; color:#4B4A4D; line-height:38px}
#gabarit-colonness .page-titre {margin-left:0; padding-left: 0}
#gabarit-colonnes .wp-caption {width:100%!important}
#gabarit-colonnes .wp-caption-text {text-align: left;padding-left: 0;}
#gabarit-colonnes .bgbleu {padding-top:50px!important}
#gabarit-colonnes h2 {font-size:35px; margin-bottom:20px}
#gabarit-colonnes .col-lg-4 {font-size:15px; line-height:18px; color:#4B4A4D}
#gabarit-colonnes .col-lg-4 img {margin-bottom:10px}
#gabarit-colonnes .page-titre {padding-left:0}
#gabarit-colonnes .wp-caption-text{color: #767676;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem;
    padding-bottom: 0;
    text-align: center;
    display: block;}

.page-template-operation-projets #projet {padding:50px; font-size:22px; color:#4B4A4D; line-height:38px}
.page-template-operation-projets .page-titre {margin-left:0; padding-left: 0}
.page-template-operation-projets .wp-caption {width:100%!important}
.page-template-operation-projets .wp-caption-text {text-align: left;padding-left: 0;}
.page-template-operation-projets .bgbleu {padding-top:50px!important}
.page-template-operation-projets h2 {font-size:35px; margin-bottom:20px}
.page-template-operation-projets .col-lg-4 {font-size:15px; line-height:18px; color:#4B4A4D}
.page-template-operation-projets .col-lg-4 img {margin-bottom:10px}

.page-template-operation-presentation #actualites {margin-left:0; padding-left:50px}
.page-template-operation-presentation .actu-liste {margin-left:-15px}

.page-template-operation-projets li {list-style-type: disc!important}
.page-template-operation-projets ul {padding-left:50px}

/* PROJET : développement durable */

.page-template-operation-devdurable #dev {padding:0 50px 50px 50px; font-size:22px; color:#4B4A4D; line-height:38px}
.page-template-operation-devdurable .page-titre {margin-left:0; padding-left: 0}
.page-template-operation-devdurable .wp-caption {width:100%!important}
.page-template-operation-devdurable .wp-caption-text {text-align: left;padding-left: 0;}
.page-template-operation-devdurable .bgbleu {padding-top:50px}
.page-template-operation-devdurable h2 {font-size:35px; margin-bottom:20px}
.page-template-operation-devdurable .col-lg-4, .page-template-operation-devdurable h6 {font-size:15px; line-height:18px; color:#4B4A4D; font-weight:400}
.page-template-operation-devdurable .col-lg-4 img {margin-bottom:10px}
.page-template-operation-devdurable .accroche {font-size: 52px;
    line-height: 65px;
    font-weight: bolder;
    color: #00A4BE;
    display: block;
    margin-top: 0px;
    max-width: none;}
.page-template-operation-devdurable .accroche    .outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #00A4BE;
    letter-spacing: 1px;}

.page-template-operation-devdurable .diapo-projet-mini .vignette {width:100%; height:350px; max-width:600px}
.page-template-operation-devdurable .diapo-projet-mini .slide {width:100%; height:auto}

/* PRÉSENTATION LA SEMAPA */

.page-template-semapa .nav-miniprojet {text-align: center!important}

#qui, #organisation {background-color: #D3F3F6; padding:50px; line-height:38px; font-weight:regular}
#qui h1, #missions h1, #organisation h1 {
    color: #4B4A4D;
    font-size: 40px;
    margin-left: 0;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 40px;
}
#qui .savoirplus h4 {font-size:15px; font-weight:medium; margin-bottom:25px}
#qui .savoirplus a {font-size:29px; font-weight:bold; line-height:1.6; color:#363638; text-decoration: none;}
#qui .savoirplus a:before {content: '';background:#4B4A4D; width:100%; height:1px; display: block;}
#qui .savoirplus a:last-child:after {content: '';background:#4B4A4D; width:100%; height:1px; display: block;}
#qui .accroche {font-size:52px; line-height:65px; font-weight:bolder; color:#00A4BE; display: block; margin-top:50px; max-width:400px}
#qui .accroche .outline {-webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #00A4BE; letter-spacing: 1px; }

#missions {background-color: white; padding:50px; line-height:38px; font-weight:regular; position: relative}
#missions .savoirplus {text-align: left; margin-top:50px}
#missions .savoirplus h4 {font-size:15px; font-weight:medium; margin-bottom:25px}
#missions .savoirplus a {font-size:29px; font-weight:bold; line-height:1.6; color:#363638; text-decoration: none;}
#missions .savoirplus a:before {content: '';background:#4B4A4D; width:100%; height:1px; display: block;}
#missions .savoirplus a:last-child:after {content: '';background:#4B4A4D; width:100%; height:1px; display: block;}
#missions .diapo-projet-mini .vignette {width:100%; height:350px; max-width:600px}
#missions .diapo-projet-mini .slide {width:100%; height:auto}
#missions .nav-miniprojet {display:inline-block; float:none}
#missions .custom-prev-miniprojet, #missions .custom-next-miniprojet {margin-top:25px}
#missions .cercle-prev img,#missions .cercle-next img {
    margin-top: 21px;
    margin-left: 4px;
}

#organisation {position:relative}
#organisation .conseil {background:#ADE9EE; padding:20px; font-size:15px; line-height:24px; color:#4B4A4D}
#organisation .conseil h4 { font-size:15px; line-height:24px; text-transform: uppercase; color:#00A4BE; font-weight:bold}

#organisation .a, #organisation a:visited {color:inherit; text-decoration: none}
#organisation button.fiche {color:white; text-transform: uppercase;
    display: block;
    margin-top: 0;
    color: white;
    border-radius: 25px;
    top: 0;
    background: #363638;
    z-index: 5;
    padding: 10px 40px;
    position: absolute; font-size:12px}
#organisation .bulle-bouton {position: relative;
    display: inline-block;
    width: 300px;margin-top:0px}
#organisation .bulle-bouton .pdf {background-color: white;
  position: absolute;
    z-index: 1;
    right: 10px;
    padding: 10px 40px 10px 60px;
    top: 0;
    border-radius: 25px;
    font-size: 12px; color:black}

.historique::after {
    content: '';
    background-color: #5DC0D2;
    height: 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35%;}


/* PROJET : OCCUPATIONS TEMPORAIRES */

.page-template-operation-occupations #dev {    padding: 50px;
    font-size: 22px;
    color: #4B4A4D;
    line-height: 38px;
}
.page-template-operation-occupations .page-titre  {padding-left:0}
.page-template-operation-occupations .diapo-projet-mini .vignette {width:100%;height:350px}

/* DOCUMENTATION */

.page-template-documentation .filtered-posts {margin-top:50px}
.page-template-documentation .filtered-posts .col-lg-4 {padding:25px}
.page-template-documentation .filtered-posts .doc-container {background: white; width:100%; height:100%}
.page-template-documentation .filtered-posts .doc-container .doc-cat-operation {text-align: center; padding:15px; background-color: #00A4BE; color:#363638; font-size:13px; text-transform:uppercase; font-weight:500}
.page-template-documentation .filtered-posts .doc-container .doc-cat-type {text-align: center; padding:25px; color:#363638; font-size:13px; text-transform:uppercase; font-weight:500}
.page-template-documentation .bgline {width:80%; margin:0 auto; background: repeating-linear-gradient(
    to right,
    #E1F1F6 0,
    #E1F1F6 15px,
    white 15px,
    white 30px
  );
  height: 280px; text-align:center}
.page-template-documentation .doc-thumb {width: 100%;
    height: 280px;
    margin: 0 auto;
    background-repeat: no-repeat;
    max-width: 200px;}
.page-template-documentation .doc-thumb-video {width: 100%;
    height: 180px;
    margin: 0 auto;
    background-repeat: no-repeat;
    max-width: 320px;
    padding-top:50px
  }

 .is-type-video {max-width:600px}

  .page-template-documentation .bgline-video {width:80%; margin:0 auto; background: repeating-linear-gradient(
      to right,
      #E1F1F6 0,
      #E1F1F6 15px,
      white 15px,
      white 30px
    );
    height: 280px; text-align:center; padding-top:50px}

.page-template-documentation .filtered-posts .doc-container .doc-titre {font-size:23px; color:#363638; font-weight: bold; margin:25px auto 25px auto; max-width:90%; text-align: center}
.page-template-documentation button.fiche {color:white; text-transform: uppercase;
    display: block;
    margin-top: 0;
    color: white;
    border-radius: 25px;
    top: 0;
    background: #363638;
    z-index: 5;
    padding: 10px 40px;
    margin:0 auto; font-size:12px}
.page-template-documentation .bulle-bouton {position: relative;
    display: block;
    width: 100%;
    margin-top: 0;
    margin: 0 auto;
    height: 40px;
    margin-bottom: 50px; text-align: center}
.page-template-documentation .bulle-bouton .pdf {background-color: #EAF9FA; color:#363638;
  position: absolute;
    z-index: 1;
    right: 10px;
    padding: 10px 40px 10px 60px;
    top: 0;
    border-radius: 25px;
    font-size: 12px; }
.page-template-documentation h2.selected-category {margin-top:50px}


.page-template-page-simple-documentation ul {list-style-type: none; padding-left:0; font-size:20px}
.page-template-page-simple-documentation #corps h2 {text-transform: uppercase;font-size: 23px; margin-top:30px}
.page-template-page-simple-documentation #corps h2::after {content:''; display:block; width:100%; border-bottom:1.5px solid #363638; margin-top:20px}
.page-template-page-simple-documentation .doc-contenu {background: white;
    padding:50px;}
    .page-template-page-simple-documentation #corps h1 {font-size: 40px;
    font-weight: bold;}

/* NOUS RENDRE VISITE */


.page-template-rendre-visite #dev {    padding: 50px;
    font-size: 22px;
    color: #4B4A4D;
    line-height: 38px;
}
.page-template-rendre-visite .page-titre  {padding-left:0}

.page-template-rendre-visite h2 {margin-bottom: 30px;
    font-size: 35px;
    color: #363638;
    font-weight: 700;}

/* VILLE DURABLE */

#port { background:white; color:#4B4A4D; text-transform: uppercase;z-index:9; max-width: none;
    width: auto; margin-left:50px; margin-right:50px; height:61px;
    display: block; border-top:1px solid #4B4A4D; border-bottom:1px solid #4B4A4D}
#port a {    color: #4B4A4D;
    font-weight: 500;
    padding: 17px 50px 15px 50px;
    font-size: 15px;
    display: block;}
#port a:first-child {}
#port li a.active {
    background-color: #78BFD0;
  }
#port li {display: block;
    float: left;}

#port span {font-size:13px; text-transform: uppercase;color:#00A4BE;font-weight: 500;    display: block;
    float: left;padding:10px 50px 10px 25px; margin-top:13px}

#transition, #transition2 {height:auto; width:100%; padding:0px 50px 70px 50px; background:#D3F3F6}
#transition img, #transition2 img {width:100%; height:auto}
#transition .legende, #transition2 .legende {font-size: 20px;
    color: #4B4A4D;
    padding-left: 0px;
    padding-top: 20px;
    max-width: 75%;
    display: block;}

#transition2 {padding-top:70px; padding-bottom:0}

.page-template-villedurable .echelle-urbaine, .page-template-villedurable .echelle-bati, .page-template-villedurable .urbanisme-transitoire, .page-template-villedurable .art-ville {padding:70px 50px 50px 50px}
.page-template-villedurable .art-ville button {margin-left:0!important; margin-top:15px}
.page-template-villedurable .echelle-bati, .page-template-villedurable .art-ville  {background:#e1f1f6}

.page-template-villedurable .echelle-urbaine li, .page-template-villedurable #qui li {
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.page-template-villedurable #qui .accroche2 {font-size: 52px;
    line-height: 65px;
    font-weight: bolder;
    color: #00A4BE;
    display: block;
    max-width: 400px;
}

.page-template-villedurable #qui .accroche2 .outline {-webkit-text-fill-color: none; -webkit-text-stroke: 2px #00A4BE; letter-spacing: 1px; color:transparent}

.page-template-villedurable #qui .encart {background-color: white}

.page-template-villedurable .echelle-urbaine .accroche{margin-bottom: 50px}
.page-template-villedurable .echelle-urbaine .savoirplus {margin-top: 50px}

/* .page-template-villedurable .echelle-urbaine li::before {
    content: '\2022';
    color: #00A4BE;
    position: absolute;
    left: 0;
} */

.page-template-villedurable figure {width:100%!important}

.page-template-villedurable h2 {
    margin-bottom: 30px;
    font-size: 35px;
    color: #363638;
    font-weight: 700;
}

.page-template-villedurable h1 {    color: #4B4A4D;
    font-size: 40px;
    margin-left: 0;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 40px;}

.page-template-villedurable .encart {background: #D9EDF3;
    font-size: 18px;
    line-height: 24px;
    padding: 50px;
    color: #4B4A4D; margin-bottom:50px; text-align: left
}

.page-template-villedurable .encart h4 {color: #00C0D9;
    font-size: 22px;
    line-height: 26px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 25px;}

    .page-template-villedurable .diapo-projet-mini .vignette {
        width: 100%;
        height: 350px;
        max-width: 600px;
    }

    .page-template-villedurable .custom-prev-miniprojet, .page-template-villedurable .custom-next-miniprojet {
        margin-top: 25px;
    }

  .page-template-villedurable  .nav-miniprojet {text-align:left;}

  .slick-arrow.slick-hidden {
    display: block!important;
}


/* -----
MAITRISE D'OUVRAGE
----- */

.page-template-maitrise-ouvrage #equipementspublics, .page-template-maitrise-ouvrage #locaux, .page-template-maitrise-ouvrage #universite {padding:70px 50px 50px 50px}
.page-template-maitrise-ouvrage h2 {margin-bottom: 30px;
    font-size: 35px;
    color: #363638;
    font-weight: 700;}

.page-template-maitrise-ouvrage #locaux {background: #e1f1f6}



@media (max-width: 1600px) {
.contenu-actu .date::before {width:20px; left:-30px}
.contenu-actu .date {margin-left:35px}
}

@media (max-width:1500px) {
  .contenu-actu .date {display:block}
}



@media (max-width: 1399.98px) {
#menu-semapa {font-size:25px; margin-top:75px}
.menu-close img, .search img, .reseaux img {width:60px}
.reseaux img {margin-right:10px}
.search {margin-left:10px}
.overlay span {font-size:10em; bottom:-30px}
.actu-liste .contenu h3 {font-size:21px}
#diapo-intro {padding:0}
#diapo-intro:before {left:0; width:100%}
.single #main {max-width:90%}
#port a {padding: 17px 20px 15px 20px}
}

@media (max-width: 992px) {
  .diapo-actu .slide {box-shadow:inset 0 0 0 25px #E5F1F4}
  .diapo-actu .slide .vignette {height:60%; width:calc(100% - 25px)}
    .diapo-actu .slide .vignette:before {content:""; width:100%; height:20px; display:block; background:#E1F1F6}
  .diapo-actu .contenu h3 {font-size:20px}
  .diapo-actu .contenu {left:20px; padding-top:20px}
  #actualites {padding-left: 50px;margin-left: 0;}
  .diapo-actu .slick-slide {width:calc(100vw - 50px)!important;height: 400px;margin-right: 90px;}
  .diapo-actu .contenu {top:60%}
  .diapo-actu .contenu .categories a {font-size:15px}
  .diapo-actu .contenu .date {font-size:15px; margin-left:30px}
  .nodesk {display:block!important}
  .nomob {display: none!important}
  .onlymob {display: block!important}
  #actualites .progress-bar, #projets .progress-bar, #chantiersdirect .progress-bar-chantier,  #presentation-diapo .progress-bar-chantier {width: calc(100% - 33px)!important;margin-left: 17px;height:1px; z-index:10; margin-top:50px}
  #actualites .jauge-trait, #projets .jauge-trait, #chantiersdirect .jauge-trait, #presentation-diapo .jauge-trait {width:1px!important; z-index:9999; height:10px!important; top:-5px!important}
  #actualites .progress, #projets .progress, #chantiersdirect .progress-chantier, #presentation-diapo .progress-chantier  {left:0px; height:10px!important; top:-5px}
  #villedurable .content {position: relative}
  #villedurable .contenu {padding: 50px;max-width: 100%;}
  #villedurable {padding-left:0px; padding-right:0px}
  #projets h3 {font-size:60px}
  #projets {margin-left:0}
  .diapo-projets {margin-left:25px}
  .diapo-projets .slick-slide {    width: 100vw!important;}
  .diapo-projets .slide .vignette {height:500px}
  .diapo-projets .slide .blocinte .description {padding:25px!important}
  .diapo-projets .slide .blocinte .description span {max-width:none; font-size:1em}
  .diapo-projets .slide .blocinte {  width: 100%;  left: 25px;  top: 25px;}
  #diapo-intro .slide-content .slide-title {margin-top: 30px}
  .contenu-actu .date::before {width: 20px;height: 1px;top: 9px; left:-28px}
  .side-menu {position: fixed;right: -90%;width: 90%;}
  #toutesactualites {padding:50px 25px 50px 25px}
   .single .boite-projet .lien {margin-top:50px}
   .page-header-projets {padding:0px; height:500px}
   .page-header-projets .logo-projet {left:0; width:auto}
   #presentation-diapo .progress-bar-chantier {margin-top:25px; margin-bottom:15px}
   .contenu-actu .date {display:inline-block}
   .actu-liste .contenu h3 {margin-bottom:50px}
   #actualites, #projets {padding-top:50px; padding-bottom:50px}
   .progress-bar-projets {margin-top:0; margin-bottom:75px}
   .nav-head {position: absolute;}
   .page-template-semapa .savoirplus {margin-top:50px}
   .page-template-semapa #qui .accroche {max-width:none}
   .page-template-semapa #qui .accroche br {display: none}
   #missions .diapo-projet-mini .vignette {max-width: none; height:450px}
   #organisation .conseil {margin-top:100px}
   #organisation .bulle-bouton {margin-top:25px}
   #qui .accroche .outline {-webkit-text-stroke: 1px #00A4BE;}
   .page-template-semapa .diapo-projet-mini {margin-top:50px}
   .page-template-villedurable .nav-miniprojet {margin-bottom:50px}
     .page-template-villedurable .savoirplus {margin-top:50px}
    .page-template-villedurable .diapo-projet-mini .vignette {max-width:none}
    .echelle-urbaine img.size-full {width:100%}
    .page-template-villedurable .echelle-urbaine .savoirplus {margin-bottom:50px}
    .page-template-villedurable .art-ville button {margin-bottom:50px}
    .page-template-villedurable .encart {margin-top:25px}
    .page-template-villedurable .diapo-projet-mini .vignette {height:400px}
    #urbanisme-ancre .diapo-projet-mini {margin-top:50px}
    .echelle-urbaine .nav-miniprojet, #urbanisme-ancre .nav-miniprojet, #art-ancre .nav-miniprojet {margin-bottom:0}
    #transition2 {padding-bottom:0!important}
    .page-template-maitrise-ouvrage .savoirplus {margin-top:50px}
    #equipementspublics img, #locaux img, #universite img {width:100%}
    .progress-bar-projets {width: 100%;margin-left: 0;}
    .page-template-artdanslaville .progress-bar-projets {margin-bottom:0}
    .page-template-artdanslaville .bgbleu img {width:100%; margin-top:50px}
    .actu-liste {margin-top:0}
    .page-template-operation-devdurable .diapo-projet-mini .vignette {max-width:none}
    .contenu ul {padding-left:0}
    .page-template-operation-projets .col-lg-4 img {width:100%}
    #dev img {width:100%}
    input[type="submit"] {margin-top:10px!important}
    .custom-search-form {width: 250px;
        margin: 0 auto;
        text-align: center;}

}


@media (max-width: 860px) {
  .slideshow-mob .slick-slide {height:500px}
  footer {padding-left:0px; padding-right:0px}
  footer .accesrapide {margin-top:30px}
  footer .res {text-align: left; margin-top:30px}
  footer .res a {display: inline}
  footer .liens-sup {position: relative;  margin-top: 30px;  text-align: left;  margin-left: 0;  left: 0; font-size:10px; margin-top:15px}
  footer .liens-sup a {margin-left:5px}
  footer .second .col-md-6 {padding-right:0}
  footer .logo-w {display:none}
  footer .adresse {padding-left:0}
  footer .mentions {margin-top:20px}
}



@media (max-width: 640px) {
  html {font-size:18px; line-height:30px!important}
  #qui, #organisation, #missions {line-height:30px!important; padding-left:25px; padding-right:25px}
  header {padding:20px 0 20px 0;}
  .logo-head {padding-left: 20px}
  .nav-head {padding-right:20px}
  .logo-semapa {width:150px!important}
  .menu-button img, .search-button img {width:50px}
  .search-button {margin-left:10px}
  #diapo-intro {padding:0!important; width:100%}
  #diapo-intro:before {left: 0px;width:100%;}
  .overlay span {display:none}
  .side-menu {position: fixed;right: -100%;  width: 100%;  }
  #menu-semapa {font-size:18px; margin-top:75px}
  .menu-close img, .search img, .reseaux img {width:50px}
  .side-menu .reseaux {margin-top:25px}
  #diapo-intro {padding: 0 25px;}
  #diapo-intro .slide-content .slide-title {font-size:20px}
  .diapo-actu .slick-slide {height:500px}
  .diapo-actu .contenu {padding:0; left:0; position: relative; bottom:0; padding-top:25px; line-height:1}
  .slideshow-mob .slick-slide {height:450px}
  .diapo-actu .contenu .date {display:flex}
  .contenu-actu .categories {margin-top:10px}
  .contenu-actu .categories, .contenu-actu .date {line-height:21px; display:block}
  #actualites {padding-bottom:0}
  #actualites .arrow-nav {display:none}
  #actualites .inside-nav {top: 20px;
    width: 100%;
    text-align: left;
    margin-bottom: 60px;}
  #actualites .inside-nav .bouton-bleu {margin-left:0}
  #villedurable .label {font-size:15px}
  #villedurable h3 {font-size:27px}
  #villedurable .contenu {font-size:18px; line-height:22px; padding-left:25px; padding-right:25px}
  .home h2 {    font-size: 40px;  text-align: center;  margin-bottom: 30px; display:block; float:none!important}
  #projets {padding-top:50px; padding-bottom:50px}
  .home #projets h2 {margin-bottom:0px; text-align:center; float:none}
  .home #projets .bouton-bleu, .home #projets .bouton-noir {margin-left:0}
   .home #projets .bouton-noir {margin-top:10px}
   #villedurable .preb {width:60%; bottom:88px; text-align: right;right:0}
   #villedurable .bandeau {height:25px; width:100%}
   .home .bgbleu {padding:0}
   .home .diapo-projets .slick-slide {width:100vw!important; margin-right:50px; height:95%}
   .home .diapo-projets .slide .vignette {height:300px}
   .home #projets h3 {    font-size: 50px;
    left: 0;
    max-width: 250px;
    top: -40px;
    display: block;-webkit-text-stroke: 1px black;}
   .home .diapo-projets .slide .blocinte {left:0}
   .diapo-projets .slide .blocinte .description span {font-size:18px; line-height:22px}
   .diapo-projets .slide .blocbg {height:95%}
   #chantiersdirect {padding-left: 0;padding-top: 50px;padding-bottom: 50px;}
   .diapo-direct .vignette {
       height: 350px;
       margin-left: 25px;
       margin-right: 0px;
       position: relative;
       width: calc(100% - 25px);
   }

   .diapo-direct h3 {
       position: absolute;
       bottom: 0px;
       font-size: 40px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 2;
       color: #363638;
       font-weight:bold
   }

   .diapo-direct {
       max-width: 100%;
       margin-right: 0;
       margin-top: 50px;
   }
   .diapo-direct .slide::before {right:0}
   #chantiersdirect h2 {margin-bottom: 0}
   footer .mentions .col-sm-2 {width:100%}
   footer .mentions .col-sm-10 {width:100%; text-align: center!important; max-width:100%}
   footer .mentions a {margin-left:10px}
   footer .mentions a:last-child {margin-left:0}
   .nav-head .acces {right:25px; top:25px!important}
   .custom-select-operation select, .custom-select-thematique select {font-size:15px; padding-left:0px; }
   .custom-select-thematique {margin-top:10px}
   .custom-select-operation, .custom-select-thematique {font-size:15px; min-width:250px}
   .page-template-actualites .categories, .page-template-actualites .date {font-size:12px}
   .page-template-actualites .actu-single {margin-bottom:30px}
   .page-template-actualites .actu-single h3 {font-size:20px; padding-top:10px}
   .single #main {max-width:100%; padding:50px 25px 50px 25px}
   .single h1 {font-size:30px; margin-bottom:30px}
   .single .img-top {max-width:100%}
   .single .article-contenu {font-size: 18px;line-height: 30px;padding: 40px 0;}
   .single .categories, .single .date-publication {font-size:15px; line-height:22px; display:block}
   .single .legende {margin-bottom:0}
   .single .boite-projet {padding:50px 25px 50px 25px}
   .single .boite-projet .lien a {font-size:20px}
   .single .boite-projet span {font-size:20px; line-height:32px}
   .breadcrumb {margin-left:25px; font-size:13px; margin-top:15px; margin-bottom:15px}
   .page-titre {padding-left:25px; margin-bottom:25px}
   #carte {height:500px}
   #operations {padding-top:50px!important; padding:25px}
   #operations .thumb {width: 100%;height: 300px; margin-bottom:50px}
   #operations h3 {bottom: 30%;text-align: center;width: 100%; left:auto}
   .page-header-img {height:300px; padding:0}
   .page-header-img h1 {left:25px; padding-left:0}
   #offresemploi {padding:25px}
   #offresemploi .offre {padding:25px; padding-bottom:100px; padding-top:50px}
   #offresemploi .offre .date {margin-bottom:20px}
   #offresemploi h2 {font-size:27px}
   #offresemploi .offre .type {font-size: 20px;margin-bottom: 10px;display: block;}
   #offresemploi .offre .description {  font-size: 17px;  line-height: 28px;}
   #offresemploi .offre button .postuler {margin-top:0; font-size:15px;}
   #offresemploi .offre .bulle-bouton {font-size:15px; margin-top:15px; display: block}
   .page-header-projets {height:450px}
   .select-projet {bottom: 25px;
    padding: 15px 25px 15px 25px;
    left: 0;}
   #presentation, #objectifs, #programme {font-size:18px; line-height:30px; padding:25px!important}
   #presentation .acteurs {padding:25px}
   #presentation .chiffres {margin-top:50px; margin-left:0; padding-left:30px}
   #presentation .chiffres h4 {font-size: 50px;  margin-bottom: 0;}
   #presentation-diapo {padding:0!important; max-width:100%; margin-top:0px}
   #presentation-diapo .legende {max-width:100%; padding:20px}
   #presentation-diapo .diapo-projet {margin-top:0}
   #presentation-diapo .legende {font-size:16px}
   #presentation-diapo .vignette {height:400px}
   .page-template-operation-presentation h1 {margin-top:0}
   .cercle-prev img, .cercle-next img {  width: 25px;  margin-top: 10px;  margin-left: 10px;}
   .cercle-prev, .cercle-next {width: 50px;height: 50px;}
   .custom-prev, .custom-next, .custom-prev-projets, .custom-next-projets, .custom-prev-chantier, .custom-next-chantier, .custom-prev-miniprojet, .custom-next-miniprojet {width:50px; margin-top:25px}
   #objectifs .objectifs-accroche, #programme .programme-accroche {max-width:100%; margin-top:50px;font-size: 52px;line-height: 65px; }
   #programme .programme-accroche br {display: none}
   .filtered-posts .col-xl-4 {margin-bottom:10px; padding-right:0px}
   .accroche, .programme-accroche {font-size:30px!important; line-height:45px!important}
   .page-template-villedurable h1 {font-size:30px!important}
   .savoirplus {margin-top:50px}
   .savoirplus a {font-size:22px!important}
   .accroche .outline, .programme-accroche .outline {    -webkit-text-stroke: 1px #00A4BE!important;}
   #transition, #transition2 {padding:25px 25px 50px 25px}
   #transition .legende, #transition2 .legende, .diapo-projet-mini .legende {font-size:15px; max-width:100%; text-align: center}
   .page-template-villedurable .echelle-urbaine, .page-template-villedurable .echelle-bati, .page-template-villedurable .urbanisme-transitoire, .page-template-villedurable .art-ville {padding:25px 25px 50px 25px}
   .logo-head {height:50px}
   .nav-head .acces {margin-right:0}
   .nav-head {top:25px!important}
   #actualites {padding-left:25px}
   .actu-liste {margin-right:15px}
   .progress-bar-projets {
    margin-top: 50px!important;
    margin-bottom: 30px!important;}
    .progress-bar, .progress-bar-projets, .progress-bar-chantier {margin:0 auto}
    .progression {height:10px}
    .progression .trait {height:10px}
    .nav-head {width: 200px;right: 0;}
    #qui h1, #missions h1, #organisation h1 {font-size:30px; margin-bottom:20px}
    #missions .cercle-prev img, #missions .cercle-next img {margin-top: 10px!important;margin-left: 0px!important;}
    .page-template-villedurable h2 {font-size:30px; margin-bottom:20px}
    ul, li {padding-left:0!important}
    #actualites h1 {margin-bottom:0}
.page-template-maitrise-ouvrage #equipementspublics, .page-template-maitrise-ouvrage #locaux, .page-template-maitrise-ouvrage #universite {padding:50px 25px 50px 25px}
.page-template-maitrise-ouvrage h2 {font-size:30px}
#contenu {padding-left:25px; padding-right:25px}
  #contenu h1 {font-size:30px; margin-top:25px; margin-bottom:20px}
.page-template-artdanslaville #diapo-pleine-largeur {padding-left:25px; padding-right:25px}
.page-template-artdanslaville #diapo-pleine-largeur .diapo-full .vignette {height:400px}
#diapo-pleine-largeur .legende {font-size: 15px;padding-left: 0;max-width: none;}
.filtered-posts h2 {font-size:30px}
ul.sub-menu {font-size:17px}
.page-header-projets .logo-projet {width: auto;padding: 15px 25px 15px 25px;}
#select-contenu {text-align: left;padding-left: 10px;}
.select-projet:after {top:19px}
.page-template-operation-presentation h1 {font-size:30px; margin-bottom:25px}
.page-template-operation-presentation #actualites {padding-left:25px}
#programme h5 {font-size: 30px;line-height: 35px;}
#dev {    font-size: 18px!important;  line-height: 30px!important;  padding: 25px!important; padding-top:0!important}
.page-template-operation-devdurable .page-titre {font-size:30px}
.page-template-operation-devdurable .diapo-projet-mini .vignette {max-width: none;margin-top: 50px;}
.page-template-operation-devdurable .bgw h2 {margin-top:50px!important} {margin-top:50px!important}
.page-template-operation-devdurable h2 {font-size:30px}
.page-template-operation-devdurable h2:first-child {padding-top:50px}
.page-template-operation-projets #projet {padding-left: 25px;padding-right: 25px;font-size: 18px;line-height: 30px;}
.page-template-operation-projets .page-titre {font-size:35px; line-height:40px}
.page-template-operation-projets h2 {font-size:30px}
.page-template-operation-occupations .page-titre {font-size:35px; margin-top:-40px}
.page-template-operation-occupations #dev {padding-top:50px!important}
.page-template-operation-occupations #dev h3 {margin-top:-50px}
.page-template-operation-occupations #dev .pt0 {padding-top:0!important}
#programme .programme-details {margin-top:30px}
#calendrier {    font-size: 18px;line-height: 30px;padding-left:25px; padding-right:25px}
.page-template-operation-presentation .progress-bar-projets {margin-top:0!important}
.page-template-operation-presentation .objectifs-accroche {margin-bottom:50px;font-size: 30px!important;line-height: 45px!important;}
.page-template-operation-presentation .objectifs-accroche .outline{    -webkit-text-stroke: 1px #00A4BE!important}

.page-template-rendre-visite #dev {padding-top:25px!important}
.logo-paris {
    margin-left: 0!important;
    margin-top: 0px;
    /* display: block!important; */
}
footer .mentions a.meal {margin-left:0; display: block; margin-bottom:30px}
.progress-bar-projets {width: calc(100% - 50px)!important;height: 1px;z-index: 10;margin-top: 50px;}
#mailpoet_form_1 {width:325px!important}
#mailpoet_form_1 .mailpoet_text, #mailpoet_form_1 .mailpoet_textarea {width: 100%!important;text-align: center;}
.diapo-vertical .vignette, .diapo-projet-mini .vignette {height:300px!important}

#programme .surface, #programme .details {
    font-size: 15px;
    line-height: 25px;
    color: #4B4A4D;
}

footer .col-md-5 {text-align: center}
footer span {margin:0 auto}
#mailpoet_form_1 {margin:0 auto}
footer .accesrapide {margin-top:0}
footer .res {text-align: center}
footer .second {text-align: center}
footer .adresse {float:none}
footer .liens-sup {text-align: center}
footer .mentions .col-sm-2 {text-align:center}
footer .row {text-align: center}



}