/**************************************************************************************************/
/********* TOP ************************************************************************************/
/**************************************************************************************************/
.homeTop {
    display: flex;
    align-items:center;
}
.homeTop .mainImage {
    width: 55%;
    height: calc(90vh - var(--header-height));
    max-height: 55vw;
}
.homeTop .mainImage img {
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
}
.homeTopTxt {
    position: relative;
    flex:1;
}
.homeTopTxt h1 {
    position:relative;
    font-family: var(--font1);
    font-size: 4.5vw;
    font-weight:400;
    margin: 2vw 0 1vw -4vw;
    z-index:2;
}
.homeTopTxt h2 {
    position:relative;
    font-size: 1.6vw;
    line-height:1.2em;
    max-width: 62%;
    margin: 1vw 0 6vw 3vw;
    z-index:2;
}

.homeTopEsperluette {
    position:absolute;
    width:90%;
    left: -15vw;
    top:0;
    fill: var(--color-green);
    opacity: 0.2;
    z-index:1;
}

.homeTopSecondaryImages {
    display:flex;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    align-items:center;
    padding-left: 3vw;
}
.homeTopSecondaryImages svg {
    width: 13%;
    margin-right:3%;
}


@media screen and (max-width: 1200px) {
    .homeTopTxt {margin-right: var(--space-out);}
    .homeTopTxt h1 {font-size:5.5vw;}
    .homeTopTxt h2 {font-size: 2vw;max-width:none;}
    .homeTopSecondaryImages svg {width: auto;}
}
@media screen and (max-width: 800px) {
    .homeTop {align-items:stretch;}

    .homeTopTxt h1 {font-size:3rem;}
    .homeTopTxt h2 {font-size: 1.2rem;margin-bottom:2vh;}
    .homeTopEsperluette {width: 100%;left: -11vw;top: 28%;}

    .homeTopSecondaryImages {position:static;flex-wrap: wrap;}
    .homeTopSecondaryImages svg {width: 23%;margin:0 5% 5% 0;}    
}

@media screen and (max-width: 550px) {
    .homeTop {padding-bottom:28%; }
    .homeTopTxt h1 {font-size:10vw;}
    .homeTopSecondaryImages {position:absolute;top:100%;left:-100%; right:0;
        width: auto;justify-content:space-between;padding: 10% 0}
    .homeTopSecondaryImages svg {width: 18%;margin:0;}
}



/**************************************************************************************************/
/********* PRATIQUES ******************************************************************************/
/**************************************************************************************************/
.homePratiques .mainTitle .subTitle {
    font-family: var(--font1);
    font-size:.9em;
}
.homePratiques .txt {
    max-width:calc(650px + (var(--space-out) * 2));
    padding-left: var(--space-out);
    padding-right: var(--space-out);
    margin:2rem auto;
}

.pratiquesYS {
    display:grid;
    gap: 2rem var(--space-out);
    grid-template-areas: 
        "xx1 xx1 qig xx2"
        "etc xx3 qig xx4"
        "etc qnt qig tcc"
        "med qnt hui tcc"
        "med xx7 hui xx6" ;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, auto);
    margin:  var(--space-out) calc(var(--space-out) * 2);
}

.pratiqueYS:nth-child(1) { grid-area: etc ;}
.pratiqueYS:nth-child(2) { grid-area: qnt ;}
.pratiqueYS:nth-child(3) { grid-area: qig ;}
.pratiqueYS:nth-child(4) { grid-area: tcc ;}
.pratiqueYS:nth-child(5) { grid-area: med ;}
.pratiqueYS:nth-child(6) { grid-area: hui ;}

.pratiqueYSTitle {
    font-size: 1.3rem;
}

@media screen and (max-width: 850px) {
    .pratiquesYS {margin:  var(--space-out);gap: 2rem;}
}

