@charset "UTF-8";
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
/* placeholder: proportions vidéo youtube responsive */
/* placeholder : width de 100vw */
/* changer delay selon position dans la liste*/
/* changer width selon position dans la liste */
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* */
/* placeholder: proportions vidéo youtube responsive */
/* placeholder : width de 100vw */
/* changer delay selon position dans la liste*/
/* changer width selon position dans la liste */
#hero-slider .field__item {
height: auto !important;
}
#hero-slider .paragraph--type--element-vedette {
position: relative;
height: 100%;
}
#hero-slider .paragraph--type--bloc-en-vedette {
max-width: 1400px;
margin: 0 auto;
box-sizing: border-box;
width: calc(100% - 40px);
position: relative;
top: 200px;
}
#hero-slider .field--name-field-elements-vedette {
display: flex;
flex-wrap: wrap;
margin-bottom: 200px;
}
#hero-slider .field--name-field-elements-vedette > .field__item {
cursor: pointer;
border-radius: 10px 10px 10px 10px;
width: auto;
max-height: 75vh;
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 10px;
height: 190px !important;
}
#hero-slider .field--name-field-elements-vedette > .field__item::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
inset: 0;
/* top:0; right:0; bottom:0; left:0 */
background: linear-gradient(180deg, rgba(14, 17, 18, 0.3) 60%, #0E1112 100%);
z-index: 1;
}
#hero-slider .field--name-field-elements-vedette > .field__item:last-child::before {
background: linear-gradient(180deg, rgba(14, 17, 18, 0.3) 50%, rgba(48, 131, 247, 0.85) 100%);
}
#hero-slider .field--name-field-elements-vedette > .field__item:nth-child(1) {
order: 2;
}
#hero-slider .field--name-field-elements-vedette > .field__item:nth-child(1) .wrapper-video {
background-image: url();
}
#hero-slider .field--name-field-elements-vedette > .field__item:nth-child(2) {
order: 3;
}
#hero-slider .field--name-field-elements-vedette > .field__item:last-child {
order: 1;
}
#hero-slider .field--name-field-elements-vedette > .field__item .new {
position: absolute;
top: 30px;
left: 30px;
z-index: 4;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 10%;
color: white;
background: linear-gradient(180deg, #0E0E0E -57.61%, #3084F9 100%);
border-radius: 4px;
padding: 3px 3px 0 3px;
line-height: 100%;
}
#hero-slider .field--name-field-elements-vedette > .field__item a {
transition: all 0.25s ease-in-out;
position: absolute;
width: 40px;
height: 40px;
right: 30px;
top: 30px;
z-index: 3;
font-size: 0;
display: block;
background-repeat: no-repeat;
background-size: 40px;
background-position: center;
background-image: url(../images/en-vedette-cta.png);
}
#hero-slider .field--name-field-elements-vedette > .field__item .field--name-field-description-para {
transition: all 0.25s ease-in-out;
width: calc(100% - 60px);
overflow: hidden;
}
#hero-slider .field--name-field-elements-vedette > .field__item .field--name-field-description-para p {
color: white;
font-size: 1.25rem;
margin: 10px 0 0 0;
}
#hero-slider .field--name-field-elements-vedette > .field__item .wrapper-video {
min-height: 550px;
}
#hero-slider .field--name-field-elements-vedette > .field__item .wrapper-video video {
object-fit: cover;
min-height: 550px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#hero-slider .field--name-field-elements-vedette > .field__item .text-content {
position: absolute;
top: 70px;
left: 0;
width: 100%;
padding: 0 30px;
z-index: 2;
}
#hero-slider .field--name-field-elements-vedette > .field__item .text-content .field--name-field-titre {
display: flex;
align-items: flex-end;
font-size: 1.875rem;
font-weight: 800;
color: white;
max-width: 80%;
min-height: 110px;
display: flex;
align-items: flex-end;
line-height: normal;
}
@media screen and (min-width: 1024px) {
#hero-slider .field--name-field-elements-vedette {
flex-wrap: nowrap;
justify-content: space-between;
gap: 30px;
margin-bottom: 230px;
}
#hero-slider .field--name-field-elements-vedette > .field__item {
width: 33.333%;
height: 560px !important;
}
#hero-slider .field--name-field-elements-vedette > .field__item:nth-child(1) {
order: 1;
}
#hero-slider .field--name-field-elements-vedette > .field__item:nth-child(1) {
order: 2;
}
#hero-slider .field--name-field-elements-vedette > .field__item:last-child {
order: 3;
}
#hero-slider .field--name-field-elements-vedette > .field__item .text-content {
transform: translateY(0);
display: flex;
flex-direction: column;
transition: all 0.25s ease-in-out;
top: 438px;
}
#hero-slider .field--name-field-elements-vedette > .field__item .text-content .field--name-field-titre {
font-size: 3rem;
}
#hero-slider .field--name-field-elements-vedette > .field__item .wrapper-video video {
display: block;
}
#hero-slider .field--name-field-elements-vedette > .field__item:hover a {
width: 60px;
height: 60px;
background-size: 60px;
}
#hero-slider .field--name-field-elements-vedette > .field__item:hover:last-child::before {
background: linear-gradient(180deg, rgba(0, 48, 151, 0.8) 50%, rgba(0, 48, 151, 0.85) 100%);
}
#hero-slider .field--name-field-elements-vedette > .field__item:hover .text-content {
transform: translateY(-60%);
}
}