/*
Theme Name: Chrysal Services
Author: Rhazael
Author URI: https://rhazael.fr
Description: Theme Chrysal Services - Base Blankstate
Version: 1
Requires PHP: 7.4
*/

/* Reset css + base styles blankstate */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html{scroll-behavior:smooth}body{line-height:1}
a{text-decoration-skip-ink:auto}
a[href^="tel"]{color:inherit;text-decoration:none}
button{outline:0}ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
q{display:inline;font-style:italic}
q:before{content:'"';font-style:normal}
q:after{content:'"';font-style:normal}
textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}
input[type="search"]{-webkit-appearance:textfield}
table{border-collapse:collapse;border-spacing:0}
th,td{padding:2px}
big{font-size:120%}
small,sup,sub{font-size:80%}
sup{vertical-align:super}
sub{vertical-align:sub}
dd{margin-left:20px}
kbd,tt{font-family:courier;font-size:12px}
ins{text-decoration:underline}
del,strike,s{text-decoration:line-through}
dt{font-weight:bold}
address,cite,var{font-style:italic}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}

.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}

.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}

.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}



/* Base theme Chrysal Services */

/* Variables */

:root {

    /* Couleurs */

    --rouge:                 #6F0B15;
    --rouge-services:        #CF192B;
    --orange-services:       #F19300;
    --rose-services:         #D26AA2;
    --bleu-services:         #66B7DC;
    --vert-services:         #97C00F;
    --violet:                #976AD2;
    --gris:                  #303030;
    --gris-clair:            #F8F8F8;

    /* Fonts */
    
    --font1: "Medel", sans-serif;
    --font2: "Poppins", sans-serif;

    /* Max-width */

    --max-width: 1480px;
}


body {
    font-family: var(--font2);
    color: var(--gris);
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 30px;
}

#container { min-height: 70vh; }

a {
    transition: all ease .2s;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: var(--font1);
    color: var(--gris);
}

strong      { font-weight: bold; }



.flex       { display: flex ;}
.center     { justify-content: center; }
.flex-auto  { flex: 1 100%; }
.column     { flex-direction: column; }
.col-center { align-items: center; }

.w100       { width: 100%; }
.mw         {max-width: var(--max-width);}


.bg-rouge   { background-color: var(--rouge);}
.bg-bleu    { background-color: var(--bleu-services); }
.bg-vert    { background-color: var(--vert-services); }
.bg-rouge-s { background-color: var(--rouge-services); }
.bg-orange  { background-color: var(--orange-services); }
.bg-rose    { background-color: var(--rose-services); }
.bg-violet  { background-color: var(--violet);}

.color-rouge   { color: var(--rouge);}
.color-bleu    { color: var(--bleu-services); }
.color-vert    { color: var(--vert-services); }
.color-rouge-s { color: var(--rouge-services); }
.color-orange  { color: var(--orange-services); }
.color-rose    { color: var(--rose-services); }
.color-violet  { color: var(--violet);}


.small { font-size: 11px !important; }



.cta {
    position: relative;
    padding: 20px 30px;
    background-color: var(--rouge);
    width: 315px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 20px;
    font-family: var(--font2);
    color: #fff;
}

.cta-blanc {
    position: relative;
    padding: 15px 30px;
    background-color: var(--rouge);
    border: 1px solid #fff;
    width: 300px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 20px;
    font-family: var(--font2);
    color: #fff;
}

.cta-blanc::after {
    content: "";
    position: absolute;
    height: 66px;
    width: 66px;
    border-radius: 50%;
    background-color: #fff;
    top: 0;
    right: 0;
}

.article-single {
    width: 100%;
    max-width: var(--max-width);
    margin-right: auto;
    margin-left: auto;
}

#content li {
    list-style-type: disc;
    margin-left: 18px;
}






/**** Menu ****/

nav {
    position: relative;
}

nav#menu ul.menu {
    width: 100%;
    max-width: var(--max-width);
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 30px;
    font-family: var(--font1);
    font-size: 18px;
    height: 62px;
}

nav#menu ul.menu > li { 
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 }


 .menu-menu-connexion-container,
 .menu-menu-principal-container {
    display: flex;
    justify-content: center;
    position: relative;
 }



/* connexion + infos */

nav#menu ul#menu-menu-connexion {
    gap: 50px;
    font-family: var(--font2);
}

nav#menu ul#menu-menu-connexion > li {
    position: relative;
}

#menu-item-43 { cursor: default; }

#menu-item-41 {
    margin-left: 50px;
    position: relative;
}

#menu-item-41, #menu-item-40 {
    padding-left: 40px;
    display: flex;
    justify-content:center;
    align-items: center;
}


#menu-item-41::after {
    content: "";
    position: absolute;
    left: -50px;
    top: 17px;
    width: 1px;
    height: 40%;
    background-color: #aaa;
}

.menu-menu-connexion-container {
    background-color: #fff;
}

.menu-menu-connexion-container a {
    color: var(--gris);
    position: relative;
    font-size: 16px;
}

.menu-menu-connexion-container a::before {
    content: "";
    position: absolute;
    left: -35px;
    top: 0px;
    width: 25px;
    height: 25px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: #4C4F4F;
    transition: all ease .3s;
}

#menu-item-43 a::before {
    mask-image: url("images/menu-pin.svg");
}
#menu-item-42 a::before {
    mask-image: url("images/menu-tel.svg");
}
#menu-item-41 a::before,
#menu-item-40 a::before {
    mask-image: url("images/menu-personnage.svg");
    width: 17px;
}

#menu-item-41 a,
#menu-item-40 a {
    transition: all ease .2s;
}

#menu-item-41:hover a {
    color: var(--bleu-services);
}

#menu-item-40:hover a {
    color: var(--vert-services);
}

#menu-item-40:hover a::before {
    background-color: var(--vert-services);
}

#menu-item-41:hover a::before {
    background-color: var(--bleu-services);
}

/* Menu principal */

.menu-menu-principal-container {
    background-color: var(--rouge);
}

nav#menu ul#menu-menu-principal,
nav#menu ul#menu-menu-principal-1 {
    color: #fff;
    height: 90px;
    display: flex;
    z-index: 10;
    position: relative;
}

nav#menu ul#menu-menu-principal a,
nav#menu ul#menu-menu-principal-1 a  {
    color: #fff;
}

