/* V2 (30/01/2025)*/

/* GLOBAL */

/* Padding */

.l-section:not(#ancres) > .l-content-container {
    margin-bottom: 20px;
    margin-top: 60px;
}
h2.a-heading--1{
    font-weight: 700 !important;
}



/*********************************************************************************************************************************************************************
 HERO BANNER 
*********************************************************************************************************************************************************************/


#hero-fondation{
    align-items: center;
    display: flex;
    height: calc(100vh - 96px); 
    position: relative;
    background-image: url(../images/abeille/entreprise/engagements/fondation/bg-hero.jpg);
    background-size: cover;
    background-repeat: no-repeat;
	background-color:#82C4BB;
    background-position: center center;
    background-attachment: fixed;
}

#hero-fondation .background{
    background: 
    calc(0% - 10vw) bottom / 55vh no-repeat url(../images/abeille/entreprise/engagements/fondation/etudiant.png), 
    calc(100% + 10vw) bottom / 55vh no-repeat url(../images/abeille/entreprise/engagements/fondation/etudiante.png);
    display: flex;
    transition: 0.3s ease;
    overflow: hidden;
    position: absolute;
	width:100%;
    height: 100%;
}

#hero-fondation > .l-content-container {
    z-index: 0;
}

/* Boutons*/
#hero-fondation > .l-content-container .a-button--transparent{
    border-color:#000!important;
}
#hero-fondation > .l-content-container .a-button--transparent:hover{
    border-color:#d57b1d!important;
}

#logo-jaune {
    display:none;
}

/* Logo*/
#brushes{
    width:550px;
    height:160px;
    position: relative;
}
#brushes img{
    position: absolute;
    top: 0px;
}
.yellow-stroke {
    -webkit-clip-path: url(#YellowSvgPath);
            clip-path: url(#YellowSvgPath);
    position: relative;
    background: transparent;
    left: 22%;
}
.second-path {
    -webkit-clip-path: url(#SecondPath);
            clip-path: url(#SecondPath);
    position: relative;
    background: transparent;
    top: -80px;
}
#yellow-stroke,
#second-path {
    width: 100%;
    position: absolute;
    stroke-dasharray: 1800;
    stroke-dashoffset: -1800;
    -webkit-animation: stroke 1s 1s;
            animation: stroke 1s 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
#yellow-stroke,
#second-path {
    top: -10px;
    left: 0px;
}
@-webkit-keyframes stroke {
    from {
        stroke-dashoffset: -1800;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes stroke {
    from {
        stroke-dashoffset: -1800;
    }
    to {
        stroke-dashoffset: 0;
    }
}


@media screen and (max-width: 80em) {
    #hero-fondation > .l-content-container p{
        margin: 0;
    }
}

@media screen and (max-width: 60em) {
    #hero-fondation .background{
    background: none;
    }
}

@media screen and (max-width: 35em) {
    #hero-fondation .background{
    background: none;
    }
}




/*********************************************************************************************************************************************************************
 RESPONSIVE
*********************************************************************************************************************************************************************/
@media screen and (min-width: 60em) {
    #hero-fondation > .l-content-container {
        margin-top: 60px;
    } 
    .l-section:not(#ancres) > .l-content-container {
        /*! margin-bottom: 120px; */
        /*! margin-top: 120px; */
    }    
    #manifesto > .l-content-container {
        padding: 0 16em;
    }            
}
@media screen and (max-width: 80em) {
 /*  .a-heading--1, h1{
        font-size: 1.85em !important;
    }*/ 
}

@media screen and (max-width: 60em) {
    .l-columns--1-medium .m-card-content {
	text-align: center !important;
    }
    .l-section:not(#ancres) > .l-content-container {
        margin-bottom: 60px;
        margin-top: 60px;
    }     
}

@media screen and (max-width: 35em) {
    .a-heading--1, h1{
        font-size: 1.4em !important;
        font-weight: 700 !important;
    }
    .l-section:not(#ancres) > .l-content-container {
        margin-top: 10px;
        margin-bottom: 10px;
    }   

    
    #combat{
        background:
        center / cover no-repeat url(../images/abeille/entreprise/engagements/fondation/bg-combats.jpg) !important;
    }
    #combat .l-columns.l-columns > .l-columns__column:last-of-type {
	display:none;
    }
    #combat::after{
    background:none !important;
    }
        
    #hero-fondation > .l-content-container #logo-hero{
		max-height: 30vh;
    }
	#hero-fondation > .l-content-container {
		margin-top:0px;
	}
	#hero-fondation > .l-content-container h1{
		margin-bottom:.5em;
	}
	#hero-fondation > .l-content-container p#scroll-container {
		margin-top:.5em;
	}
}

