/*
Theme Name:   Thème enfant de Susty-master, boosté par David Daumer
Description:  École Gustave, école des métiers du bâtiment nouvelle génération en France
Author:       David Daumer
Author URL:   http://daviddaumer.com/
Template:     susty-master
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  susty-master-child
*/




/*------------- # Général -----------*/

@font-face {
    font-family: 'BricolageGrotesqueBold';
    src: url('./fonts/bricolagegrotesque-variablefont_opszwdthwght-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GlacialDiffBold';
    src: url('./fonts/glacialindifference-bold-webfont.woff2') format('woff2');    
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GlacialDiffRegular';
    src: url('./fonts/glacialindifference-regular-webfont.woff2') format('woff2');    
    font-weight: normal;
    font-style: normal;
}


html{
    scroll-behavior:smooth;
    font-size: 62.5%;
}

h1, .hero .content-text h1 strong{
    font-size: 6rem;
    line-height: 8rem;
}

h1, h2, h3, .citation::after, ol li::after, span.greenbricolage{
    font-family: 'BricolageGrotesqueBold';
}

h4, h5, body, .hero .content-text h2{
    font-family: 'GlacialDiffRegular';
}

h2, h2 strong, ol li::after, .post-template .hero-section h1{
    font-size: 4.8rem;
    line-height: 7.2rem;
}

.hero .content-text h2, .citation blockquote p, .intro-body p{
    font-size: 2.4rem;
    line-height: 3.6rem;
}

h3, h3 b, h3 strong, .cta__content h2{
    font-size: 2.8rem;
    line-height: 4.2rem;
}

h4, h4 b, h4 strong, footer h2, .menu-item-has-children .sub-menu h2, .citation p, .navposts .site-navigation-next h3, .navposts .site-navigation-prev h3, #section-event .card h3, #section-temoignages .card h3{
    font-size: 2rem;
    line-height: 3rem;
}

h5, h5 b, h5 strong{
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: #000;
}

i{
  font-style: italic;
}

body{
    font-size: 1.6rem;
    color: #000;    
}

p{
    line-height: 2.5rem;
}

p:last-child{
  margin-bottom: 0;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, .greenbricolage{
color: #46b17a;
}

li b, li strong, p b, p strong, .burger .bar::after{
    font-family: 'GlacialDiffBold';
}


/*-------------- # Header -------------*/

header#masthead{
top: 50px;
}

header#masthead, .les-campus{
position: sticky;
z-index: 99;
}

.les-campus{
z-index: 100;
}

header#masthead > a {
	font-weight: bold;
}

header#masthead > a > svg {
	width: 1.8em;
	height: 1.8em;
}

.logo a::before, .logo a:hover::before{
display: none;
}

.les-campus{
display: flex;
top: 0;
justify-content: end;
background-color: #000;
margin: 0;
height: 5rem;
}

.les-campus .content{
display: flex;
align-items: center;
justify-content: right;
gap: 2rem;
margin: 0 auto;
max-width: 160rem;
width: 90%;
color: white;
}


.les-campus h2{
font-size: 2rem;
}

.les-campus ul{
list-style: none;
}




/*--------- Menu ---------*/

.menu-responsive, .menu-responsive .menu-item-campus, .menu-desktop .menu-item-campus
{
display: none;
}

.menu-desktop{
background-color: white;
height: 8rem;
}

.menu-desktop-inner{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 160rem;
width: 100%;
padding: 0 5%;
margin: 0 auto;
position: relative;
height: 100%;
}

.menu-desktop-inner .logo{
max-width: 18rem;
}

.menu-desktop #menu-menu-1{display: flex; justify-content: center; align-items: center; list-style: none;padding: 0;}

.menu li{
 padding: 2rem;
}

.menu li a{
text-decoration: none;
}

.menu-desktop #menu-menu-1 #menu-item-3590 {width: 20rem;margin:0 8rem;}

.menu-desktop #menu-item-4342{
padding: 6rem 0;
}


.menu-item-has-children{
padding: 2rem 1rem;
}

.menu-item-has-children .sub-menu{
display: none;
justify-content: space-around;
position: absolute;
width: 100%;
left: 0;
top: 8rem;
padding: 0 2rem;
list-style: none;
background-color: #000;
color: white;
z-index: 10;
}

.menu-item-has-children .sub-menu li{
width:clamp(20rem, 100%, 30rem);
}


.menu-item-has-children .sub-menu h2{
color: #46b17a;
}

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

.menu-item-has-children .sub-menu a{
color: white;
}

.menu-item-has-children .sub-menu a::before{
height: .1rem;
}




/*--------------------------------------------------------------
## Content
--------------------------------------------------------------*/

main{
    width: 100%;
    margin: 0 auto;
}


.content{
	  max-width: 160rem;
    width: 90%;
    margin: 16rem auto;
}

section{
    margin: 16rem auto;
}




/*------------------ # Links / button ------------------------*/

body a, body p a{
    font-family: 'GlacialDiffRegular';
    display: inline-block;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    position: relative;
transition: all 250ms ease-in-out;
z-index: 0;
}

body a:hover, body p a:hover, .card a:hover{
color: white;
}


a::before, p a::before{
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
height: .1rem;
width: 100%;
background-color: #000;
transition: all 250ms ease-in-out;
}	
	
a:hover::before, p a:hover::before, .ancre-section ul li a:hover::before{
display: block;
content: '';
height: 100%;
padding: .5rem;
z-index: -1;
transition: all 250ms ease-in-out;
}
	

.ancre-section ul li a::before, #mentions a::before, .cta a::before, .bloc-campus a::before{
	background-color: white;
}

a.primary-button, .page-template-ecole #campus .content-map .bloc-campus .content-text a, #wpadminbar a:hover{
color: white;
}

a.secondary-button:hover, p a.secondary-button:hover, footer #snd-row #col5 a:hover,  #mentions a:hover, .ancre-section ul li a:hover,
.bloc-campus a:hover{
	color:#000;
}

.home .hero a:hover::before, .home .hero a::before,
a.primary-button::before, a.secondary-button::before,
a.primary-button:hover::before, a.secondary-button:hover::before,
p a.primary-button::before, p a.secondary-button::before,
p a.primary-button:hover::before, p a.secondary-button:hover::before,
.menu li#menu-item-5135 a::before, .menu li#menu-item-5135 a:hover::before,
#wpadminbar a::before, #wpadminbar a:hover::before,
footer #first-row #col6 p a::before, footer #first-row #col6 p a:hover::before,
.next.page-numbers::before, .next.page-numbers:hover::before{
display: none;
}

.menu li#menu-item-5135 a, .home .hero a:nth-of-type(1), .home .hero a:nth-of-type(2), .primary-button, .secondary-button{
display: inline-flex;
gap: .5rem;
color: white;
align-items: center;
text-decoration: none;
padding: 1rem 1rem 1rem 1.5rem;
transition: all 250ms ease-in-out;
}

.menu li#menu-item-5135 a::after, .home .hero a::after, .primary-button::after, .secondary-button::after{
display: block;
content: '';
background-image: url(./img/spritesheet.svg);
background-repeat: no-repeat;
background-position: -5.75rem -2rem;
background-size: 68rem;
width: 2.5rem;
height: 2rem;
transition: all 250ms ease-in-out;
}

.menu li#menu-item-5135 a:hover::after, .home .hero a:hover::after, .primary-button:hover::after, .secondary-button:hover::after{
background-position: -5.25rem -2rem;
transition: all 250ms ease-in-out;
}

.menu li#menu-item-5135 a, .home .hero a:nth-of-type(2), .primary-button {
background-color: #000;
color: white;
border: solid .1rem white;
}



.home .hero a:nth-of-type(1), .secondary-button{
background-color: white;
color: #000;
border: solid .1rem #000;
}

.home .hero a:nth-of-type(1)::after, .secondary-button::after{
background-position: -2.1rem -2rem;
}

.home .hero a:nth-of-type(1):hover::after, .secondary-button:hover::after{
background-position: -1.6rem -2rem;
}


.menu li a::before{
background-color: #000;
height: 0;
z-index: 0;
bottom: -1rem;
}

.card:hover a{
color: white;
}

.card:hover a::before{
height: 100%;
z-index: -1;
}

.card .bloc-img{
overflow: hidden;
}

.home .card .bloc-img{
height: 20rem;
}

.page-template-archive-actualites .card .bloc-img, .page-template-archive-formations .card .bloc-img,
.page-template-archive-temoignages .card .bloc-img{
height: 24rem;
}

.card img{
transition: all ease-in-out 400ms;
}

.card:hover img{
transform: scale(1.05);
transition: all ease-in-out 250ms;
z-index: 0;
}

.menu li a:hover::before{
height: .05rem;
}

.menu li a:hover{
color: #000;
}

.sub-menu li a::before{
bottom: 0;
}

.sub-menu li a:hover::before, .ancre-section a:hover::before{
height: 100%;
z-index: -1;
}

.les-campus a:hover, .sub-menu li a:hover, .bloc-campus a:hover{
color: #000;
z-index: 1;
}


.menu li#menu-item-5135 a::before, .menu li#menu-item-5135 a:hover::before{
display: none;
}

.les-campus a{color: white;}

.les-campus a::before, .menu-item-has-children .sub-menu a::before, .ancre-section a::before, footer #snd-row #col5 a::before{
background-color: white;
}

.current-menu-item a::before, .page_item .current_page_item a::before{
height: .5rem!important;
z-index: 0;
bottom: 0;
}

.category-actualite .cats a:nth-of-type(2)::before, .category-evenement .cats a:nth-of-type(3)::before,
.category-revue-de-presse .cats a:nth-of-type(4)::before{
height: 100%;
z-index: -1;
}

.category-actualite .cats a:nth-of-type(2), .category-evenement .cats a:nth-of-type(3), .category-revue-de-presse .cats a:nth-of-type(4){
color: white;
}



/*------------- # CODE COMMUN -----------*/

.breadcrumbs-custom{
display: flex;
flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-left: 0;
  list-style: none;
margin: 0;
}

.breadcrumbs-custom li{
display: flex;
}

.single-post .breadcrumbs-custom, .single-temoignages .breadcrumbs-custom, .single-formations .breadcrumbs-custom, .single-campus .breadcrumbs-custom{
margin-bottom: 2rem;
}


