/* =================== Main ==================== */
.page-reglement {
    display: flex;
    width: 100%;
    max-width: 1420px;
    padding: 100px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.reglement {
    display: inline-grid;
    row-gap: 10px;
    column-gap: 20px;
    align-self: stretch;
    grid-template-rows: repeat(1,fit-content(100%));
    grid-template-columns:   297.64px minmax(0,1fr);
}

/* =================== Sidebar ==================== */
.sidebar {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    justify-self: stretch;
    height: fit-content;

    border-radius: 20px;
    background: var(--Mauve-2, rgba(70, 45, 103, 0.55));
}

.sidebar a {
    display: flex;
    padding: 5px 8px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    text-decoration: none;

    color: #ADADAD;
    font-family: Baskervville;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    transition: all 0.3s ease-in-out;
}

.sidebar a:hover,
.sidebar a.active {
    padding: 5px 15px;

    border-radius: 10px;
    background: var(--Mauve-1, rgba(92, 58, 135, 0.55));

    color: #FFF;
}

/* =================== Reglement Content ==================== */
.reglement-content {
    display: flex;
    padding: 45px 50px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    justify-self: stretch;
    height: fit-content;

    border-radius: 20px;
    background: var(--Mauve-1, rgba(92, 58, 135, 0.55));
}

.reglement-content h5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0;

    color: #FFF;
    font-family: Baskervville;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.reglement-content p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0;

    color: #ADADAD;
    font-family: Baskervville;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.reglement-content-boxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}


/* =================== Box Reglement ==================== */
.box-reglement {
    display: flex;
    padding: 10px 15px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    border-radius: 10px;
    border: 0.5px solid #FFF;
    background: var(--Mauve-fonce-2, rgba(40, 27, 57, 0.55));
    
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    list-style: none;
}

.box-header::-webkit-details-marker {
    display: none;
}

.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
    list-style: none;
    outline: none;
    padding: 5px 0;
}

.box-header h6 {
    margin: 0;
    display: inline-block;
    color: #FFF;
    font-family: Baskervville;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.arrow-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-bottom: 5px;
}

.box-reglement[open] .arrow-icon {
    transform: rotate(-135deg);
    margin-top: 5px;
}

.box-content {
    padding: 10px 0;
    color: #FFF;
    opacity: 0;
    animation: fadeIn 0.4s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}