/* Summary colors – change these to customize each section */
:root {
    --summary-premiers-droits: rgb(0, 225, 255);
    --summary-parcours-scolaire: rgb(255, 204, 0);
    --summary-responsabilite-juridique: rgb(68, 255, 0);
    --summary-parents-et-moi: rgb(255, 0, 68);
    --summary-sexualite: rgb(255, 98, 0);
    --summary-z-internets: rgb(170, 0, 255);
    --summary-corps: rgb(255, 242, 0);
    --summary-travail: rgb(255, 0, 0);
    --summary-argent: rgb(85, 255, 0);
    --summary-voiture: rgb(255, 0, 0);
    --summary-appartement: rgb(0, 68, 255);
}

body {
    font-family: 'Inter', sans-serif;
    margin: 2rem;
}

.subtitle {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
summary {
    font-family: 'Bricolage Grotesque', sans-serif;
}

.page-content {
    max-width: 80rem;
    margin: 0 auto;
    gap: 1rem;
    @media (min-width: 64rem) {
        column-count: 2;
    }
}

details {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    break-inside: avoid;
    break-after: avoid;

    --summary-color-darker: color-mix(in srgb, var(--summary-color) 70%, rgba(0, 0, 0, 0.8));
    --summary-color-lighter: color-mix(in srgb, var(--summary-color) 20%, white);
    border: 1px solid var(--summary-color-darker);
    /* overflow: hidden; */
}

/* Override browser’s display:none on content so we can animate with max-height */
details:not([open]) > .details-content {
    display: block !important;
}

.details-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.75s ease;
}

details[open] .details-content {
    max-height: 3000px;
}

summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.5rem;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: '+';
    font-weight: 600;
    flex-shrink: 0;
}

details[open] summary::after {
    content: '−';
}

summary:focus-visible {
    outline: 2px solid var(--summary-color-darker);
    outline-offset: 2px;
}

details.section-premiers-droits {
    --summary-color: var(--summary-premiers-droits);
}

details.section-parcours-scolaire {
    --summary-color: var(--summary-parcours-scolaire);
}

details.section-responsabilite-juridique {
    --summary-color: var(--summary-responsabilite-juridique);
}

details.section-parents-et-moi {
    --summary-color: var(--summary-parents-et-moi);
}

details.section-sexualite {
    --summary-color: var(--summary-sexualite);
}

details.section-z-internets {
    @media (min-width: 64rem) {
        break-after: column;
    }
    --summary-color: var(--summary-z-internets);
}

details.section-corps {
    --summary-color: var(--summary-corps);
}

details.section-travail {
    --summary-color: var(--summary-travail);
}

details.section-argent {
    --summary-color: var(--summary-argent);
}

details.section-voiture {
    --summary-color: var(--summary-voiture);
}

details.section-appartement {
    --summary-color: var(--summary-appartement);
}

details summary {
    background: color-mix(in srgb, var(--summary-color) 20%, white);
}

.links {
    padding: 1rem;
    list-style: none;
}

.links li {
    margin-bottom: 0.5rem;
}

.links a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    color: #1a1a1a;
    text-decoration: none;
    background: var(--summary-color-lighter);
    border: 1px solid var(--summary-color-darker);
    border-radius: 0.5rem;
    font-size: 1.2rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.links a:hover {
    filter: brightness(0.96);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.links a:focus-visible {
    outline: 2px solid var(--summary-color-darker);
    outline-offset: 2px;
}

.links a::after {
    content: ' →';
    font-weight: 600;
    opacity: 0.8;
}

.logo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.logo-header .logo-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    margin: 0;
}

.logo-header .logo-img {
    width: 150px;
    margin-left: -75px;
    height: auto;
    display: block;
}