ul>li {
    margin: 0.8em 0;
}

ol>li {
    margin: 0.8em 0;
}

ul ul {
    list-style-type: none;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

/* =================================================================
   TOKENS ESPACEMENT SECTIONS
   ================================================================= */

/* =================================================================
   TOKENS ESPACEMENT SECTIONS (base + large)
   ================================================================= */

:root {
    /* Base (actuel) */
    --section-gap: 6%;
    --section-padding-x: 4%;
    --section-padding-y: 2%;

    /* Large (nouveau : plus important) */
    --section-gap-lg: 9%;
    --section-padding-x-lg: 6%;
    --section-padding-y-lg: 4%;
}

/* Ordinateur de bureau large (écran ≥ 1440px) */
@media (min-width: 1440px) {
    :root {
        /* Base */
        --section-gap: 7%;
        --section-padding-x: 4.5%;
        --section-padding-y: 2.5%;

        /* Large */
        --section-gap-lg: 10%;
        --section-padding-x-lg: 7%;
        --section-padding-y-lg: 4.5%;
    }
}

/* Portable / laptop (1025px à 1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
    :root {
        /* Base */
        --section-gap: 6%;
        --section-padding-x: 4%;
        --section-padding-y: 2%;

        /* Large */
        --section-gap-lg: 9%;
        --section-padding-x-lg: 6%;
        --section-padding-y-lg: 4%;
    }
}

/* Tablette paysage (769px à 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        /* Base */
        --section-gap: 5%;
        --section-padding-x: 5%;
        --section-padding-y: 3%;

        /* Large */
        --section-gap-lg: 8%;
        --section-padding-x-lg: 7%;
        --section-padding-y-lg: 5%;
    }
}

/* Tablette portrait (601px à 768px) */
@media (min-width: 601px) and (max-width: 768px) {
    :root {
        /* Base */
        --section-gap: 6%;
        --section-padding-x: 6%;
        --section-padding-y: 4%;

        /* Large */
        --section-gap-lg: 9%;
        --section-padding-x-lg: 8%;
        --section-padding-y-lg: 6%;
    }
}

/* Mobile paysage (481px à 600px) */
@media (min-width: 481px) and (max-width: 600px) {
    :root {
        /* Base */
        --section-gap: 8%;
        --section-padding-x: 8%;
        --section-padding-y: 5%;

        /* Large */
        --section-gap-lg: 12%;
        --section-padding-x-lg: 10%;
        --section-padding-y-lg: 8%;
    }
}

/* Mobile portrait (≤ 480px) */
@media (max-width: 480px) {
    :root {
        /* Base */
        --section-gap: 10%;
        --section-padding-x: 10%;
        --section-padding-y: 6%;

        /* Large */
        --section-gap-lg: 14%;
        --section-padding-x-lg: 12%;
        --section-padding-y-lg: 9%;
    }
}

/* =================================================================
   Classes de spacing à appliquer aux conteneurs
   ================================================================= */

/* Base */
.section-gap {
    margin-top: var(--section-gap);
    margin-bottom: var(--section-gap);
}

