:root {
    --max-w: 1600px;
    --text-max-w: 68ch;
    --clr-orange: #f7a600;
    --clr-jaune: #FFC921;
    --clr-jaune-light: #ffda64;
    --clr-rouge: #C63223;
    --clr-bleu-vert: #197A86;
    --ballon-fall-timing-in-seconds: 6;
    --default-transition: all .2s ease-in-out;
}

* {
    box-sizing: border-box;
}

::selection {
    background-color: var(--clr-jaune);
    color: black;
}

*:focus {
    outline:3px solid var(--clr-jaune);
    outline-offset: 3px;
}

html {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    background-color: white;
    line-height: 1.5;
    font-size: 1.2rem;
    font-family: system-ui, sans-serif;
    color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 1.5em;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

h1 {
    font-size: 2rem;
}

h1 small {
    display: block;
    margin: 0.1em 0;
    font-size: 75%;
}

h2 {
    font-size: 1.8rem;
    padding:0 1rem;
}

h3 {
    font-size: 1.4rem;
}

p {
    margin: 0 0 1.5em;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--clr-jaune);
    transition: var(--default-transition);
}

a:hover,
a:focus-inline {
    text-decoration: none;
    color: var(--clr-jaune);
}

.light {
    font-weight: 400;
}

.text-center {
    text-align: center;
}

.text-italic {
    font-style: italic;
}

.text-big {
    font-size: 1.6rem;
}
.text-uppercase {
    text-transform: uppercase;
}

.mw {
    max-width: var(--max-w);
    margin-right: auto;
    margin-left: auto;
}

.text-mw {
    max-width: var(--text-max-w);
}


/************************************************/
/******************** CUSTOM ********************/
/************************************************/

#ballon {
    position: fixed;
    bottom:calc(100vh + 250px);
    bottom:calc(100lvh + 250px);
    right: 0;
    padding:20px;
    z-index: 1050;
    transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
}

#ballon:focus {
    outline: 0;
}
#ballon:active {
    transform: translateY(-60px);
}

#ballon.scrolled {
    animation: fall calc(var(--ballon-fall-timing-in-seconds) * 1s) cubic-bezier(.47,1.64,.41,.8) forwards;
}

@media (any-hover: hover) {
    #ballon.bottom:hover {
        transform: translateY(-60px);
    }
}

#ballon img {
    pointer-events: none;
}

.gradient,
#footer {
    position: relative;
    z-index: 20;
}

.content-section {
    width: 100%;
}

.fanions {
    background: url(../img/fanions.png) repeat-x left top;
}

.container {
    position: relative;
    padding: 130px 1rem;
}

.tooltip {
    min-width: 120px !important;
    width: auto !important;
}

section:nth-child(even) {
    background: var(--clr-rouge);
    color: white;
}

section:nth-child(odd) {
    background: var(--clr-bleu-vert);
    color: white;
}


/******************* HEADER ********************/

.site-header {
    background-color: var(--clr-jaune);
    color:black;
}

@media (min-width:1180px) {
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        box-shadow: 0 0 10px -3px rgba(0,0,0,0.7);
    }
}

.site-header-wrapper {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    max-width: var(--max-w);
    margin:0 auto;
    padding: 1rem 0;
    transition: var(--default-transition);
}

.site-header-wrapper.scrolled {
    padding:0.2rem;
}

.site-header a {
    display: inline-block;
    color:black;
    text-transform: uppercase;
    text-decoration: none;
    padding:0.3em 0.5em;
}

.site-header a:hover,
.site-header a:focus-visible {
    background-color:var(--clr-jaune-light);
}

.site-title {
    margin: 0 auto;
    line-height: 1;
    font-size: 1.6rem;
}
.site-title:focus {
    outline-offset: 0;
}
.site-title > * {
    pointer-events: none;
}

.site-nav {
    margin: 0 auto;
}

.site-nav ul {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style:"";
    margin: 0;
    padding: 0;
    gap:0 0.35em;
}

.site-nav a {
    display: inline-block;
    color:black;
    text-transform: uppercase;
    text-decoration: none;
    padding:0.3em 0.5em;
    font-size: 1rem;
}

@media (min-width:1180px) {
    .site-title {
        margin: 0 auto 0 0;
    }
    .site-nav {
        margin:0;
    }
}

/******************** INTRO ********************/

.infos-pratiques {
    display: grid;
    grid-template-columns: 100%;
    gap: 80px;
    justify-content: center;
    justify-items:center;
    align-items: center;
    background-color: var(--clr-bleu-vert);
    margin:0 auto;
    padding: 140px 1rem;
    background-color: var(--clr-bleu-vert);
}

