html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

:root {
    --vert: #adce61;
    --bleu: #95b6c7;
    --gris: #888b8e;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    z-index: 0;
    margin: 0;
    background-color: #fff;
    color: #0e0e0e;
    font-family: var(--Gotham);
    text-wrap-style: pretty;
}

a,
button,
input,
[icon] {
    -webkit-tap-highlight-color: transparent;
    transition: all 0.25s ease-in-out;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    margin: 0 auto;
    width: min(90%, 1550px);
}

.scroll-watcher {
    position: fixed;
    z-index: 1000;
    height: 6px;
    width: 0%;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--vert);
}

@supports (animation-timeline: scroll()) {
    .scroll-watcher {
        animation: scroll-watcher linear;
        animation-timeline: scroll();
    }

    @keyframes scroll-watcher {
        to {
            width: 100%;
        }
    }
}

.new-url-banner {
    border-bottom: 1px solid rgb(141, 183, 201);
    padding: 0.75rem 1.25rem;
    background-color: rgb(208, 225, 233);
    font-size: var(--14px);
    color: #1f3b5c;
    text-align: center;
}

.new-url-banner .info-icon {
    font-size: var(--18px);
    vertical-align: -1px;
}

.new-url-banner a {
    color: #005fcc;
    font-weight: bold;
    text-decoration: none;
}

header .utility-bar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--10pxrem);
    margin-bottom: 0.5rem;
    padding-top: 0.75rem;
}

header .utility-bar li {
    display: contents;
}

header .utility-bar li a,
header .utility-bar li a:hover {
    display: flex;
    align-items: center;
}

header .utility-bar a {
    font-size: 34px;
    cursor: pointer;
}

header .utility-bar a[icon="home1"] {
    color: #0178c1;
}

header .utility-bar a[icon="email1"] {
    color: #0178c1;
}

header .utility-bar a[icon="facebook1"] {
    color: #324b7f;
}

header .utility-bar a[icon="linkedin1"] {
    color: #025a84;
}

header .utility-bar a[icon="youtube1"] {
    color: #e42f28;
}

header .utility-bar a[icon]:hover {
    color: var(--vert);
}

header .client-banner {
    padding-bottom: 1.5rem;
}

header .client-banner .logos {
    display: flex;
}

header .client-banner .logos a {
    display: contents;
}

header .client-banner .logos img {
    height: 5.5rem;
    width: auto;
}

main .hero {
    display: flex;
    align-items: center;
    padding: 10% 0;
    background-image: url(/client/serex/portail/assets/background_portail.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

main .hero .container {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

main .hero .container h1 {
    margin: 0;
    font-size: calc(var(--64px) + var(--32px));
    font-weight: 400;
    line-height: 0.75;
}

main .hero .container h1 span {
    color: var(--vert);
    font-size: 67%;
    font-weight: 700;
}

main > article {
    padding-block: 1.5rem 2.5rem;
}

main > article h2 {
    margin: 0;
    font-size: var(--32px);
    font-weight: 700;
    text-align: center;
}

main .no-content {
    margin-block: 0 -1rem;
    padding-block: 0.625rem;
    font-size: var(--18px);
    text-align: center;
}

main .archives {
    background-color: var(--gris);
    color: #fff;
}

main > article .cards {
    margin: 1.5rem auto 0;
}

main .cards {
    --gap: 1.5rem;
    --columns: 3;
    --breakpoint: 370px;
    --max-width: 550px;

    display: grid;

    grid-template-columns: repeat(auto-fill,
            minmax(min(100%,
                    max(var(--breakpoint),
                        calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns)))),
                1fr));
    gap: var(--gap);
}

main .card {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: min(var(--max-width, 100%), 100%);
}

main .card-hero {
    position: relative;
    display: flex;
    color: #fff;
    overflow: hidden;
}

main .card .card-hero a img {
    object-fit: cover;
    object-position: top;
    border: 0;
    height: 100%;
    width: 100%;
}

main .card .card-hero .status-live {
    position: absolute;
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 2rem;
    user-select: none;
    pointer-events: none;
}

main .card .card-hero .status-live img {
    height: 1em;
    width: auto;
    animation: livePuckOpacity 2s infinite ease-in-out;
}

main .card .card-hero .status-live span {
    color: #f00;
    font-size: 0.6em;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

@keyframes livePuckOpacity {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

main .card .card-hero .icons-wrapper {
    position: absolute;
    display: flex;
    column-gap: 1rem;
    bottom: 0.75rem;
    right: 0.75rem;
    pointer-events: none;
}

main .card .card-hero .icons-wrapper img {
    height: 5rem;
    width: auto;
    user-select: none;
}

main .card .card-content {
    display: flex;
    flex-direction: column;
    margin-block: 1.5rem;
}

main .card .card-content .type {
    margin-bottom: var(--14pxrem);
    font-weight: 600;
    text-transform: uppercase;
}

main .card .card-content .meta {
    margin-bottom: var(--14pxrem);
}

main .card .card-content .meta span {
    font-weight: 600;
}

main .card .card-content .title {
    font-size: var(--20px);
    font-weight: 600;
}

main .card .card-content .subtitle {
    font-size: var(--14px);
}

main .card .button-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

main .card .button-wrapper .access-badge {
    font-size: var(--18px);
}

main .card .button-wrapper a {
    padding: var(--10pxrem) 4rem;
    width: max-content;
    background-color: var(--vert);
    color: #fff;
    font-family: inherit;
    font-size: var(--16px);
    font-weight: 600;
    text-transform: uppercase;
}

main .card .button-wrapper a:hover {
    background-color: var(--bleu);
}

section.champs-intervention {
    padding-block: 1.5rem;
}

section.champs-intervention h2 {
    margin-block: 0 3rem;
    font-size: var(--32px);
    font-weight: 700;
    text-align: center;
}

section.champs-intervention .images-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-block: 1.5rem;
}

section.champs-intervention .images-wrapper img {
    height: 8.313rem;
    width: auto;
}

footer {
    font-family: Arial, Helvetica, sans-serif;
}

footer .supports {
    background-color: #f4f4f4;
}

footer .supports ul {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    padding: 1.25rem 0;
    max-width: 600px;
    text-align: center;
}

footer .supports li {
    flex: 1;
    padding: 1.563rem 0;
    font-size: var(--13px);
}

footer .supports a {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

footer .supports figure {
    margin: 0;
    width: fit-content;
}

footer .supports .icon {
    height: var(--50px);
    width: var(--50px);
}

footer .supports figcaption {
    margin-top: 0.5rem;
}

footer .supports .icon,
footer .supports figcaption {
    color: #58585a;
    transition: all 0.25s ease-in-out;
}

footer .supports a:hover .icon,
footer .supports a:hover figcaption {
    color: var(--bleu);
}

footer .legal {
    padding: 1.5rem 0;
    background-color: var(--gris);
    font-size: var(--13px);
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 768px) {
    main .hero .container h1 {
        font-size: var(--64px);
    }
}

@media screen and (max-width: 620px) {
    header .utility-bar {
        justify-content: center;
        margin-top: 0.5rem;
        margin-right: auto;
        margin-left: auto;
        max-width: 300px;
    }

    header .utility-bar a {
        font-size: 36px;
    }

    header .client-banner .logos {
        justify-content: center;
        margin-top: 1.25rem;
    }
}