/*
Theme Name: Agostini
Template: Divi
Description: Thème pour Agostini
Author: SWEAM
Author URI: https://www.sweam.fr
*/

:root{

    --color-yellow: #FFC839;
    --color-blue: #183A92;

    --color-yellow-light: #FFE297;
    --color-blue-light: #B8EEFF;

    --color-brown: #281B0E;

}

@font-face {
    font-family: 'Agrandir-NarrowHeavy';
    src: url('assets/Agrandir-NarrowHeavy.ttf');
}
@font-face {
    font-family: 'Agrandir-NarrowRegular';
    src: url('assets/Agrandir-NarrowRegular.ttf');
}


.et-db #et-boc .et-l #main-header,
#main-header {
    box-shadow: none;
}
#main-content{
    background-color: transparent;
}

/** Globals **/
body{
    font-family: 'Agrandir-NarrowRegular';
    color: var(--color-blue);
}
p{
    font-family: 'Agrandir-NarrowRegular';
}
h1, h2, h3, h5, a.et_pb_button{
    font-family: 'Agrandir-NarrowHeavy';
}
hr{
    line-height: 0.5rem;
    border: 1px solid var(--color-blue);
    border-bottom: 0;
}

span.yellow{
    color: var(--color-yellow);
}

#menu-menu-principal ul.sub-menu{
    background-color: white !important;
}

/** components **/
.btn-primary{
    background-color: var(--color-yellow);
    color: var(--color-brown);
    border: none;
    border-radius: 3rem;
    padding: 1.2rem 1.5rem;
    margin-top: 2.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.btn-primary:disabled{
    background-color:gainsboro;
    color: var(--color-brown);
    cursor: not-allowed;
}

/** Navigation **/
#main-header .et_pb_row {
    display: flex;
    align-items: center;
}
#menu-menu-principal li{
    padding:0 20px;
    font-family: 'Agrandir-NarrowHeavy';
}

.et-pb-slider-arrows .et-pb-arrow-prev, 
.et-pb-slider-arrows .et-pb-arrow-next {
    background: var(--color-brown);
    color: var(--color-yellow) !important;
}


/* Header global color (by permalink) */
#main-content::after{
    content: '';
    width: 21.5vw;
    height: 1000px;
    position: absolute;
    top:0;
    right:0;
}

.home #main-content::after,
.groupe-agostini #main-content::after,
.metiers #main-content::after,
.realisations #main-content::after,
.post-type-archive-realisations #main-content::after,
.realisations-template-default #main-content::after,
.contact #main-content::after{
    /*background-color:var(--color-blue-light);*/
}

/* Hero before texture */
/*
.home .hero::before{
    content: '';
    background: url('assets/texture_bois_jaune_4.svg') no-repeat center center, var(--color-yellow);
    width: 550px;
    height: 550px;
    z-index: -1;
    position: absolute;
    left: -390px;
    background-size: cover;
}

.groupe-agostini .hero::before,
.metiers .hero::before{
    content: '';
    background: url('assets/texture_metal_bleu_1.svg') repeat, var(--color-blue);
    width: 550px;
    height: 550px;
    z-index: -1;
    position: absolute;
    left: -390px;

}
*/

/************ Content by page **************/
/******* Home *******/
/* Vision */
.home .line-vision::before{
    content: '';
    left: 0;
    top: 0;
    background: url('assets/texture_metal_bleu_2.svg') repeat;
    width: 430px;
    height: 750px;
    z-index: -1;
    position: absolute;
}
.home .section-vision::after{
    content: '';
    bottom: 40px;
    background: var(--color-blue-light);
    width: 480px;
    height: 400px;
    z-index: -2;
    position:absolute
}

/* Engins */
.home .engins::before{
    content: '';
    background: var(--color-yellow-light);
    position: absolute;
    right:0;
    top:0;
    width: 933px;
    height: 747px;
}

.home .engins .large-yellow-bubble,
.home .engins .yellow-bubble{
    border-radius: 50%;
    background-color: var(--color-yellow);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin:0 auto;
    text-transform: uppercase;
    text-align: center;
}
.home .engins .large-yellow-bubble{
    font-family: 'Agrandir-NarrowHeavy', sans-serif;
    width: 426px;
    height: 426px;
    font-size: 24px;
}
.home .engins .large-yellow-bubble span:first-child{
    font-size: 104px;
    line-height: 80px;
}
.home .engins .yellow-bubble{
    font-family: 'Agrandir-NarrowHeavy', sans-serif;
    width: 193px;
    height: 193px;
    font-size: 13px;
}
.home .engins .yellow-bubble span:first-child{
    font-size: 54px;
    line-height: 48px;
}
.home .engins .yellow-bubble span:last-child{
    line-height: 15px;
}
.home .engins .double-bubble{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:0 auto;
}