@media (min-width:900px) {
    .infos-pratiques {
      grid-template-columns:1fr 1fr;
      justify-items: initial;
      padding: 280px 1rem;
      background-image: url(../img/fieris-feeries-intro-2026.jpg);
      background-image: image-set(
          "../img/fieris-feeries-intro-2026.avif" type("image/avif"),
          "../img/fieris-feeries-intro-2026.jpg" type("image/jpeg")
      );
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    #intro-fanion {
      text-align: right;
    }
}

.infos-pratiques-long-text {
    max-width: 62ch;
    text-align: center;
    background-color: var(--clr-bleu-vert);
    border: 4px solid var(--clr-jaune);
    padding: 30px;

    > * + * {
      margin-block:20px 0;
    }
}

.infos-pratiques-long-text h1 {
  margin-block: 0;
  font-size: 1.7rem;
}

@media (min-width:480px) {
  .infos-pratiques-long-text h1 {
    font-size: 2rem;
  }
}

@media (min-width:900px) {
  .infos-pratiques-long-text h1 {
    font-size: 2rem;
  }
}

.infos-pratiques-long-text p {
    font-size: 1.2rem;
}

.baseline{
    margin: 1em auto;
    font-weight: bold;
}

.boutons-wrapper {
    display:flex;
    flex-wrap: wrap;
    gap:1rem;
    justify-content: center;
    align-items: center;
}


/******************** LA PARADE ********************/


.laparade-participants {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px 60px;
    padding: 80px 0;
}

.laparade-participants h3 {
    width: 100%;
   text-align: center;
   text-transform: uppercase;
}

.laparade-participant {
    position: relative;
	display:flex;
    align-items: center;
    width: fit-content;
    max-width: 53em;
    gap: 0.5em;
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.laparade-participant .border {
    position: relative;
    margin-left: -2.7em;
    padding:0.6em 1.2em;
    border:3px solid #f39200;
    border-radius: 0.75em;
    background-color: white;
    text-align: center;
    font-size: 1.2rem;
}
.laparade-participant:nth-child(even) > div {
    margin-left:0;
    margin-right: -2.7em;
}

.laparade-participant img {
    position: relative;
    width:150px;
    z-index: 1;
    filter: drop-shadow(0px 0px 10px rgba(255,255,255,0.6));
}
.laparade-participant:nth-child(even) img {
    order: 2;
}

.laparade-participant h4 {
    margin:0;
    padding-left: 1.25em;
    font-size: 1.2rem;
}
@media (min-width:768px) {
    .laparade-participant h4 {
        font-size: 1.6rem;
    }
}
.laparade-participant:nth-child(even) h4 {
    padding-right: 1.25em;
    padding-left:0;
}

.laparade-participant p {
    margin:0;
    color:#197a86;
    font-size: 90%;
}

.laparade-participant--autres a {
    color:inherit;
    text-decoration: none;

    &:hover,
    &:focus {
        color:var(--clr-jaune);

        .border {
            border-color: var(--clr-jaune);
        }
    }
}
.laparade-participant--autres .border {
    margin:0;
    background-color: transparent;
    transition: border-color 200ms ease-out;
}
.laparade-participant--autres h4 {
    margin:0;
    padding:0 !important;
}

.laparade-plan {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    gap:60px;
}

@media (min-width:1024px) {
    .laparade-plan {
        grid-template-columns: 1fr 1fr;
    }
    .laparade-plan-img {
        margin-left: auto;
    }
}

.laparade-long-text {
    max-width: 68ch;
}

.laparade-long-text-img-deco {
    margin-bottom: 1.5em;
}

/******************** LES FIERIS ********************/

#lesfieris {
    padding: 0;
}

#lesfieris h3 {
    margin-top: 1em;
}

.quoi {
    margin-top: 20px;
}

.carousel {
    --max-carousel-w: calc(var(--max-w) - 100px);
    width: min(80%, var(--max-carousel-w));
    margin: 0 auto;
    text-align: left;
}

/***** without slick ****/

/************************/

