:root {
    --sp-0: 0;
    --sp-1: 6px;
    --sp-2: 12px;
    --sp-3: 18px;
    --sp-4: 24px;
    --sp-5: 30px;
    --sp-6: 36px;
    --sp-7: 42px;
    --sp-8: 48px;
    --sp-9: 54px;
    --sp-10: 60px;

    --coral-dust: #F08E6E;
    --electric-indigo-600: #3E3BF0;
    /* Thème clair par défaut */
    --color-bg: #ffffff;
    --color-bg--secondary: #ffffff;
    --color-text: #121212;
    --color-text--light: #8A95AD;
    --muted: #9fb0d0;

    --font-family: 'Arimo';
}
html[data-theme="dark"] {
    --color-bg: #181F35;
    --color-bg--secondary: #1F273D;
    --color-text: #E8ECFF;
    --color-text--light: #8A95AD;
}


html, body {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: relative;
    overflow-x: hidden;

    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;

    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color 0.25s ease, color 0.25s ease;

    min-height: 100vh;

    /*-moz-user-select: none; /* Firefox */
    /*-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    /*-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    /*user-select: none; /* Propriété standard */
}
html, body, main {
    width: 100%;
}
body {
    display: flex;
    flex-direction: row;
}
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}
.wrapper {
    width: 100%;
    padding: 0 12px;
}
main {
    flex: 1;
}
section {
    position: relative;
}
header, main, footer {
    position: relative;
}

*,::after,::before {
    box-sizing: border-box
}
* {
    padding: 0;
    margin: 0;
}
@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}
img {
    border: none;
    outline: none;
    max-width: 100%;
}
ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.05);
    width: 4px;
    height: 4px
}
::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: var(--electric-indigo-600);
}
::selection {
    background-color: var(--electric-indigo-600);
    color: #fff
}
::-moz-selection {
    background-color: var(--electric-indigo-600);
    color: #fff
}

a, button {
    cursor: pointer;
}


.auth {
    display: grid;
    place-items: center;
    padding: var(--sp-10) var(--sp-3) var(--sp-6);
}