#archive-hero .breadcrumbs-custom a{
color: white;
}

.breadcrumbs-custom li::after{
display: inline-flex;
content: '>';
left: 1rem;
position: relative;
}

.breadcrumbs-custom li:last-child::after{
display: none;
}

.breadcrumbs-custom li:last-child{
display: block;
  width: 22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#section-bandeau-info ul{
padding-left: 2rem;
line-height: 3rem;
}

#section-bandeau-info ul li, #section-deroule .container ul li{
list-style: square;
}

.page-template-ecole .chiffres, #section-candidater, #section-entreprise .content-img, .page-template-informations-pratiques #section-header, .hero .content-text, #top-card .bloc-card, #archive-hero, .prefooter, #points-forts .content-img, .pedagogie .content-cles, .infos-sup, .infos-sup .content-text, .partenaires, .temoignages, .citation, .hero .content-text, .hero, .hero .content-chiffres ul li, .hero, .hero .content-chiffres ul li::after{
position: relative;
}

.page-template-ecole .chiffres::after, .single-formulaire #section-candidater::before,  .single-formulaire #section-candidater::after, .page-template-informations-pratiques #section-header::after, .hero .content-text::before, #top-card .bloc-card::before, #archive-hero::before, .prefooter::before, .prefooter::after,  #section-entreprise .content-img::before, #section-entreprise .content-img::after, #points-forts .content-img::before, #points-forts .content-img::after, .pedagogie .content-cles::before, .pedagogie .content-cles::after, .infos-sup::before, .infos-sup::after, .infos-sup .content-text::before, .partenaires::before, .partenaires::after,  .temoignages::before, .temoignages::after, .citation::before, .home .hero .content-text::after, .home .hero .content-text::before, .hero .content-text, .home .hero .content-cta, .hero .content-chiffres {
position: absolute;
}

.single-formations #section-presentation .container-text, #about, .info, .hero .content-chiffres ul li, .formations .content-text .container-img, .formations .container-text{
display: flex;
}

.page-template-ecole .chiffres::after, .citation::after, #section-entreprise .content-img::before, #section-entreprise .content-img::after, .page-template-informations-pratiques #section-header::after, .hero .content-text::before, #top-card .bloc-card::before, #archive-hero::before, .prefooter::before, .prefooter::after, #points-forts .content-img::before, #points-forts .content-img::after, .page-template-ecole #campus .content-map .bloc-campus .content-text::after, .pedagogie .content-cles::before, .pedagogie .content-cles::after, .partenaires::before, .partenaires::after, .home .hero .content-text::before, .home .hero .content-text::after, .temoignages::before, .temoignages::after,
.single-formulaire #section-candidater::before, .single-formulaire #section-candidater::after{
display: block;
content: '';
background-image: url(./img/spritesheet.svg);
background-repeat: no-repeat;
background-position: -51.75rem -35rem;
background-size: 340rem;
width: 10rem;
height: 20rem;
}

.page-template-entreprises .hero .content-text::before, .single-campus .hero .content-text::before, .single-formations .hero .content-text::before, .page-template-ecole .hero .content-text::before{
right: -7rem;
top: -8rem;
background-position: -62.75rem -31rem;
background-size: 300rem;
}

.home .hero .content-text::before{
bottom: -13rem;
left: 5rem;
}

.home .hero .content-text::after, .pedagogie .content-cles::before{
background-position: -34.75rem -67rem;
width: 12rem;
height: 14rem;
}

.pedagogie .content-cles::after{
width: 25rem;
background-position: -182.75rem -35rem;
} 

.home .hero .content-text::after{
right: -6rem;
bottom: -8rem;
}

.hero .content-chiffres ul li:last-child::after{
display: none;
}

.page-template-ecole .chiffres::after{
background-position: -84.75rem -32rem;
    bottom: -8rem;
    right: 2vw;
    width: 20rem;
}

.citation{
margin: 10rem 0 0 4rem;
}

.citation::before{
display: block;
content: '';
background-color: #FCC411;
width: 18rem;
height: 26rem;
z-index: -1;
top: -6rem;
left: -4rem;
}

.citation::after{
  display: block;
  content: ' ';
  background-position: -107.75rem -69rem;
  height: 8rem;
  width: 6rem;
  font-size: 10rem;
  color: white;
  position: absolute;
  top: -7rem;
  left: -3rem;
}



.citation{
width: 40rem;
}

.citation p:first-child{
font-style:italic;
}

.citation p{
margin: 0;
}

.card{
display: inline-flex;
flex-direction: column;
align-items:flex-start;
gap: 2rem;
border: .1rem solid #000;
padding-bottom: 2rem;
}

.card h3{
margin: 0 2rem;
}

.card p{
margin: 0 2rem;
}


.card a{
margin-left: 2rem;
} 

.card .data-cat{
display: inline-flex;
background-color: #000;
color: white;
padding: 1rem 1rem 1rem 2rem;
}

.infos-sup{
display: flex;
flex-direction: column;
justify-content: center;
min-height: 60rem;
margin-bottom: 0;
} 

.infos-sup h2{
width: 90%;
max-width: 160rem;
margin: 0 auto 6rem auto;
}

.infos-sup .content-text{
background-color: white;
padding: 5.2rem;
width: clamp(30rem, 100%, 52rem);
margin-left: 36rem;
z-index: 10;
}

.infos-sup .content-text p:first-child{
margin-top: 0;
}

.infos-sup .content-text::before{
display: block;
content: '';
width: .4rem;
height: 100%;
top: 0;
left: 0;
background-color: #FCC411;
transition:all 250ms ease-in-out;
}

.infos-sup:hover .content-text::before{
width: .75rem;
transition:all 250ms ease-in-out;
}


.infos-sup::before, .infos-sup::after{
display: block;
content:'';
height: 100%;
width: 60rem;
}

 .infos-sup::after{
width: 30rem;
}

.infos-sup::before{
background-color: #000;
min-height: 65rem;
top: 0;
right: 0;
z-index: -1;
}

.infos-sup::after{
display: block;
content: '';
background: url(./img/spritesheet.svg);
background-position: 4rem -28rem;
background-size: 100rem;
bottom: -20rem;
right: 0;
z-index: 0;
}

#archive-hero::before, .temoignages::before, .temoignages::after, .single-formulaire #section-candidater::before, .single-formulaire #section-candidater::after{
    width: 30rem;
    height: 16rem;
    background-position: -14.75rem -54rem;
    background-size: 100rem;
}

#archive-hero::before, .temoignages::before, .single-formulaire #section-candidater::before{
top: 0;
left: 0;
width: 22rem;
}

.accordeon{
border: solid .1rem #000;
width: 60rem;
}

.accordeon summary{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem;
}

.accordeon summary:hover{
cursor: pointer;
}

.accordeon summary h3{
margin: 0;
}

.accordeon summary::after{
display: flex;
content: '+';
font-size: 4rem;
justify-content: right;
align-items: center;
flex-direction: row;
}

.accordeon[open] summary::after{
content: '-';
}

.accordeon ::marker{
display: none;
}

.accordeon fieldset{
border: none ;
}

.accordeon fieldset p{
margin-top: 0;
}


.formations .content-text, .single-formations #section-presentation .container-text .content-text{
width: clamp(30rem, 100%, 60rem);
}

.formations .container-text, .single-formations #section-presentation .container-text{
align-items: end;
gap: 10rem;
}

.formations .container-text .content-text-plus, .single-formations #section-presentation .container-text .content-text-plus{
width: 40rem;
border: .1rem solid #000;
padding: 4.5rem 4rem;
}


.page-template-informations-pratiques #section-campus .card .content-img, .single-campus .bloc-card .card .content-img, .page-template-entreprises .bloc-card .card .content-img{
display: flex;
align-items: center;
height: 14rem;
overflow: hidden;
}


#section-candidater{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 0 auto;
}

#section-candidater .container{
display: flex;
flex-direction: column;
align-items: center;
padding: 6rem 0;
}

#section-candidater h2{
margin: 0 auto 12rem auto;
}

#section-candidater .etapes{
position: relative;
top: 2rem;
}



#section-candidater .etapes ol, #section-candidater .etapes ol li{
display: flex;
align-items: end;
gap: 0 6rem;
}

#section-candidater .etapes ol li{
flex-direction: column;
position: relative;
align-items: center;
text-align: center;
max-width: 20rem;
padding: 0;
}

#section-candidater .etapes ol li::before{
    display: block;
    content: '';
    width: 18rem;
    height: .2rem;
    background-color: #FCC411;
    top: -4rem;
    right: -11.85rem;
    position: absolute;
}

#section-candidater .etapes ol li:nth-of-type(1):before{
top: -6rem;
}

#section-candidater .etapes ol li:last-child::before{
display: none;
}


#section-candidater .etapes ol li::after{
display: flex;
justify-content: center;
align-items: center;
top: -11rem;
left: 0;
position: relative;
background-color: #000;
color: white;
width: 6rem;
height: 6rem;
border-radius: 10rem;
font-size: 2.8rem;
}



#section-candidater .info-plus{
text-align: center;
width: 48rem;
}

#section-candidater .info-plus a.secondary-button{
margin-top: 3rem;
}



/*------------- # BASE -----------*/
/*-------------------------------*/



/*------------- # ACCUEIL -----------*/

.home .hero .content-text::before, .home .hero .content-text::after{
width: 0;
}


@keyframes fadein {
  from {
      opacity: 0;
      transform: translateY(-1rem);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}




@keyframes slidein {
  from {
width: 0;
}
  to {
width: 12rem;
}
}


.home .hero .content-text::before, .home .hero .content-text::after{
  animation: slidein 400ms ease-in-out forwards;
  animation-delay: 1600ms;
}

.home .hero .content-text::after{
animation-delay: 1700ms;
}

.home .hero, #about, h1, .accordeon fieldset{
opacity: 0;
}

.home .hero, .home h1, #about {
  animation: fadein 1250ms ease-in-out forwards;
 animation-delay: 250ms;
}

h1, details[open] fieldset {
  animation-delay: 50ms;
  animation: fadein 500ms ease-in-out forwards;
}


#bandeau-info-header{
position: relative;
top: 0;
margin: 0;
background-color: #46b17a;
width: 100%;
padding: 1rem 25%;
text-align: center;
}