@media screen and (max-width: 700px) {
    .pratiquesYS {
        grid-template-areas: 
            "etc xx1"
            "etc qig"
            "med qig"
            "med tcc"
            "qnt tcc"
            "qnt tcc"
            "qnt hui" 
            "xx9 hui";
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(7, auto);
    }
}
@media screen and (max-width: 460px) {
    .pratiquesYS {gap: 2rem 1rem;}
}
/**************************************************************************************************/
/********* CONSULTATIONS YI JING + DOUANCE ********************************************************/
/**************************************************************************************************/
.yiJingContent,
.douanceContent {
    position: relative;
}
.yiJingImage,
.douanceImage {
    display:flex;
    position:absolute;
    left: calc(50% + 325px + 2rem);
    top:0;
    height:100%;
}
.douanceImage {
    right: calc(50% + 325px + 2rem);
    left: auto;
    justify-content:flex-end;
}
.yiJingImage img,
.douanceImage img {
    height:100%;
    width: auto;
}
.yiJingTxt,
.douanceTxt {
    flex:1;
}

.yiJingTxt li h3,
.douanceTxt li h3 {
    font-weight:normal;
}
.yiJingTxt ul li,
.douanceTxt ul li {
	position: relative;
	list-style-type: none;
	margin: .8em 0;
}
.yiJingTxt ul li::before,
.douanceTxt ul li::before {
	content: '';
	width: 1em;
	height: 1em;
	position: absolute;
	right: calc(100% + 1em);
	top: .4em;
	background: url('../../images/bullet-green.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.yiJingTxt .btnPlus,
.douanceTxt .btnPlus {
    padding-top: 3rem;
    font-size: 1.2rem;
}

@media screen and (max-width: 1280px) {
    .yiJingContent,
    .douanceContent {display:flex;align-items:stretch;justify-content:center;}
    .yiJingImage,
    .douanceImage {position:static;height: auto;}
    .yiJingImage img,
    .douanceImage img {height: 23rem;}

    .homePratiques .yiJingTxt,
    .homePratiques .douanceTxt {margin-left:0;margin-right:0;}

    .yiJingImage {order:2;}
    .yiJingTxt {order:3;}
}

@media screen and (max-width: 550px) {
    .yiJingContent,
    .douanceContent {display:block;}   
    .douanceImage {float:right;max-width:30%;display:block;margin: 0 0 1rem 1rem;}
    .yiJingImage {float:left;max-width:30%;display:block;margin: 0 1rem 1rem 0;}
    .yiJingImage img, 
    .douanceImage img {height:auto;}

    .yiJingTxt ul, 
    .douanceTxt ul {overflow: hidden;}
    .yiJingTxt ul li,
    .douanceTxt ul li {margin-left:1rem;}
}

/**************************************************************************************************/
/********* A PROPOS *******************************************************************************/
/**************************************************************************************************/
.aPropos {
    position:relative;
    display:flex;
    align-items:center;
    margin: 20vh auto;
}
.apImage {
    width: calc(50% - 3rem);
}
.apTxt {
    max-width:650px;
}
.apTitle {
    margin-left: -20%;
    padding: 1.5rem 0 1.5rem 3rem;
    font-size:3rem;
    background: #fff;
}
.apSubTitle {
    display:block;
    font-size:1.8rem;
    line-height: 1.2em;
}
.apTxt .txt {
    padding-left: 3rem;
}
.apEsperluette {
    position:absolute;
    left: 39%;
    top: 6%;
    width: 40%;
    max-width:none;
    fill: var(--color-green);
    opacity: 0.1;
    pointer-events: none;
}

@media screen and (max-width: 1380px) {
    .aPropos {align-items:stretch;}
    .apImage img {width:100%;height:100%; object-fit: cover; object-position: center;}
    .apTxt {margin-top:5vw;margin-bottom:0vw;flex:1;}
}

@media screen and (max-width: 720px) {
    .aPropos {display:block;margin: 10vh auto;}
    .apImage {display:block;height: 60vw;width: auto;}
    .apImage img {object-position: center 20%;}
    .apTitle {
        margin-left: 0;
        padding: 0 var(--space-out);
        font-size: 3rem;
        background: #fff;
    }
    .apTxt .txt {
        padding-left:var(--space-out);
    }
    .apEsperluette {left: 9%;top: 44%;width: 82%; }
}