main { background-color: var(--bg-dark);} @media screen and (min-width: 36em) { main .container { max-width: 49.5rem; padding: 0; }}@media screen and (min-width: 48em) { main .container { max-width: 66.71rem; }}@media screen and (min-width: 62em) { main .container { max-width: 86.8rem; } }@media screen and (min-width: 75em) { main .container { max-width: 105.45rem; } }@media screen and (min-width: 87.5em) { main .container { max-width: 107.6rem; } }  .highlights { background-color: var(--bg-main);} .highlights .container { display: flex; flex-direction: column;} .highlights .container > div:not(:last-child) { margin-bottom: 1.5rem;} .highlights .hero { grid-area: hero; display: flex; justify-content: center; background-color: var(--bg-dark); background-image: url('/medias_web/Home/hero.png'); background-position: center; background-repeat: no-repeat; background-size: cover;} .highlights .hero > div { display: flex; flex-direction: column; justify-content: center; align-items: end; padding: 0 2rem;} .highlights .hero h1 { display: inline-block; padding: .25rem .5rem; background-color: var(--white); font-size: 1.8rem; font-weight: 400; text-align: end;} .highlights .hero span { color: var(--color-main); font-weight: 600;} .highlights .hero .btn { text-decoration: none;} @media screen and (max-width: 35.99em) { .highlights .highlighted { margin-bottom: 1.5rem; }} .highlights .highlighted .zoombox { background: linear-gradient(360deg,rgba(0,0,0,1) 0%,rgba(255,255,255,0.3) 33%);} .highlights .details { position: absolute; bottom: 2.5rem; display: flex; flex-direction: column; left: 2.5rem; right: 2.5rem;} .highlights .details p,.highlights .details h2 { display: inline-flex; width: max-content; max-width: 100%; background-color: var(--white); transition: .3s ease-in-out;} .highlights .details h2 { padding: .5rem 1rem; font-size: 1.6rem; color: var(--text-main); margin-bottom: .25rem;} .highlights .details p { bottom: 1rem; padding: .25rem .5rem; font-size: 1.4rem; color: var(--color-main); } @media screen and (min-width: 36em) { .highlights .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; gap: 2rem 2rem; grid-auto-flow: row; grid-template-areas: "hero hero" "hero hero" "highlighted1 highlighted2" "highlighted3 highlighted4"; } .highlighted1 { grid-area: highlighted1; } .highlighted2 { grid-area: highlighted2; } .highlighted3 { grid-area: highlighted3; } .highlighted4 { grid-area: highlighted4; } .highlights .container > div:not(:last-child) { margin-bottom: 0; } .details > h2{ font-size: 2.2rem; }}@media screen and (min-width: 48em) { .details > h2{ font-size: 2.4rem; } .highlights .hero > div { padding: 0 4rem; } .highlights .hero h1 { font-size: 2.4rem; }}@media screen and (min-width: 62em) { .highlights .hero h1 { font-size: 2.6rem; }}@media screen and (min-width: 75em) { .highlights .hero h1 { font-size: 2.8rem; } .highlights .hero > div { padding: 0 6rem; }}@media screen and (min-width: 87.5em) { .highlights .hero h1 { font-size: 3rem; }} main > .container { display: flex; flex-direction: column-reverse;} @media screen and (min-width: 48em) { main > .container { position: relative; display: grid; grid-template-columns: auto 30rem; grid-auto-columns: 1fr; gap: 5rem; grid-auto-flow: row; grid-template-areas: "latest partners"; } .latest { grid-area: latest; } .partners { grid-area: partners; padding-bottom: 16rem; }} .highlights .see-more { width: max-content; margin-top: 1rem; margin-left: auto; color: var(--color-main);}@media screen and (min-width: 36em) { .highlights .see-more { grid-area: highlighted3-end; justify-self: end; }} .highlights .see-more::after { filter: invert(26%) sepia(39%) saturate(6483%) hue-rotate(208deg) brightness(90%) contrast(90%);}  .latest { display: flex; flex-direction: column; } .latest h2 { align-self: baseline;} .latest > article:not(:last-child) { margin-bottom: 4rem;} .latest article { display: flex; flex-direction: column; gap: 2rem; background-color: var(--white); padding: 3rem 2rem; scroll-margin-top: 10rem;} .latest article:not(.imgless){ flex-direction: column;} .latest article.imgless{ flex-direction: column;}  .latest article:not(:last-child) { margin-bottom: 3rem;} @media screen and (min-width: 62em) { .latest article:not(.imgless) { flex-direction: row; }}   .latest article img { justify-self: center;} .latest article .title { grid-area: title; color: var(--color-main);} .latest article .title h3 { text-transform: uppercase; display: inline-block; margin-right: 1rem;} .latest article .title span { display: inline-flex; align-items: center; font-size: 1.4rem;} .latest article .title span a { margin-left: .8rem; display: inline-flex;} .latest article .title img { display: inline-block; max-width: 5rem; max-height: 5rem;} .latest article .text { width: 100%;} .latest article .content { position: relative; max-height: 5rem; overflow: hidden; margin-top: 3rem; padding-bottom: 3rem;} .latest article.opened .content { max-height: max-content; overflow: initial;} .latest article .content > div { word-break: break-word;} .latest article .content a[href^='/actualites'] { position: absolute; bottom: .2rem; right: .2rem; display: inline-block; font-size: 1.3rem; color: var(--color-main); border: none; background-color: var(--white); padding: .2rem; padding-left: 4rem;} .latest article .content ul,.latest article .content ol { padding-left: 2rem; list-style: initial; margin: 0;} .latest article .content ul { list-style: disc;} .latest article .content ol { list-style: decimal;}  .partners { padding-top: 5rem;} .partners .ads { display: grid; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; gap: 2.5rem; grid-auto-flow: row; padding: 1rem; color: #FFF;  min-height: 30%;}.partners .ads .adone { margin-bottom:5px;} @media screen and (min-width: 48em) { .partners { position: -webkit-sticky; position: sticky; top: 0;  height: 100%; } .partners .ads { display: flex; flex-direction: column; gap: 0; } .partners .ad:not(:last-child) { margin-bottom: 1rem; }} .container-socials{ display: flex; flex-direction: row; gap : 5rem; margin-top: 3rem; margin-left: 5rem; align-items: center; justify-content: center;} .fb-share-button{ margin-top: -.4rem;} .container-socials a:not(:last-child) { margin-right: 1.5rem;} .container-socials img { filter: contrast(35%); max-width: 2.5rem;} .all-actus{ margin-bottom: 2rem;}