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

/* Grille 2 colonnes : sidebar fixe | contenu fluid */
.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 ==================== */

/*
 * La sidebar reste visible au scroll grâce à position: sticky.
 * max-height + overflow-y: auto permettent le scroll interne
 * si le menu dépasse la hauteur du viewport.
 */
.sidebar {
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    justify-self: stretch;

    position: sticky;
    top: 110px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    height: fit-content;
    border-radius: 20px;
    background: var(--surface-2);
    width: 280px;
}

.sidebar-category {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
}

.category-title {
    color: var(--text-primary);
    font-family: Baskervville;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px;
    padding-left: 8px;
    opacity: 0.7;
    text-transform: uppercase;
}

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

    color: var(--text-secondary);
    font-family: Baskervville;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-left: 5px;

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

.sidebar a:hover,
.sidebar a.active {
    padding-left: 15px;
    border-radius: 10px;
    background: var(--surface-1);
    color: var(--text-primary);
}

.sidebar-category summary {
    list-style: none;
    cursor: pointer;
    outline: none;
}

/* Titre de catégorie — summary du <details>, géré par initAccordion() en JS */
.category-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Baskervville;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 8px;

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

.category-title:hover {
    padding-left: 15px;
    border-radius: 10px;
    background: var(--surface-1);
}

/* Flèche accordion — rotation pilotée par l'attribut [open] */
.arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    opacity: 0.6;
    transform: rotate(90deg); 
}

.sidebar-category[open] .arrow {
    transform: rotate(0deg);
}

/*
 * Animation d'ouverture/fermeture via grid-template-rows: 0fr → 1fr.
 * L'état initial (0fr) est forcé en JS par initAccordion() pour garantir
 * que la transition se déclenche dès le premier clic.
 */
.sidebar-category .submenu-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    overflow: hidden;
}

.sidebar-category[open] .submenu-content {
    grid-template-rows: 1fr;
    opacity: 1;
}

.sidebar-category.collapsing .submenu-content {
    grid-template-rows: 0fr;
    opacity: 0;
}

/* Requis pour que grid-template-rows: 0fr fonctionne correctement */
.submenu-content > div {
    min-height: 0;
}


/* =================== Contenu règlement ==================== */
.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(--surface-1);
}

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

    color: var(--text-secondary);
    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 règlement ==================== */
.box-reglement {
    display: flex;
    padding: 10px 15px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    border-radius: 10px;
    border: 0.5px solid var(--border-default);
    background: var(--surface-3);
    
    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;
}

/* Flèche en CSS pur (border trick) — rotation pilotée par [open] */
.arrow-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--border-strong);
    border-bottom: 2px solid var(--border-strong);
    transform: rotate(135deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-bottom: 5px;
}

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

/* Même système d'animation que .submenu-content */
.box-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease,
                padding 0.4s ease;
    overflow: hidden;
    padding: 0; 
    color: var(--text-primary);
}

.box-reglement[open] .box-content {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 10px 0;
}

.box-reglement.collapsing .box-content {
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0;
}

.box-content > div {
    min-height: 0;
}


/* =================== Tableaux ==================== */
.reglement-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-default);
    background: var(--surface-2);
}

.reglement-content th {
    color: var(--text-primary);
    font-family: Baskervville;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid var(--border-default);
}

.reglement-content td {
    padding: 12px 15px;
    color: var(--text-secondary);
    font-family: Baskervville;
    font-size: 16px;
    line-height: 1.5;
    vertical-align: top;
    border-bottom: 1px solid var(--border-faint);
}

.reglement-content tr {
    transition: background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reglement-content tr:nth-child(even) {
    background: var(--table-row-even);
}

.reglement-content tr:hover {
    background: var(--table-row-hover);
}

/* Colonne label : plus claire et séparée visuellement */
.reglement-content td:first-child {
    color: var(--text-primary);
    font-weight: 700;
    width: 30%;
    border-right: 1px solid var(--border-subtle);
}

.reglement-content tr:last-child td {
    border-bottom: none;
}