.fieri {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.fieri-perso {
    width: 44%;
    float: left;
}

@media(max-width:767px) {
    .fieri-perso img {
        max-width: 200px;
    }
}

.fieri img {
    transition: filter 300ms ease-in-out;
}
.fieri:hover img {
    filter: drop-shadow(0px 0px 60px var(--clr-jaune-light));
}

.fieri-descr {
    max-width: 560px;
    width: auto;
    overflow: hidden;
}

@media(max-width:535px) {

    .fieri-perso,
    .fieri-perso img {
        max-width: 300px;
        width: 100%;
        margin: 0 auto;
        float: none;
    }

    .fieri-descr {
        text-align: center;
    }
}



/***** without slick ****/
.carousel {
    --gap : 40px;
    display: flex;
    width: calc(100% - 2rem);
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    max-width: var(--max-w);
}
.carousel > div {
    max-width: calc((var(--max-w) / 2) - (2 * var(--gap)));
}
.fieri {
    display: flex;
    flex-direction: column;
}
@media(min-width:536px) {
    .fieri {
        flex-direction: row;
    }
    .fieri-descr {
        max-width: 66%;
    }
}

/**********************************/






.slick-dots li.slick-active button::before,
.slick-dots li button::before {
    color: white;
}

@media(max-width:767px) {

    .slick-dots li button::before {
        font-size: 20px;
    }

    .slick-prev,
    .slick-next {
        height: 20px;
        width: 20px;
        margin-top: -10px;
    }

    .slick-prev {
        left: -25px;
    }

    [dir="rtl"] .slick-prev {
        right: -25px;
    }

    .slick-next {
        right: -25px;
    }

    [dir="rtl"] .slick-next {
        left: -25px;
    }
}

/******************** LES PARTICIPANTS ********************/

#participants-thumbs {
    display: grid;
    gap:40px 10px;
    grid-template-columns: repeat( auto-fit, minmax(12em, max-content) );
    justify-content: center;
    justify-items: center;
    max-width: var(--max-w);
    margin:80px auto;
}

.participant-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    max-width: 12em;
}

.participant-thumb p {
    line-height: 1.3;
    margin: 0;
}

.participant-thumb.js-modal {
    background: transparent;
    border: none;

}

.participant-thumb.js-modal img {
    transform:scale(1);
    transition:transform 100ms ease-in, outline 100ms ease-in;
}

.participant-thumb.js-modal:hover img,
.participant-thumb.js-modal:focus-visible img {
    outline:2px solid;
    transform:scale(1.05);
}

.participant-thumb img {
    display:block;
    width: 100px;
    height:100px;
    margin-bottom: 15px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    transition: all 300ms cubic-bezier(.47,1.64,.41,.8);
}

.participant-thumb:hover img {
    transform: scale(1.2);
    transform-origin: center;
}


span.petit {
    font-size: 0.75em;
    display: block;
}

/*********************** OBJECTIFS ************************/


.objectifs-grid {
    margin:0 auto;
    max-width: 760px;
}

 @media (min-width:1400px) {

    .objectifs-grid {
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        gap:40px;
        margin-top:80px;
        padding:0 20px;
    }
    .objectifs-grid h3 {
        min-height: 2.25em;
        margin-bottom: 1em;
    }
}

#objectifs img {
    border-radius: 5px;
    width: 100%;
    margin: 0 auto 20px auto;
}

#objectifs p {
    text-align: left;
    text-wrap: pretty;
}


/******************** A VOUS DE JOUER ********************/

#papillon {
    position: absolute;
    top: -140px;
    margin-left: -63px;
    left: -100%;
    top: 165px;
    z-index: 2;
    transform: rotate(2deg);
}

.affiches {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin: 40px auto;
    padding: 0 20px;
}

.affiches > div {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.affiches a {
    display: block;
    width: 100%;
    line-height: 1;
}

.affiches a:hover,
.affiches a:focus-visible {
    outline:5px solid var(--clr-jaune);

}

.affiches a:hover img,
.affiches a:focus-visible img {
    filter: brightness(0.7);

}

.affiches img {
    width: 100%;
    height:auto;
    opacity:1;
    transition: filter 200ms ease-out;
}

.affiches h3 {
  margin-top: 0.5em;
}

#grey {
    width: 100%;
    height: inherit;
    background: url("../img/blackBg.png") repeat scroll left top transparent;
    position: absolute;
    z-index: 15;
    display: none;
}

.outils-wrapper {
    display:grid;
    gap:40px;
    max-width: calc(68rem + 40px + 200px);
    margin:80px auto 0;
}

.outils {
    display: grid;
    justify-items: center;
    gap: 40px;
}

.outil-img {
    width: 200px;
    height: 200px;
    animation-duration: .5s;
    animation-fill-mode: both;
}

.outil-img a {
    display: block;
}

.outil-descr > * {
    margin:0;
    text-align: center;
}