.auth__form {
    width: min(420px, 100%);
    background: var(--color-bg--secondary);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: var(--sp-6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    font-family: var(--font-family);
    animation: authFadeIn 0.4s ease both;
}

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Alert ---- */
.alert {
    border-radius: 8px;
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    font-size: 0.95rem;
    background: #fff2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
html[data-theme="dark"] .alert {
    background: #2c1a1a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* ---- Labels et Inputs ---- */
.form__group {
    margin-bottom: var(--sp-4);
}

.form__label {
    display: inline-block;
    margin-bottom: var(--sp-1);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.form__input {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    border-radius: 10px;
    padding: var(--sp-2) var(--sp-3);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form__input::placeholder {
    color: var(--color-text--light);
}

.form__input:hover {
    border-color: var(--muted);
}

.form__input:focus-visible {
    outline: none;
    border-color: var(--electric-indigo-600);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--electric-indigo-600) 20%, transparent);
}

/* ---- Mot de passe ---- */
.form__group--password .form__password {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.form__password-toggle {
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.1s;
}

.form__password-toggle:hover {
    background: rgba(0,0,0,0.05);
}
html[data-theme="dark"] .form__password-toggle:hover {
    background: rgba(255,255,255,0.05);
}

.form__password-toggle:active {
    transform: scale(0.95);
}

.form__password-icon {
    width: 22px;
    height: 22px;
    fill: var(--color-text--light);
}

/* ---- Checkbox ---- */
.form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    user-select: none;
}

.form__checkbox-input {
    width: 18px;
    height: 18px;
    accent-color: var(--electric-indigo-600);
    cursor: pointer;
}

.form__checkbox-label {
    font-size: 0.95rem;
    color: var(--color-text);
}

/* ---- Bouton principal ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    padding: var(--sp-2) var(--sp-4);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.btn--primary {
    background: var(--electric-indigo-600);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--electric-indigo-600) 25%, transparent);
}

.btn--primary:hover {
    background: color-mix(in srgb, var(--electric-indigo-600) 85%, var(--coral-dust));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--electric-indigo-600) 30%, transparent);
}

.btn--primary:active {
    transform: translateY(1px);
}

.form__submit {
    width: 100%;
    margin-top: var(--sp-2);
}

/* ---- Liens inscription / MDP oublié ---- */
.form__group--links {
    text-align: center;
    margin-top: var(--sp-5);
}

.form__links-text {
    margin: var(--sp-1) 0;
    font-size: 0.95rem;
    color: var(--color-text--light);
}

.form__link {
    color: var(--electric-indigo-600);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.form__link:hover {
    border-color: currentColor;
    color: var(--coral-dust);
}

/* ---- Responsif ---- */
@media (max-width: 480px) {
    .auth__form {
        padding: var(--sp-4);
        border-radius: 12px;
    }

    .btn--primary {
        padding: var(--sp-2) var(--sp-3);
    }
}

/* ===== Register layout (reprend le style login) ===== */
.auth--register {
    display: grid;
    place-items: center;
    padding: var(--sp-10) var(--sp-3) var(--sp-6);
}

.auth--register .auth__form {
    width: min(520px, 100%);
    background: var(--color-bg--secondary);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 16px;
    padding: var(--sp-6);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
    font-family: var(--font-family);
}

/* Labels / inputs déjà stylés côté login ; on renforce juste */
.auth--register .form__group { margin-bottom: var(--sp-4); }
.auth--register .form__label { display:inline-block; margin-bottom: var(--sp-1); font-weight:600; color: var(--color-text); }
.auth--register .form__input {
    width:100%; border:1px solid rgba(0,0,0,.1);
    background: var(--color-bg); color: var(--color-text);
    border-radius: 10px; padding: var(--sp-2) var(--sp-3);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth--register .form__input:hover { border-color: var(--muted); }
.auth--register .form__input:focus-visible {
    outline: none;
    border-color: var(--electric-indigo-600);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--electric-indigo-600) 20%, transparent);
}
.auth--register .form__input::placeholder { color: var(--color-text--light); }

/* Mot de passe : alignement input + bouton */
.auth--register .form__password {
    display:flex; align-items:center; gap: var(--sp-1);
}
.auth--register .form__input--password { padding-right: var(--sp-6); }

/* Bouton œil (conserve .Control-label--showPassword) */
.auth--register .Control-label--showPassword,
.auth--register .form__password-toggle {
    display:grid; place-items:center;
    width:40px; height:40px; border-radius:8px;
    border: 1px solid transparent; background: transparent;
    cursor:pointer; transition: background .2s, transform .1s, border-color .2s;
}
.auth--register .Control-label--showPassword:hover { background: rgba(0,0,0,.05); }
html[data-theme="dark"] .auth--register .Control-label--showPassword:hover { background: rgba(255,255,255,.06); }
.auth--register .Control-label--showPassword:active { transform: scale(.98); }
.auth--register .svg-toggle-password { width:22px; height:22px; fill: var(--color-text--light); }

/* Indicateur de force — conserve .strength-lines/.line + classes bg-* */
.auth--register .strength-lines {
    display:flex; gap: var(--sp-1); margin-top: var(--sp-2);
}
.auth--register .strength-lines .line {
    flex:1 1 auto; height:6px; border-radius: 999px; background: rgba(145,158,171,.25);
}
.bg-transparent { background: transparent !important; }
.bg-red    { background: #ef4444 !important; }     /* danger 500 */
.bg-orange { background: #f59e0b !important; }     /* amber 500 */
.bg-green  { background: #22c55e !important; }     /* green 500 */

/* Hint sous le field */
.auth--register .form__hint {
    margin-top: var(--sp-1);
    font-size: .9rem;
    color: var(--color-text--light);
}

/* CGU + liens */
.auth--register .form__group--terms { margin-top: var(--sp-2); }
.auth--register .form__terms { color: var(--color-text--light); font-size: .95rem; }
.auth--register .form__link {
    color: var(--electric-indigo-600); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.auth--register .form__link:hover { color: var(--coral-dust); border-color: currentColor; }

.auth--register .form__group--links {
    text-align:center; margin-top: var(--sp-5);
}
.auth--register .form__links-text {
    margin: var(--sp-1) 0; color: var(--color-text--light); font-size: .95rem;
}

/* CTA */
.auth--register .form__submit { width:100%; margin-top: var(--sp-2); }
/* Responsive */
@media (max-width: 520px) {
    .auth--register .auth__form { padding: var(--sp-4); border-radius:12px; }
}


.home {
    .home__section {
        padding: 64px 0;
    }


    .hero {
        .hero__eyebrow {
            color: var(--coral-dust);
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .hero__title {
            font-size: 54px;
            line-height: 1.1;
            font-weight: 700;
        }
        .hero__subtitle {
            color: var(--q-muted);
            margin-top: 1rem;
            font-size: 18px;
        }
        .hero__cta {
            display: flex;
            gap: .8rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }


        .hero__stats {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .hero__stats-title {
                font-size: 18px;
                font-weight: 700;
            }
            .hero__stats-list {
                display: flex;
                gap: 18px;

                .hero__stats-item {
                    background: var(--color-bg--secondary);
                    padding: 18px;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    gap: 4px;
                    text-align: center;
                    min-width: 162px;

                    strong {
                        font-size: 30px;
                        color: var(--coral-dust);
                        font-weight: 700;
                    }
                }


            }
        }
    }


}


.connected-objective-dashboard {

    strong {
        color: var(--coral-dust);
        font-weight: 700;
    }

    .dashboard-group {

        .group__title {
            font-family: Anton, sans-serif;
            font-size: 20px;
            margin-bottom: 12px;
        }

        .group__card {
            background-color: var(--color-bg--secondary);
            padding: 18px;
            border-radius: 6px;

            p {
                margin-bottom: 12px;
            }
        }
    }
    .dashboard-group ~ .dashboard-group {
        margin-top: 24px;
    }

    /* _recap.html.twig */
    .dashboard-header {
        display: flex;
        gap: 18px;
        flex-direction: row;
        position: relative;
        margin-bottom: 24px;

        .dashboard-header__cover {
            position: absolute;
            z-index: 1;
            left: 12px;
            width: 100%;
            max-width: 170px;
            border-radius: 12px;
            overflow: hidden;

            img {
                width: 100%;
                display: block;
            }
        }

        .dashboard-header__infos {
            width: 100%;

            .dashboard-header__title {
                display: flex;
                flex-direction: column;
                gap: 18px;
                max-width: 550px;
                margin-left: 200px;
                margin-bottom: 18px;
                min-height: 190px;

                .title-status {
                    border-radius: 2px;
                    background: #E4EAF6;
                    color: #1F273D;
                    font-size: 14px;
                    padding: 4px 12px;
                    width: fit-content;
                }

                h1 {
                    color: #FFF;
                    font-family: Anton, sans-serif;
                    font-size: 52px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 58px;
                    letter-spacing: -1.26px;
                    text-transform: uppercase;
                }
            }

            .dashboard-header__recap {
                display: flex;
                flex-direction: row;
                gap: 24px;

                border-radius: 6px;
                background: var(--color-bg--secondary);
                backdrop-filter: blur(7px);
                padding: 18px 18px 18px 200px;
                width: 100%;

                .recap__kpi {
                    display: flex;
                    flex-direction: row;
                    gap: 12px;

                    .recap__icon {
                        font-size: 30px;
                    }

                    .recap__label {
                        font-family: Anton, sans-serif;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        display: flex;
                        flex-direction: column;

                        span {
                            font-family: Arimo, sans-serif;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            color: var(--coral-dust);
                        }
                    }
                }
            }
        }

    }

    /* _objective_progress.html.twig */
    .dashboard-progress {
        position: relative;
        margin-bottom: 40px;

        .progress__header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            font-size: 18px;

            .progress__badge {
                font-weight: 700;
            }

            .progress__ratio {
            }
        }

        .progress__bar {
            height: 16px;
            background: #0F1116;
            border: 1px solid #1b2233;
            border-radius: 999px;
            overflow: hidden
        }

        .progress__fill {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, #3E3BF0 0%, #F08E6E 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
            border-radius: 999px;
        }
    }

    /* _stats.html.twig */
    .dashboard-stats {
        .stats__list {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 1rem;

            .stats__item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;

                background-color: var(--color-bg--secondary);
                padding: 6px;
                border-radius: 6px;

                strong { font-size: 20px; }
            }

            /* Ligne 1 : 1/3 + 1/3 + 1/3 (2 colonnes chacun) */
            .stats__item:nth-child(1) { grid-column: 1 / span 2; }
            .stats__item:nth-child(2) { grid-column: 3 / span 2; }
            .stats__item:nth-child(3) { grid-column: 5 / span 2; }

            /* Ligne 2 : 1/2 + 1/2 (3 colonnes chacun) */
            .stats__item:nth-child(4) { grid-column: 1 / span 3; }
            .stats__item:nth-child(5) { grid-column: 4 / span 3; }
        }
    }


    /* _monthly_totals.html.twig */
    .monthly__canvaswrap {
        position:relative;
        width:100%;
        min-height:240px
    }

    /* _recent_sessions.html.twig */
    .recent__list {
        margin-bottom: 12px;

        .recent__item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-radius: 6px;
            background: #1F273D;
            backdrop-filter: blur(7px);
            padding: 12px;

            &~.recent__item {
                margin-top: 12px;
            }

            .recent__date {
                font-style: italic;
            }
            .recent__infos {
                font-weight: 700;
            }
            .recent__hint {
                margin-top: 12px;
            }
        }
    }
}


.left-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px;
    width: calc(42px + 24px);
    background-color: var(--color-bg);

    .left-bar__logo {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
    }

    .left-bar__project-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .left-bar__project {
        width: 42px;
        .left-bar__project-img {
            display: block;
            width: 100%;
            border-radius: 4px;
        }
    }
    .left-bar__project-add {
        background: transparent;
        width: 42px;
        height: 42px;
        line-height: 36px;
        font-size: 28px;
        font-weight: 700;
        border-radius: 4px;
        border: 2px solid var(--color-text--light);
        color: var(--color-text--light);
        text-decoration: none;
        display: flex;
        justify-content: center;
        cursor: pointer;
    }
}


/* === GRID SYSTEM - BEM === */

/* Container grid */
.grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--sp-1);
    row-gap: var(--sp-1);
}

/* Column span */
.grid__col {
    grid-column: span 4;
}

/* Span widths */
.grid__col--1  { grid-column: span 1; }
.grid__col--2  { grid-column: span 2; }
.grid__col--3  { grid-column: span 3; }
.grid__col--4  { grid-column: span 4; }

/* Column offset (margin-left simulation) */
.grid__col--offset-1  { grid-column-start: 2; }
.grid__col--offset-2  { grid-column-start: 3; }
.grid__col--offset-3  { grid-column-start: 4; }

/* Order support */
.grid__col--order-1  { order: 1; }
.grid__col--order-2  { order: 2; }
.grid__col--order-3  { order: 3; }
.grid__col--order-4  { order: 4; }
.grid__col--order-5  { order: 5; }
.grid__col--order-6  { order: 6; }
.grid__col--order-7  { order: 7; }
.grid__col--order-8  { order: 8; }
.grid__col--order-9  { order: 9; }
.grid__col--order-10 { order: 10; }
.grid__col--order-11 { order: 11; }
.grid__col--order-12 { order: 12; }

/* === BREAKPOINTS === */

/* Small ≥ 640px */
@media (min-width: 640px) {
    .grid {
        column-gap: var(--sp-2);
        row-gap: var(--sp-2);
    }

    .grid__col--sm-1  { grid-column: span 1; }
    .grid__col--sm-2  { grid-column: span 2; }
    .grid__col--sm-3  { grid-column: span 3; }
    .grid__col--sm-4  { grid-column: span 4; }
}

/* Medium ≥ 768px */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .grid__col {
        grid-column: span 6;
    }

    .grid__col--md-1  { grid-column: span 1; }
    .grid__col--md-2  { grid-column: span 2; }
    .grid__col--md-3  { grid-column: span 3; }
    .grid__col--md-4  { grid-column: span 4; }
    .grid__col--md-5  { grid-column: span 5; }
    .grid__col--md-6  { grid-column: span 6; }
}

/* Large ≥ 1024px */
@media (min-width: 1024px) {
    .grid {
        column-gap: var(--sp-3);
        row-gap: var(--sp-3);
        grid-template-columns: repeat(12, 1fr);
    }
    .grid__col {
        grid-column: span 12;
    }

    .grid__col--lg-1  { grid-column: span 1; }
    .grid__col--lg-2  { grid-column: span 2; }
    .grid__col--lg-3  { grid-column: span 3; }
    .grid__col--lg-4  { grid-column: span 4; }
    .grid__col--lg-5  { grid-column: span 5; }
    .grid__col--lg-6  { grid-column: span 6; }
    .grid__col--lg-7  { grid-column: span 7; }
    .grid__col--lg-8  { grid-column: span 8; }
    .grid__col--lg-9  { grid-column: span 9; }
    .grid__col--lg-10 { grid-column: span 10; }
    .grid__col--lg-11 { grid-column: span 11; }
    .grid__col--lg-12 { grid-column: span 12; }
}

/* XL ≥ 1280px */
@media (min-width: 1280px) {
    .grid {
        column-gap: var(--sp-4);
        row-gap: var(--sp-4);
    }

    .grid__col--xl-1  { grid-column: span 1; }
    .grid__col--xl-2  { grid-column: span 2; }
    .grid__col--xl-3  { grid-column: span 3; }
    .grid__col--xl-4  { grid-column: span 4; }
    .grid__col--xl-5  { grid-column: span 5; }
    .grid__col--xl-6  { grid-column: span 6; }
    .grid__col--xl-7  { grid-column: span 7; }
    .grid__col--xl-8  { grid-column: span 8; }
    .grid__col--xl-9  { grid-column: span 9; }
    .grid__col--xl-10 { grid-column: span 10; }
    .grid__col--xl-11 { grid-column: span 11; }
    .grid__col--xl-12 { grid-column: span 12; }
}


.sub-header {
    width: 100%;
    height: 48px;
    margin-bottom: 36px;
    border-radius: 6px;
    opacity: 0.5;
    background: linear-gradient(90deg, #1F273D 30.77%, rgba(62, 59, 240, 0.20) 80%, rgba(62, 59, 240, 0.0) 100%);
}


body:before{
    content:"";
    display:block;
    width: 376px;
    height: 376px;
    border-radius: 376px;
    opacity: 0.12;
    background: var(--coral-dust);
    filter: blur(100px);
    position: fixed;
    inset: 0 auto auto 0;
    pointer-events: none;
    z-index: 0;
}
body:after {
    content:"";
    display:block;
    width: 449px;
    height: 798px;
    border-radius: 798px;
    opacity: 0.12;
    background: var(--electric-indigo-600);
    filter: blur(100px);
    position: fixed;
    inset: auto -136px -118px auto;
    pointer-events: none;
    z-index: 0;
}
main {
    display: flex;
    flex-direction: row;
    padding: 12px 0;
    gap: 12px;
    height: calc(100% - 59px);

    .content {
        flex: 1;
        position: relative;
    }
}
.is-hidden, [hidden], .grecaptcha-badge { display: none !important; }

/* ===== Page générique ===== */
.page { padding: var(--sp-6) 0; }
.page__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.page__title { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--color-text); }
.page__actions { display: flex; gap: var(--sp-2); }

/* ===== Cards (liste générique) ===== */
.cards { /* ul */ display: block; }
.card {
    position: relative;
    background: var(--color-bg--secondary);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: var(--sp-3);
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.08); }
.card:focus-within { outline: 2px solid color-mix(in srgb, var(--electric-indigo-600) 60%, transparent); outline-offset: 2px; }

