/* Coolors */

* {
    font-family: Helvetica, Verdana, sans-serif;
}

:root {
    --bl:#252250;
    --or:#e9402d;
    --wh:#f9f9f9;
    --bo:#873242;
    --be:#f1b7b0;
}

html, body {
    overflow-x: hidden;
    width:100vw;
}

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

#index_page {
    background: black;
}

#accueil_img_container {
    position: relative;
/*     display: block; */
    font-size: 0;
    max-width: 75vw;
    max-height:40vh;
    margin:auto;
    background:black
}

.accueil_img {
    position:relative;
    top: 0;
    left: 0;
    width: 75vw;
    max-height: 40vh;
    object-fit: cover;
    opacity: 1;
    animation: fade 14s infinite;
}

#accueil_img_haut {
    object-position: 0 30%;
    animation-delay:-4.2s;
}

#accueil_img_bas {
    object-position: 0 20%;
    margin-top:-100%;
    opacity:0;
    animation-delay: 2.8s;
}

@keyframes fade {
    0%, 20%, 80%, 100% {
        opacity: 0;
    }
    30%, 70% {
        opacity: 1;
    }
}

.accueil_container {
    background-color:var(--wh);
    padding:4vh 12vw 5vh 12vw;
}

.accueil_site {
    margin:0;
}

h1 {
    position:relative;
    font-size:275%;
    text-align:center;
    z-index:2;
    color:var(--bl);
}

p {
    position:relative;
    text-align:justify;
    font-size:100%;
    z-index:2;
}

.main_par {
    width:50vw;
    margin:auto;
    margin-bottom:4vh;
}

.page_intro {
    width:30vw;
    margin:auto;
}

ul {
    list-style-type: none;
}

#conteurs_intro {
    padding:0;
    width:100%;
    max-width:100vw;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.image_column {
    display: flex;
    flex-direction: column;
}

.image_column img {
    max-width:25em;
    margin:2em 4em 2em 4em;
    object-fit: contain;
}

#conteurs_img1, #conteurs_img4 {
    transform:rotate(-5deg);
}

#conteurs_img2, #conteurs_img3 {
    transform:rotate(5deg);
}

.sous_titre {
    font-size:220%;
}

.liste_conteurs {
    display: flex;
    flex-flow:row wrap;
    align-items:baseline;
    justify-content: center;
    gap:2em 4em;
    margin:10vh 0 5vh 0;
    padding: 0 12vw 0 12vw;
}

.conteur {
    margin: 0 2.5em 2.5em 2.5em;
    margin:0;
    display:flex;
    flex-direction: column;
}

.conteur h2 {
    font-size:150%;
    margin:0;
}

.conteur h3 {
    margin:0;
    color:var(--or);
    font-size:95%;
}

.conteur p {
    margin:0;
    padding:0;
}

.conteur p a {
    position: relative;
    overflow: hidden;
    text-decoration: underline;
    color: var(--bl);
    &::after {
      content: "";
      background: var(--be);
      position: absolute;
      left: 12px;
      bottom: -6px;
      width: calc(100% - 8px);
      height: calc(100% - 2px);
      z-index: -1;
      transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
    }
    &:hover:after {
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 100%;
    }
  }

.conteur img {
    margin:auto;
    margin-top:1rem;
    position: relative;
    max-height: 20em;
    max-width:20em;
    box-shadow: 12px 12px var(--or);
}

.text_column a span {
    display:block;
    position: relative;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 4px solid var(--bl);
    border-bottom: 4px solid var(--bl);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb05 2.5s infinite;
    animation: sdb05 2.5s infinite;
    box-sizing: border-box;
    margin-top:10%;
}

@-webkit-keyframes sdb05 {
    0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}
@keyframes sdb05 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}