#menu-menu-principal li:first-child a,
#menu-menu-principal-1 li:first-child a {
    width: 100%;
    height: 100%;
}

nav#menu #menu-menu-principal > li:first-child,
nav#menu #menu-menu-principal-1 > li:first-child  {
    position: absolute;
    left: 2%;
    height: 90px;
    width: 150px;
    background-image:url("images/Logo - Chrysal Services - blanc.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    font-size: 1px;
    color: var(--rouge);
}


nav#menu #menu-menu-principal > li:nth-child(0n+2),
nav#menu #menu-menu-principal-1 > li:nth-child(0n+2) {
    position: absolute;
    left: 15%;
    height: 90px;
}

nav#menu #menu-menu-principal > li:nth-child(0n+2) a,
nav#menu #menu-menu-principal-1 > li:nth-child(0n+2) a {
    background-color: #fff;
    color: var(--rouge);
    text-transform: uppercase;
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 25px;
}

nav .sub-menu { 
    display: none;
    z-index: 3;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 40px 25px 25px 25px;
    border-radius: 35px;
    top: 60px;
    width: 290px;
    background-color: var(--rouge);
 }

nav .menu-item-has-children:hover > .sub-menu { display: flex; }

nav .menu-item-has-children > a {
    position: relative;
}

nav .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    right:0;
    margin-right: auto;
    margin-left: auto;
    width: 16px;
    height: 8px;
    background-image: url("images/fleche-bas.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
    transition: all ease .2s;
}

nav .menu-item-has-children:hover > a::after {
    bottom: -25px;
}

.menu-scroll {
    position:fixed;
    
    left: 0;
    width: 100%;
    transition: all ease .3s;
    z-index: 20;
}

.menu-scroll.hide {
    top: -200px;
}

.menu-scroll.active {
    top:0;
}

.admin-bar .menu-scroll.active {
    top:32px;
}

.menu-menu-principal-container > ul > li:nth-child(0n+3) a {
    color: var(--rouge);
    font-size: 1px;
    padding: 12px;
    margin-bottom: 6px;
    background-image: url("images/retour-home.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Menu home */

.home #menu-menu-principal {
    height: 180px;
}

.home nav#menu #menu-menu-principal > li:first-child {
    background-image: url("images/Papillon blanc - Chrysal Services.png");
    color: var(--rouge);
    font-size: 1px;
    padding: 10px;
}


.home #menu-menu-principal > li:nth-child(0n+2) {
    display: none;
}

.home nav#menu ul#menu-menu-principal {
    height: 140px;
}

.home ul#menu-menu-principal .sub-menu {
    top: 100px;
}


/* Menu burger */

.menu-burger { 
    display: none;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    z-index: 65;
    height: 70px;
    background-color: var(--rouge);
    justify-content: space-between;
    color: #fff;
}

.admin-bar .menu-burger {
    top: 32px;
}

/*fix*/


@media screen and (max-width: 1380px) {
    nav#menu ul.menu { font-size: 14px; }
    .menu-menu-connexion-container a { font-size: 14px;}
}



/**/

@media screen and (max-width: 1024px) {

    nav#menu #menu-menu-principal > li:nth-child(0n+2) {
        display: flex;
        left: 10px;
        height: 70px;
        border: 0;
        top: 90px;
    }

    nav#menu #menu-menu-principal > li:nth-child(0n+2) a {
        font-size: 11px;
        padding: 8px 15px;
        font-weight: bold;
    }


    nav#menu ul#menu-menu-connexion {
        height: 75px;
        flex-wrap: wrap;
        gap: 0;
        padding: 0;
        z-index: 64;
        margin-top: 75px;
        border-bottom: 1px solid #ddd;
    }

    nav#menu ul#menu-menu-connexion > li {
        height: 35px;
        flex: 1 40%;
        margin: 0;
    }

    .menu-menu-connexion-container a {
        font-size: 14px;
    }

    #menu-item-41, #menu-item-40 {
        padding: 0;
    }

    #menu-item-41 { order: 2;}


    nav#menu .menu-menu-connexion {
        margin-bottom: 70px;
    }

    .menu-burger {
        display: flex;
        justify-content: space-between;
        z-index: 75;
    }

    .menu-burger img {
        height: 60px;
        margin-left: 25px;
    }

    .burger-logo {
        display: flex;
        align-items: center;
    }

    span.bouton-burger { 
        height: 100%;
        width: 70px;
        position: relative;
    }

    span.bouton-burger::before {
        content: "Menu";
        position: absolute;
        top: 18px;
        left: -80px;
        color: #ffffff;
        font-size: 18px;
        transition: all ease .3s;
    }

    span.bouton-burger.active::before {
        content: "Fermer";
    }

    .hamburger {
        width: 30px;
        height: 30px;
        position: relative;
        margin: 18px 0 0 18px;
    }

    .hamburger .bar {
        padding: 0;
        width: 30px;
        height: 4px;
        background-color: #ffffff;
        display: block;
        border-radius: 4px;
        transition: all 0.4s ease-in-out;
        position: absolute; 
    }

    .bar1 { top: 0;}
    .bar2,
    .bar3 { top: 12.5px;}
    .bar3 { right: 0;}
    .bar4 { bottom: 0;}

    span.bouton-burger.active .hamburger2 > .bar1{
        transform: translateX(40px);
        background-color: transparent;
    }
    span.bouton-burger.active .hamburger2 > .bar2{
        transform: rotate(45deg);
    }
    
    span.bouton-burger.active .hamburger2 > .bar3{
        transform: rotate(-45deg);
    }
    
    span.bouton-burger.active .hamburger2 > .bar4{
        transform: translateX(-40px);
        background-color: transparent;
    }



    .menu-scroll { display: none; }

    .home nav#menu ul#menu-menu-principal { height: inherit; }

    nav#menu ul#menu-menu-principal,
    .home #menu-menu-principal {
        display: flex;
        flex-direction: column;
        height: auto;
        position: fixed;
        right: 0;
        top: -900px;
        z-index: 70;
        gap: 10px;
        padding-bottom: 30px;
        background: var(--rouge);
        background: linear-gradient(180deg, rgba(94,10,17,1) 0%, var(--rouge) 42%, var(--rouge) 100%);
        align-items: flex-end;
        padding-top: 20px;
        transition: all ease .8s;
    }

    nav#menu #menu-menu-principal > li { 
        align-items: flex-end;
        border-bottom: 1px solid #ccc;
    }

    nav#menu #menu-menu-principal > li#menu-item-69 {
        border-bottom: 0;
    }

    nav#menu #menu-menu-principal > li#menu-item-69 > a {
        border-bottom: 1px solid #ccc;
    }

    nav#menu #menu-menu-principal > li#menu-item-745{
        display: none; 
    }

    nav#menu #menu-menu-principal > li#menu-item-771 {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 80px;
        height: 80px;
        border: 1px solid #ccc;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav#menu ul#menu-menu-principal.active,
    .home #menu-menu-principal.active {
        top: 70px;
        overflow-x: scroll;
    }

    .admin-bar nav#menu ul#menu-menu-principal.active,
    .admin-bar .home #menu-menu-principal.active {
        top: 102px;
    }

    body:has(ul#menu-menu-principal.active) {
        /*overflow: hidden;*/
    }

    .home ul#menu-menu-principal .sub-menu {
        top:inherit;
    }

    nav .sub-menu {
        display: flex;
        position: relative;
        padding: 10px 0 5px 0;
        top:inherit;
        gap: 10px;
        font-size: 14px;
        width: inherit;
        align-items: flex-end;
        background-color: inherit;
    }

    nav#menu li.menu-item-has-children{
        flex-direction: column;
    }

    nav .menu-item-has-children > a::after {
        display: none;
    }

    #menu-item-43   { order: 1;}
    #menu-item-42   { order: 2;}
    #menu-item-41   { order: 3;}
    #menu-item-40   { order: 4;}

    #menu-item-41::after { display: none;}

    .menu-scroll.active,
    .menu-scroll.hide {
        top:-500px;
        z-index: 0;
    }

}