/* Prestations */
.home .prestations .visual {
    padding-top: 80px;
}
.home .prestations .visual::before{
    content: '';
    background: url('assets/texture_points_bleu_2.svg') repeat;
    width: 550px;
    height: 284px;
    z-index: -1;
    position: absolute;
    left: 33px;
    top: 47px;
}
.home .prestations .visual::after{
    left: -40px;
    content: '';
    background: var(--color-blue);
    width: 583px;
    height: 400px;
    z-index: -2;
    position:absolute
}
/* Realisations */
.home .realisations{
    min-height: 800px;
    margin: 120px 0;
}
.home .realisations::before{
    content: '';
    background: url('assets/texture_bois_jaune_4.svg') no-repeat;
    width: 1000px;
    height: 1041px;
    z-index: -1;
    position: absolute;
    right: -140px;
    top: -91px;
}
.home .realisations::after{
    content: '';
    background: var(--color-yellow);
    width: 933px;
    height: 1020px;
    z-index: -2;
    position: absolute;
    right: -140px;
    top: -82px;
}
.home .realisations .item{
    margin: 0;
    width:100%;
    height: 100%;
    position: relative;
}
.home .realisations .item-content img{
    width: 100%;
    object-fit: cover;
    height: 100%;  
    max-height: 800px;
}
.home .realisations h4{
    text-align: center;
    font-family: 'Agrandir-NarrowRegular', sans-serif;
    color: var(--color-brown);
    font-size: 24px;
    margin: 30px 0;
}


/******* Métiers *******/

/* Travaux publics & Voiries (left align) */
.metiers .travaux-publics .visual::before,
.metiers .voiries .visual::before{
    content: '';
    width: 550px;
    height: 284px;
    z-index: -1;
    position: absolute;
    left: -84px;
    top: 294px;
}
.metiers .travaux-publics .visual::after,
.metiers .voiries .visual::after{
    content: '';
    background: var(--color-blue-light);
    width: 430px;
    height: 430px;
    z-index: -2;
    position:absolute;
    left: -157px;
    top:-30px;
}
.metiers .travaux-publics .visual::before{
    background: url('assets/texture_points_cyan_2.svg') repeat;
}
.metiers .travaux-publics .visual::after{
    background: var(--color-blue-light);
}
.metiers .voiries .visual::before{
    background: url('assets/texture_points_cyan_4.svg') repeat;
}
.metiers .voiries .visual::after{
    background: var(--color-yellow);
}

/* Bâtiments & Réseaux divers (right align) */
.metiers .batiments .visual::before,
.metiers .reseaux-divers .visual::before{
    content: '';
    width: 157px;
    height: 368px;
    z-index: -1;
    position: absolute;
    right: -157px;
    top: 100px;
}
.metiers .batiments .visual::after,
.metiers .reseaux-divers .visual::after{
    content: '';
    width: 430px;
    height: 436px;
    z-index: -2;
    position: absolute;
    right: -157px;
    top: -30px;
}
.metiers .batiments .visual::before{
    background: url('assets/texture_metal_jaune_1.svg') repeat;
}
.metiers .batiments .visual::after{
    background: var(--color-yellow-light);
}
.metiers .reseaux-divers .visual::before{
    background: url('assets/texture_points_cyan_5.svg') repeat;
}
.metiers .reseaux-divers .visual::after{
    background: var(--color-blue);
}


/******* Réalisations *******/


/* Liste (Timber) */

.categories-filter{
    max-width: 1126px;
    margin: 0px auto 140px;
}
.categories-filter button{
    margin-right:20px;
    font-family: 'Agrandir-NarrowHeavy', sans-serif;
    font-weight: normal;
    font-size: 14px;
}