.card__link {
    display: block; color: inherit; text-decoration: none;
}
.card__title {
    font-size: 18px; line-height: 1.35; font-weight: 700; margin-bottom: var(--sp-1);
}
.card__subtitle {
    color: var(--color-text--light); font-size: 0.95rem; margin-bottom: var(--sp-2);
}

/* ===== Tags (pilules génériques) ===== */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .85rem; line-height: 1; color: var(--color-text);
    background: color-mix(in srgb, var(--electric-indigo-600) 8%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--electric-indigo-600) 12%, transparent);
}

/* ===== Empty state générique ===== */
.empty {
    display: grid; place-items: center;
    text-align: center; padding: var(--sp-8) var(--sp-4);
    background: var(--color-bg--secondary);
    border: 1px solid rgba(0,0,0,.06); border-radius: 14px;
}
.empty__illustration { font-size: 56px; line-height: 1; margin-bottom: var(--sp-3); }
.empty__title { font-size: 22px; font-weight: 700; margin-bottom: var(--sp-1); }
.empty__subtitle { color: var(--color-text--light); margin-bottom: var(--sp-3); }
.empty__cta { }

/* ===== Bouton primaire (cohérent plateforme) ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: var(--sp-2) var(--sp-4);
    border-radius: 999px; border: 1px solid transparent;
    text-decoration: none; font-weight: 700; transition: transform .06s, box-shadow .2s, background-color .2s;
}
.btn--primary {
    background: var(--electric-indigo-600); color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--electric-indigo-600) 25%, transparent);
}
.btn--primary:hover {
    background: color-mix(in srgb, var(--electric-indigo-600) 85%, var(--coral-dust));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--electric-indigo-600) 32%, transparent);
}
.btn--primary:active { transform: translateY(1px); }

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .page__header { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
    .page__actions { width: 100%; }
    .page__actions .btn { width: 100%; }
}

/* ===== Page Projet ===== */
.page--project { padding: var(--sp-6) 0; }