.outil-descr > * + * {
    margin-top: 0.5em;
}

.outil-descr a:hover,
.outil-descr a:focus{
    text-decoration: none;
}

@media (min-width:768px) {
    .outils {
        grid-template-columns: 200px 1fr;
        justify-items: baseline;
    }
    .outil-descr > * {
        text-align: left;
        width:100%;
    }
}



/******************** IMAGES ********************/

.images-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.images-item {
    width: 100%;
    max-width: 535px;
    padding: 0 50px;
}

@media(min-width:768px) {
    .images-item {
        padding: 50px;
    }
}

.promote .images-item {
    max-width: 635px;
}

.images-item-container {
    padding: 20px;
    border: 1px solid black;
    background-color: white;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.7);
}

.images-item-container > * {
    margin-bottom: 0;
    line-height: 1.35;
    color:black;
    font-size: 1rem;
}

.images-item-container:has(a:hover) {
    outline:5px solid var(--clr-jaune);
    transition:var(--outline-transition);
}

.images-item-container h3 {
    font-size: 1.2rem;
}

.images-item img {
    width: 100%;
    transition: filter 150ms ease-out;
}

.images-item a {
    display: block;
    line-height: 1;
}

.images-item a:hover img,
.images-item a:focus img,
.images-item-container:has(a:hover) img {
    filter: brightness(0.7);
}

.images-item h3 {
    margin: 10px 0 0;
    text-transform: initial;
    letter-spacing: 0;
    font-weight: normal;
}

.images-item h3 {
    margin: 10px 0 0;
    text-transform: initial;
    letter-spacing: 0;
    font-weight: normal;
}

.two-deg {
    transform: rotate(2deg);
}

.minus-two-deg {
    transform: rotate(-2deg);
}

.four-deg {
    transform: rotate(4deg);
}

.minus-four-deg {
    transform: rotate(-4deg);
}


/******************** soutiens ********************/

#soutiens-thumb {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
}

.soutiens-thumb {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 0;
}

.soutiens-thumb:hover {
    cursor: pointer;
}

.soutiens-thumb a {
    display: block;
    transition: var(--default-transition);
    border:5px solid transparent;
    border-radius: 50%;
    line-height: 1;
}

.soutiens-thumb a:hover {
    border-color:var(--clr-jaune);
}

.soutiens-thumb img {
    width: 90px;
    height: auto;
    border-radius: 45px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.soutiens-middle .soutiens-thumb,
.soutiens-middle .soutiens-thumb img {
    width: 70px;
}

.soutiens-small .soutiens-thumb,
.soutiens-small .soutiens-thumb img {
    width: 50px;
}

.soutiens-thumb p {
    display: none;
}

@media (max-width: 992px) {

    .soutiens-middle {
        margin-left: auto;
        margin-right: auto;
        max-width: 440px;
    }

    .soutiens-small {
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
    }
}


/******************** FOOTER ********************/

#footer {
    background: var(--clr-orange);
    color: black;
}

#footer .container {
    padding: 2em 1rem;
}

#social-icons {
    margin: 70px 0 0 0;
}

#social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    letter-spacing: 0;
    color: black;
    transition: transform .4s ease-out;
}

#social-icons a:hover i {
    transform: translateY(-2px);
}

.copyright {
    margin: 7px 0 0 0;
}

.contact {
    margin: 3px 0 0 0;
}

#bas-de-page {
    margin: 20px 0 50px 0;
}

.contact a,
#bas-de-page a {
    color: black;
    text-decoration: underline;
}

.contact a:hover,
#bas-de-page a:hover {
    text-decoration: none;
}


/******************** PRESSE ********************/
#content-presse {
    color: white;
    padding: 100px 0;
    text-align: center;
    color: white;
}

#content-presse h4 {
    margin: 2.5em 0 0.8em 0;
}

#content-presse h4.first {
    margin-top: 10px;
}

#content-presse h5 {
    margin: 1.5em 0 0.6em 0;
}

#content-presse p {
    margin: 0 0 0.8em 0;
}

#presse-fieris-container {
    display: flex;
    text-align: center;
    max-width: 480px;
    width: 100%;
    justify-content: space-between;
    margin: 30px auto 0 auto;
}

.presse-fieris {
    padding: 0 20px;
}

#content-presse .presse-fieris p {
    margin: 10px 0 0 0;
    font-size: 14px;
}

.presse-fieris a:hover,
.presse-fieris a:active {
    text-decoration: underline;
}