#bandeau-info-header p, #bandeau-info-header h2, #bandeau-info-header h3{
margin-top: 0;
}




.home .hero{
max-width: 170rem;
}

.home .hero .content-text, .home .hero .content-cta, .home .hero .content-chiffres{
display: inline-block;
background-color: #000;
color:white;
}

.home .hero .content-img.desktop-img{
left: 5vw;
}

.home .hero .content-cta{
padding: 2rem 2.8rem;
bottom: -3.5rem;
left: 2vw;
}

.home .hero .content-text{
top: -16rem;
width: clamp(30rem, 100%, 76rem);
padding: 6rem 6rem 6rem 12rem;
}

.hero .content-text h1{
margin-top: 0;
}

.hero .content-text h2{
margin: 0;
}

.home .hero .content-img.desktop-img, .home .hero .container-img{
max-width: 128rem;
position: relative;
}

.home .hero .content-img.mobile-img{
display: none;
}


.hero .content-chiffres{
display: flex;
justify-content: center;
right: 5rem;
bottom: 3rem;
}

.hero .content-chiffres ul{
display: flex;
justify-content: center;
gap: 2rem;
list-style: none;
padding: 2rem 1rem;
margin: 0;
}

.hero .content-chiffres ul li{
align-items: center;
}

.hero .content-chiffres ul li::after{
display: block;
content: ' ';
height: 2.4rem;
width: .1rem;
background-color: #46b17a;
right: -1rem;
}

.hero .content-chiffres ul li strong{
margin-right: .5rem;
line-height: 3rem;
}

#about{
justify-content: center;
gap: 8rem;
margin: 19rem auto;
}

#about .content-text{
width: clamp(30rem, 100%, 60rem);
}

.info{
background-color: #000;
color: white;
justify-content: center;
align-items: center;
gap: 10rem;
padding: 4rem;
margin-top: 18rem;
width: clamp(76rem, 100%, 106rem);
}

.info .content-text{
width: clamp(30rem, 100%, 48rem);
}

.info .content-text h2{
margin: 0;
}

.info .content-text p{
margin: 2rem auto 3rem auto;
}

.formations{
display: flex;
flex-direction: column;
gap: 6rem;
}

.formations h2{
margin-top: 0;
}

.home .card{
width: 28rem;
}

.formations .content-text .container-img{
gap: 2.8rem;
}

.formations .container-cards{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 4rem;
}

.home .formations .container-cards{
gap: 2rem;
}

.temoignages, .partenaires{
display: flex;
flex-direction: column;
align-items: center;
background-color: #000;
color: white;
padding: 8rem 0;
}

.partenaires .container-content{
	 display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.temoignages::after, .single-formulaire #section-candidater::after {
    right: 0;
    bottom: 0;
    height: 25rem;
    background-position: 7.25rem -36rem;
}

.temoignages .container-cards{
display: flex;
justify-content: center;
gap: 4rem;
}

.temoignages .container-cards img {
border-radius: 8rem;
}

.temoignages .auteur{
display: flex;
align-items: center;
gap: 1rem;
}

.temoignages .card{
gap: 0 ;
border: none;
width: 30rem;
}

.temoignages h2{
margin-top: 0;
}

.temoignages .card h3{
margin:0;
}

.temoignages .secondary-button{
margin-top: 4rem;
}


#actus{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 8rem;
align-items: center;
}

#actus .container-cards{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 2rem;
}

#actus .container-cards .card:nth-of-type(1){
    grid-row: span 2 / span 2;
}

#actus .container-cards .card:nth-of-type(3) {
    grid-column-start: 2;
}
    

#actus .content-text{
min-width: 30rem;
}


#actus .card{
width: 40rem;
}

#actus .card p{
display: none;
}
#actus .card .container-img{
display: block;
height: 10rem;
overflow: hidden;
}


#actus .card:first-child .container-img{
height: 28rem;
}

#actus .card:first-child p{
display: block;
display: -webkit-box;
  -webkit-line-clamp: 9;
line-clamp: 9;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.partenaires .content-text{
display: flex;
justify-content: center;
align-items: center;
gap: 10rem;
}

.partenaires .presentation-generale{
display: flex;
flex-direction: column;
gap: 4rem;
width:48rem;
}

.partenaires h2, .partenaires p{
margin: 0;
}

.partenaires .container-logos{
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 58rem;
gap: 2.8rem;
background-color: white;
padding: 4rem;
}

.partenaires::before{
    background-position: -15rem -64rem;
    top: -11rem;
    width: 14rem;
}

.partenaires::after{
background-position: -11rem -28rem;
bottom: -4rem;
right: 10%;
width: 22rem;
}

#campus{
display: flex;
justify-content: center;
align-items: center;
gap: 10rem;
}

#campus h2{
margin-top: 0;
}

#campus .content-text{
width: clamp(30rem, 100%, 60rem);
}

#campus .content-links{
display: flex;
flex-wrap: wrap;
width: 48rem;
gap: 4rem;
}

#campus .content-links h3{
margin: 0;
}


/*------------- # ECOLE -----------*/


.single-campus .hero, .page-template-entreprises .hero, .page-template-ecole .hero, .single-formations .hero{
margin-top: 0;
}

.single-campus .hero .content-img, .page-template-entreprises .hero .content-img, .page-template-ecole .hero .content-img, .single-formations .hero .content-img{
display: flex;
justify-content: right;
position: relative;
right: 5vw;
}

.single-campus .hero .content-text, .page-template-entreprises .hero .content-text, .page-template-ecole .hero .content-text, .single-formations .hero .content-text{
top: 20rem;
color: #000;
background-color: white;
padding: 2rem;
width: clamp(30rem, 100%, 60rem);
}

.page-template-ecole .hero .container-citation, .single-formations .hero .container-citation{
display: flex;
justify-content: right;
margin: 12rem 0 0 0;
width: 100%;
}

.page-template-ecole .hero .citation, .single-formations .hero .citation{
display: flex;
flex-direction: column;
width: 52rem;
position: absolute;
margin: 0;
}


.page-template-ecole .hero .citation::before, .single-formations .hero .citation::before,
.single-campus .citation::before, .page-template-entreprises .citation::before{
width: 24rem;
}

blockquote{
margin: 0;
}

.page-template-ecole .philosophie{
display: flex;
justify-content: center;
gap: 10rem;
margin-top: 34rem;
}

.page-template-ecole .philosophie .content-text{
width: clamp(30rem, 100%, 60rem);
}

.page-template-ecole .content-valeur h3{
margin-bottom: 0;
width: 100%;
}

.page-template-ecole .content-valeur h4{
margin: 0;
padding: 0 .25rem;
text-transform: uppercase;
background-color: #46b17a;
}

.page-template-ecole .content-valeur{
display: flex;
flex-wrap: wrap;
gap: 2rem;
}

.pedagogie{
display: flex;
justify-content: right;
gap: 10rem;
}

.pedagogie .content-text{
    width: clamp(30rem, 100%, 52rem);
    padding-left: 4rem;
}

.pedagogie .content-cles{
background-color: #000;
color: white;
padding: 6rem;
max-width: 74rem;
}


.pedagogie .content-cles::before{
    top: -7rem;
    left: -6rem;
}

.pedagogie .content-cles::after{
bottom: -11rem;
right: 0;
}

.page-template-ecole .chiffres{
background-color: #000;
color: white;
}

.page-template-ecole .chiffres{
justify-content: left;
gap: 10rem;
padding: 4rem 8rem;
}

.page-template-ecole .chiffres, .page-template-ecole .container-chiffres{
display: flex;
align-items: end;
}

.page-template-ecole .chiffres{
align-items: center;
}

 .page-template-ecole .container-chiffres{
gap: 4rem;
}

.page-template-ecole .item-chiffre{
display: flex;
flex-direction: column;
align-items: center;
}

.page-template-ecole .item-chiffre img{
width: 5rem;
}

.page-template-ecole .item-chiffre p{
margin: 0;
} 

.page-template-ecole .item-chiffre p:nth-of-type(2) strong{
font-size: 1.7rem;
}

.page-template-ecole .certification {
display: flex;
justify-content: center;
align-items: center;
gap: 6rem;
}

.page-template-ecole .certification h2{
margin-top: 0;
}

.page-template-ecole .certification .content-text{
width: clamp(30rem, 100%, 48rem);
}

.page-template-ecole #campus{
align-items: flex-start;
justify-content: center;
}

.page-template-ecole #campus #info-bulle{
overflow: hidden;
opacity: 0;
background-color: #000;
color: white;
font-size: 1.4rem;
width: auto;
position: absolute;
padding: 0 1rem;
top: 34.5rem;
left: 17.5rem;
}

.page-template-ecole #campus:hover #info-bulle{
overflow: visible;
opacity: 1;
}



.page-template-ecole #campus #info-bulle::after{
display: block;
overflow: hidden;
content: '';
height : 0;
width : 0;
border-top : 2rem solid #000;
border-right : 1rem solid transparent;
border-left : 1rem solid transparent;
position: absolute;
bottom: -1.8rem;
left: 1rem;
}

.page-template-ecole #campus #info-bulle::after, .page-template-ecole #campus:hover #info-bulle::after,
.page-template-ecole #campus #info-bulle, .page-template-ecole #campus:hover #info-bulle, .page-template-ecole #campus .container-map:hover #info-bulle, .page-template-ecole #campus .container-map:hover #info-bulle::after{
transition: all 500ms ease-in-out;
transition-delay: 1000ms;
}

.page-template-ecole #campus .container-map:hover #info-bulle, .page-template-ecole #campus .container-map:hover #info-bulle::after{
opacity: 0;
overflow: hidden;
}


.page-template-ecole #campus .content-text{
width: clamp(30rem, 100%, 48rem);
}

.page-template-ecole #campus, .page-template-ecole #campus .container-map{
position: relative;
}

 .page-template-ecole #campus .content-map .bloc-campus .content-text{
position: absolute;
left: -40vw;
top: 38rem;
width: 40rem;
background-color: #000;
color: white;
padding: 4rem;
} 