@media screen and (max-width: 770px) {

    nav#menu ul#menu-menu-connexion {
        padding: 0 10px;
        height: 50px;
    }

    #menu-item-41 a::before, 
    #menu-item-40 a::before {
        left: -25px;
        width: 13px;
    }

    .menu-burger img { height: 45px;}
    nav#menu ul#menu-menu-connexion > li {
        padding: 20px 30px;
        display: flex;
        justify-content: center;
        flex: 1 50%;
    }

    nav#menu ul#menu-menu-connexion > li#menu-item-43,
    nav#menu ul#menu-menu-connexion > li#menu-item-42 {
        display: none;
    }

    span.bouton-burger::before {
        top: 19px;
        left: -40px;
        font-size: 14px;
    }
    
}




/**** Footer ****/

footer {
    color: #fff;
    font-size: 18px;
    font-family: var(--font1);
    line-height: 24px;
    margin-top: 80px;
}

.entry-footer { min-height: 120px;}

footer a {
    color: #fff;
}

.footer-container {
    min-height: 300px;
    padding-top: 70px;
    padding-bottom: 30px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.footer-container > div {
    flex: 1;
    max-width: 250px;
}

.footer-container h6 {
    font-size: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
}

.labels { max-width: inherit;}

.labels img { max-width: 150px; }

.menu-footer ul, .devis-footer ul { 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.menu-footer ul {
    gap: 12px;
    margin-top: 20px;
}

.logo-footer > img.fimg { 
    max-width: 250px;
    /*padding-right: 20px;*/
}


#copyright {
    background-color: #222;
    height: 50px;
    font-size: 15px;
}

.copyright-container { 
    justify-content: right;
    gap: 30px;
}

footer .cta-blanc {
    margin-left: -20px;
}

.flabel {
    max-width: 100px;
}

.footer-container {
    position: relative;
    font-size: 14px;
}

.footer-container::after {
    content: "";
    position: absolute;
    right: 0;
    top: -216px;
    height: 368px;
    width: 308px;
    background-image: url("images/famille-footer.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.cta-foot {
    background-color: #fff;
    color: var(--rouge);
}

.cta-foot::after{
    content: ">";
    top: -5px;
    right: 0;
    height: 65px;
    width: 65px;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}

/* Footer Responsive */

@media screen and (max-width: 1500px) {
    .copyright-container { justify-content: center; }
    .footer-container { 
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (max-width: 1120px) {
    .footer-container {
        flex-direction: column;
        align-items: baseline;
        padding: 45px;
        height: auto;
    }

    .labels         { order: 4;}
    .menu-footer    { order: 2;}
    .devis-footer   { order: 3;}
    .logo-footer    { order: 5;}

    .menu-footer ul {
        flex-direction: column;
        gap: 10px 20px;
        margin-bottom: 40px;
        flex-wrap: wrap;
        padding-right: 0;
        padding-left: 0;
    }

    .menu-footer ul li {
        flex: 1 33%;
    }

    .labels img {
        width: 120px;
    }

    .footer-container h6 {
        max-width: 70%;
    }

    .footer-container > div {
        max-width: inherit;
        width: 100%;
    }

}

@media screen and (max-width: 770px) {
    .logo-footer { width: 100%;}
    .logo-footer > img { 
        width: 100%;
        margin: auto;
    }

    .logo-footer > img.fimg{
        max-width: 350px; 
    }

    .logo-footer > img.flabel {
        max-width: 120px;
    }
}



/* Formulaires */

/*fix*/
body #ninja_forms_required_items,
body .nf-field-container {
    margin-bottom: inherit;
}

nf-fields-wrap { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.nf-form-cont {
    background-color: #fff;
}

.modal .nf-form-cont {
    padding: 60px 30px 30px 30px;
}

nf-fields-wrap .nf-field-label .nf-label-span,
nf-fields-wrap .nf-field-label label {
    font-weight: normal;
    font-size: 18px;
}

nf-fields-wrap .field-wrap .pikaday__container,
nf-fields-wrap .field-wrap .pikaday__display,
nf-fields-wrap .field-wrap>div input,
nf-fields-wrap .field-wrap select, 
nf-fields-wrap .field-wrap textarea {
    background-color: #EFEFEF;
    color: var(--rouge);
    font-size: 16px;
    font-family: var(--font2);
    padding: 6px;
    transition: all ease 0.2s;
    border: 2px solid rgba(158, 23, 10,0);
}

nf-fields-wrap input:focus {
    border: 2px solid rgba(158, 23, 10,1);
}

body .nf-error-msg,
body .ninja-forms-req-symbol {
    color: #f15000;
    font-size: 14px;
    position: relative;
}

nf-fields-wrap .nf-error-msg::before {
    content: "* ";
}

body .nf-error.listimage-wrap .nf-field-element ul, 
body .nf-error .ninja-forms-field {
    border: 1px solid #f15000;
    border-radius: 8px;
}

nf-fields-wrap .list-checkbox-wrap .nf-field-element li label,
nf-fields-wrap .list-image-wrap .nf-field-element li label,
nf-fields-wrap .list-radio-wrap .nf-field-element li label {
    font-size: 16px;
}

nf-fields-wrap .field-wrap>div input[type=checkbox],
nf-fields-wrap .field-wrap button,
nf-fields-wrap .field-wrap input[type=button],
nf-fields-wrap .field-wrap input[type=submit] {
    margin-top: 8px;
}

nf-fields-wrap .field-wrap>div input[type=checkbox]:checked {
    color: var(--vert-services);
}

nf-fields-wrap hr {
    display: none;
}

nf-fields-wrap .field-wrap input[type=submit] {
    background-color: var(--rouge);
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
    border-radius: 45px;
    padding: 15px 35px;
}

.nf-form-layout .nf-form-fields-required {
    display: none;
}

nf-fields-wrap button.nf-fu-fileinput-button {
    margin: 0;
}

.nf-fu-fileinput-button {
    padding: 12px 15px;
    border: 1px dashed #ccc;
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
    transition: all ease .2s;
}

.nf-fu-fileinput-button:hover{
    background-color: #ddd;
}

.nf-fu-progress,
.nf-fu-button-cancel~input.nf-element {
    display: none;
}

.files_uploaded {
    font-size: 14px;
}

body .files_uploaded p {
    margin: 0;
}

.files_uploaded a {
    margin-left: 15px;
    padding: 6px 12px;
    border: 1px solid var(--rouge);
    color: #4C4F4F;
    border-radius: 40px;
}

.files_uploaded a:hover {
    padding: 6px 20px;
}

.nf-form-title {
    display: none;
}

body nf-fields-wrap .checkbox-container label {
    font-size: 13px;
    line-height: 17px;
}




/*** Pop Formulaire ***/

.container-form h3 {
    text-align: center;
    font-size: 30px;
    padding: 20px;
}

.container-form {
    max-width: 1024px;
    margin-top: 30px;
}


.modal-btn + label {
    font-size: 20px;
    padding: 25px 10px;
    background-color: var(--rouge);
    color: #fff;
    border-radius: 50px;
    max-width: 250px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.modal-btn[type="checkbox"]:checked,
.modal-btn[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}

.modal-btn:checked + label:after,
.modal-btn:not(:checked) + label:after{
  position: fixed;
  top: 40px;
  right: 270px;
  z-index: 11;
  width: 40px;
  border-radius: 3px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  background-color: #fff;
  border: 1px solid var(--rouge);
  color: var(--rouge);
  content: "X"; 
  transition: all 200ms linear;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.modal-btn:checked + label:hover:after,
.modal-btn:not(:checked) + label:hover:after{
  background-color: var(--rouge);
  color: #ffeba7;
}

.modal{
    position: fixed;
    display: block;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow-x: hidden;
    background-color: rgba(31,32,41,.75);
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms 250ms ease;
    backdrop-filter: blur(5px);
  }

  .modal-btn:checked ~ .modal{
    pointer-events: auto;
    opacity: 1;
    transition: all 300ms ease-in-out;
  }


.modal-btn:checked ~ .modal{
    pointer-events: auto;
    opacity: 1;
    transition: all 300ms ease-in-out;
}

.modal-btn:checked ~ .modal .modal-wrap{
    opacity: 1;
    transform: scale(1);
    transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}



/**** ACCUEIL ****/

.home header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;  
}

.container-header-home {
    width: 100%;
    min-height: 70vh;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

.home-slider-container {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 85vh;
}

.slider, .swiper {
    height: 100%;
}

.swiper-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.container-header-info-home {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 85vh;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

.header-info-home {
    background-image: url("images/bg-home-slider.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    width: 70%;
    height: 100%;
    justify-content: space-around;
    z-index: 5;
}

.swiper-wrapper {
    transition-duration: 6000ms !important;
}

.home h1 {
    font-size: 36px;
    line-height: 47px;
    max-width: 530px;
}

.header-info-home > img {
    max-width: 570px;
}


.slider-homepage {
    
    position: relative;
    overflow: hidden;
}

.header-info-home .cta {
    margin-bottom: 60px;
    justify-content: center;
} 



a.home-services {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all ease .2s;
}

a.home-services .e-con-inner {
    z-index: 2;
}

a.home-services::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 8px;
    background-color: var(--bleu-services);
}

a.home-services-maintien::before { background-color: var(--rose-services);}
a.home-services-menage::before { background-color: var(--bleu-services);}
a.home-services-garde::before { background-color: var(--rose-services);}
a.home-services-jardin::before { background-color: var(--vert-services);}
a.home-services-autre::before { background-color: var(--orange-services);}
a.home-services-bricolage::before { background-color: var(--rouge-services);}

a.home-services::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    background: rgba(210,106,162,0);
    background: linear-gradient(90deg, rgba(210,106,162,1) 0%, rgba(210,106,162,1) 35%, rgba(210,106,162,0.2) 100%);
    transition: all ease .3s;
}

a.home-services:hover::after {
    opacity: 1;
}

a.home-services-maintien::after,
a.home-services-garde::after { 
    background: rgba(210,106,162,0);
    background: linear-gradient(90deg, rgba(210,106,162,1) 0%, rgba(210,106,162,1) 35%, rgba(210,106,162,0.2) 100%);
}
a.home-services-menage::after { 
    background: rgb(102,183,220);
    background: linear-gradient(90deg, rgba(102,183,220,1) 0%, rgba(102,183,220,1) 35%, rgba(102,183,220,0) 100%);
}
a.home-services-jardin::after {
    background: rgb(151,192,15);
    background: linear-gradient(90deg, rgba(151,192,15,1) 0%, rgba(151,192,15,1) 35%, rgba(151,192,15,0) 100%);
}
a.home-services-autre::after {
    background: rgb(241,147,0);
    background: linear-gradient(90deg, rgba(241,147,0,1) 0%, rgba(241,147,0,1) 35%, rgba(241,147,0,0) 100%);
    }
a.home-services-bricolage::after {
    background: rgb(207,25,43);
    background: linear-gradient(90deg, rgba(207,25,43,1) 0%, rgba(207,25,43,1) 35%, rgba(207,25,43,0) 100%);
}

a.home-services h2 {
    position: relative;
    z-index: 4;
}

a.home-services h2::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -30px;
    left: -20px;
    width: 75px;
    height: 75px;
    background-image: url(images/papillon-rose.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

a.home-services-maintien h2::before { background-image: url(images/papillon-rose.png);}
a.home-services-menage h2::before { background-image: url(images/papillon-bleu.png);}
a.home-services-garde h2::before { background-image: url(images/papillon-rose.png);}
a.home-services-jardin h2::before { background-image: url(images/papillon-vert.png);}
a.home-services-autre h2::before { background-image: url(images/papillon-orange.png);}
a.home-services-bricolage h2::before { background-image: url(images/papillon-rouge.png);}


.container-all-articles-accueil {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 35px;
    
}

.container-article-accueil {
    max-width: 410px;
    flex: 1;
    gap: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.img-actu-article {
    height: 180px;
    overflow: hidden;
    position: relative;
}

.img-actu-article::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 60%;
    background-color: var(--bleu-services);
}

.img-actu-article a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.content-actu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /*margin-top: 25px;*/
}

.content-actu h4 {
    font-size: 25px;
    font-family: var(--font2);
    font-weight: bold;
}

.content-actu h4 a { color: var(--gris); }

.content-actu .extrait {
    font-size: 16px;
    display: none;
}

.cta-article-accueil {
    position: relative;
    font-size: 18px;
    text-transform: uppercase;
    padding-left: 50px;
    color: var(--gris);
}

.cta-article-accueil:hover {
    color: var(--rouge);
}

.cta-article-accueil::before {
    content: ">";
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--rouge);
    font-size: 30px;
    line-height: 38px;
    text-align: center;
}

.all-actu.cta {
    width: 450px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    color: var(--rouge);
    border: 1px solid var(--rouge);
    margin-top: 80px;
    margin-right: auto;
    margin-left: auto;
    padding: 12px 30px;
}

.all-actu.cta:hover {
    background-color: var(--rouge);
    color: #fff;
}


.fleche-droite .elementor-widget-image,
.fleche-gauche .elementor-widget-image {
    position: relative;
}

.fleche-droite .elementor-widget-image::after,
.fleche-gauche .elementor-widget-image::after {
    content: "";
    position: absolute;
    left: 50px;
    bottom: -70px;
    width: 70px;
    height: 70px;
    background-image: url("images/fleche-droite.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

.fleche-gauche .elementor-widget-image::after {
    background-image: url("images/fleche-gauche.png");
    left: -10px;
}





/**** SERVICES ****/

.header-services { position: relative; }

.header-services::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 110px;
    background-image: url("images/triangle-bg-services.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
}

.titre-services { position: relative; }

.titre-services h1 {
    z-index: 2;
    position: relative;
}

.titre-services::before {
    position: absolute;
    content: "";
    left: -23px;
    top: -40px;
    width: 119px;
    height: 125px;
    background-image: url("images/papillon-rose.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
}

.titre-services-rose::before    { background-image: url("images/papillon-rose.png");}
.titre-services-bleu::before    { background-image: url("images/papillon-bleu.png");}
.titre-services-orange::before  { background-image: url("images/papillon-orange.png");}
.titre-services-vert::before    { background-image: url("images/papillon-vert.png");}
.titre-services-rouge::before   { background-image: url("images/papillon-rouge.png");}
.titre-services-orange2::before { background-image: url("images/papillon-orange-2.png");}

/* Fix papillons */

.page-id-54 .titre-services-bleu::before { left: -32px; }

/**/

.liste-services li {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,.1);
    min-height: 37px;
    padding: 10px 10px 10px 20px !important;
    display: flex;
    align-items: center;
}

.triangle-haut, .triangle-bas {
    position: relative;
    z-index: 2;
}

.triangle-haut::after, .triangle-bas::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 80px;
    left: 0;
    background-image: url("images/triangle-bg-services.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom left;
}

.triangle-haut::after {
    top: 0px;
    background-image: url("images/triangle-bg-services-inverse.png");
}

.triangle-bas::after {
    bottom: 0;
}



/**** Nous connaitre ****/

.double-triangles { position: relative; }

.double-triangles::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 250px;
    left: 0;
    bottom: 0;
    background-image: url("images/double-triangles.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom left;
}



/*** Offres emploi ****/

.annonce-template-default article {
    max-width: var(--max-width);
    margin: auto;
}

.plus-info-emploi .elementor-accordion .elementor-accordion-item {
    border: 1px solid #d5d8dc;
    border-radius: 35px;
}


.plus-info-emploi .elementor-accordion .elementor-tab-content {
    border: 0;
}

.emploi-nav {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.emploi-nav a {
    border: 1px solid var(--rouge);
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 12px;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 10px 20px;
    color: var(--rouge);
}



.container-emploi {
    gap: 100px;
    
    justify-content: center;
    align-items: flex-start;
    margin: 40px auto 60px auto;
    padding: 0 30px;
}

.container-emploi > div { flex: 1; }

.offre-emploi-image-visu {
    height: auto;
    min-height: 600px;
    width: auto;
    max-width: 650px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 90px 0 90px 0;
}

.contenu-offre {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.contenu-offre h1 {
    font-family: var(--font2);
    font-weight: bold;
    color: var(--rouge);
    font-size: 35px;
    line-height: 35px;
}

.contenu-offre .accordion h3 { 
    font-size:16px;
    font-family: var(--font2);
    color: var(--rouge);
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
}

.contenu-offre .accordion h3::after {
    content: "+";
    position: absolute;
    right: 0px;
    top: 0;
    font-size: 24px;
}


.separation-emploi {
    border-top: 8px dotted var(--rouge);
    width: 82px;
}

.sous-titre-contrat,
.type-contrat { font-weight: bold; }

.info-contrat {
    border: 1px solid #BCBCBC;
    border-radius: 20px;
    padding: 10px 30px;
    font-size: 16px;
}

a.emploi-postuler { justify-content: center;}

.contact-info {
    gap: 50px;
    max-width: var(--max-width);
    margin: auto;
    margin-top: 120px;
    padding: 0 30px;
}

.contact-info > div {
    flex: 1;
}


.informations h2 {
    text-align: center;
    font-size: 42px;
    padding: 25px;
    position: relative;
    margin-bottom: 20px;

}

.informations h2::after {
    content: "";
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100px;
    background-color: #ddd;
}

.informations img {
    max-width: 288px;
}

.informations > ul {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 30px;
}

.informations > ul li {
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

.informations > ul li strong {
    font-size: 18px;
}

.map {
    height: 100%;
    width: 100%;
    min-height: 453px;
}



/**** Recrutement *****/

.liste-emploi-recrutement .elementor-widget-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.container-emploi-info {
    position: relative;
    margin-left: 80px;
}

.container-emploi-info::after{
    content: "";
    position: absolute;
    left: -62px;
    top: -13px;
    width: 50px;
    height: 50px;
    background-image: url("images/papillon-bleu.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.container-emploi-info .titre-annonce {
    font-size: 20px;
    font-weight: bold;
}

.container-emploi-info .publication {
    font-size: 12px;
    font-style: italic;
    color: #878787;
}

.container-emploi-info .contrat-type {
    font-size: 18px;
    margin-top: 7px;
    display: none;
}

.container-emploi-info > a {
    display: inline-block;
    border: 1px solid var(--rouge);
    background-color: #ffffff;
    text-transform: uppercase;
    color: var(--rouge);
    font-size: 11px;
    padding: 0 40px 0 20px;
    margin-top: 7px;
    border-radius: 40px;
}

.all-offres {
    width: auto;
    display: flex;
    justify-content: center;
    font-size: 17px;
    align-self: center;
    width: inherit;
}

.liste-emploi-recrutement > .elementor-widget-container {
    gap: 35px;
    align-items: flex-start;
}




/**** Articles ****/

.header-article {
    min-height: 45vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 90px 0 90px;
    margin-top: 40px;
}

.single p {
    margin-top: 10px;
}

.single p a {
    color: var(--rouge);
    text-decoration: underline;
}

.content-article {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    margin-top: -60px;
    background-color: #fff;
    background-color: rgba(255,255,255,.7);
    backdrop-filter: blur(8px);
    border-radius: 0 90px 0 0;
}

.content-article h1 {
    font-size: 35px;
    font-family: var(--font2);
    font-weight: bold;
    margin: 30px 0 30px 0;
    text-align: center;
    position: relative;
    text-wrap: balance;
    line-height: 1.2em;
}

.content-article h1::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 30px;
    height: 30px;
    /*border: 1px dashed var(--rouge);*/
}

.content-article img.paps {
    margin: auto;
    display: block;
    margin-bottom: 60px;
    height: 70px;
}


.tag-chrysal        { position: relative;}
.tag-jardinage      { position: relative;}



/*** Actualités ***/

.container-index {
    padding: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.blog main { 
    margin-bottom: 170px;
    display: flex;
    flex-direction: column;
}

.blog .article-single {
    padding-top: 10px;
}

.blog h1,
.page-template-template-annonces h1 {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 30px;
    font-size: 50px;
}

.sep {
    max-width: 450px;
    width: auto;
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-bottom: 40px;
}

.container-actu {
    display: flex;
    gap: 40px;
    margin-top: 80px;
    /*max-height: 220px;*/
}

.container-actu .img-actu-article {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-width: 30%;
    border-radius: 0 50px 0 50px;
    overflow: hidden;
}

.container-actu .img-actu-article a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.container-actu .img-actu-article a img {
    height: auto;
    min-height: 100%;
    transition: all ease .4s;
    width: 110%;
}

.container-actu .img-actu-article a:hover img {
    transform: scale(1.1);
}

.container-actu .content-actu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.container-actu h3 {
    font-family: var(--font2);
    font-weight: bold;
    font-size: 26px;
    text-transform: uppercase;
}

.container-actu h3 a {
    color: var(--rouge);
}

.container-actu .extrait {
    font-size: 16px;
}

.container-actu .cta {
    font-size: 17px;
    padding: 10px;
    margin: 0;
    justify-content: center;
    width: 200px;
    color: var(--rouge);
    background-color: #fff;
    border: 1px solid var(--rouge);
}



/* Devis */

.container-form {position: relative;}

#dv-contain {
    position: relative;
    z-index: 30;
}

.close-formulaire {
    display: flex;
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--rouge);
    right: 0;
    top: 0;
    border-radius: 0 0 0 20px;
    padding: 25px;
}

.close-formulaire img {
    height: 100%;
}

#dv-contain > input,
#dv-contain > label {
    display: none;
}

#dv-contain #nf-label-field-30 {
    font-size: 13px;
}


/* Page annonces */

.container-annonces-global {
    max-width: 1240px;
    padding: 20px 30px;
    margin-right: auto;
    margin-left: auto;
    gap: 40px;
}

.container-annonces-global article {
    display: flex;
    gap: 40px;
    position: relative;
}

.container-annonces-global article::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 60px;
    height: 60px;
    background-image: url(images/papillon-bleu.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.container-annonces-global article > div {
    flex: 1;
}

.img-annonce {
    width: 35%;
    max-width: 250px;
    min-height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 45px 0 45px;
}

.contenu-annonce-page {
    flex: 1;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.titre-annonce {
    font-size: 22px;
    font-weight: bold;
}

.info-annonce,
.secteur-annonce {
    font-size: 16px;
}

.contenu-annonce-page a {
    border: 1px solid var(--rouge);
    border-radius: 50px;
    font-size: 15px;
    color: var(--rouge);
    text-transform: uppercase;
    padding: 6px 20px;
}



/* SEO + Presta */

/*main container*/
.container-prestations {
    --max-content: 2000px;
    --max-width: 1480px;
    --padding: 40px;
    --margin-top: 100px;

    width: 100%;
    max-width: var(--max-content);
    margin-right: auto;
    margin-left: auto;
}

.mgt {
    margin-top: var(--margin-top);
}

.container-prestations .maxwidth {
    width: 100%;
    max-width: var(--max-width);
    padding: var(--padding);
    margin-left: auto;
    margin-right: auto;
}


.header-presta {
    display: flex;
    min-height: 60vh;
    flex-direction: row;
    align-items: end;
    padding-bottom: 100px;
    background-image: url(https://chrysalservices.fr/wp-content/uploads/aide-menage-header.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-presta-maintien-a-domicile {
    background-image: url(https://chrysalservices.fr/wp-content/uploads/aide-a-la-personne-chrysal-services.jpg);
    background-position: center top;
}

.header-presta-aide-menagere {
    background-image: url(https://chrysalservices.fr/wp-content/uploads/aide-a-la-personne-chrysal-services.jpg);
}

.header-presta-garde-denfants {
    background-image: url(https://chrysalservices.fr/wp-content/uploads/garde-enfants-bgheader.png);
}
.header-presta-jardinage {
    background-image: url(https://chrysalservices.fr/wp-content/uploads/jardinage-header.png);
}
.header-presta-petits-travaux-de-bricolage {
    background-image: url(https://chrysalservices.fr/wp-content/uploads/bricolage-header.png);
}
.header-presta-autres-services {
        background-image: url(https://chrysalservices.fr/wp-content/uploads/autres-services-header.png);
}

.header-presta::before {
    content: "";
    inset: 0 0 0 0;
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, #00000000 0%, #000000 120%);
}

.header-presta > div {
    display: flex;
    z-index: 1;
    position: relative;
}

.gh-gauche {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.gh-droit {
    position: absolute;
    right: 50px;
    max-width: 500px;
    background-color: var(--rose-services);
    color: #fff;
    padding: 35px;
    border-radius: 0px 50px 50px 50px;
}

.fil-arianne {
    color: #ffffff;
    display: flex;
    gap: 15px;
    z-index: 2;
    position: relative;
}

#content .fil-arianne li {
    list-style-type: disclosure-closed;
}

#content .fil-arianne li:first-child {
    list-style-type: none;
    margin-left: 0;
}

.fil-arianne li a {
    color: #ffffff;
    text-decoration: underline;
}

.fil-arianne li a:hover {
    color: #dddddd;
}



.debugging {
    max-width: 1200px;
    margin: auto;
    padding: 30px;
    font-size: 0.7em;
    color: #ffffff;
    background-color: #222;
}

    

.container-prestations h1 {
    font-size: 70px;
    text-shadow: 0px 0px 6px #000000;
    color: #FFFFFF;
    text-align: left;
    z-index: 1;
    margin-bottom: inherit;
    margin-top: inherit;
}

.container-prestations h1::before {
    z-index: -1;
    left: -30px;
    top: -60px;
}


.contenu-presta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
    margin-top: 50px;
}



.container-prestations h2 {
    font-size: 38px;
    line-height: 42px;
    margin-bottom: 30px;
}

.texte-presta {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cta-devis {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 10px;
    min-height: 470px;
}

.cta-d-g {
    background-image: url(https://chrysalservices.fr/wp-content/uploads/famille-paisible.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 0px 53px;
}

.catch-phrase {
    position: absolute;
    right: 0;
    bottom: -30px;
}

.cta-d-d {
    background-color: var(--rouge);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 30px;
    border-radius: 0px 53px 53px 53px;
}

.cta-d-d img {
    width: 133px;
    height: 145px;
}

.cta-d-d a {
    background-color: #FFFFFF;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--rouge);
    border-radius: 30px;
    padding: 17px 40px;
}



/* Fixage */

#post-1009 .header-article { background-position: top;}


/***** Responsive *****/


/*Padding responsive*/

@media screen and (max-width: 1500px) {

    .menu {
        padding-right: 25px;
        padding-left: 25px;
    }

    footer .menu {
        padding-right: inherit;
        padding-left: inherit;
    }

    nav#menu #menu-menu-principal > li:first-child,
    nav#menu #menu-menu-principal-1 > li:first-child {
        left: 1%;
    }

    .header-info-home {
        padding-left: 30px;
        padding-right: 30px;
    }
}


@media screen and (max-height: 520px) {
    body {
        font-size: 16px;
        line-height: 28px;
    }

    .home h1 { 
        font-size: 32px;
        line-height: 40px;
    }

    .cta {
        width: 285px;
        padding: 17px 25px;
    }
}

@media screen and (max-width: 1280px) {

    body {
        font-size: 16px;
    }

    .header-info-home > img { max-width: 450px;}
    .home h1 { 
        font-size: 30px;
        line-height: 37px;
    }
    .header-info-home .cta {
        margin-bottom: 50px;
        font-size: 18px;
    }

    .cta {
        width: 285px;
        padding: 17px 25px;
    }

    .home-slider-container {
        width: 70%;
    }

    .home-slider-container {
        height: 50vh;
        min-height: 680px;
    }

    .double-triangles::after {
        height: 140px;
    }

    
}

/* fix annonce + emploi */ 
@media screen and (max-width: 1480px) {
    .container-emploi,
    .contact-info {
        gap: 40px;
    }
}

@media screen and (max-width: 1240px) {
    .container-emploi-info .titre-annonce {
        font-size: 19px;
    }

    .container-emploi-info .contrat-type {
        font-size: 15px;
        margin-top: 0;
    }

    .liste-emploi-recrutement > .elementor-widget-container {
        gap: 20px;
    }

    a.all-offres {
        width: auto;
        font-size: 14px;
        padding: 6px 16px;
        margin-top: 6px;
    }
}
/**/



@media screen and (max-width: 1024px) {

    .home-slider-container {
        height: 60vh;
        min-height: inherit;
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    .container-header-info-home {
        height: auto;
    }

    .header-info-home {
        background:inherit;
        height: auto;
        margin-top: -20%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .header-info-home > img {
        background-color: rgba(255, 255, 255, 0.8);
        align-self: flex-start;
        padding: 40px;
        backdrop-filter: blur(7px);
        border-radius: 60px 0 60px 0;
    }

    .home h1.entry-title {
        margin-top: -30px;
        z-index: 2;
        text-align: center;
    }

    .header-info-home .cta {
        margin-bottom: inherit;
        font-size: 16px;
        margin-top: 20px;
    }



    .img-actu-article {
        height: 180px;
    }
    .content-actu h4 { 
        font-size: 21px;
        line-height: 24px;
    }
    .content-actu .extrait {
        font-size: 14px;
        line-height: 22px;
    }
    .cta-article-accueil::before {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 31px;
    }
    .all-actu.cta {
        margin-top: 60px;
        width: auto;
        max-width: 340px;
        font-size: 16px;
        text-align: center;
    }

    .titre-services::before {
        left: -10px;
        top: -30px;
        width: 80px;
        height: 80px;
    }

    .titre-annonce {
        font-size: 19px;
    }

    .info-annonce, .secteur-annonce {
        font-size: 14px;
        line-height: 18px;
    }

    .contenu-annonce-page a {
        font-size: 13px;
        padding: 3px 12px;
    }

    .container-annonces-global {
        margin-bottom: 120px;
    }


    /*blog*/

    .blog h1, .page-template-template-annonces h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .container-actu {
        margin-top: 40px;
        max-height: inherit;
    }

    .container-actu h3 {
        font-size: 19px;
    }

    .container-actu .cta {
        font-size: 14px;
        padding: 5px 12px
    }

    /* annonce */

    .container-emploi,
    .contact-info {
        flex-direction: column;
    }

    .offre-emploi-image-visu {
        min-height: 200px;
        width: 100%;
        max-width: 50%;
    }

    .contenu-offre {
        width: auto;
    }

    .contenu-offre h1 {
        font-size: 25px;
        line-height: 25px;
    }

    .separation-emploi {
        border-top: 5px dotted var(--rouge);
    }

    .contenu-offre .accordion h3 {
        font-size: 14px;
    }

    .modal-btn + label {
        font-size: 17px;
        height: inherit;
        padding: 10px 15px;
        max-width: 190px;
    }

    .info-contrat {
        font-size: 14px;
        line-height: 20px;
    }

    .informations h2 {
        font-size: 36px;
    }

    .map {
        max-height: 250px;
        overflow: hidden;
        min-height: inherit;
    }


    /* Emploi */

    

}



@media screen and (max-width: 770px) {


    .header-info-home > img {
        align-self: center;
        padding: 20px 10%;
        border-radius: 60px 0 60px 0;
        max-width: 100%;
    }

    .home h1.entry-title {
        margin-top: -20px;
        font-size: 27px;
    }

    .header-info-home {
        padding-left: 0;
        padding-right: 0;
    }

    .container-all-articles-accueil {
        flex-direction: column;
        align-items: center;
    }

    .container-article-accueil {
        max-width: 85%;
        width: 100%;
    }

    .img-actu-article {
        height: 170px;
        background-position: top;
    }

    .footer-container::after {
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        transform: scale(0.8);
        top: -209px;
    }

    footer .cta-foot {
        width: auto;
        padding: 12px 20px;
        margin-left: 0;
        font-size: 16px;
    }
    .cta-foot::after { display: none;}

    .devis-footer ul {
        font-size: 14px;
    }

    /* blog */

    .container-annonces-global article {
        flex-direction: column;
        gap: 20px;
    }

    .img-annonce {
        width: auto;
        max-width: 300px;
        min-height: 140px;
    }

    .container-actu {
        display: flex;
        flex-direction: column;
    }

    .img-actu-article {
        height: 200px;
    }


    .sep {
        max-width: 70%;
    }


    /* annonce */

    .annonce-template-default article {
        display: flex;
        flex-direction: column;
    }

    .emploi-nav {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        order: 2;
    }

    .container-emploi {
        padding: 0 20px;
        order: 1;
    }

    .offre-emploi-image-visu {
        max-width: 100%;
    }

    .contenu-offre {
        width: 100%;
    }

    .modal-btn + label {
        margin-left: auto;
        margin-right: auto;
        padding: 10px 25px;
    }

    .informations > ul {
        grid-template-columns: 1fr;
    }
    
    .contact-info { order: 3;}
    

    
}


/* devis responsive */


@media screen and (max-width: 1024px) {

    #dv-contain { z-index: 100;}

    .container-form { margin-top: inherit; }

    .close-formulaire {
        width: 70px;
        height: 70px;
    }

    nf-fields-wrap {
        grid-gap: 20px;
    }

    nf-fields-wrap .nf-field-label .nf-label-span, nf-fields-wrap .nf-field-label label {
        font-size: 15px;
    }

    nf-fields-wrap .list-checkbox-wrap .nf-field-element li label, 
    nf-fields-wrap .list-image-wrap .nf-field-element li label, 
    nf-fields-wrap .list-radio-wrap .nf-field-element li label {
        font-size: 14px;
    }

    nf-fields-wrap .field-wrap input[type=submit] {
        font-size: 13px;
        padding: 15px 25px;
    }
}

@media screen and (max-width: 770px) {
    nf-fields-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .container-form h3 {
        font-size: 24px;
    }
    .close-formulaire {
        width: 50px;
        height: 50px;
        padding: 15px;
    }
}


/* 404 */

article.not-found {
    max-width: var(--max-width);
    text-align: center;
    margin-top: 80px;
    font-size: 25px;
    margin-left: auto;
    margin-right: auto;
}

.error404 #container {
    min-height: 50vh;
}






/* Login ? */


body.login {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://chrysalservices.fr/medias/nous-connaitre-header.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#language-switcher,
.language-switcher,
.privacy-policy-page-link { display: none; }

#login {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
}

body.login h1 {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px) brightness(150%);
    border-radius: 0 40px 0 0;
    overflow: hidden;
}

body.login h1 a {
    background-image: url("https://chrysalservices.fr/medias/logo-chrysalservices.png");
    width: 100%;
    display: block;
    height: 200px;
    margin: 0;
    padding: 20px;
    background-size: auto 200px;
}

.login form {
    margin: 0;
    border: 0;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px) brightness(150%);
    box-shadow: inherit;
    padding: 0 35px;
}

.login #nav {
    margin: 0;
    padding: 20px 35px;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px) brightness(150%);
    border-radius: 0 0 0 40px;
    overflow: hidden;
}

.login #backtoblog a {
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid var(--rouge);
    border-radius: 40px;
    font-size: 12px;
}

.wp-core-ui .button-group.button-large .button,
.wp-core-ui .button.button-large {
    background-color: var(--rouge);
    border-color: inherit;
    border-radius: 11px;
    padding: 3px 25px;
}

.login .forgetmenot label,
.login .pw-weak label {
    line-height: inherit;
    vertical-align: middle;
    font-size: 12px;
}






/* Pages dynamiques */


.dynamic-seo-page {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.breadcrumb ol {
    display: flex;
}

.breadcrumb ol li {
    list-style-type: disclosure-closed;
}


.dynamic-seo-page h1 {
    font-size: 2.2em;
    margin-top: 40px;
    margin-bottom: 40px;
}


.service-content {
    font-size: 1rem;
}

.available-cities {
    margin-top: 70px;
}

.available-cities h2 {
    font-size: 1.8em;
}

.cities-grid {
    margin-top: 40px;
}