@media screen and (max-width: 800px) {
    #brushes{
    display:none;
    }
    #logo-jaune {
    display:block;
    }
}
/*********************************************************************************************************************************************************************
 ANCRES
*********************************************************************************************************************************************************************/


.t-accent-dark .m-navigation-inpage-link, .t-accent-dark .m-navigation-inpage-link:focus, .t-accent-dark .m-navigation-inpage-link:hover, .t-accent-dark .m-navigation-inpage-link:visited, .t-card-accent-dark .m-card .m-navigation-inpage-link:visited, .t-accent-dark .m-navigation-inpage>.m-navigation-inpage__item, .t-card-accent-dark .m-card .m-navigation-inpage>.m-navigation-inpage__item{
    border: none !important;
}

.t-accent-light .m-navigation-inpage-link:hover,  .t-accent-light .m-navigation-inpage-link:focus{
	border-bottom-color: #DBE1ED!important;
}

@media (min-width: 35em) {

    #ancres .m-navigation-inpage__item{
        margin: 0 auto !important;
        margin-bottom: 0!important;
    }
    
    #ancres .m-navigation-inpage-link{
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1em;
        position: relative;
        transition: 0.3s ease;
    }
        
    #ancres .m-navigation-inpage-link__icon{
        height: 4em;
        transition: 0.3s ease;
        width: 4em;
    }
    
    .fixed-ancres{
        border-bottom: 1px solid #DBE1ED;
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 99;
    }

    .fixed-ancres .m-navigation-inpage-link__icon{
        height: 2em!important;
        transition: 0.3s ease;
        width: 2em!important;
    }
    .fixed-ancres .m-navigation-inpage-link__text{
        font-size:14px;
        transition: 0.3s ease;
    }
    .fixed-ancres .m-navigation-inpage-link{
        flex-direction: row !important;
    }
}

.patch-fixed-ancres{
    margin-top:68px;
}


@media (max-width: 35em) {
    
	.m-navigation-inpage>.m-navigation-inpage__item, .m-navigation-inpage>.m-navigation-inpage__item:last-child {
        margin: 0px!important;
    }
	.m-navigation-inpage{
		padding:0px!important;
	}
	.t-accent-light .m-navigation-inpage-link:hover,  .t-accent-light .m-navigation-inpage-link:focus{
		border-left-color: #DBE1ED!important;
	}
    .patch-fixed-ancres{
        margin-top:0px;
    }

}

/* 02 Manifesto */

#manifesto{
    background: 
    calc(100% + 90px) 90px/ 270px no-repeat url(../images/abeille/entreprise/engagements/fondation/rond-manifesto.svg),
    center / cover no-repeat url(../images/abeille/entreprise/engagements/fondation/bg-manifesto.jpg);
    display: flex;
    align-items: center;
    position: relative;
    transition:none;
}
#manifesto::after{
    content:'';
    position:absolute;
    left:calc(40%);
    top: calc(100% - 60px);
    display:block;
    background-image: url(../images/abeille/entreprise/engagements/fondation/fleche.svg);
    background-repeat: no-repeat;
    background-position: center;
    width:100px;
    height:130px;
    z-index: 9;
}
#manifesto h2{
    margin: 0px 0px 30px 0px;
}
#manifesto p.a-heading--3{
    margin:1em 0;
}
#manifesto .l-content-container::before{
    content:'';
    position:relative;
    left:-80px;
    top: 30px;
    transform: rotate(-15deg);
    display:block;
    background-image: url(../images/abeille/entreprise/engagements/fondation/guillemet-debut.svg);
    background-repeat: no-repeat;
    background-position: center;
    width:50px;
    height:50px;
}
#manifesto .l-content-container::after{
    content:'';
    display:block;
    position:relative;
    left:80px;
    background-image: url(../images/abeille/entreprise/engagements/fondation/guillemet-fin.svg);
    background-repeat: no-repeat;
    background-position: right;
    width:100%;
    height:50px;
}

@media screen and (max-width: 80em) {
    #hero-fondation > .l-content-container p{
        margin: 0;
    }
}

@media screen and (max-width: 60em) {
    #manifesto .l-content-container::before{
    left: 20px !important;
    }
    #manifesto .l-content-container::after{ 
    /*! top: -20px !important; */
    /*! left: 40px !important; */
    }
    #manifesto::after {
    top: calc(100% - 70px) !important;
	left: 10% !important;
    transform: scale(0.8); 
    }
    #manifesto {
    background: 
    center / cover no-repeat url(../images/abeille/entreprise/engagements/fondation/bg-manifesto.jpg);
    }
}