.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1) .content-text{
left: -67rem;
top: 20rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text{
left: -85rem;
top: 23rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text{
left: -85rem;
top: 33rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text::after{
background-position: -136.25rem -212rem;
    width: 50rem;
    height: 38rem;
    top: -28rem;
    right: -51rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text{
left: -95rem;
top: 3rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text::after{
    background-position: -235.75rem -120rem;
    width: 58rem;
    height: 22rem;
    top: -12rem;
    right: -59rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text{
left: -99rem;
top: -12rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text::after{
    background-position: -235.75rem -158rem;
    width: 58rem;
    height: 22rem;
    top: -8rem;
    right: -59rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text{
    left: -73rem;
    top: -4rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text::after{
    background-position: -230rem -201.5rem;
    width: 58rem;
    height: 22rem;
    top: -8rem;
    right: -59rem;
}


.page-template-ecole #campus .content-map .bloc-campus .content-text::before{
display: block;
content: '';
width: 0;
height: 22rem;
background-color: #FCC411; 
position: absolute;
z-index: -1;
top: -3rem;
left: -2rem;
transition: all ease-in-out 250ms;
transition-delay: 500ms;
}

.page-template-ecole #campus .content-map .bloc-campus .content-text.show::before{
width: 16rem;
transition: all ease-in-out 250ms;
transition-delay: 500ms;
}

.page-template-ecole #campus .content-map .bloc-campus .content-text::after{
position: absolute;
top: -17rem;
right: -39rem;
z-index: -1;
}


.page-template-ecole #campus .content-map .bloc-campus .content-text::after{
background-position: -143rem -120rem;
width: 38rem;
height: 40rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text::after{
background-position: -137.5rem -153.5rem;
width: 48rem;
height: 40rem;
right: -49rem;
top: -24rem;
}

.page-template-ecole #campus .content-map .bloc-campus .content-text {
display: none;
overflow: hidden;
opacity: 0;
transition: all ease-in-out 500ms;
}

.page-template-ecole #campus .content-map .bloc-campus .content-text.show {
display: block;
overflow: visible;
opacity: 1;
transition: all ease-in-out 500ms;
}


 .page-template-ecole #campus .content-map .bloc-campus .content-text h3{
margin: 0;
color: #46b17a;
}


.page-template-ecole #campus .content-map .bloc-campus{
position: absolute;
}

.page-template-ecole #campus .content-map .bloc-campus .circle{
font-size: 4.8rem;
z-index: 10;
cursor: pointer;
position: relative;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1){
top: 17rem;
left: 13rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2){
top: 13rem;
left: 30rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3){
top: 1rem;
left: 30rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4){
top: 32rem;
left: 40rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5){
top: 46.25rem;
left: 44rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6){
top: 39rem;
left: 18rem;
}


.page-template-ecole #points-forts{
display: flex;
gap: 10rem;
justify-content: left;
align-items: center;
}

.page-template-ecole #points-forts .content-text ol{
display: flex;
flex-direction: column;
gap: 5rem;
}

.page-template-ecole #points-forts .content-text ol li{
position: relative;
}

.page-template-ecole #points-forts .content-text ol li::before{
display: block;
content: '';
width: 2rem;
height: 2rem;
background-color: #EA67A2;
left: 0;
bottom: -1rem;
position: absolute;
z-index: -1;
}


ol {
  list-style-type: none; 
  padding-left: 0;
  counter-reset: li-counter; 
}

ol li {
  counter-increment: li-counter; 
  margin-bottom: 0.5em; 
  position: relative; 
  padding-left: 2em;
}

ol li::after {
  content: counter(li-counter);
  position: absolute;
top: -3rem;
  left: -1rem; 
  color: inherit; 
  font-weight: bold; 
}

#points-forts .content-img::before, #section-entreprise .content-img::before{
    top: 2rem;
    left: -4.5rem;
    background-position: -84.75rem -64rem;
}

#points-forts .content-img::after, #section-entreprise .content-img::after{
    background-size: 230rem;
    bottom: -12rem;
    right: -4.5rem;
    background-position: -76.5rem -21rem;
}

#rse{
display: flex;
justify-content: center;
gap:10rem;
}

#rse .content-text{
width: clamp(30rem, 100%, 60rem);
}

#rse h2{
margin-top: 0;
}

#rse .container-impact{
display: flex;
justify-content: center;
flex-direction: column;
gap: 4rem;
}


#entreprises{
display: flex;
flex-direction: column;
align-items: center;
width: clamp(30rem, 100%, 124rem);
}

#entreprises h2{
display: flex;
margin-top: 0;
align-items: center;
flex-direction: column;
width: clamp(30rem, 100%, 100rem);
}

#entreprises .content-logos p{
margin: 0;
}

#entreprises .content-logos{
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 2rem;
width: 90%;
}


.cta__content{
position: relative;
}

.cta__content::before, .cta__content::after{
display: block;
content:'';
width: 16rem;
height: 26rem;
background-color: #FCC411;
position: absolute;
z-index: -1;
top: -4rem;
left: -2rem;
}

.cta__content::after{
top: -.25rem;
width: .4rem;
height: 101%;
left: -.1rem;
z-index: 1;
transition:all ease-in-out 500ms;
}

.cta:hover .cta__content::after, #section-bandeau-info:hover .cta__content::after{
	width:1rem;
	transition:all ease-in-out 250ms;
}

.cta__content h2{
margin-top: 0;
}

.cta__content{
display: block;
background-color: #000;
color: white;
padding: 5.2rem;
width: clamp(30rem, 100%, 52rem);
}




/*------------- # ARCHIVE FORMATIONS -----------*/


#archive-hero{
display: flex;
justify-content: left;
align-items: end;
padding: 6rem 6rem 4rem 6rem;
background-color: #000;
color: white;
min-height: 48rem;
margin: 0 auto;
}


#archive-hero::before{
height: 30rem;
width: 30rem;
background-position: -6.5rem -44rem;
}

#archive-hero .container h1{
margin: 0;
}

#archive-hero .container p{
color: #46b17a;
margin: 0;
}

#archive-hero .container p span{
color:white;
margin-right: .5rem;
}

#section-cat{
display: flex;
align-items: center;
gap: 2rem;
margin: 4rem auto 6rem auto;
position: relative;
z-index: 2;
}

#section-cat .container-cats{
align-items: baseline;
}

#section-cat .container-cats p{
display: block;
min-width: 9rem;
}

#section-cat .container-cats, 
#section-cat .cats{
display: flex;
gap: 2rem;
margin-top: 4rem;
}

#section-cat .cats{
display: flex;
flex-wrap: wrap;
width: clamp(30rem, 100%, 50rem);
gap: 2rem;
margin-top: 4rem;

}

#top-card{
display: flex;
justify-content: right;
position: absolute;
top: 24rem;
margin-bottom: 0;
}

#top-card .card a{
position:relative;
z-index: 3;	
}

.page-template-archive-formations #section-cards-archive{
margin-top: 25rem;
}


#section-cards-archive{
margin-top: 10rem;
}

#top-card .bloc-card{
width: 48rem;
}


#top-card .bloc-title, #section-cards-archive .bloc-title, #section-temoignages .bloc-title, #section-event .bloc-title{
background-color: white;
padding: 2rem 3rem 1rem 0;
margin: -11rem 0 -3rem 0;
max-width: 32rem;
z-index: 1;
}

#top-card .bloc-card h2, #section-cards-archive .bloc-card .card h2{
font-size: 2rem;
padding-left: 2rem;
line-height: 3rem;
}

#top-card .bloc-card p, #section-cards-archive .bloc-card .card p{
padding:  0 2rem;
background-color: white;
margin-left: 0;
}

#top-card .bloc-card::before{
background-position: -27.75rem -54rem;
width: 12rem;
height: 12rem;
top: -7rem;
left: -5rem;
background-size: 280rem;
z-index:2;
}

#section-cards-archive .bloc-card{
display: flex;
flex-wrap: wrap;
gap: 6rem;
padding-top: 10rem;
}


#section-cards-archive .bloc-card .card{
width: 34rem;
overflow: hidden;
}

.bloc-card .card .excerpt, .single-formations .card .excerpt, .single-campus .card .excerpt, .page-template-entreprises .card .excerpt, .page-template-informations-pratiques .container-cards .card .excerpt{
  display: -webkit-box;
  -webkit-line-clamp: 3;
line-clamp: 3;
  overflow: hidden;
  -webkit-box-orient: vertical;
	margin-top:1rem;
}

.bloc-card .card .excerpt{
	margin-top:1rem;
}

#section-cards-archive .site-navigation{
margin-top: 10rem;
}

#section-cards-archive .navigation .nav-links{
display: flex;
align-items: center;
gap: 3rem;
}

#section-cards-archive .nav-links a, #section-cards-archive .nav-links .current{
padding: 1rem 1.5rem;
border:.1rem solid #000;
text-decoration: none;
}

#section-cards-archive .nav-links .current{
background-color: #000;
color: white;
}

#section-rentrees{
background-color: #000;
color: white;
width: clamp(30rem, 100%, 120rem);
margin-left: 0;
}

#section-rentrees .accordeon{
background-color: white;
color: #000;
margin-bottom: 2rem;
width: clamp(30rem, 100%, 80rem);
}

#section-rentrees .accordeon:last-child{
margin-bottom: 0;
}

#section-rentrees .rentree-block{
margin-bottom: 2rem;
}

#section-rentrees .rentree-mois{
margin: 6rem 0 4rem 0;
}


#section-rentrees .accordeon h4{
margin: 0;
}

#section-rentrees .container-cards{
padding: 6rem 6rem 6rem 0;
}

#section-rentrees .container-cards h2{
margin-top: 0;
}

#section-rentrees .accordeon fieldset{
display: flex;
align-items: center;
gap: 8rem;
margin: 2rem 0;
padding: 0 0 2rem 4rem;
}

#section-rentrees .accordeon fieldset .campus-name{
width: 20rem;
}

#section-rentrees .accordeon fieldset .rentree-date{
width: 15rem;
}

#section-rentrees .accordeon fieldset, #section-rentrees .accordeon fieldset div{
position: relative;
}

#section-rentrees .accordeon fieldset div::after, #section-rentrees .accordeon fieldset::after{
display: block;
content: ' ';
width: .1rem;
height: 3rem;
background-color: #000;
position: absolute;
}

#section-rentrees .accordeon fieldset div::after{
top: -.5rem;
right: -4rem;
}


#section-rentrees .accordeon fieldset::after{
width: 75rem;
height: .1rem;
bottom: -.5rem;
left: 2rem;
}


