/* ----- SCROOL BAR ----- */
::-webkit-scrollbar {
    width: 10px;
    background-color: var(--color-bg3);
}
::-webkit-scrollbar-thumb {
    background-color: var(--orange);
    box-shadow: 0 -100vh 0 100vh var(--orange); /* background all bar */
}

/* ----- Configuration sections page ----- */
section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    margin: 0;
}
#sec-i{
    background-color: var(--color-bg2);
    background-size: cover;
    color: var(--color-text1);
    justify-content:center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
#sec-2{
    color: var(--color-text1);
    align-items: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 4.75rem 10%;
}


.cadre{
    width: 80vw;
    height: 70vh;
    border-radius: 1.5rem;
    position: relative;
    display: flex;
}

.cadre-img{
    width: 60%;
    height: 70vh;
    border-radius: 1.5rem;
}

.cadre-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    border-radius: 0 1.5rem 1.5rem 0;
}

.cadre-info {
    background-color: var(--orange);
    width: 40%;
    height: 100%;
    z-index: 1;
    border-radius: 1.5rem 0 0 1.5rem;
    padding: 2rem;
}
.cadre-info-text{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-evenly;
}
.cadre h1{
    color: var(--color-bg1);
    font-size: 2.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.pdate{
    color: var(--color-bg1);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.pdescription{
    color: var(--color-bg1);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.plire{
    position: absolute;
    bottom: 5%;
    font-weight: 800;
    text-decoration: none;
    columns: var(--color-text1);
}


/* ----- Contenue article ----- */
h1{
    color: var(--orange);
    font-weight: 900;
    font-size: xx-large;
    margin: 1rem 0rem;
}
h2{
    color: var(--orange);
    font-weight: 600;
    font-size: x-large;
    margin: 1rem 0rem;
}
h3{
    color: var(--color-text1);
    font-weight: 600;
    font-size: larger;
    margin: 0.7rem 0rem;
}
h4{
    color: var(--color-text3);
    font-weight: 600;
    font-size: large;
    margin: 0.7rem 0rem;
}
blockquote{
    color: var(--color-text3);
    font-style: italic;
}
q{
    color: var(--color-text3);
}
a{
    color: var(--orange);
    text-decoration: underline;
}
/* ----- TEXTE SELECTIONNE ----- */
a::selection{
    background-color : blue;
    color : #fff
}
::selection{
    background-color : var(--orange);
    color : #fff
}
strong{
    color: var(--orange);
}
mark{
    background-color: var(--orange);
}
ul{
    list-style-type: space-counter;
}
@media screen and (max-width: 1100px) {
    .cadre{
        flex-direction: column;
        height: auto;
        width: 100%;
    }
    .cadre-info {
        width: 100%;
        height: 20%;
        border-radius: 1.5rem 1.5rem 0 0;
    }
    .cadre-img{
        width: 100%;
        height: 45vh;
        border-radius: 0rem 0rem 1.5rem 1.5rem;
    }
    .cadre-img img {
        border-radius: 0rem 0rem 1.5rem 1.5rem;
    }
}
@media screen and (max-width: 700px) {
    .cadre{
        flex-direction: column;
        height: auto;
        width: 100%;
    }
    .cadre-info {
        width: 100%;
        height: 20%;
        border-radius: 1.5rem 1.5rem 0 0;
    }
    .cadre-img{
        width: 100%;
        height: 35vh;
        border-radius: 0rem 0rem 1.5rem 1.5rem;
    }
    .cadre-img img {
        border-radius: 0rem 0rem 1.5rem 1.5rem;
    }
}