@media screen and (max-width: 35em) {
    #manifesto .l-content-container::before{
    transform: scale(0.5) !important;
    }
    #manifesto .l-content-container::after{ 
    transform: scale(0.5);
    }
    #manifesto::after {
    transform: scale(0.5); 
    }
}


@media screen and (max-width: 1400px) {
    #manifesto .l-content-container::before,
    #manifesto .l-content-container::after{ 
    left:0;
    }
}

/*********************************************************************************************************************************************************************
 CHIFFRES 
*********************************************************************************************************************************************************************/



#chiffres{
    background-image: url(../images/abeille/entreprise/engagements/fondation/bg-chiffres.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

#chiffres .m-card-content {
  background: #e5eAf2;
  border-radius: 10px;
  padding: 30px;
}

#chiffres .l-columns--grid-lines.l-columns--2-large .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--2-medium .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--3-large .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--3-medium .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--4-large .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--4-medium .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--5-large .l-columns__column:nth-child(n+2):before, .l-columns--grid-lines.l-columns--6-large .l-columns__column:nth-child(n+2):before {
    border: none!important;
}
#chiffres h3, #chiffres .a-heading--0 {
    font-size:70px;
    font-weight:900;
    color:#4CA79F;
    margin-bottom:0px!important;
}
#chiffres h3 span, #chiffres .a-heading--0 span{
    font-size:50px;
}
#chiffres .m-card--icon{
    padding:0;
}
@media screen and (max-width: 800px) {
    #chiffres .l-columns.l-columns > .l-columns__column {
	Width:100%;
    margin-bottom: 20px;
}
    #chiffres .l-columns.l-columns > .l-columns__column:last-child {
    margin-bottom: 0px;
}
}

/*********************************************************************************************************************************************************************
COMBAT
*********************************************************************************************************************************************************************/


#combat ul{
    padding: 0;
}

#combat ul>.m-card{
    background-color: #ffffff;
    max-width: 705px;
}

#combat ul>.m-card:first-child{
    margin-top: 0;
}

#combat ul>.m-card .m-card-content__inner{
    display: flex;
}

#combat ul>.m-card .m-card-content__inner img{
    margin-right: 10px;
}

#combat ul>.m-card .m-card-content__inner p{
    margin: 0;
}
#combat{
    background:
    calc(100% + 10vw) / cover no-repeat url(../images/abeille/entreprise/engagements/fondation/3b-combat.png), center / cover no-repeat fixed url(../images/abeille/entreprise/engagements/fondation/bg-combats.jpg);
    display: flex;
    align-items: center;
    position: relative;
}
#combat::after{
    content:' ';
    background: 
    calc(100% + 10vw) bottom / 80vh no-repeat url(../images/abeille/entreprise/engagements/fondation/etudiante2.png);
    position: absolute;
	width:100%;
    height: 100%;
}
@media screen and (max-width: 100em) {
    #combat::after{
    background: 
    calc(100% + 20vw) bottom / 80vh no-repeat url(../images/abeille/entreprise/engagements/fondation/etudiante2.png) !important;
    }
}
@media screen and (max-width: 80em) {
    #combat::after{
    background: 
    calc(100% + 20vw) bottom / 60% no-repeat url(../images/abeille/entreprise/engagements/fondation/etudiante2.png) !important;
    }
}

@media screen and (max-width: 60em) {
    #combat{
    background:
    center / cover no-repeat fixed url(../images/abeille/entreprise/engagements/fondation/bg-combats.jpg);
    }
}

@media screen and (max-width: 35em) {
    #combat::after{
    background: none !important;
    }

}

@media screen and (max-width: 800px) {
    .l-columns.l-columns > .l-columns__column:first-child {
	Width:100%;
}
    #combat .l-columns.l-columns > .l-columns__column:last-child {
	display:none;
}    
    #combat::after{
    background: none !important;
    }
}


/*********************************************************************************************************************************************************************
 ENGAGEMENT
*********************************************************************************************************************************************************************/



#engagement{
    background-image: url(../images/abeille/entreprise/engagements/fondation/bg-engagement.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}


@media screen and (max-width: 800px) {
    #engagement .l-columns.l-columns > .l-columns__column:last-child {
	Width:100%;
}
}


@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.a-heading.marker{
	font-family:Permanent marker!important;
	font-size:1.75em;
}
@media (min-width: 35em){
	.a-heading.marker{
		font-family:Permanent marker!important;
		font-size:2.5em;
	}
}

#cta{
    background-image: url(../images/abeille/entreprise/engagements/fondation/bg-papier-ligne.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align:center;
}
#cta > .l-content-container {
  margin-bottom: 60px!important;
  margin-top: 0px;
}