#section-rentrees .accordeon fieldset div:last-child:after, #section-rentrees .accordeon fieldset:last-child:after{
display: none;
}

/*------------- # SINGLE ACTU/TEMOIGNAGE -----------*/

.post-template .hero-section, .single-temoignages .hero-section{
display: flex;
justify-content: space-between;
}

.post-template .hero-section .content-text, .single-temoignages .hero-section .content-text{
margin-top: 4rem;
width: clamp(30rem, 100%, 48rem);
}

.post-template .hero-section .content-img img, .single-temoignages .hero-section .content-img img{
width: 100%;
}

.post-template .hero-section .post-data, .single-temoignages .hero-section .post-data{
display: inline-block;
color: white;
background-color: #000;
padding: .25rem .5rem;
}

.post-template .hero-section .post-data p, .single-temoignages .hero-section .post-data p{
margin: 0;
}

.post-template .hero-section h1, .single-temoignages .hero-section h1{
margin: 1rem 0;
}

.post-template .hero-section .content-img, .single-temoignages .hero-section .content-img{
margin-bottom: -20rem;
}

.body-article{
margin-top: -10rem;
}

.body-article .content{
max-width: 70rem;
padding: 4rem;
background-color: white;
position: relative;
z-index: 1;
}

.navposts{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 70rem;
}

.navposts h2{
margin-top: 0;
}

.single-temoignages .navposts h2{
	margin-top:4rem;
}

.navposts .site-navigation{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10rem;
}

.navposts .site-navigation-previous, .navposts .site-navigation-next{
display: flex;
flex-direction: column;
width: 30rem;
}

.navposts .site-navigation-next{
align-items: end;
}

.navposts .site-navigation-next h3{
text-align: right;
}


/*------------- # SINGLE FORMATION -----------*/

.single-formations .hero .content-text{
padding: 4rem;
top: 15rem;
}


.single-formations .content-cta{
display: flex;
width: 80rem;
gap: 2rem;
margin-top: 4rem;
}


.single-formations .hero .content-img{
position: relative;
} 

.single-formations .hero .logos-institu p{
margin: 0;
}

.single-formations .hero .logos-institu{
display: flex;
gap: 1.4rem;
position: absolute;
right:2.6rem;
bottom: 2.6rem;
background-color: white;
padding: 1.2rem 1.2rem .8rem 1.2rem;
}

.single-formations .chiffres-section{
background-color: #000;
color: white;
padding: 4rem;
margin-top: 10rem;
position: relative;
}

.single-formations .chiffres-section .content{
display: flex;
justify-content: center;
gap: 6rem;
margin: 0 auto;
}

.single-formations .chiffres-section .bloc{
display: flex;
flex-direction: column;
align-items: center;
}

.single-formations .chiffres-section .bloc p, .single-formations .chiffres-section .bloc p strong{
margin: 0;
font-size: 1.7rem;
}

.single-formations .chiffres-section .bloc img{
width: 5rem;
}

.ancre-section{
display: flex;
justify-content: center;
background-color: #000;
color: white;
margin: -15rem 0 0 0;
padding-top: 2rem;
position: relative;
z-index: 0;
position: -webkit-sticky;
position: sticky;
width: 100%;
height: 14rem;
top: 90vh;
z-index: 1;
}


.ancre-section ul{
display: flex;
justify-content: center;
list-style: none;
gap: 6rem;
}

.ancre-section ul li a{
color: white;
}

.single-formations .cat{
display: inline-flex;
background-color: #000;
color: white;
padding: .25rem .5rem;
margin: 0;
}


.single-formations #section-presentation .container-infos{
margin-top: 6rem;
} 



.single-formations #section-presentation .container-infos .title-content nav{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
flex-direction: column;
width: 40rem;
}

.single-formations #section-presentation .container-infos .title-content h3{
margin: 0;
}

.single-formations #section-presentation .container-infos{
display: flex;
gap: 10rem;
}


.single-formations #section-presentation .container-infos {
  display: flex;
  gap: 10rem;
  margin-top: 6rem;
}

.single-formations .container-citation, .single-formations .citation{
width: clamp(40rem, 100%, 60rem);
}

.title-content nav {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 40rem;
}

.title-content h3 {
  margin: 0;
  cursor: pointer;
  padding: .5rem .8rem;
  background: white;
  transition: background 300ms, color 300ms;
}




.title-content h3:hover, .title-content h3.active {
  background: #000;
  color: white;
}


.content-infos-formation {
  position: relative;
  width: 100%;
  min-height: 30rem;
}

.single-formations #section-presentation .target-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: clamp(30rem, 100%, 60rem);
}



.single-formations .target-section{
display: none;
position: absolute;
top: 0;
left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.single-formations .target-section.show{
display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}



#section-bandeau-info{
background-color: #000;
color: white;
padding: 6rem;
}

#section-bandeau-info .content{
display: flex;
justify-content: center;
align-items: center;
gap: 8rem;
padding: 0;
margin: 0 auto;
}

#section-bandeau-info .content-text{
width: clamp(30rem, 100%, 60rem);
}

#section-bandeau-info h2{
margin-top: 0;
}

#section-deroule .container{
display: flex;
align-items: center;
gap: 16rem;
}

#section-deroule .container:nth-of-type(1){
justify-content: left;
margin-bottom: 10rem;
}

#section-deroule .container:nth-of-type(2){
justify-content: right;
}

#section-deroule .content-text{
width: clamp(30rem, 100%, 60rem);
}


#section-bandeau-results{
background-color: #000;
color: white;
padding: 6rem;
}

#section-bandeau-results .content{
display: flex;
justify-content: center;
align-items: center;
gap: 8rem;
margin: 0;
}

#section-bandeau-results .content ul{
list-style: none;
}

.single-formations .content-boucle, .single-campus .content-boucle{
display: flex;
gap: 8rem;
}

.single-formations #section-event .content-text, .single-campus #section-event .content-text{
display: flex;
flex-direction: column;
justify-content: end;
}

.page-template-informations-pratiques #section-event .content-text, .single-formations #section-temoignages .content-text, .single-campus #section-event .content-text, .page-template-entreprises #section-event .content-text{
width: 48rem;
}

.single-formations  #section-event .container-cards, .single-formations  #section-temoignages .container-cards, .page-template-entreprises  #section-event .container-cards, .single-campus  #section-event .container-cards, .page-template-informations-pratiques  #section-event .container-cards{
display: flex;
gap: 4rem;

}

.page-template-informations-pratiques #section-event .container-cards .card, .single-formations .container-cards .card, .single-campus .container-cards .card, .page-template-entreprises .container-cards .card{
width: 34rem;
}

.single-formations .container-cards .card p, .single-campus .container-cards .card p, .page-template-entreprises .container-cards .card p{
padding-right: 2rem;
}

.single-formations #section-deroule h3{
margin-bottom: 0;
}

.single-formations #section-deroule .data-exergue{
display: inline-block;
padding: .25rem .5rem;
border: #000 solid .1rem;
}

.single-formations .pedagogie .content-cles::after{
background-position: -9.75rem -35rem;
} 


.single-formations #section-intervenants h2{
text-align: center;
}

.single-formations #section-intervenants .container-intervenants{
display: flex;
justify-content: center;
gap: 6rem;
}


.single-formations #section-intervenants .container-intervenants .card{
border: none;
gap: 0;
align-items: center;
}

.single-formations #section-intervenants .container-intervenants .card img{
border: .1rem solid #000;
border-radius: 10rem;
}

.single-formations #section-intervenants .container-intervenants .card h3,
.single-formations #section-intervenants .container-intervenants .card h4,
.single-formations #section-intervenants .container-intervenants .card p{
margin: 0 auto;
}


.page-template-entreprises #section-event,  .single-formations #section-temoignages, .page-template-informations-pratiques #section-event{
background-color: #000;
color: white;
margin-top: 27rem;
position: relative;
}

.page-template-informations-pratiques #section-event .container-cards, .page-template-entreprises #section-event .container-cards,  .single-formations #section-temoignages .container-cards, .page-template-informations-pratiques #section-event .container-cards{
top: -9rem;
position: absolute;
}

.page-template-entreprises #section-event .content,  .single-formations #section-temoignages .content, .page-template-informations-pratiques #section-event .content{
display: flex;
align-items: end;
margin: 0 auto;
padding: 6rem 0;
}

.page-template-entreprises #section-event .content h2,  .single-formations #section-temoignages .content h2, .page-template-informations-pratiques #section-event .content h2{
margin-top: 0;
}


.page-template-entreprises #section-event .container-cards,  .single-formations #section-temoignages .container-cards, .page-template-informations-pratiques #section-event .container-cards{
position: absolute;
width: clamp(100rem, 90%, 128rem);
display: flex;
justify-content: right;
}

.page-template-entreprises #section-event .container-cards .card,  .single-formations #section-temoignages .container-cards .card, .page-template-informations-pratiques #section-event .container-cards .card{
background-color: white;
color: #000;
}

.single-formations #section-candidater .etapes ol li{
	color:#000;
}

.single-formations .prefooter, .single-formations footer{
z-index: 3;
position: relative;
}

.single-formations footer{
background-color: white;
}


.single-formations main{
margin-bottom: -20rem;
}

.single-formations #section-candidater {
    margin-bottom: 0;
    padding-bottom: 30rem;
}



/*------------- # SINGLE CAMPUS / ENTREPRISE -----------*/


.page-template-entreprises .hero{
margin-bottom: 40rem;
}


.single-campus #section-presentation, .page-template-entreprises #section-presentation{
display: flex;
justify-content: center;
gap: 10rem;
margin-top: 26rem;
}

.single-campus #section-presentation .content-text, .page-template-entreprises #section-presentation .content-text{
width: clamp(30rem, 100%, 60rem);
}

.single-campus #section-presentation .content-text h2, .page-template-entreprises #section-presentation .content-text h2{
margin-top: 0;
}

.single-campus #section-formations, .page-template-entreprises #section-formations{
margin-bottom: 0;
}

.single-campus #section-formations-dediees, .page-template-entreprises #section-formations-dediees{
margin-top: 8rem;
}

.single-campus .bloc-card, .page-template-entreprises .bloc-card{
display: block;
columns: 2;
gap: 4rem;
}

.single-campus .bloc-card .card, .page-template-entreprises .bloc-card .card{
width: clamp(30rem, 100%, 58rem);
margin-bottom: 6rem;
}


