body.home .header h1 {
margin:5rem 0
}
body.home .header .title {
font-size: 5.15rem;
}
@media (max-width: 1199.98px) {
body.home .header h1 {
margin:4rem 0;
}
body.home .header .title {
font-size: 4.15rem;
}
}
@media (max-width: 767.98px) {
body.home .header .title {
font-size: 2.5rem;
} 
body.home .header h1 {
margin: 2.5rem 0;
}
}
@media (max-width: 575.98px) {
body.home .header .title {
text-align: center;
} 
}
body.home .header .title1 {
font-weight: 400;
text-align: center;
line-height: 1.1;
margin-bottom: 3rem;
span{
display: block;
}
strong{
font-weight: 700;
color:#f06a01;
}
}
body.home .header .sub-header {
background-color: white;
padding-top: 0;
padding-bottom: 6rem;
}
@media (max-width: 1199.98px) {
body.home .header .sub-header {
padding-bottom: 4rem;
}
}
body.home .header .sub-header .buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap:1rem;
}  body.home .actuZone{
h2.titrePrincipal{
font-size: 2.15rem;
font-weight: 400;
margin:0 0 3rem;
overflow-wrap: break-word;
span{
font-weight: 700;
}
&:after{
content:"";
display: block;
margin-top: 0.75rem;
width:6rem;
height: 1px;
background: #f06a01;
}
}  
@media (max-width: 1199.98px) {
body.home .actuZone{
padding: 4rem 0;
}
}  body.home #filieres{
h2.titrePrincipal{
font-size: 2.15rem;
font-weight: 400;
margin:0 0 6rem;
overflow-wrap: break-word;
span{
font-weight: 700;
}
&:after{
content:"";
display: block;
margin-top: 0.75rem;
width:6rem;
height: 1px;
background: #f06a01;
} 
}
}
body.home #filieres .grille{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 2rem;
grid-row-gap: 4rem; 
}
@media (max-width: 1199.98px) {
body.home #filieres .grille{
grid-template-columns: repeat(3, 1fr); 
}
}
#filieres .filiere{
position: relative;
border-radius: 1.5rem;
background-color: #46525f;
.img-filiere{
opacity: 0.5; 
border-radius: 1.5rem;
}
.title{
position: absolute;
top:0;
left:1rem;
z-index: 1;
text-transform: uppercase;
font-weight: 600;
color:white;
font-size: 1.5rem;
line-height: 1.2;
max-width: 15ch;
transform: translateY(-2rem);
img{
display: block;
margin-bottom: 2rem;
}
}
.inside{
position: absolute;
z-index: 2;
width:100%;
height: 100%;
top:0;
left:0;
border-radius: 1.5rem;
overflow: hidden;
}
.inner{
position: absolute;
z-index: 2;
bottom: 0;
width: 100%;
background-color: #46525f;
border-radius: 0.95rem 0.95rem 0 0;
padding: 1.5rem 1.5rem 1.5rem;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
}
ul{
margin: 0 0 1rem;
padding:0;
list-style: none;
color:white;
}
ul li{
font-size: 1.05rem;
font-weight: 300;
line-height: 1.1;
text-transform: lowercase;
.chiffre{
font-weight: 600;
display: block;
}
} ul{
display: flex;
flex-direction: column;
gap: 1rem; }
ul li{
display: flex;
align-items: flex-start; gap: 10px; div{
width:calc(100% - 50px);
max-width: 25ch;
}
}
ul li::before {
content: "";
display: inline-block;
shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
margin-top: 2px; 
background-color: #636B76;
background-image:url(//www.esatco86.fr/wp-content/themes/esatco85/images/svg/marker.svg); 
background-position: 50% 50%;
background-repeat:no-repeat;
background-size: 25px;
}
}
#filieres .filiere:hover,
#filieres .filiere:focus{
.inner{
transform: translateY(0%);
}
}
section.content {
text-align: center; }
section.content h2 {
font-size: 2.1875rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
font-weight: 700; }
@media (max-width: 991.98px) {
section.content h2 {
font-size: 1.5625rem; } }
section.content p, section.content h2 {
padding: 0 9rem; }
@media (max-width: 991.98px) {
section.content p, section.content h2 {
padding: 0 2rem; } }
@media (max-width: 575.98px) {
section.content p, section.content h2 {
padding: 0 0.5rem; } }
#modalevenement11novembre {
text-align: center; }
#modalevenement11novembre .img-lightbox {
width: 100%;
margin-top: 3rem; }
#modalevenement11novembre .close {
position: absolute;
top: 20px;
right: 20px; }
#modalevenement11novembre .button {
margin-top: 1rem; }