/* structure */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
}
main {
    background-color: #fff;
}
.section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap:20px;
    column-gap: 20px;
    align-items: center;
    padding: 80px 0;
    /*border: dashed 1px #eee;*/
}
@media screen and (max-width:1024px) {
    .section {
        padding: 50px 0;
    }
}
.row {
    box-sizing: border-box;
    width: 90%;
    max-width: 1280px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
    /*border: dashed 1px #eee;*/
}
.col {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 20px;
    column-gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    /*border: dashed 1px #eee;*/
}
.col-50w {
    width:calc(50% - 10px);
}
.widget {
    box-sizing: border-box;
    width:100%;
    /*border: dashed 1px #eee;*/
}
.widget-picture img {
    display: block;
    margin-bottom: 0;
}
.widget-gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap:20px;
}
.widget-gallery-item {
    width:calc(25% - 15px);
    height: 250px;
    cursor: pointer;
}
.widget-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.widget-gallery .widget-gallery-items img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}
.viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000ee;
    z-index: 99999;
    padding: 50px 100px 100px 100px;
    box-sizing: border-box;
}
.viewer.open {
    display: block;
}
.viewer .icon {
    position: absolute;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
    cursor: pointer;
}
.viewer .close-icon {
    right: 50px;
    top:50px;
    background-image: url('/medias/projects/close.png');
}
.viewer .next-icon {
    right: 50px;
    top:calc(50% - 15px);
    background-image: url('/medias/projects/right.png');
}
.viewer .prev-icon {
    left: 50px;
    transform: scaleX(-1);
    top:calc(50% - 15px);
    background-image: url('/medias/projects/right.png');
}
.viewer .viewer-content {
    width: 100%;
    height: calc(100% - 21px);
}
.viewer .viewer-content > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.viewer .viewer-label {
    text-align: center;
    color: #fff;
    margin-top: 35px;
}
.widget-resum {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.widget-bouton a {
    display: inline-block;
    padding: 15px 25px;
    background-color:#acec00;
    color: #001830;
}
h1, h2, h3, h4, h5 {
    margin: 0;
}
h1 {
    font-size: 72px;
}
h2 {
    font-size: 35px;
}
a {
    text-decoration: none;
}

/* headear */
header {
    position: sticky;
    top: 0;
    background-color: #054990;
    z-index: 9999;
    box-shadow: 0 0 25px #00226999;
}
.header-section {
    padding:10px 0;
}
.header-section .col {
    display: flex;
    justify-content: space-between;    
}
.header-section a {
    color:#fff;
}
.header-section .menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    list-style-type: none;
    color:#fff;
}
.header-section .lang-items {
    display: flex;
    gap: 5px;
    list-style-type: none;
}


/* footer */
.footer-section {
    font-size: 16px;
    color: #fff;
    background-color: #054990;
    background-image: url('/medias/footer-background-left.png'), url('/medias/footer-background-top.png'); /*, linear-gradient(-33.1497deg, #20a4e2, #064a91);*/
    background-position: left bottom, left top;
    background-size:  90% auto, 100% 150px;
    background-repeat: no-repeat;
    padding-top: 230px;
}
.footer-section a {
    color: #fff;
}
.footer-section .col {
    border: none;
    width: calc(25% - 15px);
}
.footer-section .widget-resum {
    row-gap: 0;
}
.footer-section .widget-resum-title {
    font-weight: bold;
}

.footer-section .no-style-list ul {
    list-style-type: none;
    padding-left: 0;
}

/* section */
.banner-section {
    background-color: #054990;
    background-image: url(/medias/banner-background-right.png), url(/medias/banner-background-bottom.png);
    background-position: right top, left bottom;
    background-size: auto calc(100% - 50px), 100% 150px;
    background-repeat: no-repeat;
    padding-bottom: 150px;
    padding-top: 25px;
    min-height:350px; 
    justify-content: center;
}
.banner-section + section {
    padding-top: 0;
}
.banner-section h1 {
    font-size: 35px;
    color: #fff;
}


/* title */
.banner-section .chapo-text {
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    text-transform: uppercase;
    color:#acec00;
    font-size: 34px;
}
.banner-section h1  {
    color: #fff;
    font-size: 35px;
}
.banner-section .slide-title {
    overflow: hidden;
}
.banner-section .slide-title ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    animation: fadein-left 10s linear infinite;
    /*transition: transform 0.5s;*/
}
.banner-section .slide-title li {
    min-width: 100%;
}
@keyframes fadein-left {
    0% {
        transform: translateX(0);
    }
    45% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    95% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-200%);
    }
}

/* accueil */


.slide-service {
    overflow: hidden;
}
.slide-service ul {
    height: 47px;
    display: flex;
    flex-direction: column-reverse;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 35px;
    font-weight: bold;
    animation: fadein-top 15s linear infinite;
}
@keyframes fadein-top {
    0% {
        transform: translateY(0);
    }
    12% {
        transform: translateY(0);
    }
    12.5% {
        transform: translateY(100%);
    }
    24% {
        transform: translateY(100%);
    }
    25% {
        transform: translateY(200%);
    }
    37% {
        transform: translateY(200%);
    }
    37.5% {
        transform: translateY(300%);
    }
    49% {
        transform: translateY(300%);
    }
    50% {
        transform: translateY(400%);
    }
    62% {
        transform: translateY(400%);
    }
    62.5% {
        transform: translateY(500%);
    }
    74% {
        transform: translateY(500%);
    }
    75% {
        transform: translateY(600%);
    }
    87% {
        transform: translateY(600%);
    }
    87.5% {
        transform: translateY(700%);
    }
    99% {
        transform: translateY(700%);
    }
    100% {
        transform: translateY(800%);
    }
}
.blue-bouton a {
    background-color: #054990;
    color:#fff;
}