.section-padding-x {
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

.section-padding-y {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

/* Large (nouveau) */
.section-gap-lg {
    margin-top: var(--section-gap-lg);
    margin-bottom: var(--section-gap-lg);
}

.section-padding-x-lg {
    padding-left: var(--section-padding-x-lg);
    padding-right: var(--section-padding-x-lg);
}

.section-padding-y-lg {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
}

/* Option pratique : un seul class pour tout */
.section-space-lg {
    margin-top: var(--section-gap-lg);
    margin-bottom: var(--section-gap-lg);
    padding-left: var(--section-padding-x-lg);
    padding-right: var(--section-padding-x-lg);
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
}

/* =================================================================
   TOKENS SHADOW
   ================================================================= */

:root {
    /*
    --shadow-color: rgba(243, 193, 44, 0.3);
    --shadow-color-soft: rgba(243, 193, 44, 0.3);
*/
    --shadow-color: rgba(8, 8, 190, 0.3);
    --shadow-color-soft: rgba(154, 154, 232, 0.3);

    --shadow-xs: 0 1px 2px var(--shadow-color-soft);
    --shadow-s: 0 2px 4px var(--shadow-color-soft);
    --shadow-m: 0 4px 10px var(--shadow-color);
    --shadow-l: 0 6px 18px var(--shadow-color);
    --shadow-xl: 0 10px 32px var(--shadow-color);
}

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-s {
    box-shadow: var(--shadow-s);
}

.shadow-m {
    box-shadow: var(--shadow-m);
}

.shadow-l {
    box-shadow: var(--shadow-l);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-hover {
    transition: box-shadow 0.25s ease;
}

.shadow-hover:hover {
    box-shadow: var(--shadow-s);
}

.shadow-inset {
    box-shadow: inset 0 2px 6px rgba(154, 154, 232, 0.12);
}

.shadow-soft {
    box-shadow: 0 2px 8px rgba(154, 154, 232, 0.06);
}


/* =================================================================
   TOKENS RADIUS / FRAME / SURFACE
   ================================================================= */

:root {
    /* Arrondis des conteneurs */
    --container-radius-none: 0;
    --container-radius-s: 4px;
    --container-radius-m: 8px;
    --container-radius-l: 16px;
    --container-radius-xl: 24px;
    --container-radius-pill: 999px;

    /* Bordures */
    --frame-border-style: solid;
    --frame-border-width-thin: 1px;
    --frame-border-width-medium: 2px;
    --frame-border-width-thick: 3px;

    --frame-color-soft: var(--e-global-color-border);
    --frame-color-strong: var(--e-global-color-primary);
    --frame-color-accent: var(--e-global-color-accent);

    /* Surfaces */
    --surface-default: var(--e-global-color-surface);
    --surface-soft: var(--e-global-color-surface-soft);
    --surface-muted: var(--e-global-color-muted);
    --surface-accent-light: var(--e-global-color-accent-light);
    --surface-background: var(--e-global-color-background);
}

.radius-none {
    border-radius: var(--container-radius-none);
}

.radius-s {
    border-radius: var(--container-radius-s);
}

.radius-m {
    border-radius: var(--container-radius-m);
}

.radius-l {
    border-radius: var(--container-radius-l);
}

.radius-xl {
    border-radius: var(--container-radius-xl);
}

.radius-pill {
    border-radius: var(--container-radius-pill);
}

.frame-thin {
    border-width: var(--frame-border-width-thin);
    border-style: var(--frame-border-style);
}

.frame-medium {
    border-width: var(--frame-border-width-medium);
    border-style: var(--frame-border-style);
}

.frame-thick {
    border-width: var(--frame-border-width-thick);
    border-style: var(--frame-border-style);
}

.frame-soft {
    border-color: var(--frame-color-soft);
}

.frame-strong {
    border-color: var(--frame-color-strong);
}

.frame-accent {
    border-color: var(--frame-color-accent);
}

.surface {
    background-color: var(--surface-default);
}

.surface-soft {
    background-color: var(--surface-soft);
}

.surface-muted {
    background-color: var(--surface-muted);
}

.surface-accent-light {
    background-color: var(--surface-accent-light);
}

.surface-background {
    background-color: var(--surface-background);
}

/* Volume renforcé – sans barre d'accent */
.bc-volume {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;

    /* volume augmenté */
    padding: clamp(22px, 1.6vw + 12px, 36px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, .08),
        0 6px 14px rgba(0, 0, 0, .04);

    transform: translateY(0);
    transition: box-shadow .2s ease, transform .15s ease;
}

/* Typographie & respiration */
.bc-volume p {
    margin: 0 0 1em;
    line-height: 1.8;
}

.bc-volume p:last-child {
    margin-bottom: 0;
}

/* Survol discret (desktop uniquement) */
@media (hover:hover) {
    .bc-volume:hover {
        transform: translateY(-2px);
        box-shadow:
            0 20px 48px rgba(0, 0, 0, .12),
            0 8px 20px rgba(0, 0, 0, .06);
    }
}