#section-formations-dediees{
display: flex;
justify-content: center;
align-items: center;
gap: 10rem;
}

#section-formations-dediees .content-text{
width: clamp(30rem, 100%, 48rem);
}

.single-campus .partenaires::after, .page-template-entreprises .partenaires::after{
    background-position: -184rem -28rem;
}

.single-campus .container-citation, .page-template-entreprises .container-citation{
display: flex;
justify-content: center;
margin: 14rem auto;
}


.single-campus .partenaires .content{
display: flex;
align-items: center;
margin: 0 auto;
gap: 10rem;
} 


.single-campus .partenaires .container-content{
width: clamp(30rem, 100%, 60rem);
}



.single-campus .citation, .page-template-entreprises .citation{
width: 60rem;
}

.single-campus .citation::before, .page-template-entreprises .citation::before{
height: 22rem;
}


.single-campus #section-event .card, .page-template-entreprises #section-event .card{
width: 34rem;
}

.page-template-entreprises #section-event .container-cards, .single-campus #section-temoignages .container-cards{
top: -6rem;
}

.page-template-entreprises .infos-sup, .single-campus .infos-sup{
margin-bottom: 0;
}

.page-template-entreprises .infos-sup h3, .single-campus .infos-sup h3{
margin-top: 0;
}


/*------------- # SINGLE PAR DEFAUT -----------*/

.page-template-page-simple h1{
text-align: center;
}

.page-template-page-simple #section-body.content{
width: clamp(30rem, 100%, 70rem);
}



/*------------- # INFORMATIONS PRATIQUES -----------*/

.page-template-informations-pratiques #section-header, .page-template-informations-pratiques #section-header .content{
margin-top: 8rem;
}

.page-template-informations-pratiques #section-header::after{
    background-position: -187.75rem -23rem;
    right: 0;
    top: 0;
    width: 40rem;
    background-size: 280rem;
    height: 30rem;
}

.page-template-informations-pratiques #section-header, .page-template-informations-pratiques #section-header .content, .page-template-informations-pratiques #section-header h1{
margin-bottom: 0;
}

.page-template-informations-pratiques #section-header h1{
margin-top: 0;
}

.page-template-informations-pratiques #section-ancres, .page-template-informations-pratiques #section-ancres .content{
margin-top: 10rem;
}

.page-template-informations-pratiques #section-ancres ul{
display: flex;
list-style: none;
padding-left: 0;
gap: 4rem;
}

.page-template-informations-pratiques #section-ancres ul li a::after{
display: none;
}

.page-template-informations-pratiques #section-ancres ul li a:hover{
background-color: white;
color: #000;
border: solid #000 .1rem;
}

.page-template-informations-pratiques .container-faq{
width: clamp(30rem, 100%, 70rem);
}

.page-template-informations-pratiques .section-faq .accordeon{
width: clamp(30rem, 100%, 70rem);
}

.page-template-informations-pratiques .section-faq .accordeon h4{
margin: 0;
}

.page-template-informations-pratiques .section-faq h3{
margin-bottom: 0;
}

.page-template-informations-pratiques .section-faq .faq{
display: flex;
flex-direction: column;
gap: 3rem 4rem;
}

.page-template-informations-pratiques .accordeon summary{
padding: 1rem 2rem;
}

.page-template-informations-pratiques .cta__content{
overflow:hidden;	
background-color: white;
color: #000;
padding: 5.2rem;
}


.page-template-informations-pratiques #section-entreprise .content{
display: flex;
justify-content: center;
align-items: center;
gap: 16rem;
}

.page-template-informations-pratiques #section-entreprise .content-img::before{
top: -8rem;
}

.page-template-informations-pratiques #section-campus .content{
display: flex;
justify-content: left;
}

.page-template-informations-pratiques #section-campus .container-cards{
display: flex;
flex-wrap: wrap;
justify-content: left;
gap: 2rem;
}


.page-template-informations-pratiques #section-campus .card{
width: 40rem;
}


/*------------- # FORMULAIRE -----------*/


.single-formulaire h1{
text-align: center;
}

.single-formulaire #section-candidater{
background-color: #000;
color: white;
}

#section-candidater .etapes ol li{
color: white;
}

.single-formulaire #section-candidater .etapes ol li::after{
background-color: white;
color: #000;
}

.single-formulaire  #form-section.content{
display: flex;
justify-content: center;
gap: 10rem;
}

.single-formulaire #section-form .content-img{
display: flex;
flex-direction: column;
align-items: baseline;
gap: 4rem;
}

.single-formulaire #section-form{
display: flex;
gap: 10rem;
}

.single-formulaire .content-form{
width: 68rem;
}


/*------------- # FOOTER -----------*/

.prefooter::before{
top: -8rem;
left: 12rem;
background-position: -69.25rem -36rem;
width: 14rem;
}

.prefooter::after{
right: 5rem;
bottom: -8rem;
width: 24rem;
background-position: -56.75rem -62rem;
}

footer #snd-row #col5 a{
color: white;
}

.prefooter{
background-color: #000;
color: white;
}

.prefooter ul{
display: flex;
justify-content: center;
gap: 4rem;
padding: 4rem;
list-style: none;
}


#backtotop{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 0;
height: 7rem;
width: 6rem;
top: 93vh;
z-index: 10;
}

#backtotop a{
display: flex;
background-image: url(./img/spritesheet.svg);
background-repeat: no-repeat;
background-size: 90rem;
background-position: -15rem -.75rem;
align-items: center;
justify-content: center;
background-color: #000;
padding: 1rem;
color: white;
width: 100%;
height: 100%;
font-size: 4rem;
position: absolute;
transform: all ease-in 500ms;
}

#backtotop a::before, #backtotop a:hover::before{
display: none;
}

#backtotop a:hover{
background-position: -15rem -1.25rem;
transform: all ease-in 250ms;
}


footer{
padding-top: 6rem;
}

footer #first-row #col1 img{
width: 16.5rem;
}

footer .content{
margin: 0 auto;
}

footer #first-row, footer #snd-row, footer #third-row{
display: flex;
justify-content: space-between;
}

footer #snd-row{
padding-left: 5%;
}

footer #col6 p{
	display: flex;
    align-items: center;
    gap: .5rem; 
}

footer #snd-row #col5{
background-color: #000;
color: white;
position: relative;
padding: 2rem 8rem 2rem 2rem;
}

footer #snd-row .desk{
	display:block;
}

footer #snd-row .mob{
	display:none;
}

footer #third-row{
align-items: center;
background-color: #000;
padding: 2rem 10%;
margin-top: 4rem;
}
footer #third-row, footer #third-row a{
color: white;
}


footer #mentions p{
	margin-top:0;
}


footer h2{
margin-top: 0;
}

footer h3{
font-size: 1.7rem;
}

/*------------- # 404 -----------*/

.error404 section, .error404 .content{
margin: 4rem auto;
}

.error404 main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
}

.error404 h1{
text-align: center;
margin: 0;
}

.error404 #return{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


/*------------- # DESKTOP (hover notamment) -----------*/
/*-----------------------------------------------------*/


@media screen and (min-width: 1367px) {

.home .hero .content-chiffres{
right: -3vw;
}

.home .hero .content-img{
width: 128rem;
}

}


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

.home .hero .content-chiffres{
right: 4vw;
bottom: 2rem;
}

.home .hero .content-img{
width: 108rem;
}

}


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


#actus{
    grid-template-columns: repeat(1, 1fr);
}

#actus .container-cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 2rem;
}

}





/*------------- # BIG TABLET (BT) -----------*/
/*------------------------------------------*/

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



/*------------- # Menu (BT) -----------*/


.menu-responsive{
display: flex;
justify-content: space-between;
position: relative;
padding-left: 4rem;
align-items: center;
height: 8rem;
width: 100%;
left: 0;
z-index: 10;
background-color: white;
}

.menu-desktop, .menu-responsive .menu-item-campus
 {display: none;}

.menu-responsive .logo{
width: 20rem;
z-index: 20;
}

.navbar__links{
  visibility: hidden;
overflow: hidden;
flex-direction: column;
justify-content: left;
width: 0;
min-height: 120vh;
position: absolute;
padding: 20rem 0 40rem 7rem;
top: 0rem;
right: 0;
gap: 5rem;
list-style: none;
background-color: white;
transition: all 500ms ease-in-out;
}


.show-nav .navbar__links {
display: flex;
  visibility: visible;
   overflow-y: visible;
    height: 100%;
    min-height: 120vh;
    width: 101vw;
    right: 1rem;
    transform: translate(0);
    transition: all 500ms ease-in-out;
    }


.burger {
  display:block;
  position:relative;
  padding:0;
  width: 12rem;
  height: 8rem;
  border:none;
  background:transparent;
    box-shadow: none;
  cursor:pointer;
  margin-bottom: 2.75rem;
    z-index: 15;
}