a.bouton {
    display: inline-block;
    padding: 0.5em 1em;
    background: var(--clr-jaune);
    box-shadow: 0 0 10px -3px rgba(0,0,0,0.7);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    color: black;
}

a.bouton:hover,
a.bouton:active {
    box-shadow: none;
    background-color: var(--clr-jaune-light);
}

.photos-container {
    padding: 0;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    max-width: 780px;
    flex-wrap: wrap;
}

.photos-container li {
    width: 150px;
    list-style: none;
    margin: 15px;
    text-align: center;
}

.photos-container li a img {
    border: 2px solid white;
    transition: transform 0.15s ease-out;
}

.photos-container li a:hover img,
.photos-container li a:active img {
    transform: scale(1.05);
}

#audioContainer audio {
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
}



/************************************************/
/*************** CSS ANIMATIONS *****************/
/************************************************/

@keyframes fall {
    to {
        top:auto;
        bottom:-130px;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.pulse-bis:hover {
    animation-name: pulse;
}

@keyframes wiggle {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

.outils:hover .wiggle {
    animation-name: wiggle;
    animation-timing-function: ease-in;
}

.outils:hover .wiggle {
    animation-duration: 1s;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}



.quoi:hover {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top center;
    animation-name: swing;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/* --------------- styles for modal -----------------------*/

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }


  .hidden { display: none; }


  /* needed for old browsers */
  dialog {
    display: block;
    border: 0;
  }
  /* removes scroll when modal is opened */
  body.no-scroll {
    overflow: hidden !important;
  }
  /* overlay covers everything */
  .simple-modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--clr-jaune);
    opacity: .4;
    z-index: 666;
    cursor: pointer;
  }
  .simple-modal-overlay[data-background-click="disabled"],
  .simple-animated-modal-overlay[data-background-click="disabled"],
  .simple-animatedtransform-modal-overlay[data-background-click="disabled"],
  .simple-left-modal-overlay[data-background-click="disabled"] {
    cursor: auto;
  }
  .simple-animated-modal-overlay,
  .simple-animatedtransform-modal-overlay {
    animation: fadewhite ease .5s 1 normal ;
  }

  @keyframes fadewhite {
    0% {
      opacity: 0;
    }
    100% {
      opacity: .8;
    }
  }
  /* modal */
  .simple-modal {
    position: fixed;
    left: 50%;
    width: 90%;
    max-width: 980px;
    top: 10%;
    max-height: calc(100vh - 15%);
    border: 2px solid white;
    background: var(--clr-bleu-vert);
    color:white;
    z-index: 667;
    padding: 2em;
    right: auto;
    overflow: auto;
    transform:translateX(-50%);
  }
  .simple-modal-close {
    float: right;
    background: var(--clr-jaune);
    color: black;
    border: 0;
    font: inherit;
    padding: .5em;
    cursor: pointer;
  }
  .simple-modal-close:hover,
  .simple-modal-close:active {
    background: var(--clr-rouge);
    color:white;

  }

  .simple-animatedtransform-modal {
    -webkit-animation: pop ease .5s 1 normal ;
            animation: pop ease .5s 1 normal ;
  }

  #js-modal-content > * {
    margin:20px 0 0 0;
  }

  #js-modal-content a.bouton {
    margin:0;
    padding:0.5em 1em;
  }

  #js-modal-content a.bouton:hover,
  #js-modal-content a.bouton:active {
    background: var(--clr-rouge);
    color:white;
  }

  .modal-imgs {
    display:grid;
    gap: 30px;
  }

  @media(min-width:560px) {
    .modal-imgs {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }
  }

  .modal-imgs img {
    display:block;
    width:100%;
    height:auto
  }

  @-webkit-keyframes apparition {
    0% {
      opacity: 0;
        max-height: 0;
        width: 0;
        left: 50%;
    }
    100% {
      opacity: 1;
        max-height: 100%;
        width: 70%;
        left: 15%;
    }
  }
  @keyframes apparition {
    0% {
      opacity: 0;
        max-height: 0;
        width: 0;
        left: 50%;
    }
    100% {
      opacity: 1;
        max-height: 100%;
        width: 70%;
        left: 15%;
    }
  }

  @-webkit-keyframes pop {
    0% {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    100% {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: scale(1);
              transform: scale(1);
        max-height: 100%;
        width: 70%;
        left: 15%;
    }
  }
  @keyframes pop {
    0% {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    100% {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: scale(1);
              transform: scale(1);
        max-height: 100%;
        width: 70%;
        left: 15%;
    }
  }