.realisations {
    /*
    display:grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 400px;
    grid-auto-rows: 400px;
    grid-gap: 39px;
    */
    position: relative;
}
.realisations .item{
    display: block;
    position: absolute;
    width: 420px;
    height: 400px;
    margin: 20px;
    z-index: 1;
    /*background: #000;*/
    color: #fff;
}
.realisations .item-content{
    /*
    position:relative !important;
    max-width: 500px;
    margin: 0 auto;
    transform: translate3d(0,0,0) !important;
    width: 100% !important;
    */
    width: 100%;
    height: 100%;
}
.realisations .item-content img{
    width: 100%;
    object-fit: cover;
    max-height: 100%;
    height: 100%;  
}
.realisations .item-content .title{
    position: absolute;
    bottom: 0;
    padding: 40px;
    text-align: center;
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    min-height: 50%;
}
.realisations .item-content .title h3{
    color: var(--color-yellow);
    font-size: 14px;
    text-transform: uppercase;
}
.realisations .item-content .title h2{
    color: white;
    font-size: 32px;
    margin: 0;
    line-height: 2.5rem;
}



/* Fiche */
.wp-block-image figcaption{
    font-size: 18px;
    text-align: left;
    margin-top: 20px;
}

.realisations-template-default .et_pb_post_content figure:first-child::before{
    content: '';
    background: url('assets/texture_bois_jaune_4.svg') no-repeat center center, var(--color-yellow);
    width: 550px;
    height: 550px;
    z-index: -1;
    position: absolute;
    left: -390px;
    background-size: cover;
}

/* Fiche-footer */
.realisations-template-default  .btn.back::before{
    content: '' !important;
    background: url('assets/back_arrow.svg');
    background-repeat: no-repeat;
    width: 40px;
    height: 9px;
    position: relative;
    margin-right: 10px;
}
.realisations-template-default .fiche-footer .left::before{
    content: '';
    background: url('assets/texture_points_jaune.svg') repeat;
    width: 550px;
    height: 482px;
    z-index: -1;
    position: absolute;
    left: -157px;
    top: 36px;
}
.realisations-template-default .fiche-footer .left::after{
    content: '';
    background: var(--color-yellow);
    width: 700px;
    height: 550px;
    z-index: -2;
    position: absolute;
    visibility: inherit;
    left: -157px;
    top: -100px;
}
.realisations-template-default .fiche-footer .right::before{
    content: '';
    background: url('assets/texture_metal_bleu_1.svg') repeat;
    width: 157px;
    height: 368px;
    z-index: -1;
    position: absolute;
    left: -220px;
    top: -160px;
}


/******* Groupe Agostini *******/
/* presentation */
.groupe-agostini .presentation .visual::before{
    content: '';
    background: url('assets/texture_points_cyan_2.svg') repeat;
    width: 550px;
    height: 284px;
    z-index: -1;
    position: absolute;
    left: -40px;
    top: 171px;
}
.groupe-agostini .presentation .visual::after{
    content: '';
    background: var(--color-blue-light);
    width: 468px;
    height: 436px;
    z-index: -2;
    position:absolute;
    left: 115px;
    top: -30px
}

/* histoire */
.groupe-agostini .histoire .visual::before{
    content: '';
    background: url('assets/texture_metal_bleu_1.svg') repeat;
    width: 430px;
    height: 750px;
    z-index: -1;
    position: absolute;
    left: 0px;
    top: -40px;
}
.groupe-agostini .histoire .visual::after{
    content: '';
    background: var(--color-blue-light);
    width: 480px;
    height: 480px;
    z-index: -2;
    position:absolute;
    left: -40px;
    bottom: -90px;
}

/* chiffres */
.groupe-agostini .chiffres .bubbles{
    position: relative;
    width: 840px;
    min-height: 460px;
    margin: 0 auto;
}
.groupe-agostini .chiffres .large-bubble.blue{
    background-color: #194496;
    position: absolute;
}
.groupe-agostini .chiffres .bubble.blue{
    background-color: #1355FF;
    position: absolute;
    left: 450px;
    top: 40px;
}
.groupe-agostini .chiffres .bubble.cyan{
    background-color: #5DBEDD;
    position: absolute;
    top: 260px;
    left: 410px;
}
.groupe-agostini .chiffres .bubble.yellow{
    background-color: var(--color-yellow);
    position: absolute;
    top: 190px;
    left: 620px;
}