/* Breadcrumb */
.breadcrumb__link {
    color: var(--color-text--light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.breadcrumb__link:hover {
    color: var(--electric-indigo-600);
    border-color: currentColor;
}

/* Header */
.page__header--stack { margin-bottom: var(--sp-4); }
.page__title { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--color-text); }
.page__subtitle { color: var(--color-text--light); margin-top: var(--sp-1); font-size: 0.98rem; }

/* Section titre (réutilisable) */
.section { margin-top: var(--sp-5); }
.section__title {
    font-size: 1.05rem; font-weight: 700; margin-bottom: var(--sp-2);
    color: var(--color-text);
}

/* Meta en key/value (réutilisable) */
.meta { margin-bottom: var(--sp-4); }
.kv { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.kv__item { display: grid; grid-template-columns: 140px 1fr; align-items: start; gap: var(--sp-2); }
.kv__key   { color: var(--color-text--light); font-weight: 600; }
.kv__value { color: var(--color-text); }
@media (max-width: 560px) {
    .kv__item { grid-template-columns: 1fr; }
}

/* Badge statut (réutilisable) */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .85rem; line-height: 1;
    background: color-mix(in srgb, var(--electric-indigo-600) 8%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--electric-indigo-600) 12%, transparent);
    color: var(--color-text);
}
.badge--status-draft {
    background: color-mix(in srgb, #f59e0b 15%, var(--color-bg));
    border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}
.badge--status-published {
    background: color-mix(in srgb, #22c55e 15%, var(--color-bg));
    border-color: color-mix(in srgb, #22c55e 30%, transparent);
}
.badge--status-finished,
.badge--status-archived {
    background: color-mix(in srgb, #94a3b8 18%, var(--color-bg));
    border-color: color-mix(in srgb, #94a3b8 32%, transparent);
}

/* Tags : réutilise ton composant si déjà en place */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    display: inline-flex; align-items:center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .85rem; line-height: 1; color: var(--color-text);
    background: color-mix(in srgb, var(--electric-indigo-600) 8%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--electric-indigo-600) 12%, transparent);
}

/* Prose (si non déjà stylée) */
.prose { color: var(--color-text); line-height: 1.65; }
.prose p { margin: 0 0 var(--sp-2); }
.prose a { color: var(--electric-indigo-600); text-decoration: underline; }

/* Actions */
.page__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }



/* Container classique : centré, max 1260px + padding */
.container {
    width: 100%;
    max-width: calc(1660px + 2 * var(--sp-2));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    box-sizing: border-box;
}
.container--small {
    max-width: calc(1260px + 2 * var(--sp-2));
}

/* Container fluide : pleine largeur avec padding uniquement */
.container--fluid {
    width: 100%;
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    box-sizing: border-box;
}


.btn {
    display: block;
    width: fit-content;
    text-decoration: none;
    border: 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;

    &.btn--primary {
        background: var(--electric-indigo-600);
        color: #fff;
    }
    &.btn--ghost {
        background: transparent;
        color: var(--coral-dust);
        border: 1px solid #2a3550;
    }
}

/* 🌶️ Form error design */
.form__errors--global {
    background: #FFEFEF;
    border: 1px solid #E53935;
    color: #C62828;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    text-align: center;
}

.form__group ul {
    list-style: none;
    margin: 6px 0 6px;
    padding: 0;
}

.form__group ul li {
    background: #FCE8E6;
    color: #C62828;
    font-size: 0.9rem;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    line-height: 1.4;
}

/* On colore le champ en erreur */
.form__group input.is-invalid,
.form__group textarea.is-invalid,
.form__group select.is-invalid {
    border-color: #C62828;
    background-color: #FFF5F5;
}


/* ===== Layout global ===== */
.form { display:block; }
.form--stack { max-width: 720px; }
.form__row { margin-bottom: var(--sp-4); }

/* ===== Libellés, aides, erreurs ===== */
.form__label {
    display:inline-block; margin-bottom: var(--sp-1);
    font-weight: 600; color: var(--color-text);
}
.form__help { margin-top: var(--sp-1); color: var(--color-text--light); font-size: .95rem; }
.form__error { color:#e11d48; font-weight:600; margin-top: var(--sp-1); }

/* ===== Contrôles ===== */
.form__control,
.form select,
.form textarea,
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="password"] {
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 10px;
    padding: var(--sp-2) var(--sp-3);
    font-size: 1rem; line-height: 1.2;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form__control:hover { border-color: var(--muted); }
.form__control:focus-visible {
    outline: none;
    border-color: var(--electric-indigo-600);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--electric-indigo-600) 20%, transparent);
}
.form__control--textarea { min-height: 160px; resize: vertical; }

/* ===== Fieldset & legend ===== */
.form__fieldset {
    border: 1px dashed color-mix(in srgb, var(--electric-indigo-600) 25%, transparent);
    border-radius: 12px;
    padding: var(--sp-3);
    margin: var(--sp-4) 0;
    background: color-mix(in srgb, var(--electric-indigo-600) 5%, var(--color-bg--secondary));
}
.form__legend {
    padding: 0 var(--sp-1);
    font-weight: 700; color: var(--color-text);
    margin-left: var(--sp-1);
}

/* ===== Groupes de choix (checkbox/radio expanded) ===== */
.choices input[type="checkbox"],
.choices input[type="radio"] {
    width: 18px; height: 18px; margin-right: var(--sp-1);
    accent-color: var(--electric-indigo-600);
}
.choices label { color: var(--color-text); cursor: pointer; }


/* ===== Actions ===== */
.form__actions { display:flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding: var(--sp-2) var(--sp-4); font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:.2s; }
.btn--primary { background: var(--electric-indigo-600); color:#fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--electric-indigo-600) 25%, transparent); }
.btn--primary:hover { background: color-mix(in srgb, var(--electric-indigo-600) 85%, var(--coral-dust)); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: rgba(0,0,0,.15); }
.btn--ghost:hover { border-color: var(--electric-indigo-600); color: var(--electric-indigo-600); }

/* ===== Uploader couverture (ratio 170:260) ===== */
.uploader { display:grid; gap: var(--sp-2); cursor: pointer; }
.uploader__preview {
    position: relative;
    aspect-ratio: calc(var(--ratio-w,170) / var(--ratio-h,260));
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(0,0,0,.1);
    background: var(--color-bg--secondary);
    display:grid; place-items:center;
}
.uploader__placeholder { text-align:center; color: var(--color-text--light); padding: var(--sp-3); }
.uploader__img { width:100%; height:100%; object-fit: cover; display:block; }
.uploader__input { display:none; }

.uploader__preview:focus-within { outline: 2px solid color-mix(in srgb, var(--electric-indigo-600) 60%, transparent); outline-offset: 2px; }

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .form--stack { max-width: 100%; }
    .form__actions { flex-direction: column; }
    .form__actions .btn { width: 100%; }
}

/* ===== Layout 2 colonnes ===== */
.form-layout {
    display: grid;
    grid-template-columns: 1fr 300px;           /* main + aside */
    gap: var(--sp-4);
    align-items: start;
}
.form-layout__main  { min-width: 0; }
.form-layout__aside { position: sticky; top: var(--sp-6); }

/* Mobile: une seule colonne */
@media (max-width: 980px) {
    .form-layout { grid-template-columns: 1fr; }
    .form-layout__aside { position: static; }
}

/* ===== Groupes de choix ===== */
.choices {
    display: grid;
    gap: var(--sp-2);
}
.choices--grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* --- Cas particulier Symfony: <input><label><input><label> --- */

/* Cache l’input natif (mais accessible clavier) */
.choices--cards input[type="checkbox"],
.choices--cards input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Le label devient une carte */
.choices--cards label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 10px;
    background: var(--color-bg--secondary);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    color: var(--color-text);
    font-weight: 500;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}

