.hero-banner {
    position: relative;
    overflow: hidden;  

    padding-top: 55px; 

    width: 100%;
    height: auto;

    background-color: #FFF;
    color: #FFF;
}

.hero-banner--in {
    position: relative;
    z-index: 400;
    
    max-width: 1070px; /* cf : class .site-inner-2 */
    margin: 0 auto;
    padding: 0 14px; /* cf : class .site-inner-2 */
}

.hero-banner--img {
    display: block;

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    z-index: 200;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-banner--video {
    display: block;
    
    position: absolute;
    top: 0;
    left: 0;

    z-index: 200;
    overflow: hidden; 

    padding-bottom: 56.25%;
    
    width: 100%;
    height: 0;
}

.hero-banner--video video {
    position: absolute;
    top: 0;
    left: 0;
    
    height: 100% !important;
    width: 100% !important;
}

.hero-banner--logo {
    width: 150px;
}

.hero-banner--logo h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.hero-banner--logo a {
    display: block;
}

.hero-banner--logo img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.hero-banner--symbole-1 svg,
.hero-banner--symbole-2 svg {
    display: block;
}

.hero-banner--symbole-1 {
    position: relative;
    margin-left: 150px;
    height: 509px; /* pour que la forme donne la taille du fond en pos ab */ 
}

.hero-banner--symbole-1_txt {
    position: relative;
    z-index: 1400;

    padding: 80px 0 0 66px;
}

.hero-banner--symbole-1_txt .h1 {
    margin: 0;
}

.hero-banner--symbole-1_txt .h1 p { 
    margin: 0;
    max-width: 420px;

    font-size: 40px;
    font-weight: 600;
    color: #FFF;
    line-height: 1.18;
}

.hero-banner--symbole-1_txt .h1 + p {
    margin: 20px 0 40px;
    max-width: 420px;

    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
}

.hero-banner--symbole-1_svg-1,
.hero-banner--symbole-1_svg-2 {
    position: absolute;
    top: 0;
    left: 0;
}

.hero-banner--symbole-1_svg-1 {
    z-index: 1200;
}

.hero-banner--symbole-1_svg-2 {
    z-index: 1000;
}

.hero-banner--symbole-1_txt .hero-banner--symbole_button {
    max-width: 370px;
    text-align: right;
}

.hero-banner--symbole_button a {
    display: inline-block;
    padding: 10px 20px;

    font-size: 14px;
    line-height: 1;
    color: #FFF;

    border: 1px solid;
    border-radius: 3px;

    text-decoration: none;

    transition: all 300ms;
}

.hero-banner--symbole_button a:focus,
.hero-banner--symbole_button a:hover,
.hero-banner--symbole_button a:active {
    color: #000;
    background-color: #FFF;
    border-color: #FFF;
}

.hero-banner--symbole-2 {
    position: absolute;
    top: 454px;
    right: 0px;
    z-index: 600;
}

.hero-banner--symbole-2_txt {
    position: absolute;
    bottom: 0;
    left: 0;

    padding-left: 20px;
    padding-bottom: 25px;
}

.hero-banner--symbole-2_txt h2 {
    margin-top: 0px;
    margin-bottom: 20px;

    width: 180px;

    font-size: 20px;
    line-height: 1;
    font-weight: 600;
}

/* 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
Couleur de fond
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
*/
.hero-banner svg path.CFrouge { fill: #E30613 !important; }

.hero-banner svg path.CFbleufonce { fill: #003264 !important; }
.hero-banner svg path.CFvioletfonce { fill: #550055 !important; }
.hero-banner svg path.CFvertfonce { fill: #006464 !important; }
.hero-banner svg path.CFmauve { fill: #820A41 !important; }
.hero-banner svg path.CFblanc { fill: #FFFFFF !important; }
.hero-banner svg path.CFbleuclair { fill: #A0B4D2 !important; }
.hero-banner svg path.CFvioletclair { fill: #B4AAC8 !important; }
.hero-banner svg path.CFvertclair { fill: #AACDC8 !important; }
.hero-banner svg path.CFbeige { fill: #D7C3BE !important; }

/* 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
Couleur Complémentaire
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 
*/

.hero-banner svg path.CCorangeclair { fill: #F39769 !important; }
.hero-banner svg path.CCorange { fill: #E73446 !important; }
.hero-banner svg path.CCroseclair { fill:#ED6C84  !important; }
.hero-banner svg path.CCrose { fill: #E5007D !important; }
.hero-banner svg path.CCviolet { fill: #951B81 !important; }
.hero-banner svg path.CCmauve { fill: #6859A2 !important; }
.hero-banner svg path.CClavande { fill: #6859A2 !important; }
.hero-banner svg path.CCbleufonce { fill: #164194 !important; }
.hero-banner svg path.CCbleuclair { fill: #009FE3 !important; }
.hero-banner svg path.CCbleuazur { fill: #83D0F5 !important; }
.hero-banner svg path.CCvertclair { fill: #69C0AC !important; }
.hero-banner svg path.CCvertfonce { fill: #009A93 !important; }

.news-mosaic .masonry-item .tile-style-vert {
    background: rgba(105, 192, 172, 1);
}

.news-mosaic .masonry-item .tile-style-violet {
    background: rgba(95, 95, 170, 1);
}

.news-mosaic .masonry-item .tile-style-bleufonce {
    background: rgba(30, 70, 160, 1);
}

.news-mosaic .masonry-item .tile-style-bleuclair {
    background: rgba(130, 210, 250, 1);
}

@media screen and (max-width: 1300px ) {
    .hero-banner--in {
        max-width: 80%;
    }
    .hero-banner--symbole-1_txt .h1 + p {
        max-width: 460px;
    }
}

@media screen and (max-width: 1160px ) {
    .hero-banner--logo {
        width: 144px; /* 216 ÷ 1.5 */
    }
    .hero-banner--symbole-1 {
        margin-left: 144px;
    }
    .hero-banner--symbole-1_txt .h1 p {
        font-size: 38px; /* 58 ÷ 1.5 */
    }
    .hero-banner--symbole-1_txt .h1 + p {
        max-width: 410px;
    }
    .hero-banner--symbole-2 {
        top: 382px;
    }
    .hero-banner--symbole-1_txt .h1 + p,
    .hero-banner--symbole-2_txt h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 1024px ) {
    .hero-banner--in {
        max-width: 100%; 
    }
    .hero-banner--video {
        display: none;
    }
}

@media screen and (max-width: 992px ) {
    .hero-banner--img {
        height: calc(607px + 55px); /* height .symbole-1 + padding-top .hero-banner */
    }
    .hero-banner--logo {
        display: none;
    }
    .hero-banner--symbole-1 {
        margin-left: 0;
    }
    .hero-banner--symbole-2 {
        position: relative;
        top: auto;
        right: auto;

        width: 100%;
        height: 226px;

        background-color: #D6C3BB;

        text-align: right;
    }
    .hero-banner--symbole-2_txt {
        left: auto;
        right: 0;

        padding-left: 0;
        padding-right: 90px;
        
        text-align: left;
    }
    .hero-banner--symbole-2_txt h2 {
        width: 190px;
    }
}

@media screen and (max-width: 480px ) {
    .hero-banner {
        height: auto;
    }
    .hero-banner--img {
        background-position: -600px 0;
        background-size: 350%;
    }
    .hero-banner--in {
        margin-top: 150px; 
    }
    .hero-banner--symbole-1_txt {
        padding: 90px 0 0 40px;
    }
    .hero-banner--symbole-1_txt .h1 p {
        font-size: 30px;
    }
    .hero-banner--symbole-1_txt .h1 + p {
        font-size: 16px;
    }
}

/* 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

LES AUTRES RETOURS (cf : email 11 janvier 2019 : Brief site CDC - DC1 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
*/

.logo-wrapper-xs .logo-xs img{ width: 55px; }

.front .header-big-search { background: none !important; }
.header-big-search::after{ display: none !important; }

.menuprofils .menu-cibles > li { margin-left: 25px; }
.menuprofils .menu-cibles > li > a { font-size: 12px; }

.news-mosaic .masonry-item:hover .tile-style-blue,
.view-faits-marquants .masonry-item:hover .tile-style-blue,
.news-mosaic .masonry-item:focus .tile-style-blue,
.view-faits-marquants .masonry-item:focus .tile-style-blue,
.news-mosaic .masonry-item:active .tile-style-blue,
.view-faits-marquants .masonry-item:active .tile-style-blue,
.paragraphs-item-mosaique-les-essentiels .mosaique-blue {
    background: #1E46A0;
}

.news-mosaic .masonry-item:hover .tile-style-yellow,
.view-faits-marquants .masonry-item:hover .tile-style-yellow,
.news-mosaic .masonry-item:focus .tile-style-yellow,
.view-faits-marquants .masonry-item:focus .tile-style-yellow,
.news-mosaic .masonry-item:active .tile-style-yellow,
.view-faits-marquants .masonry-item:active .tile-style-yellow,
.paragraphs-item-mosaique-les-essentiels .mosaique-yellow {
    background: #69C0AC;
}

.news-mosaic .masonry-item:hover .tile-style-white,
.view-faits-marquants .masonry-item:hover .tile-style-white,
.news-mosaic .masonry-item:focus .tile-style-white,
.view-faits-marquants .masonry-item:focus .tile-style-white,
.news-mosaic .masonry-item:active .tile-style-white,
.view-faits-marquants .masonry-item:active .tile-style-white,
.paragraphs-item-mosaique-les-essentiels .mosaique-white {
    background: #5F5FAA;
}

.news-mosaic .masonry-item:hover .tile-style-lightblue,
.view-faits-marquants .masonry-item:hover .tile-style-lightblue,
.news-mosaic .masonry-item:focus .tile-style-lightblue,
.view-faits-marquants .masonry-item:focus .tile-style-lightblue,
.news-mosaic .masonry-item:active .tile-style-lightblue,
.view-faits-marquants .masonry-item:active .tile-style-lightblue,
.paragraphs-item-mosaique-les-essentiels .mosaique-lightblue
{
    background: #82D2FA;
}


header .logo-wrapper { margin-top: 8px; }
.front header { margin-bottom: 0 !important; }

/* PAGE http://icdc-dgco.rc.ci.alterway.fr/particuliers */
.header-particuliers::before { background: none; }
.header-particuliers .block-search .form-submit{ background: #ff495e; }

/* On ajoute plus de marge */
@media only screen and (max-width: 767px) {
    header {
        padding-top: 55px !important;
    }
}

/* On augmente le breakpoint */
@media only screen and (max-width: 992px) {
    .menuliensutiles,
    .menuprofils { display: none; }

    .logo-wrapper-xs { display: block; }

    .mega-menu-trigger {
        float: right;
        margin-top: 12px;
        margin-left: 12px;
    }
}

/* On ajoute plus de marge car avant c'était 45px */
@media only screen and (min-width: 768px) {
    .front header {
        padding-top: 55px;
    }
}