/*=============================================================== marqueur de position*/

.accueil::before {
    --size: .8em;
    content: "";
    display: block;
    background: gray;
    height: var(--size);
    width: 9.5vw;
    position: absolute;
    z-index: -1;
    left: -0.6em;
    top: -0.11em;
}

/*=============================================================== Pilulier*/

main {
    display: grid;
    height: 100vh;
    width: 100vw;
    padding: 2em;
    margin-top: 4vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1em 1em;
    overflow: hidden;
}

/*=============================================================== partie pilules*/

@media (min-aspect-ratio: 4/3) {
    .pill {
        height: 100%;
        width: auto;
        aspect-ratio: 4/3;
    }
}

.pill {
    display: flex;
    position: relative;
    place-self: center center;
    height: 50px;
    width: 100px;
    border-radius: 20000em;
    background-color: var(--c);
    transition: 300ms;
    overflow: hidden;
}

.pill.h::before {
    content: "";
    inset: 0;
    width: 50%;
    border-radius: 2000em 0 0 2000em;
    position: absolute;
    display: block;
    border-right: 2px solid #eee;
}

.pill.h::after {
    content: "";
    inset: 0;
    border-radius: 0 2000em 2000em 0;
    position: absolute;
    display: block;
}

.pill:hover {
    animation: wiggle 1s infinite;
    z-index: 2;
}

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

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

    30% {
        transform: rotate(10deg);
    }

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

/*=============================================================== placement des pilules*/

#chapitre1 {
    cursor: pointer;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row: 1/span 2;
    height: 100%;
    width: 100%;
}

#chapitre2 {
    cursor: pointer;
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row: 1/span 2;
    height: 100%;
    width: 100%;
}

#chapitre3 {
    cursor: pointer;
    grid-column: 9/span 4;
    grid-row: 1/span 2;
    height: 100%;
    width: 100%;
}

#chapitre4 {
    cursor: pointer;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row: 3/span 2;
    height: 100%;
    width: 100%;
}

#chapitre5 {
    cursor: pointer;
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row: 3/span 2;
    height: 100%;
    width: 100%;
}

#chapitre6 {
    cursor: pointer;
    grid-column: 9/span 4;
    grid-row: 3/span 2;
    height: 100%;
    width: 100%;
}

/*=============================================================== zone titres et spécial sousTitre pour mise en page */

.textbox {
    display: flex;
    grid-column: 1/ span 12;
    grid-row: 5/span 2;
}

.sousTitres0 {
    font-size: 5vw;
    margin-top: 1.75vw;
    line-height: .9;
    margin-left: .35em;
    font-weight: 600;
}