/* Hover */
.choices--cards label:hover {
    border-color: var(--electric-indigo-600);
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

/* Focus (quand on tab sur la case) */
.choices--cards input[type="checkbox"]:focus + label,
.choices--cards input[type="radio"]:focus + label {
    outline: 2px solid var(--electric-indigo-600);
    outline-offset: 2px;
}

/* État sélectionné */
.choices--cards input[type="checkbox"]:checked + label,
.choices--cards input[type="radio"]:checked + label {
    background: color-mix(in srgb, var(--electric-indigo-600) 25%, var(--color-bg--secondary));
    border-color: var(--electric-indigo-600);
    color: #fff;
    box-shadow: 0 0 12px color-mix(in srgb, var(--electric-indigo-600) 30%, transparent);
}

/* Animation légère */
.choices--cards label:active {
    transform: scale(.97);
}


/* ===== Uploader couverture : taille maîtrisée ===== */
.uploader { display: grid; gap: var(--sp-2); cursor: pointer; }

/* Colonne aside = 300px ⇒ on garde une preview confortable, ratio 170/260 */
.uploader__preview {
    width: 100%;
    aspect-ratio: 170 / 260;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.12);
    background: var(--color-bg--secondary);
    display: grid; place-items: center;
}
.uploader__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uploader__placeholder { text-align: center; color: var(--color-text--light); padding: var(--sp-3); }
.uploader__input { display: none; }

