/**************************************************************/
/* STYLES CSS
/* Copyright 2024 - Mairie de Vaulx-en-Velin
/* Réalisé par le Pôle WEB
/* Service Communication de la Ville de Vaulx-en-Velin
/**************************************************************/

/**************************************************************/
/*  Fontes      */
/**************************************************************/
@font-face{
    font-family: "alexandria";
    font-display: swap;
    src: url('../fonts/alexandria/Alexandria-Regular.woff2'), url('../fonts/alexandria/Alexandria-Regular.woff'), url('../fonts/alexandria/Alexandria-Regular.otf'), url('../fonts/alexandria/Alexandria-Regular.eot'), url('../fonts/alexandria/Alexandria-Regular.ttf');
}
/**************************************************************/
/*  Général  */
/**************************************************************/
:root
{
    --blanc: #FFF;
    --noir: #000;
    
    --bleu_fonce: #004e64;
/*     --bleu_clair: #449ddd; */
    --vert_clair: #22e19b;
    --vert_clair_aa: #338459;
    --vert_clair_m: #57be89;
    --vert_clair_deux: #32A47C;
    --vert_fonce: #1e485c;
/*     --violet_fonce: #673b92; */
    --violet_fonce_aa: #522F74;
/*     --violet_fonce_deux: #662e86; */
    --violet_fonce_trois: #5f2f94;
    --orange_clair: #f7b685;
    --orange_clair_deux: #f9a772;
/*     --orange_clair_trois: #F9E0CD; */
    --rouge: #c50061;
    --rose: #c60a66;
    --grisclair: #c2ccd3;

    --font_titre : "alexandria", sans-serif;
    --font_texte : "alexandria", sans-serif;
}
*
{
    box-sizing:border-box
}
html
{
    margin: 0;
    padding: 0;
}
body
{
    font-family: var(--font_texte);
    margin: 0 auto;
    padding: 0;
    color: var( --bleu_fonce);
    font-size: 1.2rem;
    line-height:1.4;
    background-color: var(--blanc);
    font-weight: 300;
}
main
{
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    min-height: calc(100vh - 14rem);
    overflow: hidden;
}
main > *:not(ul)
{
    padding-right: 1rem;
    padding-left: 1rem;
}
footer
{
    margin: auto;
    padding: 1.5rem 1rem;
    font-size: 1rem;
}
h1, h2, h3, h4, h5, h6
{
    font-family: var(--font_titre);
    font-weight: 900;
}
h1
{
    font-size: min(12vw, 12vh, 3rem);
    line-height: 1.2;
    margin-top: 3rem;
}
h2:first-of-type
{
    line-height: 1.2;
    clear: both;
    color: var(--vert_clair_deux);
    border-bottom: 5px solid var(--vert_clair_deux);
    z-index: 1;
}
h2
{
    position: relative;
    margin: 2rem 0rem;
    padding: 1.5rem 0;
    font-size: min(10vw, 10vh, 2.4rem);
    line-height: 1.2;
    clear: both;
    color: var(--vert_clair_deux);
    border-bottom: none;
    z-index: 1;
}
h2::before
{
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    height: 5px;
    width: 5rem;
    background-color: var(--vert_clair_deux);
}
h2:first-of-type::before
{
    display: none;
}
h3
{
    font-size: min(6vw, 6vh, 1.6rem);
}
p + h2
{
    margin-top: 2.5rem;
}
h2 + *
{
    margin-top: 0;
}
a
{
    color: var(--vert_clair_aa);
    transition: color 0.3s;
    word-break: break-word;
}
a:hover,
a:focus
{
    color: var( --bleu_fonce);
    transition: color 0.3s;
}
a:active
{
    color: var(--jaune);
    transition: color 0s;
}
:not(figure) > a[href^="http"]:not([class*="sans_icone"]):not([href*="avenir-vaulxenvelin.com"])::after
{
    content: ' ';
    display: inline-flex;
    margin: 0 0 0 0.5rem;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/externe.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/externe.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href^="mailto"]:not([class*="sans_icone"]),