.groupe-agostini .chiffres .large-bubble,
.groupe-agostini .chiffres .bubble{
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin:0 auto;
    text-transform: uppercase;
    text-align: center;
}
.groupe-agostini .chiffres .large-bubble{
    font-family: 'Agrandir-NarrowHeavy', sans-serif;
    width: 426px;
    height: 426px;
    font-size: 24px;
}
.groupe-agostini .chiffres .large-bubble span:first-child{
    font-size: 104px;
    line-height: 80px;
}
.groupe-agostini .chiffres .bubble{
    font-family: 'Agrandir-NarrowHeavy', sans-serif;
    width: 193px;
    height: 193px;
    font-size: 13px;
}
.groupe-agostini .chiffres .bubble span:first-child{
    font-size: 54px;
    line-height: 48px;
}
.groupe-agostini .chiffres .bubble span:last-child{
    line-height: 15px;
}

.groupe-agostini .qualibat .visual::before{
    content: '';
    background: url('assets/texture_points_cyan_5.svg') repeat;
    width: 204px;
    height: 550px;
    z-index: -1;
    position: absolute;
    right: -116px;
    top: 0px;
}
.groupe-agostini .qualibat .visual::after{
    content: '';
    background: var(--color-blue);
    width: 600px;
    height: 436px;
    z-index: -2;
    position:absolute;
    right: -157px;
    top: 0px;
}


/* Contact form styling */

.contact-form{
    color:white;
}
.contact-form form > p{
    margin-bottom:2rem;
}

.contact-form label{
    color: white;
    font-size: 1.2rem;
}
.contact-form label.required span.label::after{
    content: '*';
    color: var(--color-yellow);
    font-size: 1rem;
    margin-left: 0.3rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea{
    border: none;
    border-radius: 0;
    color: var(--color-brown);
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
    font-size: 1.2rem;
}
.contact-form textarea{
    height: 10rem;
}

.contact-form .acceptance .wpcf7-list-item{
    margin: 0;
}
.contact-form .acceptance .wpcf7-list-item label{
    display: grid;
    grid-template-columns: 35px auto;
    gap: 0.5em;
    line-height: 1.2rem;
}
.contact-form .wpcf7-not-valid-tip{
    color: var(--color-yellow);
    font-size: 0.8rem;
}

/* Checkbox styling... */
.contact-form .acceptance input[name='acceptance-confidentiality']{
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0.3rem 0.5rem 0 0;
    font: inherit;
    color: currentColor;
    width: 20px;
    height: 20px;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    flex-shrink: 0;
    display: grid;
    place-content: center;
}
.contact-form .acceptance input[name='acceptance-confidentiality']::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--color-blue);
    transform-origin: center center;
    clip-path: polygon(17% 46%, 6% 59%, 46% 92%, 100% 16%, 88% 6%, 44% 68%)
}
.contact-form .acceptance input[name='acceptance-confidentiality']:checked::before {
    transform: scale(1);
}

/* Submit button */
.contact-form input[type="submit"]{
    margin-top: 2.5rem;
}


/******* Media queries *******/

@media screen and (max-width: 1126px){
    .realisations {
        grid-template-columns: 1fr 1fr;
        margin: 10px;
    }
    
}
@media screen and (max-width: 600px){
    .realisations {
        grid-template-columns: 1fr;
        margin: 10px;
    }
    .realisations .item {
        width: 380px;
        margin: 0px;
        padding-bottom: 1rem;
    }

    .home .realisations{
        min-height: initial;
    }
    .home .realisations::before{
        height: 50vh;
    }
    .home .realisations::after{
        height: 45vh;
    }
}



/*** Plugins ***/

/* sweam_image_swapper */
.sweam_image_swapper{
    display:block;
}
.sweam_image_swapper img{
    display: block;
    height: inherit;
    user-select: none;
}
.front-back-slider {
    width:100%;
    position:relative;
    overflow:hidden;
}
.back-image {
    display:block;
}
.front-image {
    position:absolute;
    height:100%;
    width:50%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:2;
}
.front-image img {
    max-width: initial;
}
  
.resizer {
    position:absolute;
    display:flex;
    align-items:center;
    z-index:5;
    top:0;
    left:50%;
    height:100%;
    width:4px;
    background:white;
    /*Stop vertical scrolling on touch*/
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    cursor: col-resize;
}
  
.resizer::before {
    background:white;
    content:'';
    font-weight:900;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    position:absolute;
    margin: 0 0 0 -22px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:3px solid white;
}
.resizer::after {
    content: '';
    background: url('assets/left-right-arrow.svg') no-repeat center center;
    width: 32px;
    height: 32px;
    position: absolute;
    margin: 7px 0 0 -15px;
    opacity: 0.6;
}