/* Focus visible sur la preview (accessibilité) */
.uploader__preview:focus-within {
    outline: 2px solid color-mix(in srgb, var(--electric-indigo-600) 60%, transparent);
    outline-offset: 2px;
}


/* Visually hidden (si tu ne l'as pas déjà) */
.sr-only {
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Form inline compact */
.form--inline-small {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.form--inline-small .form__help {
    margin-left: 0;
    color: var(--color-text--light);
    font-size: .85rem;
}

/* Champ time plus étroit */
.form__control--time {
    width: 8.5rem; /* 08:30 */
    text-align: center;
    padding: var(--sp-2) var(--sp-2);
}

/* Bouton danger */
.btn--danger {
    background: #e11d48; /* rose-600 lisible sur dark */
    color: #fff;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: var(--sp-2) var(--sp-3);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(225, 29, 72, .28);
    transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn--danger:hover {
    background: #be123c; /* rose-700 */
    box-shadow: 0 10px 28px rgba(225, 29, 72, .34);
}
.btn--danger:active { transform: translateY(1px); }

/* === Radio cards (réutilisable) === */
.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.radio-card {
    display: block;
    cursor: pointer;
}
.radio-card__input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__content {
    height: 100%;
    display: grid; align-content: start; gap: 6px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-bg--secondary);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    transition: border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.radio-card__title { font-weight: 700; }
.radio-card__desc  { color: var(--color-text--light); font-size: .95rem; }
.radio-card:hover .radio-card__content {
    border-color: var(--electric-indigo-600);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.radio-card__input:focus + .radio-card__content { outline: 2px solid var(--electric-indigo-600); outline-offset: 2px; }
.radio-card__input:checked + .radio-card__content {
    background: color-mix(in srgb, var(--electric-indigo-600) 20%, var(--color-bg--secondary));
    border-color: var(--electric-indigo-600);
    color: #fff;
}

/* === Chips (presets) === */
.chips { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.chips__group { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.chips__label { color: var(--color-text--light); font-weight: 600; }
.chip {
    border: 1px solid rgba(255,255,255,.12);
    background: var(--color-bg--secondary);
    color: var(--color-text);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    transition: border-color .2s, background .2s, transform .06s;
}
.chip:hover { border-color: var(--electric-indigo-600); }
.chip:active { transform: translateY(1px); }

/* === Alerte (réutilisable) === */
.q-alert {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: color-mix(in srgb, #ef4444 10%, var(--color-bg--secondary));
}
.q-alert--error { border-color: #ef4444; }


.modal { position: fixed; inset: 0; display: none; }
.modal.is-open { display: grid; place-items: center; z-index: 999; }
.modal__overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.modal__dialog {
    position: relative; max-height: 80vh; overflow: auto;
    background: var(--color-bg--secondary); color: var(--color-text);
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    box-shadow: 0 20px 80px rgba(0,0,0,.35); padding: var(--sp-4); width: min(720px, 90vw);
}
.modal__dialog--sm { width: min(480px, 90vw); }
.modal__dialog--md { width: min(720px, 90vw); }
.modal__dialog--lg { width: min(960px, 95vw); }

.modal__header { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.modal__title  { font-size: 1.25rem; font-weight: 700; }
.modal__close  { background: transparent; border: 0; color: var(--color-text--light); cursor: pointer; font-size: 1.2rem; }
.modal__body   { display:block; }
.modal__footer { display:flex; justify-content:flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }


.sessionform .sf-fieldset {
    margin-top: 16px;
    padding: 12px;
}

.sessionform .sf-legend {
    font-family: Anton, sans-serif;
}

.sessionform .sf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sessionform .sf-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sessionform .sf-label span {
    font-weight: 600;
}

.sessionform input[type="time"],
.sessionform input[type="number"] {
    background: #0F1116;
    border: 1px solid #1b2233;
    border-radius: 6px;
    color: #fff;
    padding: 10px 12px;
    font-size: 14px;
}

.sessionform input::placeholder {
    color: #6e7b98;
}

.sessionform .sf-hint {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.sessionform .sf-toggle {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sessionform .sf-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0F1116;
    border: 1px solid #1b2233;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
}

.sessionform .sf-radio input {
    accent-color: #3E3BF0;
}

.sessionform .sf-inline {
    max-width: 220px;
}

.sessionform .sf-preview {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #1F273D;
    font-weight: 700;
}

.sessionform .sf-errors {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #3a0d12;
    border: 1px solid #5b1c22;
    color: #ffd7db;
}

.sessionform .sf-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}


.header {
    position: relative;
    background-color: var(--color-bg--secondary);
    padding: 9px 12px;
    border-radius: 0 0 6px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header__breadcrumb {
        display: flex;
        flex-direction: row;
        gap: 6px;
        align-items: center;

        &:before {
            content: "Beta V1.0";
            display: block;
            width: fit-content;
            background-color: #aa7fcb;
            color: #FFF;
            margin-right: 12px;
            padding: 3px 6px;
            border-radius: 3px;
        }
        .breadcrumb__container {
            display: flex;
            gap: 6px;
            list-style: none;
            .breadcrumb__item {
                color: var(--color-text--light);

                .breadcrumb__link {
                    text-decoration: none;
                    color: var(--color-text);
                    font-weight: 500;
                }
            }
        }
    }
    .header__shortcuts {
        background-color: #282F49;
        padding: 12px;
        display: flex;
        gap: 12px;
        border-radius: 6px;

        .header__shortcuts-separator {
            width: 1px;
            background-color: var(--color-text--light);
            display: block;
        }

        .header__shortcuts-icons {
            a {
                color: var(--color-text--light);
            }

            a&:hover, a&:focus, a&:visited {
                color: var(--color-text--light);
            }
        }
    }
}



.menu {
    position: relative;
    width: 20%;
    max-width: 200px;
    background-color: var(--color-bg--secondary);
    border-radius: 6px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;

    .menu__user {
        display: flex;
        flex-direction: column;

        .menu__user-avatar {
            margin-bottom: 18px;

            img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                display: block;
                background: var(--color-text);
            }
        }
        .menu__user-text {
            color: var(--color-text--light);
            font-size: 14px;
            margin-bottom: 6px;
        }
        .menu__user-pseudo {
            font-size: 18px;
            font-weight: 700;
        }
    }
    .menu__separator {
        width: 100%;
        height: 2px;
        background-color: var(--color-text--light);
        display: block;
    }
    .menu__separator-title {
        display: flex;
        flex-direction: row;
        gap: 6px;
        align-items: center;
        color: var(--color-text--light);

        span:first-child {
            font-family: Anton, sans-serif;
            font-size: 12px;
        }
        span:last-child {
            width: 100%;
            max-width: 70px;
            height: 1px;
            background-color: var(--color-text--light);
            display: block;
        }
    }

    .menu__list {

        .menu__list-item {

        }
        .menu__list-link {
            color: var(--color-text--light);
            text-decoration: none;
        }
    }
}


.anton {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.arimo-regular {
    font-family: "Arimo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.arimo-medium {
    font-family: "Arimo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.arimo-semibold {
    font-family: "Arimo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.arimo-bold {
    font-family: "Arimo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}