.burger .bar::after{
display: block; 
font-size: 1.7rem; 
content: 'Menu'; 
color: #000; top: .5rem; position: absolute;}

.burger::before{display: none;}

.show-nav .burger{
  height: 10rem;
top: 34px;
color: #000;
}

    .show-nav.navbar {
        margin: 0;
        padding: 0;
    }

.bar {
  display:block;
  font-size: 1.7rem;    
  transition: all .25s ease-in-out; 
  left:2rem;    
}

.show-nav .bar{
  left: 3rem;
  top: 0;
}

 .bar, .bar::before{
  height:4px;  
  border-radius:3px;
  content:"";
  width:45px;
  height:2.5px;
  position:absolute; 
  background-color: #000;
  border-radius:3px;    
  transition: all .25s ease-in-out;
}

.bar::before{
    transform:translateY(-10px);
    left: 0;
}

.show-nav .bar{
    transform: translateY(16px) rotate(45deg);
  width: 38px;
  background-color: #000;
}

.show-nav .bar::before {
    transform: translateY(0) rotate(-85deg);
    width: 38px;
  background-color: #000;
  }

.show-nav .bar::after {
content:'Fermer';
color: #000;
    transform: translate(11px, 5px) rotate(-45deg);
}

    .navbar .menu-item {
        padding: 0 10px;
    }


.show-nav.navbar .menu-item, 
.show-nav .menu-item-has-children .sub-menu {
        left: -10px;
        width: 100%;
        transition: all 400ms ease-in-out;
        transition-delay: 400ms;
}

.navbar__links li{
  display: flex;
flex-direction: column;
  position: relative;
padding-left: -2rem;
font-size: 2.4rem;
}

.show-nav .navbar__links li{
position: relative;
padding-left: 8rem;
z-index: 21;
}

.navbar__links li a{
text-decoration: none;
}


.menu-item-has-children .sub-menu{
display: flex;
gap: 2rem;
flex-direction: column;
background-color: white;
color: #000;
position: relative;
top: auto;
padding-left: 1rem;
position: relative;
}


.menu-item-has-children .sub-menu a{
color: black;
}

.menu-custom-field p{
font-size: 1.6rem;
margin-top: 0;
}

.menu-item-has-children .sub-menu h2{
font-family: 'GlacialDiffRegular';
color: #000;
}


/*------------- # BASE (BT) -----------*/
/*-------------------------------*/

/*------------- # CODE COMMUN (BT) -----------*/



.temoignages .container-cards{
flex-direction: column;
}

.temoignages .container-cards .card{
width: 60%;
margin: 0 auto;
}

.temoignages, .partenaires{
padding: 16rem 4rem;
}

.single-campus .content-boucle, .page-template-informations-pratiques #section-ancres ul, .page-template-entreprises #section-event .content, .single-formations #section-temoignages .content, .page-template-informations-pratiques #section-event .content, #section-temoignages .content, .single-formations .content-boucle, #section-deroule .container:nth-of-type(1), .post-template .hero-section, .single-temoignages .hero-section, #rse, .page-template-ecole #campus, .partenaires .content-text, #section-pedagogie{
flex-wrap: wrap;
}

.page-template-informations-pratiques #section-event .content-text, .single-formations #section-temoignages .content-text, .single-campus #section-event .content-text, .page-template-entreprises #section-event .content-text, #section-deroule .container:nth-of-type(1) .content-text, #section-rentrees, #rse .container-impact, #rse .content-text, .page-template-ecole #campus .content-text, .page-template-ecole #campus .container-map, #actus .container-cards, .partenaires .presentation-generale, .partenaires .container-logos{
width: 90%;
}

.infos-sup::before, .infos-sup::after{
width: 40rem;
}

.infos-sup .content-text{
margin-left: 16vw;
}

.single-campus .hero .content-img, .page-template-entreprises .hero .content-img, .page-template-ecole .hero .content-img, .single-formations .hero .content-img{
right: 1vw;
}

.page-template-ecole .hero .container-citation, .single-formations .hero .container-citation {
    margin: 30rem 0 0 0;
}

.page-template-ecole #campus .content-map .bloc-campus .content-text::after{
display: none;
}

#top-card{
top: 0;
position: relative;
justify-content: left;
}

#section-cards-archive, .page-template-archive-formations #section-cards-archive{
margin-top: -3rem;
}

#section-deroule .container:nth-of-type(1){
gap: 0rem;
}

.page-template-entreprises #section-event .container-cards, .single-formations #section-temoignages .container-cards, .page-template-informations-pratiques #section-event .container-cards {
position: relative;
    top: 0rem;
    margin-top: 4rem;
    justify-content: left;
}

#points-forts .content-img::after, #section-entreprise .content-img::after{
    right: -1.5rem;
    width: 8rem;
    background-position: -77.5rem -21rem;
 }

/*------------- # ACCUEIL  (BT) -----------*/

 .home .hero{
margin-top: 30rem;
}

.home .hero .content-text{
top: -30rem;
}

    .home .hero .content-chiffres {
        right: 8vw;
        bottom: 2rem;
    }

.home .hero .content-cta{
bottom: -13.5rem;
}


.partenaires .container-logos{
max-width: none;
}

/*------------- # ECOLE (BT) -----------*/


.page-template-ecole .chiffres::after {
    bottom: -13rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1) .content-text,
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text,
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text,
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text,
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text,
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text{
left: 0;
top: 42rem;
position: relative;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text{
   top: 46rem;
    left: -17rem;
}
  

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text{
    left: -17rem;
    top: 58rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text{
top: 27rem;
left: -27rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text{
        top: 12.75rem;
        left: -31rem;
}

   .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text{
top: 20rem;
left: -5rem;
}


    .page-template-ecole #campus{
margin-bottom: 30rem;
}

/*------------- # TEMOIGNAGE / ARTICLE (BT) -----------*/


.post-template .hero-section .content-text, .single-temoignages .hero-section .content-text{
margin: 0 0 10rem 0;
}

/*------------- # SINGLE FORMATION (BT) -----------*/


.single-formations .hero .content-text{
top: 35rem;
}

.single-formations .hero .logos-institu {
    right: 64%;
    bottom: 25.6rem;
}

.ancre-section{
top: 126vh;
}

.ancre-section ul{
flex-wrap: wrap;
gap: 4rem;
padding-left: 0;
}

/*------------- # INFORMATIONS PRAT (BT) -----------*/


.page-template-informations-pratiques #section-ancres ul{
width: 70%;
}

.page-template-informations-pratiques #section-header::after {
    top: -28rem;
}

.page-template-informations-pratiques #section-header, .page-template-informations-pratiques #section-header .content{
margin-top: 20rem;
}


/*------------- # SIMPLE PAGE (BT) -----------*/

.post-template .hero-section{
margin-top: 6rem;
}

.body-article{
margin-top: -20rem;
}


/*------------- # Footer (BT) -----------*/

footer #first-row{
margin-bottom: 8rem;
}


footer #first-row{
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: left;
}


}







/*------------- # TABLET (T) -----------*/
/*--------------------------------------*/

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

/* Menu */

.show-nav .navbar__links{
right: 0;
}

.les-campus{
display: none;
}

.menu-responsive .navbar 
{
display: block;
}

.menu-responsive .navbar.show-nav .menu-item-campus
{
display: block;
}

.menu-responsive 
 .les-campus-mobile, .menu-responsive 
 .les-campus-mobile .content{
margin: 0;
}

.menu-responsive 
 .les-campus-mobile .content ul{
display: flex;
flex-direction: column;
gap: 3rem;
padding: 0;
}

header#masthead{
top: 0;
}



/*------------- # BASE (T) -----------*/
/*-------------------------------*/



h1, .hero .content-text h1 strong{
    font-size: 4.4rem;
    line-height: 5rem;
}


h2, h2 strong, ol li::after, .post-template .hero-section h1{
    font-size: 3.6rem;
    line-height: 5.4rem;
}

.hero .content-text h2, .citation blockquote p{
    font-size: 2rem;
    line-height: 3rem;
}



/*------------- # CODE COMMUN (T) -----------*/

#about{
flex-direction: column-reverse;
}

.single-formulaire #section-form, .single-formations .content-boucle{
flex-direction: column;
}

.page-template-ecole .chiffres, .page-template-ecole .chiffres .page-template-ecole .container-chiffres, .info, #campus, .page-template-informations-pratiques #section-entreprise .content, .page-template-ecole .philosophie, #section-deroule .container:nth-of-type(2), #section-bandeau-info .content, .formations .container-text, .formations .container-text, .single-formations #section-presentation .container-text{ 
flex-wrap: wrap;
}

#section-bandeau-info .content{
justify-content: left;
gap: 2rem;
}

.formations .container-text .content-text-plus, .single-formations #section-presentation .container-text .content-text-plus{
width: 100%;
}

.ancre-section {
        top: 96vh;
    }


.page-template-entreprises #section-event, .single-formations #section-temoignages, .page-template-informations-pratiques #section-event{
margin-top: 16rem;
}

#section-rentrees .accordeon fieldset .campus-name,
#section-rentrees .accordeon fieldset .rentree-date{
width:auto;
}

#section-rentrees .accordeon fieldset::after{
width: 90%;
}

    #section-rentrees .accordeon fieldset {
        flex-direction: column;
        gap: 2rem;
        align-items: baseline;
padding: 0 0 2rem 2rem;
    }

#section-rentrees .accordeon fieldset div::after{
display: none;
}


/*------------- # Accueil (T) -----------*/

.home .hero .content-img.desktop-img{
display: none;
}

.home .hero .content-img.mobile-img{
display: block;
}

	#bandeau-info-header{
		padding:1rem 10%;
	}

.home .hero{
margin: 0 0 31rem 0;
}

.home .hero .content-img{
width: auto;
margin-top: 0;
}

.home .hero .content-text{
        top: 40vh;
width: 90%;
    }

.home .hero .content-cta{
bottom: -18vh;
}

    .home .hero .content-chiffres {
        right: 10vw;
        bottom: 19vh;
    }

#actus .container-cards{
display: flex;
flex-wrap: wrap;
}

.info{
width: 100%;
gap: 4rem;
}


/*------------- # ECOLE (T) -----------*/


.page-template-ecole .hero .citation{
position: relative;
    margin-top: 30vh;
}

.page-template-ecole .chiffres{
gap: 4rem;
}

.page-template-ecole .chiffres::after {
        bottom: -15rem;
}

.page-template-ecole .philosophie{
margin-top: 24rem;
}

.page-template-ecole #section-pedagogie h2{
margin-top: 0;
}


.page-template-ecole .hero .container-citation, .single-formations .hero .container-citation {
        margin: 0 0 0 0;
    }

#section-deroule .container{
gap: 4rem;
}

#section-deroule .container .content-text:nth-of-type(1){
margin-bottom:4rem;
}





/*------------- # SINGLE FORMATION (T) -----------*/

.single-formations .hero .content-text {
        top: -5rem;
        position: relative;
    }

.single-formations .chiffres-section{
z-index: 2;
}

.single-formations .hero .logos-institu {
        right: 50%;
        bottom: 2rem;
    }

.single-formations #section-candidater .container{
padding-top: 0;
}




/*------------- # Entreprise (T) -----------*/

.infos-sup h2{
width: 60%;
margin: 0 auto -1rem auto;
padding: 4rem 0 0 4rem;
background-color: white;
}

.infos-sup .content-text{
margin: 0 auto;
width: 60%;
}



/*------------- # SINGLE CANDIDATER (T) -----------*/

#section-candidater .container{
padding: 16rem 0;
}

.single-formulaire .content-form {
    width: 100%!important;
}


/*------------- # Footer (T) -----------*/