.values-col .widget-resum-img img {
    width:75px;
    height: 75px;
    object-fit: contain;
    filter: brightness(0) invert(22%) sepia(88%) saturate(7499%) hue-rotate(228deg) brightness(93%) contrast(106%);
    position: relative;
}
.values-col .widget-resum-img {
    position: relative;
}
.values-col .widget-resum-img:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;
    width:40px;
    height: 40px;
    background-color: #acec00;
}

.strenghts-section {
    background-color: #054990;
    color: #fff;
}
.strenghts-col .widget-resum {
    row-gap: 0;
}
.strenghts-col .widget-tabs, .strenghts-col .widget-tab-content {    
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.partener-col .widget-resum-img {
    order: 1;
}
.partener-col .widget-resum-img img {
    /*max-height: 50px;*/
}
.partener-col .widget-resum-description {
    max-width: 450px;
}
.partener-col {
    overflow: hidden;
}
.partener-col > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    animation: slide-partener 20s linear infinite;
}
.partener-col .widget-resum {
    min-width: 100%;
}
@keyframes slide-partener {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-100%);
    }
    45% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(-200%);
    }
    70% {
        transform: translateX(-200%);
    }
    75% {
        transform: translateX(-300%);
    }
    95% {
        transform: translateX(-300%);
    }
    100% {
        transform: translateX(-400%);
    }
}

.security-col .widget-resum {
    row-gap: 0;
    column-gap: 0;
    padding-left: 50px;
    position: relative;
}
.security-col .widget-resum:before {
    content: '';
    position: absolute;
    width:35px;
    height: 35px;
    left:0;
    top: 10px;
    background-image: url('/medias/check-mark.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* page interne */
.solution-list-col {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: stretch;
}
.solution-list-col .widget-resum {
    width: calc(33.33% - 20px);
    padding: 30px;
    background-color: #00000000;
    background-position: center;
    background-blend-mode: multiply;
    height: 500px;
    justify-content: flex-end;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
.solution-list-col .widget-resum:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, #000000cc, #00000000 75%);
}
.solution-list-col .widget-resum-wraper {
    overflow: hidden;
}
.solution-list-col .widget-resum-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-left: solid 2px #fff;
    color: #fff;
    padding-left: 20px;
    transition: all 0.5s;
}
.solution-list-col .widget-resum:hover .widget-resum-content {
    transform: translateY(0) !important;
}
.solution-list-col .widget-resum-img {
    display: none;
}
.solution-list-col .widget-resum-title h2 {
    font-size: 25px;
}

.contact-form-col {
    padding: 40px;
    box-shadow: 0 0 25px #99999933;
}
.contact-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap:20px;
}
.contact-form input, .contact-form textarea {
    box-sizing: border-box;
    border: solid 1px #eee;
    padding: 5px 10px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.contact-form input:focus, .contact-form textarea:focus {
    border: solid 1px #054990;
}
.contact-form textarea {
    min-height: 250px;
}
.contact-form button {
    min-width: 150px;
    padding: 15px 25px;
    border: none;
    background-color: #054990;
    color: #fff;
    text-transform: uppercase;
}

.project-list a {
    display: block;
    border-left: solid 5px #054990;
    padding: 15px;
    margin: 15px 0;
    background-color: #eee;
    color: #000;
}

.cell {
    max-width: 250px;
    background-color: #eee;
}
.cell a {
    text-decoration: none;
    color:#054990;
}
.cell img {
    display: block;
    width: 250px;
    height: 187px;
    object-fit: contain;
}
.cell span {
    display: block;
    background-color: #fff;
    text-align: center;
    padding: 5px;
}

/* page projet */
.project-info-list {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}
.project-info-list li {
    margin: 5px 0;
}
.project-service-list {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}
.project-service-list li {
    padding-left: 20px;
    position: relative;
    margin: 5px 0;
    z-index: 1;
}
.project-service-list li:before {
    content: '';
    position:absolute;
    left:0;
    top:7px;
    width: 10px;
    height: 10px;
    background-color: #acec00;
    z-index: 2;
}

.project-gallery .widget-gallery-items {
    display: grid;
    gap: 10px;
    grid-template-columns: calc(40% - 6px) calc(20% - 6px) calc(40% - 6px);   
    grid-template-rows: repeat(2, calc(50% - 5px));
}
.project-gallery .widget-gallery-items img:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.project-gallery .widget-gallery-items img:nth-child(2) {
    grid-column: 2/4;
    grid-row: 1;
}
.project-gallery .widget-gallery-items img:nth-child(3) {
    grid-column: 1/3;
    grid-row: 2;
}
.project-gallery .widget-gallery-items img:nth-child(4){
    grid-column: 3;
    grid-row: 2;
}
.project-gallery .widget-gallery-items img:nth-child(n + 5) {
    display: none;
}
.project-gallery .widget-gallery-items .items-info {
    grid-column: 3;
    grid-row: 2;
    background-color: #000000cc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}
.project-gallery .items-info-value {
    font-weight: 700;
    font-size: 32px;
}
.project-gallery .items-info-attribut {
    text-transform: uppercase;
}