/* ========================================================= positionnement des éléments de la page */

/*pages de garde*/
.pagedegarde {
    margin-top: .5em;
    grid-column: 1/span 6;
    grid-row: 1;
}

.intro {
    grid-column: 1/span 5;
    grid-row: 2;
    margin-bottom: 4vw;
}

.affaires {
    grid-row: 3;
    grid-column: 1/span 12;
}

.wrapper {
    position: absolute;
    padding-bottom: 4vw;

}

summary {
    position: relative;
    padding: .4em;
    margin-bottom: 1vw;
    cursor: pointer;
}

details[open] summary{
    margin-bottom: -1vw;
}

details[open] {
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    padding: 1em;
    padding-bottom: 8.5vh;

}

.detail {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 90vw;
}

#detail-1 {
    z-index: 0;
    background-color: var(--rouge);
    border-radius: 0 10px 0 0;
}

#detail-2 {
    z-index: 1;
    background-color: #F74B38;
}

#detail-3 {
    z-index: 2;
    background-color: #F85647;
}

#detail-4 {
    z-index: 3;
    background-color: #FA6156;
}

#detail-5 {
    z-index: 4;
    background-color: #FC6C64;
}

#detail-6 {
    z-index: 5;
    background-color: #FD7773;
}

#detail-7 {
    z-index: 6;
    background-color: #FF8282;
}

#detail-8 {
    height: 20vh;
    background-color: var(--rouge);
    border-radius: 0 0 10px 10px;
}



#detail-1::before {
    content: "Thalidomide";
    position: absolute;
    margin-top: -35px;
    width: 12.8vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center;
    background-color: var(--rouge);
    border-radius: 1.5em 1.5em 0 0;
}

#detail-2::before {
    content: "Médiator";
    position: absolute;
    left: 12.8vw;
    margin-top: -35px;
    width: 12.8vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center;
    background-color: #F74B38;
    border-radius: 1.5em 1.5em 0 0;
}

#detail-3::before {
    content: "Ozempic";
    position: absolute;
    left: 25.6vw;
    margin-top: -35px;
    width: 12.8vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center;
    background-color: #F85647;
    border-radius: 1.5em 1.5em 0 0;
}

#detail-4::before {
    content: "Sirop codéïné";
    position: absolute;
    left: 38.4vw;
    margin-top: -35px;
    width: 12.8vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center;
    background-color: #FA6156;
    border-radius: 1.5em 1.5em 0 0;
}

#detail-5::before {
    content: "Spasfon";
    position: absolute;
    left: 51.2vw;
    margin-top: -35px;
    width: 12.8vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center;
    background-color: #FC6C64;
    border-radius: 1.5em 1.5em 0 0;
}

#detail-6::before {
    content: "Lévothyrox";
    position: absolute;
    left: 64vw;
    margin-top: -35px;
    width: 12.8vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: center;
    background-color: #FD7773;
    border-radius: 1.5em 1.5em 0 0;
}

#detail-7::before {
    content: "Dépakine";
    position: absolute;
    left: 76.8vw;
    margin-top: -35px;
    width: 13.2vw;
    font-size: 20pt;
    line-height: 24pt;
    font-weight: 500;
    padding-top: .5rem;
    text-align: center;
    background-color: #FF8282;
    border-radius: 1.5em 1.5em 0 0;
}

span{
    text-align: center;
}

/* Mise en page des textes qui sont dans les "dossiers"  */
.boite{
    display: grid;
    grid-template-columns: 60vw 30vw;
    gap: .1em 2em;
}

.title{
    margin-top: 4vh;
}
.txt{
    grid-column: 1;
    grid-row: 1;
}
.zoneImg{
    max-width: 20vw;
}
figure img {
    margin-top: 2vw;
}

figcaption{
    width: 20vw;

}