#snd-row{
display: flex;
flex-direction: column;
justify-self: baseline;
gap: 2rem;
}
	
	footer #snd-row .desk{
	display:none;
}

footer #snd-row .mob{
	display:block;
}



.prefooter::before {
        top: -9rem;
}

.prefooter::after {
    bottom: -9rem;
}



}




/*------------- # MOBILE (M) -----------*/
/*--------------------------------------*/

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



/*------------- # MENU (M) -----------*/
    
.menu-desktop, .les-campus{
display: none;
}

    .menu-responsive {
padding-left: 2rem;
      height: 6rem;
    }

  
.menu-responsive .logo{
width: 10rem;
}

.show-nav .burger{
left: -20px;
}


.bar{
display: flex;
justify-content: center;
}

.bar, .bar::before{
height: 1.5px;
width: 35px;
}

.show-nav .bar::after{
transform: translate(16px, 5px) rotate(-45deg);
}


.burger{
width: 8rem;
margin-bottom: 1rem;
height: 6rem;
}

.navbar__links{
padding: 12rem 0 30rem 0rem;
}

.show-nav .navbar__links li{
padding-left: 4rem;
}



/*------------- # BASE (M) -----------*/
/*-------------------------------*/

h1{
font-size: 4rem;
line-height: 6rem;
}

h2, h2 strong, ol li::after, .post-template .hero-section h1, .single h1{
        font-size: 3rem;
        line-height: 4.5rem;
}

h3, h3 b, h3 strong, .cta__content h2, .single-formations .cat {
    font-size: 2.4rem;
    line-height: 3.6rem;
}




/*------------- # CODE COMMUN (M) -----------*/


#section-cat .container-cats, #section-cat .cats, .single-campus .partenaires .content, #section-formations-dediees, .single-campus #section-presentation, .page-template-entreprises #section-presentation, .navposts .site-navigation, #section-cards-archive .navigation .nav-links, .single-formations .chiffres-section .content, .single-formations #section-temoignages .container-cards, #section-bandeau-results .content, #info-formation, .single-formations .content-cta, .prefooter ul, .page-template-ecole #points-forts, .page-template-ecole .certification, .hero .content-chiffres ul, .page-template-ecole .chiffres, .page-template-ecole .container-chiffres{
flex-wrap: wrap;
}

#section-candidater .etapes ol li::before, .page-template-ecole #campus #info-bulle, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1) .content-text::after, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text::after, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text::after, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text::after, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text::after, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text::after,
.hero .content-chiffres ul li::after, .infos-sup::before, .infos-sup::after, #bandeau-info-header{
display: none;
}

#section-candidater .info-plus, #entreprises, #section-pedagogie , .citation, .infos-sup .content-text, .infos-sup h2, .page-template-ecole .hero .citation, .single-formations .hero .citation{
width: 90%;
}

.accordeon, .page-template-ecole #campus .content-map .bloc-campus .content-text, .temoignages .container-cards .card{
width: 100%;
}

.temoignages .container-cards  .card p{
margin: 0;
}

    .temoignages, .partenaires {
        padding: 16rem 4rem 26rem 4rem;
    }


.infos-sup{
width: 100%;
min-height:auto;
margin: 16rem auto;
}


.infos-sup h2{
padding: 0 0 0 2rem;
margin: 0 auto 2rem auto;
}

.infos-sup .content-text{
padding: 2rem;
}

.infos-sup h3{
margin-top: 0;
}

.page-template-ecole .container-chiffres{
justify-content: center;
}

#points-forts .content-img::after, #section-entreprise .content-img::after {
    background-size: 230rem;
    bottom: -12rem;
    right: -2rem;
width: 9rem;
}

.page-template-entreprises .hero .content-text::before, .single-campus .hero .content-text::before, .single-formations .hero .content-text::before, .page-template-ecole .hero .content-text::before {
    right: -2rem;
    top: -14rem;
}

#archive-hero {
    padding: 4rem 6rem 2rem 3rem;
}

.page-template-archive-actualites #archive-hero, .page-template-archive-temoignages #archive-hero  {
   min-height: 40rem;
}

 #archive-hero::before {
      height: 20rem;
    width: 20rem;
    background-position: -3.5rem -33rem;
    background-size: 74rem;
}  

#section-candidater .etapes ol, #section-candidater .etapes ol li{
flex-direction: column;
align-items: center;
gap: 3rem;
}

#section-candidater .etapes ol li::after{
top: -13rem;
}

.citation::before{
height: 28rem;
}

.navposts .site-navigation{
gap: 4rem;
}

.single-campus #section-presentation, .page-template-entreprises #section-presentation{
margin-bottom: 0;
}

.temoignages, .partenaires{
padding: 16rem 2rem 34rem 2rem;
}

.page-template-entreprises .infos-sup, .single-campus .infos-sup{
margin-bottom: 16rem;
}

    #section-candidater .container {
        padding: 16rem 0 30rem 0;
    }

/*------------- # ACCUEIl (M) -----------*/

    .home .hero .content-img.mobile-img {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .home .hero .content-chiffres {
    display: flex;
    justify-self: center;        
    right: auto;
    bottom: 1rem;
    width: 90%;
    z-index: 2;
    }

.home .hero h1{
font-size: 4rem;
margin-bottom: 1rem;
}

.home .hero{
margin: 0 auto 16rem auto;
}

.home .hero .content-text{
padding: 4rem;
margin: 0 auto;
top: 43.5vh;
width: 100%;
} 

.home .hero .content-cta{
    position: relative;
    bottom: -30vh;
}


.hero .content-chiffres ul{
padding: 1rem;
gap: 1rem 2rem;
}

.home .hero .content-text::before{
bottom: -22rem;
left: 75vw;
width: 6rem;
z-index: 2;
}

.home .hero .content-text::after {
    background-position: -35.75rem -70rem;
    width: 6rem;
    height: 6rem;
    right: .5rem;
    bottom: 21rem;
    z-index: 2;
}

    .home .hero .content-cta {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    bottom: -6vh;
    gap: 1rem;
    left: 0;
    }

#about{
margin-top: 16rem;
}



/*------------- # ECOLE (M) -----------*/


    .page-template-ecole .hero .citation {
        position: relative;
        margin-top: 85vh;
    }

    .page-template-ecole .philosophie {
        margin-top: 16rem;
    }


.page-template-ecole .chiffres h2{
margin-bottom: 0;
}

.page-template-ecole .chiffres .container-chiffres{
width: 90%;
}

.page-template-ecole .chiffres{
justify-content: center;
padding-bottom: 8rem;
}

.page-template-ecole .container-map .map svg{
width: 32rem;
}

.page-template-ecole .container-map .map svg{
width: 32rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle{
font-size: 2.8rem;
width: 3rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1) {
    top: -36rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) {
    top: -59rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) {
top: -83rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) {
    top: -90rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) {
top: -101.5rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) {
    top: -125rem;
}



.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1),
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2),
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3),
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4),
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5), 
.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6){
left: 0;
}

.page-template-ecole #campus .content-map .bloc-campus .content-text {
    display: block;
    overflow: visible;
    opacity: 1;
    padding: 2rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1) .content-text, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text, .page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text{
left: -1rem;
}


.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(1) .content-text{
top: 20rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(2) .content-text{
top: 43rem;
}

.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(3) .content-text{
top: 67rem;
}


.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(4) .content-text{
        top: 74rem;
}


.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(5) .content-text{
        top: 86rem;
}


.page-template-ecole #campus .content-map .bloc-campus:nth-of-type(6) .content-text{
        top: 110rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle-1{
left: 7rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle-2{
left: 16rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle-3{
left: 17rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle-4{
left: 23rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle-5{
left: 25rem;
top: 2rem;
}

.page-template-ecole #campus .content-map .bloc-campus .circle-6{
left: 9.5rem;
top: 2rem;
}

.page-template-ecole #campus .content-map .bloc-campus{
position: relative;
width: 32rem;
}
    .page-template-ecole #campus {
        margin-bottom: 0rem;
    }

.page-template-ecole #points-forts{
margin-top: 0;
}

/*------------- # SINGLE FORMATION (M) -----------*/

.single-formations #archive-hero {
        min-height: 40rem;
}
.single-formations .hero .content-img{
margin-top: 10rem;
}

.single-formations .hero .content-text{
padding-left: 0;
}

.single-formations .content-cta{
width: 100%;
}

.single-formations .hero .citation{
margin-top: 4rem;
}

.ancre-section{
height: 100%;
}

.single-formations .hero .logos-institu {
        right: 50%;
        bottom: 11rem;
    }



.pedagogie .content-text{
padding-left: 0;
}

.pedagogie .content-cles{
padding: 6rem 4rem;
}

#section-candidater .etapes ol li{
max-width: none;
}


/*------------- # FORMULAIRE -----------*/


.single-formulaire .hero-section, .single-formulaire .hero-section .content{
margin: 6rem auto;
}

.single-formulaire #section-form .content-img {
    align-items: center;
}


/*------------- # ENTREPRISE (M) -----------*/

.single-campus .bloc-card, .page-template-entreprises .bloc-card{
columns: 1;
}

/*------------- # ARCHIVES TEMOIGNAGES (M) -----------*/

#section-cat .cats{
margin-top: 0;
}

/*------------- # INFORMATIONS PRAT (M) -----------*/

#section-bandeau-info{
padding: 6rem 2rem;
}

.page-template-informations-pratiques .cta__content{
padding: 5.2rem 2rem;
}

.page-template-informations-pratiques #section-entreprise .content{
gap: 8rem;
}


/*------------- # SIMPLE PAGE (M) -----------*/

.post-template .hero-section{
margin-top: 6rem;
}

.body-article{
margin-top: -20rem;
}

.body-article .content {
    z-index: 0;
}

.post-template .hero-section .content-text{
margin: 0 0 4rem 0;
}

.body-article .content{
padding: 4rem 1rem;
}

/*------------- # FOOTER (M) -----------*/

.prefooter ul{
padding: 6rem 4rem;
}

.prefooter::before{
left: 3rem;
}

.prefooter::after{
right: 2rem;
}


#backtotop {
    top: 90%;
    width: 7rem;
    height: 8rem;
}

footer #first-row, footer #third-row{
flex-direction: column;
}

footer #snd-row{
padding-left: 0;
}


footer #third-row{
align-items: baseline;
padding: 5%;
}






}