:not(figure) > a[href^="tel"]:not([class*="sans_icone"])
{
    display: inline-block;
}
:not(figure) > a[href^="mailto"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/enveloppe-solid.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/enveloppe-solid.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href^="tel"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/phone.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/phone.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="facebook.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/facebook.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/facebook.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="instagram.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/instagram.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/instagram.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="linkedin.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/linkedin.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/linkedin.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="twitter.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/x.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/x.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="youtube.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/youtube.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/youtube.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="www.twitch.tv"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/twitch.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/twitch.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="vimeo.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/vimeo.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/vimeo.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="flickr.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/flickr.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/flickr.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="pinterest.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/pinterest.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/pinterest.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="tiktok.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/tiktok.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/tiktok.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="tumblr.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/tumblr.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/tumblr.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="viadeo.journaldunet.com"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/viadeo.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/viadeo.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href*="linktr.ee"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/linktree.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/linktree.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
:not(figure) > a[href$=".pdf"]:not([class*="sans_icone"])::before
{
    content: ' ';
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
    text-decoration: none;
    min-height: 1rem;
    min-width: 1rem;
    background-color: currentColor;
    mask-image: url('../img/pictos/pdf.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/pdf.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
p
{
    line-height: 1.4;
    margin: 1rem 0;
}
strong
{
    font-family: var(--font_texte);
    font-weight: 900;
}
abbr
{
    cursor: help;
    text-decoration: underline dotted;
}
img
{
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
figure
{
    display: table;
    text-align: center;
    margin: 0;
    max-width: 100%;
}
figcaption
{
    display: table-caption;
    caption-side: bottom;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
}
iframe
{
    aspect-ratio: 16/9;
    max-width: 100%;
    border: none;
}
@supports not (aspect-ratio: 16 / 9) {
    .iframe::before
    {
        float: left;
        padding-top: 56.25%;
        content: ' ';
    }
    .iframe
    {
        position: relative;
    }
    .iframe iframe
    {
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
    }
    .iframe::after {
        display: block;
        content: '';
        clear: both;
    }
}
.iframe
{
    margin: 1rem 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
main ul,
main ol
{
    overflow: hidden;
    padding-left: 2rem;
    padding-right: 1rem;
}
table
{
    border-collapse: collapse;
}
td
{
    border: 1px solid;
    padding: 0.5rem;
}
figure a[href^="http"]:not([href*="avenir-vaulxenvelin.com"])
{
    background-image: none;
}
blockquote
{
    text-align: center;
    font-style: italic;
    position: relative;
    padding: 1rem;
    margin: 1rem;
    color: var(--violet_fonce_aa);
    font-weight: 600;
}
blockquote::before
{
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    background-color: currentColor;
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url('../img/pictos/virgule_o.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/virgule_o.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
blockquote::after
{
    content: ' ';
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: currentColor;
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url('../img/pictos/virgule_f.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/virgule_f.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
hr
{
    width: 100%;
}
main > section > *:first-child
{
    margin-top: 0;
}
/*************************************************/
/*  Classes  */
/*************************************************/
.alignright
{
    float: right;
    margin: 0 0 1rem 1rem;
    margin-right: calc(2vh - 1vw);
    max-width: calc(100% - 1.5rem);
}
.alignleft
{
    float: left;
    margin: 0 1rem 1rem 0;
    margin-left: calc(2vh - 1vw);
    max-width: calc(100% - 1.5rem);
}
/*************************************************/
/*  Navigation  */
/*************************************************/
header
{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1rem 0;
    color: var( --blanc);
    background-color: var(--violet_fonce_trois);
    overflow: hidden;
    transition: height 0.5s;
    z-index: 3000;
}
#logo_avenir_vaulxenvelin
{
    display: flex;
    flex: 1;
    text-decoration: none;
    align-items: center;
    color: inherit;
    z-index: 10;
    max-height: 50vh;
    font-size: 0;
    max-width: 100vw;
    height: 100%;
}
#logo_avenir_vaulxenvelin:hover,
#logo_avenir_vaulxenvelin:focus,
#logo_avenir_vaulxenvelin:hover *,
#logo_avenir_vaulxenvelin:focus *
{
    color: var(--rouge);
    transition: all 0.3s;
}
#logo_avenir_vaulxenvelin h1
{
    margin: 0;
    padding: 0.3rem;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0;
    line-height: 1.2;
    color: var( --bleu_fonce);
    width: 100%;
    height: 100%;
}
#logo_avenir_vaulxenvelin img
{
    width: 200px;
    max-width: 100%;
}
#bouton_menu
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    letter-spacing: -0.03rem;
    color: var(--blanc);
    width: 5.8rem;
    height: 2.5rem;
    position: fixed;
    top: 0;
    right: 0;
    border: none;
    cursor: pointer;
    z-index: 2000;
    margin: 0;
    padding: 0.4rem;
    background: none;
    font-family: var(--font_texte);
    font-weight: 300;
    transition: color 0.3s;
}
.ouvert #bouton_menu
{
    color: var(--vert_fonce);
}
header[data-stuck="true"] #bouton_menu
{
    color: var(--bleu_fonce);
    background-color: var(--blanc);
}
#bouton_menu svg
{
    max-width: 100%;
    max-height: 100%;
    width: 2rem;
    height: 2rem;
}
#bouton_menu:hover,
#bouton_menu:focus
{
    color: var(--orange_clair_deux);
    transition: color 0.3s;
}
.ouvert #bouton_menu:hover,
.ouvert #bouton_menu:focus
{
    color: var(--rose);
    transition: color 0.3s;
}
#nav_principale
{
    font-family: var(--font_titre);
    font-weight: 300;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    max-width: min(1200px, 100vw);
    margin: 0 auto;
}
#conteneur_menu
{
    position: fixed;
    z-index: 1000;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 100%;
    padding-bottom: 3rem;
    background-color: var(--blanc);
    overflow: auto;
    background-image: url('../img/logos/logo-coeur-avenir-vaulxenvelin.svg');
    background-repeat: no-repeat;
    background-position: 80% center;
    background-size: 30%;
    transition: right 0.3s ease-out;
}
#menu_principal
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    gap: 1rem;
    list-style-type: none;
    margin: 0;
    padding: 4.5rem 0 2rem 0;
    background-color: var(--blanc);
    overflow: auto;
    width: -moz-fit-content;
    width: fit-content;
}
.ouvert #conteneur_menu
{
    right: 0;
    --pad_left: calc(10vw - 10vh);
    padding-left: max(0rem, var(--pad_left));
    transition: right 0.3s ease-out;
}
#conteneur_menu h2
{
    font-size: min(6vw, 6vh, 1.6rem);
    font-weight: 300;
    color: var(--bleu_fonce);
    border: none;
    margin: 0;
    padding: 0.3rem 0.5rem;
}
#conteneur_menu .socials
{
    font-size: 0;
    justify-content: center;
    margin-bottom: 5rem;
    padding: 0.3rem 0.5rem;
    width: -moz-fit-content;
    width: fit-content;
    min-width: min(360px, 100vw);
}
#conteneur_menu .socials li
{
    width: 3rem;
    height: 3rem;
    background-color: var(--violet_fonce_trois);
    border-radius: 50%;
}
#conteneur_menu .socials li:hover,
#conteneur_menu .socials li:focus
{
    background-color: var(--rose);
    transition: background-color 0.5s;
}
#conteneur_menu .socials a
{
    mask-size: 1.6rem;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 1.6rem;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
/*******************************************************/
@keyframes bouton_1_ouvrir
{
    0%{transform: scaleX(1);}
    25%{transform: scaleX(0.2);}
    50%{transform: translateY(200px) scaleX(0.2);}
    75%{transform: rotate(45deg) translateY(200px) scaleX(0.2);}
    100%{transform: rotate(45deg) translateY(200px) scaleX(1);}
}
@keyframes bouton_2_ouvrir
{
    0%{transform: scaleX(1);}
    50%{transform: scaleX(0.2);}
    100%{transform: rotate(45deg) scaleX(0.2);}
}
@keyframes bouton_3_ouvrir
{
    0%{transform: scaleX(1);}
    25%{transform: scaleX(0.2);}
    50%{transform: translateY(-200px) scaleX(0.2);}
    75%{transform: rotate(-45deg) translateY(-200px) scaleX(0.2);}
    100%{transform: rotate(-45deg) translateY(-200px) scaleX(1);}
}
@keyframes bouton_1_fermer
{
    0%{transform: rotate(45deg) translateY(200px) scaleX(1);}
    25%{transform: rotate(45deg) translateY(200px) scaleX(0.2);}
    50%{transform: translateY(200px) scaleX(0.2);}
    75%{transform: scaleX(0.2);}
    100%{transform: scaleX(1);}
}
@keyframes bouton_2_fermer
{
    0%{transform: rotate(45deg) scaleX(0.2);}
    50%{transform: scaleX(0.2);}
    75%{transform: scaleX(0.2);}
    100%{transform: scaleX(1);}
}
@keyframes bouton_3_fermer
{
    0%{transform: rotate(-45deg) translateY(-200px) scaleX(1);}
    25%{transform: rotate(-45deg) translateY(-200px) scaleX(0.2);}
    50%{transform: translateY(-200px) scaleX(0.2);}
    75%{transform: scaleX(0.2);}
    100%{transform: scaleX(1);}
}
.ouvert #bouton_menu rect:nth-of-type(1)
{
    transform-origin: center center;
    animation: 0.3s linear bouton_1_ouvrir;
    animation-fill-mode: forwards;
}
.ouvert #bouton_menu rect:nth-of-type(2)
{
    transform-origin: center center;
    animation: 0.15s linear bouton_2_ouvrir;
    animation-fill-mode: forwards;
}
.ouvert #bouton_menu rect:nth-of-type(3)
{
    transform-origin: center center;
    animation: 0.3s linear bouton_3_ouvrir;
    animation-fill-mode: forwards;
}
.ferme #bouton_menu rect:nth-of-type(1)
{
    transform-origin: center center;
    animation: 0.3s linear bouton_1_fermer;
    animation-fill-mode: forwards;
}
.ferme #bouton_menu rect:nth-of-type(2)
{
    transform-origin: center center;
    animation: 0.3s linear bouton_2_fermer;
    animation-fill-mode: forwards;
}
.ferme #bouton_menu rect:nth-of-type(3)
{
    transform-origin: center center;
    animation: 0.3s linear bouton_3_fermer;
    animation-fill-mode: forwards;
}
/*******************************************************/
#menu_principal a
{
    text-decoration: none;
}
#menu_principal > li
{
    text-align: left;
    padding: 0.3rem 0.5rem;
}
#menu_principal > li > a
{
    position: relative;
    text-align: center;
    font-size: min(8vw, 8vh, 1.6rem);
    cursor: pointer;
    background-color: transparent;
    color: var( --bleu_fonce);
    font-family: var(--font_titre);
    transition: color 0.3s, background-color 0.3s;
}
#menu_principal > li > a::before,
.liste_pages a::before
{
    content: ' ';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var( --bleu_fonce);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}
#menu_principal > li > a:hover::before,
#menu_principal > li > a:focus::before,
.liste_pages a:hover::before,
.liste_pages a:focus::before
{
    transform-origin: left;
    transform: scaleX(1);
}
#menu_principal > li > ul
{
    list-style-type: none;
    margin: 0;
    padding: 1rem 0 0 0;
    overflow: hidden;
    background-color: transparent;
}
#menu_principal  a:hover + ul,
#menu_principal  a:focus + ul,
#menu_principal > li:hover > ul,
#menu_principal > li:focus > ul
{
    height: auto;
    z-index: 10;/*IE*/
}
#menu_principal > li:focus-within ul
{
    height: auto;
}
.sub-menu li
{
    border-bottom: 1px solid var(--grisclair);
    font-size: min(7vw, 7vh, 1.4rem);
}
#menu_principal ul a
{
    padding: 0.5rem 2rem;
    display: block;
}
#menu_principal ul a:hover,
#menu_principal ul a:focus
{
    background-color: var(--rose);
    color: var(--blanc);
}
#nav_banniere
{
    position: absolute;
    top: -5rem;
    left: 50%;
}
#nav_banniere ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav_banniere li
{
    display: inline-block;
}
#nav_banniere a
{
    display: flex;
    position: absolute;
    z-index: 1000;
    font-size: 1rem;
    width: 12rem;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 1rem 1rem;
    background-color: var(--blanc);
    padding: 0.5rem;
}
#nav_banniere a:hover,
#nav_banniere a:focus
{
    top: 5rem;
    outline: none;
}
/*************************************************/
/*  Barre header   */
/*************************************************/
#barre_header
{
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 2.5rem;
    width: 100%;
    justify-content: left;
    padding: 0 5rem 0 0;
    background-color: transparent;
    transition: background-color 0.3s;
}
header[data-stuck="true"] #barre_header
{
    background-color: var(--blanc);
    transition: background-color 0.3s;
}
header[data-stuck="true"]
{
    height: 3rem;
    transition: height 0.5s;
}
#nav_principale h1
{
    flex-shrink: 0;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 10;
    transition: height 0.5s;
}
#nav_principale blockquote
{
    color: var(--blanc);
    max-width: 500px;
}
header[data-stuck="true"] #nav_principale h1
{
    position: fixed;
    height: 2.5rem;
    overflow: hidden;
    transition: height 0.5s;
}
#nav_principale h1 img:nth-of-type(1)
{
    display: initial;
}
header[data-stuck="true"] #nav_principale img:nth-of-type(1)
{
    display: none;
}
#nav_principale h1 img:nth-of-type(2)
{
    display: none;
}
header[data-stuck="true"] #nav_principale img:nth-of-type(2)
{
    display: initial;
    width: unset;
    padding: 0.3rem;
    animation-name: latido;
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
header + main
{
    margin-top: 3rem;
}
header[data-stuck="true"] + main
{
    margin-top: 14rem;
}
@keyframes latido
{
    0% {padding: 0.3rem;}
    30% {padding: 0.2rem;}
    100% {padding: 0.2rem;}
}
/*************************************************/
/*  Socials  */
/*************************************************/
.socials
{
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.socials a
{
    background-color: var(--blanc);
    border-radius: 50%;
    padding: 0.7rem;
    width: 100%;
    height: 100%;
    transition: background-color 0.5s;
}
#footer .socials li
{
    background-color: var(--blanc);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    color: var( --bleu_fonce);
}
#footer .socials li:hover,
#footer .socials li:focus
{
    background-color: var(--rose);
}
#footer .socials a
{
    background-color: var(--violet_fonce_trois);
    text-decoration: none;
    font-size: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    mask-size: 1.6rem;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 1.6rem;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.socials a:hover,
.socials a:focus
{
    transition: background-color 0.5s;
}
#footer .socials a:hover,
#footer .socials a:focus
{
    background-color: var(--blanc);
    transition: background-color 0.5s;
}
.socials a:active
{
    background-color: var(--orange_clair_deux);
}
#footer .socials
{
    gap: 2rem;
    margin: 1rem 0;
    min-width: min(100vw, calc((1vh - 1vw) * 340));
}
.socials li
{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var( --bleu_fonce);
}
.socials li a[href^="http"]:not([href*="avenir-vaulxenvelin.com"]):not([class*="bouton"])::after,
.socials li a[href^="http"]:not([href*="avenir-vaulxenvelin.com"]):not([class*="bouton"])::before
{
    content: none;
    margin: 0;
}
/*************************************************/
/*  Recherche   */
/*************************************************/
.search-form
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 1rem 0 2rem;
}
.search-form label
{
    font-size: 0;
    width: 0;
    overflow: hidden;
}
.search-field
{
    border-radius: 0.3rem;
    background-color: var(--blanc);
    height: 2rem;
    padding: 0.5rem;
    border: 1px solid var(--grisclair);
    font-size: 1.2rem;
    width: 80%;
}
.search-field:focus
{
    background-color: #ffebdb;
}
.search-field::placeholder
{
    font-style: italic;
    padding-right: 0.5rem;
}
.btn-search
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    margin: 0;
    border-radius: 2.8rem;
    border: none;
    width: 2rem;
    transition: background-color 0.5s;
    cursor: pointer;
    height: 2rem;
    padding: 0 0.2rem;
}
.btn-search:hover,
.btn-search:focus
{
    background-color: var(--violet_fonce_trois);
    color: var(--blanc);
    transition: all 0.5s;
}
.btn-search svg
{
    max-height: 1.3rem;
}
.liste_recherche
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 0;
    list-style-type: none;
    padding: 3rem 0 0 0;
    overflow: visible;
}
.liste_recherche li
{
    display: flex;
    padding-top: 1rem;
    padding-bottom: 2rem;
    min-width: min(360px, 100vw);
}
.liste_recherche article
{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.liste_recherche h2,
.liste_recherche h3
{
    border: none;
    font-size: 2.2rem;
    line-height: 1.2;
    position: relative;
    padding: 1rem 1.5rem;
    margin: 0 1rem;
    flex-basis: 100%;
}
.liste_recherche h2 a,
.liste_recherche h3 a
{
    text-decoration: none;
    color: var(--bleu_fonce);
}
.liste_recherche h2 a:hover,
.liste_recherche h2 a:focus,
.liste_recherche h3 a:hover,
.liste_recherche h3 a:focus
{
    color: var(--rouge);
}
.liste_recherche figure
{
    display: block;
    margin: 0 auto;
    line-height: 0;
    flex-basis: 20%;
    flex-grow: 2;
    min-width: 220px;
}
.liste_recherche div
{
    flex-basis: 70%;
    min-width: min(360px, 100vw);
    max-width: 100%;
    flex-grow: 2;
}
.liste_recherche img
{
    width: 100%;
}
.date_publication
{
    font-size: 1rem;
    display: block;
}
.liste_recherche p
{
    padding: 0 0.5rem;
}
.liste_recherche h2::before,
.liste_recherche h3::before
{
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--vert_clair);
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url('../img/pictos/virgule_ouvrante.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/virgule_ouvrante.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.liste_recherche li:nth-of-type(4n-3)
{
    background-color: var(--vert_fonce);
    color: var(--blanc);
}
.liste_recherche li:nth-of-type(4n-3) h2::before,
.liste_recherche li:nth-of-type(4n-3) h3::before
{
    background-color: var(--blanc);
}
.liste_recherche li:nth-of-type(4n-3) a
{
    color: var(--blanc);
}
.liste_recherche li:nth-of-type(4n-2)
{
    background-color: var(--violet_fonce_trois);
    color: var(--blanc);
}
.liste_recherche li:nth-of-type(4n-2) h2::before,
.liste_recherche li:nth-of-type(4n-2) h3::before
{
    background-color: var(--orange_clair_deux);
}
.liste_recherche li:nth-of-type(4n-2) a
{
    color: var(--orange_clair_deux);
}
.liste_recherche li:nth-of-type(4n-1)
{
    background-color: var(--rose);
    color: var(--blanc);
}
.liste_recherche li:nth-of-type(4n-1) h2::before,
.liste_recherche li:nth-of-type(4n-1) h3::before
{
    background-color: var(--blanc);
}
.liste_recherche li:nth-of-type(4n-1) a
{
    color: var(--blanc);
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.2s 0.2s, text-decoration-thickness 0.2s;
}
.liste_recherche li:nth-of-type(4n-1) a:hover,
.liste_recherche li:nth-of-type(4n-1) a:focus
{
    text-decoration-color: var(--orange_clair_deux);
    text-decoration-thickness: 3px;
    transition: text-decoration-color 0.2s, text-decoration-thickness 0.2s 0.2s;
}
.liste_recherche li:nth-of-type(4n)
{
    background-color: var(--orange_clair);
    color: var(--vert_fonce);
}
.liste_recherche li:nth-of-type(4n) h2::before,
.liste_recherche li:nth-of-type(4n) h3::before
{
    background-color: var(--vert_fonce);
}
.liste_recherche li:nth-of-type(4n) a
{
    color: var(--vert_fonce);
}
/*************************************************/
/*  Section contenu accueil   */
/*************************************************/
.contenu_accueil
{
    padding-top: 0;
    padding-bottom: 3rem;
}
/*************************************************/
/*  Section blocs accueil   */
/*************************************************/
.blocs_accueil
{
    padding: 0;
}
.blocs_accueil > ul
{
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
}
.blocs_accueil li
{
    margin: 0 0 4rem 0;
    min-width: min(360px, 100vw);
    flex-basis: calc((100% - 4rem) / 3);
}
.blocs_accueil a
{
    text-decoration: none;
    color: var(--bleu_fonce);
    display: inline;
    z-index: 1000;
}
.blocs_accueil a:hover,
.blocs_accueil a:focus
{
    color: var(--rouge);
}
.blocs_accueil h2,
.blocs_accueil h2:first-of-type,
.actus h2,
footer h2,
footer h2:first-of-type
{
    padding: 1rem 1.5rem;
    margin: 0 0.5rem;
    line-height: 1.2;
    border: none;
    color: inherit;
    z-index: 1000;
    font-size: min(12vw, 12vh, 2.4rem);
}
.blocs_accueil h2::before,
.actus h2::before,
footer h2::before,
footer h2:first-of-type::before
{
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--vert_clair);
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url('../img/pictos/virgule_ouvrante.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/virgule_ouvrante.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.blocs_accueil figure
{
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
}
.blocs_accueil img
{
    width: 100%;
}
.blocs_accueil li,
.liste_actus li
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding-top: 0.5rem;
}
.blocs_accueil li:hover .liste_pages,
.blocs_accueil li:focus .liste_pages,
.liste_actus li:hover .resume_actu,
.liste_actus li:focus .resume_actu
{
    bottom: 0;
    transition: bottom 0.5s;
}
.resume_actu
{
    color: var(--bleu_fonce);
}
.liste_pages,
.resume_actu
{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: -100%;
    transition: bottom 0.5s;
    background-color: var(--blanc);
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 2rem 0 0 0;
}
.liste_pages::after
{
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../img/logos/logo-coeur-avenir-vaulxenvelin.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 10;
}
.liste_pages li
{
    margin: 0;
    padding: 0.3rem 0;
    flex-basis: unset;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: baseline;
}
.liste_pages li::before
{
    content: ' ';
    display: inline-block;
    background-image: url('../img/logos/logo-coeur-avenir-vaulxenvelin.svg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}
/*************************************************/
/*  Sections pages   */
/*************************************************/
section
{
    padding-top: 2rem;
    padding-bottom: 2rem;
    clear: both;
}
 section:nth-of-type(even):not(.actus):not(.blocs_accueil)
{
    background-color: var(--vert_clair_m);
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: var(--noir);
}
 section:nth-of-type(even):not(.actus):not(.blocs_accueil) h2
{
    color: var(--bleu_fonce);
}
 section:nth-of-type(even):not(.actus):not(.blocs_accueil) h2::before
{
    background-color: var(--blanc);
}
 section:nth-of-type(even):not(.actus):not(.blocs_accueil) h2:first-of-type
{
    border-color: var(--blanc);
}
 section:nth-of-type(even):not(.actus):not(.blocs_accueil) a
{
    color: var(--bleu_fonce);
}
 section:nth-of-type(even):not(.actus):not(.blocs_accueil) a:hover,
 section:nth-of-type(even):not(.actus):not(.blocs_accueil) a:focus
{
    color: var(--violet_fonce_aa);
}
section ul,
section ol
{
    padding-left: 2rem;
}
/*************************************************/
/*  Archive actus   */
/*************************************************/
.liste_actus
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2rem;
    list-style-type: none;
    padding: 3rem 0 0 0;
    overflow: visible;
}
.liste_actus > li
{
    padding-top: 1rem;
    padding-bottom: 0;
    min-width: min(360px, 100vw);
    flex-basis: calc((100% - 4rem) / 3);
}
.liste_actus article
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.liste_actus h2,
.liste_actus h3
{
    border: none;
    font-size: 2.2rem;
    line-height: 1.2;
    position: relative;
    padding: 1rem 1.5rem;
    margin: 0 1rem;
    z-index: 1000;
}
.liste_actus a
{
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness 0.3s;
}
.liste_actus a:hover,
.liste_actus a:focus
{
    text-decoration-thickness: 3px;
    transition: text-decoration-thickness 0.3s;
}
.liste_actus h2 a,
.liste_actus h3 a
{
    text-decoration: none;
    color: var(--bleu_fonce);
}
.liste_actus h2 a:hover,
.liste_actus h2 a:focus,
.liste_actus h3 a:hover,
.liste_actus h3 a:focus
{
    color: var(--rouge);
}
.liste_actus figure
{
    margin: 0 auto;
    width: 100%;
    line-height: 0;
}
.liste_actus img
{
    width: 100%;
}
.liste_actus p
{
    padding: 2rem;
    margin: 0;
}
.resume_actu a
{
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.liste_actus h2::before,
.liste_actus h3::before
{
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--vert_clair);
    display: block;
    width: 2rem;
    height: 2rem;
    mask-image: url('../img/pictos/virgule_ouvrante.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('../img/pictos/virgule_ouvrante.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.liste_actus > li:nth-child(4n-3),
.liste_actus  > li:nth-child(4n-3) .resume_actu
{
    background-color: var(--vert_fonce);
    color: var(--blanc);
}
.liste_actus > li:nth-child(4n-3) h2::before,
.liste_actus > li:nth-child(4n-3) h3::before
{
    background-color: var(--blanc);
}
.liste_actus > li:nth-child(4n-3) a
{
    color: var(--blanc);
}
.liste_actus > li:nth-child(4n-2),
.liste_actus > li:nth-child(4n-2) .resume_actu
{
    background-color: var(--violet_fonce_trois);
    color: var(--blanc);
}
.liste_actus > li:nth-child(4n-2) h2::before,
.liste_actus > li:nth-child(4n-2) h3::before
{
    background-color: var(--orange_clair_deux);
}
.liste_actus > li:nth-child(4n-2) a
{
    color: var(--orange_clair_deux);
}
.liste_actus > li:nth-child(4n-1),
.liste_actus > li:nth-child(4n-1) .resume_actu
{
    background-color: var(--rose);
    color: var(--blanc);
}
.liste_actus > li:nth-child(4n-1) h2::before,
.liste_actus > li:nth-child(4n-1) h3::before
{
    background-color: var(--blanc);
}
.liste_actus > li:nth-child(4n-1) a
{
    color: var(--blanc);
}
.liste_actus > li:nth-child(4n),
.liste_actus > li:nth-child(4n) .resume_actu
{
    background-color: var(--orange_clair);
    color: var(--vert_fonce);
}
.liste_actus > li:nth-child(4n) h2::before,
.liste_actus > li:nth-child(4n) h3::before
{
    background-color: var(--vert_fonce);
}
.liste_actus > li:nth-child(4n) a
{
    color: var(--vert_fonce);
}
/*************************************************/
/*  Section actus   */
/*************************************************/
.actus
{
    padding: 0;
}
.actus .liste_actus
{
    padding: 0;
}
.actus h2
{
    border: none;
}
.actus h2 a
{
    color: var(--bleu_fonce);
    text-decoration: none;
}
.actus h2 a:hover,
.actus h2 a:focus
{
    color: var(--rouge);
}
.actus h3
{
    font-size: 1.6rem;
}
/*************************************************/
/*  Fil d'Ariane   */
/*************************************************/
#ariane
{
    font-size: 1.2rem;
    margin: 0.5rem 1rem 1rem 0.5rem;
    padding: 0 0.5rem;
}
#ariane ol
{
    display: inline;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#ariane li
{
    margin-right: 0.5rem;
    display: inline;
}
#ariane li::after
{
    content: ">";
    margin-left: 0.5rem;
}
#ariane li:last-child::after
{
    content: "";
}
/*************************************************/
/*  Boutons   */
/*************************************************/
.bouton
{
    display: inline-block;
    background-color: var(--violet_fonce_trois);
    color: var(--blanc);
    border-radius: 2rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: min(6vw, 6vh, 1.6rem);
    transition: background-color 0.3s, color 0.3s;
}
.bouton:hover,
.bouton:focus
{
    background-color: var(--orange_clair_deux);
    color: var(--noir);
    transition: background-color 0.3s, color 0.3s;
}
/*************************************************/
/*  Pagination   */
/*************************************************/
.pagination ul
{
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
}
.pagination li
{
    margin: 0 0.5rem;
}
.pagination li a
{
    padding: 0.5rem;
}
.pagination li a:hover,
.pagination li a:focus
{
    background-color: var(--grisclair);
}
/*************************************************/
/*  Footer   */
/*************************************************/
#footer
{
    font-family: var(--font_titre);
    color: var( --bleu_fonce);
}
#menu-footer-menu
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style-type: none;
    padding: 0 max(0rem, calc(1vh - 1vw));
    font-size: 1rem;
}
#menu-footer-menu nav a,
#menu-footer-menu nav a:hover,
#menu-footer-menu nav a:focus
{
    color: inherit;
    text-decoration: none;
    position: relative;
    padding: 0.2rem 0;
}
#footer_logo_avenir_vaulxenvelin
{
    color: var(--blanc);
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 0;
}
#footer_logo_avenir_vaulxenvelin svg
{
    position: absolute;
    top: -10rem;
}
.socials a::after,
.socials a::before,
figure a::after,
figure a::before
{
    content: '';
    margin: 0;
    display: none;
}
#footer a:hover,
#footer a:focus
{
    color: var(--rouge);
    transition: color 0.3s;
}
#footer > a:hover,
#footer > a:focus
{
    transform: unset;
}
#pre_footer
{
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 3rem auto;
    justify-content: space-between;
    padding: 0 min(0rem, calc(5vw - 7vh));
}
#pre_footer strong
{
    font-size: 1.2rem;
}
#menu_footer
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
    flex-wrap: wrap;
}
#menu_footer a
{
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    color: var( --blanc);
    transition: color 0.3s, background-color 0.3s;
    position: relative;
}
#menu_footer a:hover,
#menu_footer a:focus
{
    color: var( --blanc);
}
#menu_footer a::before
{
    content: ' ';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var( --blanc);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}
#menu_footer a:hover::before,
#menu_footer a:focus::before
{
    transform-origin: left;
    transform: scaleX(1);
}
#barre_footer
{
    background-color: var(--violet_fonce_trois);
    position: absolute;
    left: 0;
    width: 100%;
}
/*************************************************/
/*  Trobinoscope   */
/*************************************************/

.trombinoscope
{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 0.5rem;
    justify-content: space-around;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.trombinoscope li
{
    flex-basis: 170px;
}
.trombinoscope figure
{
    overflow: hidden;
}
.trombinoscope figcaption
{
    position: relative;
    z-index: 10;
    background-color: var(--blanc);
    padding: 0.3rem 0.2rem;
}
.trombinoscope img
{
    display: flex;
    transition: transform 0.3s;
}
.trombinoscope img:hover,
.trombinoscope img:focus
{
    transform: scale(1.2);
    transition: transform 0.3s;
}