/*
Theme Name:  coachtwentyfive
Description: Used to style graphic elements
*/
/***les séparatuers "vagues"**/
/***test séparateur associe au style**/
/*montagnes blanc avant*/
.blanc-avant::before,
:root :where(.wp-block-group.is-style-section-1)::before{
    content: "";
    position: absolute;

    top: -100px;
    left: 0;
    right: 0;

    width: 100%;
    height: 100px;
    
	background-image: url("../img/separateur-montagnes.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

   /* transform: scaleY(-1);
    transform-origin: center;*/

    pointer-events: none;
    z-index: 1;
}




.blanc-apres::after,
:root :where(.wp-block-group.is-style-section-2)::after{
    content: "";
    position: absolute;

    bottom: -100px;
    left: 0;
    right: 0;

    width: 100%;
    height: 100px;
    
	background-image: url("../img/separateur-montagnes.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

    transform: scaleY(-1);
    transform-origin: center;

    pointer-events: none;
    z-index: 1;
}

.gris-avant::before,
:root :where(.wp-block-group.is-style-section-3)::before{
    content: "";
    position: absolute;

    top: -100px;
    left: 0;
    right: 0;

    width: 100%;
    height: 100px;
    
	background-image: url("../img/separateur-montagnes-gris.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

    /*transform: scaleY(-1);
    transform-origin: center;*/

    pointer-events: none;
    z-index: 1;
}

.gris-apres::after,
:root :where(.wp-block-group.is-style-section-4)::after{
    content: "";
    position: absolute;

    bottom: -1px;
    left: 0;
    right: 0;

    width: 100%;
    height: 100px;
    
	background-image: url("../img/separateur-montagnes-gris.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

   /* transform: scaleY(-1);
    transform-origin: center;*/

    pointer-events: none;
    z-index: 1;
}




/***éléments d'arrière-plan dont tests***/

.cercles::before {
    content: "";
    position: absolute;
    width: 420px;
    aspect-ratio: 1;
    top: 110px;
    right: 16%;
    border: 2px solid rgba(249, 245, 212, 0.28);
    border-radius: 50%;
    transform: translateX(45%);
    pointer-events: none;
}

.cercles2 {
	 background :  radial-gradient(
            circle at 8% 20%,
            rgba(249, 245, 212, 1) 0%,
            rgba(249, 245, 212, 0.12) 25%,
            rgba(249, 245, 212, 0) 58%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(1, 71, 105, 1) 0%,
            rgba(1, 71, 105, 0.10) 32%,
            rgba(1, 71, 105, 0) 65%
        );
}


.geometrique{
    position: relative;
}

.geometrique::before {
    content: "";
    position: absolute;
	/*top : -100px;*/
    inset: 0;
	  background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(249, 245, 212, 0.25);
	 background: linear-gradient(
        to bottom,
        rgba(249, 245, 212, 0.3),
        rgba(0, 0, 0, 0)
    );
	 background: radial-gradient(
			  circle at 75% 75%,
			 #f9f5d4 12%,
			 #00AF4C 50%,
			 #014769 80%
		);
    -webkit-mask-image: url("../img/pixabay-gdj-geometric-8015996.svg");
    mask-image: url("../img/pixabay-gdj-geometric-8015996.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
    pointer-events: none;
	opacity: 0.2;
}

.geometrique > * {
    position: relative;
    z-index: 1;
}

.points_bg {
    background-image:
        url("../img/points_bg.png"),
        url("../img/points_bg.png"),
       url("../img/points_bg.png"),
        url("../img/points_bg.png");

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

    background-position:
        10% 15%,
        85% 35%,
        12% 85%,
        88% 78%;

    background-size:
        90px auto,
        30px auto,
        75px auto,
        60px auto;
	}
}

.bird_bg { 
	position : relative;
} 
.bird_bg::before {
	  background-image:
        url("../img/gdj-birds-7893439.svg");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 100%;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  opacity: 0.02;
	 transform: scaleX(-1);
    transform-origin: center;
}
	

/***test graphiques degradés*****/
.degrade1 {
	   background: linear-gradient(
        135deg,
        #014769 0%,
      #00af4c  50%,
        #f9f5d4  100%
    );
}


.degrade2 {
	 background: linear-gradient(90deg,   #014769 12%,  #f9f5d4 60%,  #00af4c  100%)
}

.degrade3 {
	 background:
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 175, 76, 0.85) 0%,
            rgba(0, 175, 76, 0) 42%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(249, 245, 212, 0.95) 0%,
            rgba(249, 245, 212, 0) 55%
        ),
        linear-gradient(
            135deg,
            #014769 0%,
            #01677b 55%,
            #f9f5d4 100%
        );
}

.degrade4 {
	background : linear-gradient(90deg, #014769 12%, #00AF4C 100%);
}
.degrade5 {
	 background: radial-gradient(
			  circle at 75% 75%,
			 #f9f5d4 12%,
			 #00AF4C 50%,
			 #014769 80%
		);
}

.degrade6 {
    background: linear-gradient(
        to top,
        #00af4c 0%,
        #00af4c 48%,
        #f9f5d4 49%,
        #f9f5d4 51%,
        #014769 52%,
        #014769 100%
    );
}


.degrade7 {
  background: linear-gradient(
        to top,
        #00af4c 0%,
        #00af4c 47.5%,
        #f9f5d4 47.5%,
        #f9f5d4 48.5%,
        #014769 50.5%,
        #014769 100%
    );
}

.degrade8 {
	 background:
        linear-gradient(
            to top,
            #00af4c 0%,
            #00af4c 46%,
            #f9f5d4 50%,
            #014769 54%,
            #014769 100%
        );
}

/****/