* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f7f5fb;
    color: #29252f;

    user-select: none;
}


/* =========================
HEADER
========================= */

header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 18px 5%;

    background: white;

    border-bottom:
        1px solid #e8e3ed;
}

header h1 {
    margin: 3px 0 0;
}

.date {
    margin: 0;

    color: #887f91;
}

header button {
    border: 0;

    padding: 10px 17px;

    border-radius: 20px;

    background: #eee8f7;

    cursor: pointer;
}


/* =========================
CONTENU
========================= */

main {
    width: min(1400px, 96%);

    margin: 25px auto;
}

.card {
    background: white;

    border-radius: 20px;

    padding: 25px;

    box-shadow:
        0 6px 25px
        rgba(0, 0, 0, .06);
}


.card-title > div {
    display: flex;

    align-items: center;

    gap: 10px;
}

.card-title h2 {
    margin: 0;
}

.icon {
    font-size: 26px;
}


/* =========================
NAVIGATION DU MOIS
========================= */

.month-navigation {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;

    margin: 25px 0 20px;
}

.month-navigation h3 {

    width: 220px;

    text-align: center;

    margin: 0;

    font-size: 21px;

    text-transform: capitalize;
}

.month-navigation button {

    width: 40px;
    height: 40px;

    border: 1px solid #ddd5e4;

    border-radius: 50%;

    background: white;

    font-size: 25px;

    cursor: pointer;
}

.month-navigation button:hover {
    background: #f1ecf6;
}


/* =========================
OUTILS
========================= */

.tools {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}

.tools button {

    padding: 9px 13px;

    border:

        1px solid
        #ddd5e4;

    border-radius: 10px;

    background: white;

    cursor: pointer;
}

.tools button:hover {
    background: #f6f2f9;
}

.tools button.active {

    border:
        2px solid
        #6f5a89;

    background: #f0eaf6;
}


/* =========================
TABLEAU
========================= */

.sleep-table-wrapper {

    overflow-x: auto;

    padding-bottom: 12px;
}

.sleep-table {

    display: grid;

    /*
    1 colonne pour le jour
    +
    48 demi-heures
    */

    grid-template-columns:
        42px repeat(48, 21px);

    width: max-content;

    margin: auto;
}


/* =========================
HEURES
========================= */

.corner {

    position: sticky;

    left: 0;

    z-index: 4;

    background: white;

    border-right:
        1px solid #dcd6e2;

    border-bottom:
        1px solid #dcd6e2;
}

.hour {

    height: 35px;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding-bottom: 5px;

    font-size: 11px;

    color: #777;
}


/*
Les heures occupent
deux cases de 30 minutes.
*/

.hour-label {

    grid-column:
        span 2;
}


/* =========================
JOURS
========================= */

.day {

    position: sticky;

    left: 0;

    z-index: 3;

    width: 42px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: white;

    border-right:
        1px solid #d5cedc;

    border-bottom:
        1px solid #d5cedc;

    font-size: 12px;

    font-weight: bold;
}


/* JOUR ACTUEL */

.day.today {

    background: #eee6f7;

    color: #6d4c89;
}


/* =========================
CASES
========================= */

.sleep-cell {

    width: 21px;
    height: 25px;

    border-right:
        1px solid #eeeaf1;

    border-bottom:
        1px solid #d5cedc;

    cursor: crosshair;

    transition:
        transform .05s;
}


/*
Toutes les heures entières
ont une séparation légèrement
plus foncée.
*/

.sleep-cell.full-hour {

    border-left:
        1px solid #cfc7d6;
}


.sleep-cell:hover {

    outline:
        2px solid
        #776489;

    z-index: 2;
}


/* =========================
COULEURS
========================= */

.sleep-cell.lights,
.legend-color.lights {

    background: #ff9827;
}


.sleep-cell.sleeping,
.legend-color.sleeping {

    background: #a89ce5;
}


.sleep-cell.wake,
.legend-color.wake {

    background: #df4596;
}


.sleep-cell.nap,
.legend-color.nap {

    background: #49a078;
}


/* =========================
LEGENDE
========================= */

.legend {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 20px;

    font-size: 14px;
}


.legend div {

    display: flex;

    align-items: center;

    gap: 7px;
}


.legend-color {

    width: 16px;
    height: 16px;

    border-radius: 3px;
}


/* =========================
MESSAGE SAUVEGARDE
========================= */

.save-message {

    margin-top: 18px;

    text-align: center;

    font-size: 12px;

    color: #999;
}


/* =========================
MOBILE
========================= */

@media(max-width: 600px) {

    header {

        padding: 15px;
    }

    header h1 {

        font-size: 22px;
    }

    .card {

        padding: 15px;
    }

    .sleep-table {

        margin: 0;
    }

}
/* =========================
NAVIGATION APPLICATION
========================= */

body {
    padding-bottom: 90px;
}

.bottom-nav {
    position: fixed;

    bottom: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: min(600px, calc(100% - 30px));
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    padding: 7px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #e6dfeb;
    border-radius: 22px;

    box-shadow:
        0 8px 35px
        rgba(53, 38, 67, .14);

    z-index: 1000;
}

.nav-item {
    flex: 1;
    height: 55px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 3px;

    border: 0;
    border-radius: 16px;

    background: transparent;

    color: #918899;

    font-size: 11px;

    cursor: pointer;

    transition: .2s;
}

.nav-icon {
    font-size: 22px;
    line-height: 22px;
}

.nav-item:hover {
    background: #f7f3fa;
    color: #665673;
}

.nav-item.active {
    background: #eee7f5;
    color: #654d7c;
    font-weight: bold;
}


/* =========================
AMÉLIORATION TABLEAU
========================= */

.sleep-table-wrapper {
    position: relative;

    max-height: 68vh;

    overflow: auto;

    border:
        1px solid
        #eee9f1;

    border-radius: 12px;
}


/*
La première ligne reste visible
quand on descend.
*/

.hour,
.corner {
    position: sticky;

    top: 0;

    z-index: 10;

    background: white;
}

.corner {
    left: 0;

    z-index: 20;
}


/*
Les jours restent visibles
quand on va horizontalement.
*/

.day {
    position: sticky;

    left: 0;

    z-index: 8;

    background: white;
}

.day.today {
    background: #eee6f7;
}


/* Ombre discrète sous les heures */

.hour,
.corner {
    box-shadow:
        0 1px 0
        #ded8e3;
}
/* =========================
PAGES
========================= */

.app-page {
    display: none;
}

#sleepPage {
    display: block;
}

.today-heading {
    margin-bottom: 25px;
}

.today-heading h2 {
    margin: 5px 0;
    font-size: 28px;
}

.today-heading p {
    color: #8c8393;
}

.tracking-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.tracking-card {
    background: white;

    padding: 22px;

    border-radius: 18px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .05);
}

.tracking-card h3 {
    margin-top: 0;
}

.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.choice {
    border: 1px solid #e2dce6;

    background: #faf9fb;

    border-radius: 12px;

    padding: 11px 15px;

    cursor: pointer;

    transition: .15s;
}

.choice:hover {
    transform: translateY(-2px);
    background: #f5f1f8;
}

.choice.selected {
    border: 2px solid #715888;

    background: #eee6f5;
}

.choice span {
    display: block;
    font-size: 22px;
    margin-bottom: 3px;
}

.treatment-card {
    grid-column: 1 / -1;
}

@media(max-width: 750px) {

    .tracking-grid {
        grid-template-columns: 1fr;
    }

    .treatment-card {
        grid-column: auto;
    }
}
/* =====================================
CALENDRIER
===================================== */

.calendar-card {

    background: white;

    padding: 25px;

    border-radius: 20px;

    box-shadow:
        0 6px 25px
        rgba(0, 0, 0, .06);
}


.calendar-header {

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 20px;
}


.calendar-header h2 {

    margin: 3px 0 0;
}


.calendar-small-title {

    margin: 0;

    color: #958a9c;

    font-size: 13px;
}


#calendarCategory {

    padding: 10px 15px;

    border:

        1px solid
        #ded7e4;

    border-radius: 12px;

    background: white;

    font-size: 14px;

    cursor: pointer;
}


/* NAVIGATION MOIS */

.calendar-navigation {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;

    margin: 25px 0;
}


.calendar-navigation h3 {

    width: 220px;

    text-align: center;

    text-transform: capitalize;

    margin: 0;
}


.calendar-navigation button {

    width: 40px;
    height: 40px;

    border:

        1px solid
        #ddd5e4;

    border-radius: 50%;

    background: white;

    font-size: 24px;

    cursor: pointer;
}


.calendar-navigation button:hover {

    background: #f4eff7;
}


/* =====================================
LIGNES
===================================== */

.calendar-rows {

    width: min(850px, 100%);

    margin: auto;

    border-top:

        1px solid
        #e5dfe8;
}


.calendar-row {

    display: grid;

    grid-template-columns:
        45px 1fr;

    min-height: 28px;

    border-bottom:

        1px solid
        #e5dfe8;
}


.calendar-day {

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 12px;

    font-weight: bold;

    border-right:

        1px solid
        #e5dfe8;
}


.calendar-value {

    display: flex;

    align-items: center;

    padding: 0 12px;

    font-size: 12px;

    font-weight: 600;

    transition: .15s;
}


.calendar-row:hover
.calendar-value {

    filter: brightness(.97);
}


/* JOUR ACTUEL */

.calendar-row.calendar-today {

    outline:

        2px solid
        #806893;

    outline-offset: -2px;
}


/* =====================================
LEGENDE
===================================== */

.calendar-legend {

    width: min(850px, 100%);

    margin: 25px auto 0;

    display: flex;

    flex-wrap: wrap;

    gap: 18px;
}


.calendar-legend-item {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;
}


.calendar-legend-color {

    width: 16px;
    height: 16px;

    border-radius: 4px;
}


/* MOBILE */

@media(max-width: 600px) {

    .calendar-header {

        align-items: flex-start;

        flex-direction: column;
    }

    #calendarCategory {

        width: 100%;
    }

}
/* =====================================
ANCIENNE JOURNEE
===================================== */

.past-date-notice {
    display: none;

    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin: 12px 0 20px;
    padding: 12px 16px;

    background: #eee7f5;

    border: 1px solid #ded3e8;
    border-radius: 12px;

    color: #654d7c;
}

.past-date-notice button {
    border: 0;
    border-radius: 10px;

    padding: 8px 13px;

    background: white;

    color: #654d7c;
    font-weight: 600;

    cursor: pointer;
}

.past-date-notice button:hover {
    background: #f8f5fa;
}
/* =====================================
PAGE ANALYSES
===================================== */

#statsPage {
    width: 100%;
}


/* TITRE */

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}

.stats-header h2 {
    margin: 3px 0 0;

    font-size: 28px;
}

.stats-small-title {
    margin: 0;

    color: #958a9c;

    font-size: 13px;
}


/* NAVIGATION DU MOIS */

.stats-navigation {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;

    margin: 25px 0 30px;
}

.stats-navigation h3 {
    width: 220px;

    margin: 0;

    text-align: center;
    text-transform: capitalize;

    font-size: 20px;
}

.stats-navigation button {
    width: 40px;
    height: 40px;

    border: 1px solid #ddd5e4;
    border-radius: 50%;

    background: white;

    font-size: 24px;

    cursor: pointer;

    transition: .15s;
}

.stats-navigation button:hover {
    background: #eee7f5;

    transform: scale(1.05);
}


/* CARTES */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}

.stats-card {
    min-height: 130px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 22px;

    background: white;

    border: 1px solid #eee8f1;
    border-radius: 18px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .05);
}

.stats-icon {
    width: 48px;
    height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: #f0e9f6;

    font-size: 24px;
}

.stats-card p {
    margin: 0 0 7px;

    color: #8c8393;

    font-size: 13px;
}

.stats-card strong {
    display: block;

    color: #29252f;

    font-size: 20px;
}


/* TABLETTE */

@media(max-width: 1000px) {

    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* TELEPHONE */

@media(max-width: 600px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stats-card {
        min-height: 100px;
    }

    .stats-navigation h3 {
        width: 170px;
        font-size: 17px;
    }

}
/* =====================================
GRAPHIQUE ANALYSES
===================================== */

.stats-chart-card {
    margin-top: 22px;
    padding: 25px;

    background: white;

    border: 1px solid #eee8f1;
    border-radius: 18px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .05);
}


/* EN-TETE */

.stats-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 25px;
}

.stats-chart-header h3 {
    margin: 4px 0 0;

    font-size: 20px;
}


/* SELECTEUR */

#statsChartCategory {
    padding: 10px 15px;

    border: 1px solid #ded7e4;
    border-radius: 12px;

    background: white;

    color: #29252f;

    font-size: 14px;

    cursor: pointer;
}


/* ZONE DU GRAPHIQUE */

.stats-chart-wrapper {
    width: 100%;

    overflow-x: auto;

    padding: 10px 0 15px;
}

.stats-chart {
    position: relative;

    min-width: 850px;
    height: 300px;

    border-left: 1px solid #e7e1ea;
    border-bottom: 1px solid #e7e1ea;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 59px,
            #f0ecf2 60px
        );
}


/* LEGENDE */

.stats-chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 15px;
}

.stats-chart-legend-item {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #716978;

    font-size: 13px;
}

.stats-chart-legend-color {
    width: 12px;
    height: 12px;

    border-radius: 50%;
}


/* MOBILE */

@media(max-width: 600px) {

    .stats-chart-card {
        padding: 18px;
    }

    .stats-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }

    #statsChartCategory {
        width: 100%;
    }

}
.chart-level {
    position: absolute;

    left: 8px;

    transform: translateY(-50%);

    color: #9a919f;

    font-size: 10px;

    pointer-events: none;
}

.chart-day {
    position: absolute;

    bottom: 8px;

    transform: translateX(-50%);

    color: #9a919f;

    font-size: 10px;
}

.chart-point {
    position: absolute;

    width: 12px;
    height: 12px;

    border: 3px solid white;
    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .18);

    z-index: 3;
}

.chart-line {
    position: absolute;

    height: 2px;

    background: #c9bdcf;

    transform-origin: left center;

    z-index: 2;
}
/* =====================================
REPARTITION ANALYSES
===================================== */

.stats-distribution-card {
    margin-top: 22px;
    padding: 25px;

    background: white;

    border: 1px solid #eee8f1;
    border-radius: 18px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .05);
}


.stats-distribution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 25px;
}


.stats-distribution-header h3 {
    margin: 4px 0 0;

    font-size: 20px;
}


#statsDistributionTotal {
    color: #938a99;

    font-size: 13px;
}


/* UNE LIGNE */

.distribution-row {
    display: grid;

    grid-template-columns:
        150px
        minmax(100px, 1fr)
        55px;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}


.distribution-label {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #514a55;

    font-size: 14px;
}


/* PETIT POINT */

.distribution-dot {
    flex-shrink: 0;

    width: 10px;
    height: 10px;

    border-radius: 50%;
}


/* FOND DE LA BARRE */

.distribution-bar {
    position: relative;

    width: 100%;
    height: 12px;

    overflow: hidden;

    background: #f2eef4;

    border-radius: 999px;
}


/* PARTIE COLOREE */

.distribution-fill {
    width: 0;
    height: 100%;

    border-radius: 999px;

    transition:
        width .4s ease;
}


/* POURCENTAGE */

.distribution-percent {
    color: #766e7b;

    font-size: 13px;
    font-weight: 600;

    text-align: right;
}


/* MOBILE */

@media(max-width: 600px) {

    .stats-distribution-card {
        padding: 18px;
    }


    .stats-distribution-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .distribution-row {
        grid-template-columns:
            110px
            1fr
            45px;

        gap: 10px;
    }


    .distribution-label {
        font-size: 12px;
    }

}
/* =====================================
SOMMEIL - ANALYSES
===================================== */

.stats-sleep-section {
    margin-top: 22px;
    padding: 25px;

    background: white;

    border: 1px solid #eee8f1;
    border-radius: 18px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .05);
}


.stats-sleep-header {
    margin-bottom: 22px;
}


.stats-sleep-header h3 {
    margin: 4px 0 0;

    font-size: 20px;
}


/* LES 4 CARTES */

.stats-sleep-grid {
    display: grid;
    width: 100%;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;
}

.stats-sleep-card {
    min-height: 105px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

    background: #faf8fc;

    border: 1px solid #eee8f1;
    border-radius: 15px;
}


.stats-sleep-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #eee7f5;

    border-radius: 13px;

    font-size: 22px;
}


.stats-sleep-card p {
    margin: 0 0 7px;

    color: #8c8393;

    font-size: 12px;
}


.stats-sleep-card strong {
    display: block;

    color: #29252f;

    font-size: 19px;
}


/* TABLETTE */

@media(max-width: 1000px) {

    .stats-sleep-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* TELEPHONE */

@media(max-width: 600px) {

    .stats-sleep-section {
        padding: 18px;
    }

    .stats-sleep-grid {
        grid-template-columns: 1fr;
    }

}
/* =====================================
GRAPHIQUE SOMMEIL
===================================== */

.sleep-chart-block {
    width: 100%;
    max-width: none;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid #eee8f1;

    box-sizing: border-box;
}


/* TITRE */

.sleep-chart-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.sleep-chart-title h4 {
    margin: 4px 0 0;

    color: #29252f;

    font-size: 18px;
}


.sleep-chart-reference {
    color: #9b91a3;

    font-size: 12px;
}


/* ZONE DU GRAPHIQUE */

.sleep-chart-wrapper {
    width: 100%;
    max-width: none;

    overflow: visible;

    padding: 10px 0 30px;

    box-sizing: border-box;
}


/* GRAPHIQUE */

.sleep-stats-chart {
    position: relative;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 300px;

    border-left: 1px solid #ddd5e2;
    border-bottom: 1px solid #ddd5e2;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 49px,
            #eee8f1 50px
        );

    box-sizing: border-box;
}


/* POINTS */

.sleep-chart-point {
    position: absolute;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #8d68a8;

    transform: translate(
        -50%,
        -50%
    );

    z-index: 3;

    cursor: pointer;
}


/* LIGNES ENTRE LES POINTS */

.sleep-chart-line {
    position: absolute;

    height: 2px;

    background: #b39ac5;

    transform-origin: left center;

    z-index: 2;
}


/* NUMERO DU JOUR */

.sleep-chart-day {
    position: absolute;

    bottom: -24px;

    transform: translateX(-50%);

    color: #918797;

    font-size: 11px;
}


/* HEURES SUR LE COTE */

.sleep-chart-hour {
    position: absolute;

    left: 8px;

    transform: translateY(-50%);

    color: #aaa0af;

    font-size: 10px;

    pointer-events: none;
}


/* LIGNE OBJECTIF 8H */

.sleep-chart-goal {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    border-top: 1px dashed #b89ac9;

    z-index: 1;
}


/* MOBILE */

@media(max-width: 600px) {

    .sleep-chart-title {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .sleep-stats-chart {
        height: 260px;
    }

}
/* =====================================
CORRECTION CARTES SOMMEIL
===================================== */

.stats-sleep-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.stats-sleep-card {
    width: auto;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
}

.stats-sleep-card > div {
    min-width: 0;
}

.stats-sleep-card p,
.stats-sleep-card strong {
    overflow-wrap: break-word;
}
/* =====================================
REGULARITE DU SOMMEIL
===================================== */

.sleep-regularity-section {
    width: 100%;
    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid #eee8f1;

    box-sizing: border-box;
}


.sleep-regularity-header {
    margin-bottom: 20px;
}


.sleep-regularity-header h4 {
    margin: 4px 0 0;

    color: #29252f;

    font-size: 18px;
}


/* =====================================
GRILLE
===================================== */

.sleep-regularity-grid {
    display: grid;

    width: 100%;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;
}


/* =====================================
CARTES
===================================== */

.sleep-regularity-card {
    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 100px;

    padding: 18px;

    gap: 14px;

    background: #faf8fc;

    border: 1px solid #eee8f1;
    border-radius: 15px;

    box-sizing: border-box;
}


.sleep-regularity-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    background: #eee7f5;

    border-radius: 13px;

    font-size: 21px;
}


.sleep-regularity-card > div {
    min-width: 0;
}


.sleep-regularity-card p {
    margin: 0 0 7px;

    color: #8c8393;

    font-size: 12px;
}


.sleep-regularity-card strong {
    display: block;

    color: #29252f;

    font-size: 19px;
}


/* =====================================
TABLETTE
===================================== */

@media(max-width: 1000px) {

    .sleep-regularity-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =====================================
TELEPHONE
===================================== */

@media(max-width: 600px) {

    .sleep-regularity-grid {
        grid-template-columns: 1fr;
    }

}
/* =====================================
NOTE DE LA JOURNEE
===================================== */

.daily-note-card {
    width: 100%;
    margin-top: 25px;
    padding: 25px;

    background: #ffffff;

    border: 1px solid #eee8f1;
    border-radius: 18px;

    box-sizing: border-box;
}


/* TITRE */

.daily-note-header {
    margin-bottom: 18px;
}

.daily-note-header > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.daily-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    background: #f3edf7;

    border-radius: 12px;

    font-size: 20px;
}

.daily-note-header h3 {
    margin: 0 0 5px;

    color: #29252f;

    font-size: 17px;
}

.daily-note-header p {
    margin: 0;

    color: #8c8393;

    font-size: 13px;
}


/* ZONE DE TEXTE */

.daily-note-textarea {
    display: block;

    width: 100%;
    min-height: 140px;

    padding: 16px;

    resize: vertical;

    background: #faf8fc;

    border: 1px solid #e8e1ec;
    border-radius: 14px;

    box-sizing: border-box;

    color: #3f3547;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* QUAND ON ECRIT */

.daily-note-textarea:focus {
    border-color: #bca7cb;

    box-shadow:
        0 0 0 3px rgba(188, 167, 203, 0.15);
}


/* PLACEHOLDER */

.daily-note-textarea::placeholder {
    color: #aaa1b0;
}


/* BAS DE LA CARTE */

.daily-note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 10px;

    color: #99909f;

    font-size: 12px;
}

.daily-note-saved {
    color: #7d9b84;
}


/* TELEPHONE */

@media(max-width: 600px) {

    .daily-note-card {
        padding: 18px;
    }

    .daily-note-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

}
/* =====================================
RESUME D'UNE JOURNEE
===================================== */

.day-summary {
    display: none;

    width: 100%;
    margin-top: 25px;
    padding: 25px;

    background: #ffffff;

    border: 1px solid #eee8f1;
    border-radius: 18px;

    box-sizing: border-box;
}


/* Quand le résumé est ouvert */

.day-summary.open {
    display: block;
}


/* EN-TETE */

.day-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.day-summary-small-title {
    margin: 0 0 5px;

    color: #9a8fa0;

    font-size: 12px;
}

.day-summary-header h3 {
    margin: 0;

    color: #29252f;

    font-size: 20px;
}


/* BOUTON FERMER */

.day-summary-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    background: #f5f0f7;

    border: none;
    border-radius: 10px;

    color: #6e6375;

    font-size: 20px;

    cursor: pointer;

    transition: 0.2s ease;
}

.day-summary-close:hover {
    background: #eee5f2;
    transform: scale(1.05);
}


/* LES 6 INFORMATIONS */

.day-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


/* UNE INFORMATION */

.day-summary-item {
    display: flex;
    align-items: center;

    min-width: 0;

    padding: 15px;

    gap: 12px;

    background: #faf8fc;

    border: 1px solid #eee8f1;
    border-radius: 14px;

    box-sizing: border-box;
}

.day-summary-item > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    background: #f0e9f5;

    border-radius: 11px;

    font-size: 19px;
}

.day-summary-item p {
    margin: 0 0 4px;

    color: #968b9d;

    font-size: 12px;
}

.day-summary-item strong {
    display: block;

    color: #302a35;

    font-size: 14px;
}


/* NOTE DE LA JOURNEE */

.day-summary-note {
    margin-top: 15px;
    padding: 17px;

    background: #faf8fc;

    border: 1px solid #eee8f1;
    border-radius: 14px;
}

.day-summary-note-title {
    margin-bottom: 9px;

    color: #514758;

    font-size: 13px;
    font-weight: 600;
}

.day-summary-note p {
    margin: 0;

    color: #766d7c;

    font-size: 13px;
    line-height: 1.6;

    white-space: pre-wrap;
}


/* BOUTON MODIFIER */

.day-summary-edit {
    display: block;

    margin: 18px 0 0 auto;
    padding: 11px 18px;

    background: #eee6f4;

    border: none;
    border-radius: 11px;

    color: #594963;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}

.day-summary-edit:hover {
    background: #e4d8ec;
    transform: translateY(-1px);
}


/* TABLETTE */

@media(max-width: 900px) {

    .day-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* TELEPHONE */

@media(max-width: 600px) {

    .day-summary {
        padding: 18px;
    }

    .day-summary-grid {
        grid-template-columns: 1fr;
    }

    .day-summary-edit {
        width: 100%;
    }

}
/* =====================================
TAGS DE LA JOURNEE
===================================== */

.daily-tags {
    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid #eee8f1;
}


/* EN-TETE */

.daily-tags-header {
    margin-bottom: 15px;
}

.daily-tags-header > div {
    display: flex;
    align-items: center;

    gap: 11px;
}

.daily-tags-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    background: #f3edf7;

    border-radius: 11px;

    font-size: 17px;
}

.daily-tags-header h4 {
    margin: 0 0 3px;

    color: #39313f;

    font-size: 14px;
}

.daily-tags-header p {
    margin: 0;

    color: #978d9d;

    font-size: 12px;
}


/* LISTE DES TAGS */

.daily-tags-list {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}


/* UN TAG */

.daily-tag {
    padding: 8px 14px;

    background: #faf8fc;

    border: 1px solid #e8e1ec;
    border-radius: 20px;

    color: #716777;

    font-family: inherit;
    font-size: 12px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* SURVOL */

.daily-tag:hover {
    background: #f3edf7;
    border-color: #d8c9e1;

    transform: translateY(-1px);
}

body.dark-mode .daily-tags-list .daily-tag {
    background: #211927;
    border-color: #3a2d45;
    color: #cbbdd5;
}

body.dark-mode .daily-tags-list .daily-tag:hover {
    background: #2a2032;
    border-color: #76558f;
    color: #ffffff;
}

body.dark-mode .daily-tags-list .daily-tag.selected {
    background: #3a2948;
    border-color: #8b63a8;
    color: #ffffff;
}

body.dark-mode .daily-tags-list .daily-tag-add {
    background: transparent;
    border-color: #76558f;
    color: #b99bce;
}

body.dark-mode .daily-intensity-button {
    background: #211927;
    border-color: #3a2d45;
    color: #cbbdd5;
}

body.dark-mode .daily-intensity-button:hover {
    background: #2a2032;
    border-color: #76558f;
    color: #ffffff;
}

body.dark-mode .daily-intensity-button.selected {
    background: #3a2948;
    border-color: #8b63a8;
    color: #ffffff;
}

body.dark-mode input[type="time"] {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
    color-scheme: dark;
}

body.dark-mode input[type="time"]:focus {
    border-color: #76558f;
    outline: none;
}

body.dark-mode #addMedicationButton {
    background: #30233a;
    color: #d8c3e8;
    border-color: #493657;
}

body.dark-mode #addMedicationButton:hover {
    background: #3a2948;
    border-color: #76558f;
    color: #ffffff;
}

body.dark-mode #enableNotifications {
    background: #211927;
    color: #d8c3e8;
    border: 1px solid #3a2d45;
    border-radius: 8px;
}

body.dark-mode #enableNotifications:hover {
    background: #2a2032;
    border-color: #76558f;
    color: #ffffff;
}

/* TAG SELECTIONNE */

.daily-tag.selected {
    background: #e9dff0;

    border-color: #cdb9da;

    color: #594763;

    font-weight: 600;
}


/* BOUTON + AJOUTER */

.daily-tag-add {
    background: transparent;

    border-style: dashed;

    color: #927da0;
}

.daily-tag-add:hover {
    background: #f7f2f9;
}


/* TELEPHONE */

@media(max-width: 600px) {

    .daily-tags-list {
        gap: 7px;
    }

    .daily-tag {
        padding: 7px 12px;
    }

}
/* =====================================
INTENSITE DE LA JOURNEE
===================================== */

.daily-intensity {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eee8f1;
}

.daily-intensity-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.daily-intensity-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    background: #f3edf7;
    border-radius: 11px;

    font-size: 17px;
}

.daily-intensity-header h4 {
    margin: 0 0 3px;

    color: #39313f;
    font-size: 14px;
}

.daily-intensity-header p {
    margin: 0;

    color: #978d9d;
    font-size: 12px;
}


/* BOUTONS 1 À 5 */

.daily-intensity-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
}

.daily-intensity-button {
    height: 42px;

    background: #faf8fc;
    border: 1px solid #e8e1ec;
    border-radius: 12px;

    color: #716777;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.daily-intensity-button:hover {
    background: #f3edf7;
    border-color: #d8c9e1;

    transform: translateY(-1px);
}


/* BOUTON SELECTIONNE */

.daily-intensity-button.selected {
    background: #e9dff0;
    border-color: #cdb9da;

    color: #594763;
}


/* TEXTES SOUS L'ECHELLE */

.daily-intensity-labels {
    display: flex;
    justify-content: space-between;

    margin-top: 7px;

    color: #a097a5;
    font-size: 11px;
}


/* MOBILE */

@media(max-width: 600px) {

    .daily-intensity-scale {
        gap: 6px;
    }

    .daily-intensity-button {
        height: 39px;
    }

}
/* =====================================
CORRECTION MISE EN PAGE SOMMEIL
===================================== */

#sleepPage {
    width: 100%;
}

/* Titre */

#sleepPage .card-title {
    width: 100%;
}


/* Navigation du mois */

#sleepPage .month-navigation {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 25px 0 20px;
}


/* Boutons sommeil */

#sleepPage .tools {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0 0 25px;
}


/* Grille */

#sleepPage .sleep-table-wrapper {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    overflow: auto;
}


/* La grille reste centrée */

#sleepPage .sleep-table {
    width: max-content;

    margin-left: auto;
    margin-right: auto;
}


/* Légende */

#sleepPage .legend {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    margin-top: 20px;
}


/* Message sauvegarde */

#sleepPage .save-message {
    width: 100%;

    text-align: center;
}
/* =====================================
SAUVEGARDE DES DONNEES
===================================== */

.backup-section {
    margin-top: 30px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #ece7ef;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
}

.backup-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.backup-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    background: #f5edf8;
    border-radius: 14px;

    font-size: 22px;
}

.backup-header h3 {
    margin: 0 0 5px;
    font-size: 18px;
}

.backup-header p {
    margin: 0;
    color: #888;
    font-size: 13px;
}

.backup-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.backup-button {
    padding: 11px 18px;

    border: 1px solid #ddd4e1;
    border-radius: 12px;

    background: #faf8fb;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.backup-button:hover {
    background: #f3edf5;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.backup-button:active {
    transform: translateY(0);
}


/* VERSION TELEPHONE */

@media (max-width: 600px) {

    .backup-section {
        padding: 18px;
    }

    .backup-buttons {
        flex-direction: column;
    }

    .backup-button {
        width: 100%;
    }

}
/* =====================================
MOBILE - PAGE AUJOURD'HUI
===================================== */

@media (max-width: 600px) {

    /* Espace général de la page */
    .app-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Cartes de suivi */
    .tracking-card {
        padding: 16px;
        border-radius: 16px;
    }

    /* Titres des cartes */
    .tracking-card h3 {
        font-size: 16px;
    }

    /* Les choix restent faciles à toucher */
    .choice {
        min-height: 44px;
    }

    /* Note de la journée */
    .daily-note-card {
        padding: 16px;
    }

    .daily-note-textarea {
        width: 100%;
        min-height: 120px;
        box-sizing: border-box;
    }

    /* Tags */
    .daily-tags-list {
        gap: 8px;
    }

    .daily-tag {
        min-height: 40px;
    }

    /* Intensité 1 à 5 */
    .daily-intensity-scale {
        gap: 6px;
    }

    .daily-intensity-button {
        min-width: 0;
        min-height: 44px;
    }
}
/* =====================================
MOBILE - NAVIGATION DU BAS
===================================== */

@media (max-width: 600px) {

    body {
        padding-bottom: 85px;
    }

    .bottom-nav {
        bottom: 10px;

        width: calc(100% - 20px);
        height: 64px;

        padding: 5px;

        border-radius: 18px;
    }

    .nav-item {
        height: 52px;

        padding: 4px 2px;

        border-radius: 14px;

        font-size: 10px;

        min-width: 0;
    }

    .nav-icon {
        font-size: 20px;
        line-height: 20px;
    }

    .nav-item span:last-child {
        max-width: 100%;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }

}
/* =====================================
MOBILE - PAGE SOMMEIL
===================================== */

@media (max-width: 600px) {

    /* Carte principale */
    #sleepPage {
        padding: 15px;
        border-radius: 16px;
    }

    /* Titre */
    #sleepPage .card-title h2 {
        font-size: 20px;
    }

    #sleepPage .icon {
        font-size: 22px;
    }

    /* Navigation entre les mois */
    .month-navigation {
        gap: 10px;
        margin: 18px 0;
    }

    .month-navigation h3 {
        width: auto;
        flex: 1;

        font-size: 17px;
    }

    .month-navigation button {
        width: 38px;
        height: 38px;

        flex-shrink: 0;
    }

    /* Outils sommeil */
    #sleepPage .tools {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-bottom: 18px;
    }

    #sleepPage .tools button {
        width: 100%;
        min-height: 42px;

        padding: 8px 5px;

        font-size: 12px;
    }

    /* Le bouton Effacer prend toute la largeur */
    #sleepPage #eraser {
        grid-column: 1 / -1;
    }

    /* Grille */
    .sleep-table-wrapper {
        width: 100%;

        max-height: 60vh;

        overflow: auto;

        border-radius: 10px;

        -webkit-overflow-scrolling: touch;
    }

    .sleep-table {
        margin: 0;
    }

    /* Légende */
    #sleepPage .legend {
        gap: 10px 16px;

        margin-top: 15px;

        font-size: 12px;
    }

    /* Message d'enregistrement */
    #sleepPage .save-message {
        line-height: 1.4;
    }

}
/* =====================================
MOBILE - PAGE CALENDRIER
===================================== */

@media (max-width: 600px) {

    /* Carte principale */
    .calendar-card {
        padding: 16px;
        border-radius: 16px;
    }

    /* En-tête */
    .calendar-header {
        gap: 12px;
        margin-bottom: 15px;
    }

    .calendar-header h2 {
        font-size: 22px;
    }

    #calendarCategory {
        min-height: 44px;
        font-size: 14px;
    }

    /* Navigation entre les mois */
    .calendar-navigation {
        gap: 10px;
        margin: 18px 0;
    }

    .calendar-navigation h3 {
        width: auto;
        flex: 1;

        font-size: 17px;
        text-align: center;
    }

    .calendar-navigation button {
        width: 38px;
        height: 38px;

        flex-shrink: 0;
    }

    /* Jours du calendrier */
    .calendar-row {
        grid-template-columns: 40px 1fr;
        min-height: 34px;
    }

    .calendar-day {
        font-size: 11px;
    }

    .calendar-value {
        padding: 0 9px;
        font-size: 11px;
    }

    /* Légende */
    .calendar-legend {
        gap: 10px 14px;
        margin-top: 18px;
    }

    .calendar-legend-item {
        font-size: 11px;
    }

    .calendar-legend-color {
        width: 13px;
        height: 13px;
    }

    /* Résumé lorsqu'on touche une journée */
    .day-summary {
        margin-top: 18px;
        padding: 16px;

        border-radius: 16px;
    }

    .day-summary-header {
        gap: 10px;
    }

    .day-summary-header h3 {
        font-size: 18px;
    }

    .day-summary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .day-summary-item {
        min-height: 60px;
        padding: 12px;
    }

    .day-summary-note {
        padding: 14px;
    }

    .day-summary-edit {
        width: 100%;
        min-height: 44px;
    }

}
/* =====================================
MOBILE - PAGE ANALYSES
===================================== */

@media (max-width: 600px) {

    /* Titre */
    .stats-header {
        margin-bottom: 15px;
    }

    .stats-header h2 {
        font-size: 22px;
    }

    /* Navigation du mois */
    .stats-navigation {
        gap: 10px;
        margin: 18px 0 22px;
    }

    .stats-navigation h3 {
        width: auto;
        flex: 1;

        font-size: 17px;
        text-align: center;
    }

    .stats-navigation button {
        width: 38px;
        height: 38px;

        flex-shrink: 0;
    }


    /* =========================
    CARTES PRINCIPALES
    ========================= */

    .stats-grid {
        gap: 10px;
    }

    .stats-card {
        min-height: 85px;

        padding: 15px;

        gap: 12px;

        border-radius: 15px;
    }

    .stats-icon {
        width: 42px;
        height: 42px;

        font-size: 20px;
    }

    .stats-card strong {
        font-size: 17px;
    }


    /* =========================
    GRAPHIQUE EVOLUTION
    ========================= */

    .stats-chart-card {
        padding: 16px;

        border-radius: 16px;
    }

    .stats-chart-header {
        gap: 12px;

        margin-bottom: 15px;
    }

    .stats-chart-header h3 {
        font-size: 18px;
    }

    #statsChartCategory {
        width: 100%;
        min-height: 44px;
    }

    .stats-chart-wrapper {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    /* =========================
    REPARTITION DU MOIS
    ========================= */

    .stats-distribution-card {
        padding: 16px;

        border-radius: 16px;
    }

    .stats-distribution-header {
        gap: 8px;

        margin-bottom: 18px;
    }

    .distribution-row {
        grid-template-columns:
            90px
            minmax(70px, 1fr)
            40px;

        gap: 8px;
    }

    .distribution-label {
        font-size: 11px;
    }

    .distribution-percent {
        font-size: 11px;
    }


    /* =========================
    SOMMEIL
    ========================= */

    .stats-sleep-section {
        padding: 16px;

        border-radius: 16px;
    }

    .stats-sleep-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stats-sleep-card {
        min-height: 80px;

        padding: 14px;
    }

    .stats-sleep-icon {
        width: 40px;
        height: 40px;

        font-size: 20px;
    }


    /* =========================
    GRAPHIQUE SOMMEIL
    ========================= */

    .sleep-chart-wrapper {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    /* =========================
    REGULARITE DU SOMMEIL
    ========================= */

    .sleep-regularity-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sleep-regularity-card {
        min-height: 80px;

        padding: 14px;
    }

}
/* =====================================
MOBILE - FINITIONS GENERALES
===================================== */

@media (max-width: 600px) {

    /* Page générale */
    main {
        width: calc(100% - 20px);
        margin: 18px auto;
    }

    /* Header */
    header {
        gap: 10px;
    }

    header h1 {
        font-size: 21px;
    }

    header .date {
        font-size: 12px;
    }

    header button {
        flex-shrink: 0;

        padding: 9px 13px;

        font-size: 12px;
    }

    /* Titres */
    h2,
    .today-heading h2 {
        font-size: 22px;
    }

    /* Évite les débordements */
    button,
    select,
    textarea {
        max-width: 100%;
    }

}
/* =====================================
   COMPTE UTILISATEUR
===================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-button {
    border: 1px solid #ddd4e4;

    padding: 10px 16px;

    border-radius: 20px;

    background: white;

    color: #654d7c;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}

.account-button:hover {
    background: #f3edf7;
}


/* FOND DE LA FENETRE */

.account-modal {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(30, 23, 35, .35);

    backdrop-filter: blur(4px);

    z-index: 10000;
}


/* Quand la fenêtre est ouverte */

.account-modal.open {
    display: flex;
}


/* FENETRE */

.account-modal-box {
    position: relative;

    width: min(420px, 100%);

    padding: 30px;

    background: white;

    border: 1px solid #e8e1ec;
    border-radius: 22px;

    box-shadow:
        0 20px 60px
        rgba(40, 25, 50, .18);
}


/* CROIX */

.account-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 35px;
    height: 35px;

    border: 0;
    border-radius: 50%;

    background: #f5f1f7;

    color: #665b6d;

    font-size: 22px;

    cursor: pointer;
}


/* ICONE */

.account-modal-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    background: #eee7f5;

    border-radius: 16px;

    font-size: 26px;
}


/* TEXTES */

.account-modal-box h2 {
    margin: 0 0 8px;

    font-size: 24px;
}

.account-description {
    margin: 0 0 25px;

    color: #8c8393;

    font-size: 14px;
    line-height: 1.5;
}


/* LABELS */

.account-modal-box label {
    display: block;

    margin: 15px 0 7px;

    color: #554d59;

    font-size: 13px;
    font-weight: 600;
}


/* CHAMPS */

.account-modal-box input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border: 1px solid #ddd5e2;
    border-radius: 12px;

    background: #faf9fb;

    color: #29252f;

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

.account-modal-box input:focus {
    border-color: #8b70a2;

    box-shadow:
        0 0 0 3px
        rgba(139, 112, 162, .12);
}


/* BOUTONS */

.account-primary-button,
.account-secondary-button {
    width: 100%;
    min-height: 46px;

    border-radius: 12px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.account-primary-button {
    margin-top: 22px;

    border: 0;

    background: #725789;

    color: white;
}

.account-secondary-button {
    margin-top: 9px;

    border: 1px solid #ddd4e4;

    background: white;

    color: #654d7c;
}


/* MESSAGE ERREUR / SUCCES */

.account-message {
    min-height: 18px;

    margin: 14px 0 0;

    text-align: center;

    color: #8c8393;

    font-size: 12px;
}


/* =====================================
COMPTE - TELEPHONE
===================================== */

@media (max-width: 600px) {

    .header-actions {
        gap: 5px;
    }

    .account-button {
        padding: 9px 10px;

        font-size: 11px;
    }

    .account-modal {
        padding: 12px;
    }

    .account-modal-box {
        padding: 24px 18px;

        border-radius: 18px;
    }

}
/* =====================================
   MES MEDICAMENTS
===================================== */

.medications-section {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee8f2;
}

.medications-header h4 {
    margin: 0 0 5px;
    font-size: 17px;
    color: #3d3543;
}

.medications-header p {
    margin: 0 0 16px;
    color: #918899;
    font-size: 13px;
}

.medication-form {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    gap: 10px;
    align-items: center;
}

.medication-form input {
    width: 100%;
    padding: 11px 13px;

    border: 1px solid #ded7e4;
    border-radius: 11px;

    background: #faf9fb;
    color: #29252f;

    font-size: 14px;
    outline: none;
}

.medication-form input:focus {
    border-color: #806893;
    background: white;
}

#addMedication {
    padding: 11px 17px;

    border: 0;
    border-radius: 11px;

    background: #eee7f5;
    color: #654d7c;

    font-weight: 600;
    cursor: pointer;

    transition: .15s;
}

#addMedication:hover {
    background: #e4daee;
    transform: translateY(-1px);
}

.medications-list {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin-top: 15px;
}


/* MOBILE */

@media(max-width: 600px) {

    .medication-form {
        grid-template-columns: 1fr 110px;
    }

    #addMedication {
        grid-column: 1 / -1;
        width: 100%;
    }

}
.medication-reminder {
    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 10px;

    background: #f4f1f6;

    cursor: pointer;
    font-size: 17px;

    opacity: 0.45;

    transition: .15s;
}

.medication-reminder.active {
    background: #eee7f5;
    opacity: 1;
}

.medication-reminder:hover {
    transform: scale(1.05);
}

.medication-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}
/* =====================================
   ECRAN D'ENTREE
===================================== */

.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at top,
            rgba(190, 120, 255, 0.18),
            transparent 45%
        ),
        #0f0d14;
}

.welcome-card {
    width: 100%;
    max-width: 430px;

    padding: 45px 38px;

    text-align: center;

    background: rgba(27, 23, 35, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45);
}

.welcome-logo {
    width: 70px;
    height: 70px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;

    background: rgba(185, 120, 255, 0.12);

    border: 1px solid rgba(190, 130, 255, 0.25);
    border-radius: 22px;
}

.welcome-small-title {
    margin: 0 0 5px;

    font-size: 14px;
    opacity: 0.6;
}

.welcome-card h1 {
    margin: 0;

    font-size: 36px;
}

.welcome-description {
    margin: 15px auto 30px;

    max-width: 330px;

    line-height: 1.6;
    opacity: 0.7;
}

.welcome-login-button,
.welcome-register-button {
    width: 100%;

    padding: 14px 18px;

    border-radius: 14px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.welcome-login-button {
    border: none;

    background: #b982ff;
    color: #160f1e;

    margin-bottom: 10px;
}

.welcome-register-button {
    background: transparent;
    color: inherit;

    border: 1px solid rgba(255, 255, 255, 0.14);
}

.welcome-login-button:hover,
.welcome-register-button:hover {
    transform: translateY(-1px);
}
/* =====================================
   FORMULAIRE CONNEXION - ECRAN D'ENTREE
===================================== */

.welcome-auth-form {
    width: 100%;
    margin-top: 28px;
}

.welcome-auth-form h2 {
    margin-bottom: 22px;
    text-align: center;
}

.welcome-auth-form input {
    display: block;
    width: 100%;
    box-sizing: border-box;

    padding: 14px 16px;
    margin-bottom: 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.05);
    color: white;

    font-size: 14px;
    outline: none;
}

.welcome-auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.welcome-auth-form input:focus {
    border-color: #b36cff;
    background: rgba(179, 108, 255, 0.08);
}

.welcome-auth-form .welcome-login-button {
    width: 100%;
    margin-top: 8px;
}

.welcome-auth-form .welcome-register-button {
    width: 100%;
    margin-top: 10px;
}

/* =====================================
BOUTONS SECONDAIRES ECRAN D'ENTREE
===================================== */

.welcome-register-button {
    color: #070707 !important;
}

.welcome-register-button:hover {
    color: #8c5bc0 !important;
    border-color: #8c5bc0;
    background: rgba(139, 82, 201, 0.08);
}
.welcome-login-button {
    background: #8c5bc0 !important;
}

.welcome-login-button:hover {
    background: #8c5bc0 !important;
}
/* =====================================
TEXTES ECRAN D'ENTREE
===================================== */

.welcome-small-title {
    color: #b8a9c7 !important;
}

.welcome-card h1 {
    color: #f2edf7 !important;
}

.welcome-description {
    color: #a99bb7 !important;
}
/* =====================================
TRANSITION ECRAN D'ENTREE
===================================== */

#welcomeScreen {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

#welcomeScreen.ready {
    opacity: 1;
    visibility: visible;
}
#welcomeScreen.welcome-hide {
    opacity: 0;
    pointer-events: none;
}
/* =====================================
   APPARITION DES PAGES
===================================== */

.app-page.page-enter {
    animation: pageEnter 0.4s ease-out;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =====================================
   MESSAGE SAUVEGARDE
===================================== */

.save-toast {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translate(-50%, -15px);

    padding: 10px 18px;
    border-radius: 12px;

    background: rgba(118, 85, 143, 0.95);
    color: white;

    font-size: 14px;
    font-weight: 600;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease,
                transform 0.25s ease,
                visibility 0.25s;

    z-index: 9999;
}

.save-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* =====================================
OEIL DANS LE CHAMP MOT DE PASSE
===================================== */

.password-field {
    position: relative;
    width: 100%;
}

.password-field input {
    width: 100%;
    padding-right: 50px !important;
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    width: 32px;
    height: 32px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;

    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}

.password-toggle:hover {
    background: transparent;
}
.eye-slash {
    opacity: 1;
}

.eye-slash.hidden {
    opacity: 0;
}
/* =====================================
CHAMP MOT DE PASSE
===================================== */

.password-field {
    position: relative;
    width: 100%;
}

.password-field input {
    width: 100%;
    padding-right: 48px;
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    border: none;
    background: transparent;
    padding: 5px;

    font-size: 17px;
    cursor: pointer;

    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.password-toggle:hover {
    opacity: 1;
}
/* =====================================
TITRE FORMULAIRE INSCRIPTION
===================================== */

#welcomeRegisterForm h2 {
    color: #f2edf7;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    text-align: center;
}
/* =====================================
TITRES FORMULAIRES CONNEXION / INSCRIPTION
===================================== */

#welcomeLoginForm h2,
#welcomeRegisterForm h2 {
    color: #f2edf7;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    text-align: center;
}
/* =====================================
BOUTON MODE CLAIR / SOMBRE
===================================== */

.theme-toggle {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(118, 85, 143, 0.25);
    border-radius: 12px;

    background: white;
    color: #76558f;

    font-size: 18px;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    background: #f5f0f8;
    border-color: #76558f;
}

/* =====================================
ECRAN D'ENTREE - MODE CLAIR
===================================== */

#welcomeScreen {
    background:
        radial-gradient(
            circle at top,
            rgba(118, 85, 143, 0.10),
            transparent 45%
        ),
        #f7f4f9;
}

.welcome-card {
    background: #ffffff;
    border: 1px solid rgba(118, 85, 143, 0.15);
    box-shadow: 0 20px 60px rgba(60, 40, 75, 0.12);
}

.welcome-card h1,
#welcomeLoginForm h2,
#welcomeRegisterForm h2 {
    color: #302738 !important;
}

.welcome-small-title {
    color: #76558f !important;
}

.welcome-description {
    color: #766d7d !important;
}

/* =====================================
ECRAN D'ENTREE - MODE SOMBRE
===================================== */

body.dark-mode #welcomeScreen {
    background:
        radial-gradient(
            circle at top,
            rgba(118, 85, 143, 0.22),
            transparent 45%
        ),
        #0f0c14;
}

body.dark-mode .welcome-card {
    background: #17121d;
    border: 1px solid rgba(180, 145, 205, 0.18);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

body.dark-mode .welcome-card h1,
body.dark-mode #welcomeLoginForm h2,
body.dark-mode #welcomeRegisterForm h2 {
    color: #f2edf7 !important;
}

body.dark-mode .welcome-small-title {
    color: #b8a9c7 !important;
}

body.dark-mode .welcome-description {
    color: #a99bb7 !important;
}


html.theme-loading body {
    visibility: hidden;
}

/* =========================================================
MODE SOMBRE - APPLICATION COMPLETE
========================================================= */

/* ---------- BASE ---------- */

body.dark-mode {
    background: #0f0c14;
    color: #f2edf7;
}

body.dark-mode header {
    background: #17121d;
    border-bottom-color: #2d2436;
}

body.dark-mode header h1,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong {
    color: #f2edf7;
}

body.dark-mode .date,
body.dark-mode .today-heading p,
body.dark-mode .calendar-small-title,
body.dark-mode .stats-small-title,
body.dark-mode .save-message {
    color: #a99bb7;
}


/* ---------- HEADER ---------- */

body.dark-mode header button {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .theme-toggle {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .theme-toggle:hover {
    background: #2a2032;
    border-color: #76558f;
}


/* ---------- SAUVEGARDE ---------- */

body.dark-mode .backup-section {
    background: #17121d;
    border-color: #2d2436;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
}

body.dark-mode .backup-icon {
    background: #2a2032;
}

body.dark-mode .backup-header p {
    color: #a99bb7;
}

body.dark-mode .backup-button {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .backup-button:hover {
    background: #2a2032;
    border-color: #76558f;
}


/* ---------- AUJOURD'HUI ---------- */

body.dark-mode .tracking-card {
    background: #17121d;
    color: #f2edf7;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
}

body.dark-mode .choice {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .choice:hover {
    background: #2a2032;
    border-color: #76558f;
}

body.dark-mode .choice.selected {
    background: #3a2948;
    border-color: #8b63a8;
    color: #ffffff;
}


/* ---------- NOTE DE LA JOURNEE ---------- */

body.dark-mode .daily-note-card {
    background: #17121d;
    border-color: #2d2436;
}

body.dark-mode .daily-note-icon {
    background: #2a2032;
}

body.dark-mode .daily-note-header h3 {
    color: #f2edf7;
}

body.dark-mode .daily-note-header p,
body.dark-mode .daily-note-footer {
    color: #a99bb7;
}

body.dark-mode .daily-note-textarea {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .daily-note-textarea::placeholder {
    color: #82758c;
}

body.dark-mode .daily-note-textarea:focus {
    border-color: #8b63a8;
    box-shadow: 0 0 0 3px rgba(139, 99, 168, 0.15);
}


/* ---------- TAGS ---------- */

body.dark-mode .daily-tags,
body.dark-mode .daily-intensity {
    border-top-color: #33283c;
}

body.dark-mode .daily-tags-icon,
body.dark-mode .daily-intensity-icon {
    background: #2a2032;
}

body.dark-mode .daily-tags-header h4,
body.dark-mode .daily-intensity-header h4 {
    color: #f2edf7;
}

body.dark-mode .daily-tags-header p,
body.dark-mode .daily-intensity-header p,
body.dark-mode .daily-intensity-labels {
    color: #a99bb7;
}

body.dark-mode .daily-tag,
body.dark-mode .daily-intensity-button {
    background: #211927;
    color: #cbbdd5;
    border-color: #3a2d45;
}

body.dark-mode .daily-tag:hover,
body.dark-mode .daily-intensity-button:hover {
    background: #2a2032;
    color: #ffffff;
    border-color: #76558f;
}

body.dark-mode .daily-tag.selected,
body.dark-mode .daily-intensity-button.selected {
    background: #3a2948;
    color: #ffffff;
    border-color: #8b63a8;
}

body.dark-mode .daily-tag-add {
    background: transparent;
    color: #b99bce;
    border-color: #76558f;
}


/* ---------- SOMMEIL ---------- */

body.dark-mode #sleepPage,
body.dark-mode #sleepPage.card,
body.dark-mode .card {
    background: #17121d;
    color: #f2edf7;
}

body.dark-mode #sleepPage .month-navigation button,
body.dark-mode #sleepPage .tools button {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode #sleepPage .month-navigation button:hover,
body.dark-mode #sleepPage .tools button:hover {
    background: #2a2032;
    border-color: #76558f;
}

body.dark-mode #sleepPage .tools button.active {
    background: #3a2948;
    border-color: #8b63a8;
    color: #ffffff;
}

body.dark-mode .sleep-table-wrapper {
    background: #17121d;
    border-color: #33283c;
    scrollbar-color: #76558f #17121d;
}

body.dark-mode .sleep-table-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode .sleep-table-wrapper::-webkit-scrollbar-track {
    background: #17121d;
}

body.dark-mode .sleep-table-wrapper::-webkit-scrollbar-thumb {
    background: #76558f;
    border-radius: 10px;
}

body.dark-mode .hour,
body.dark-mode .corner,
body.dark-mode .day {
    background: #17121d;
    color: #cbbdd5;
    border-color: #3a2d45;
}

body.dark-mode .day.today {
    background: #3a2948;
    color: #ffffff;
}

body.dark-mode .sleep-cell {
    background-color: #1b1421;
    border-right-color: #302638;
    border-bottom-color: #3a2d45;
}

body.dark-mode .sleep-cell.full-hour {
    border-left-color: #493657;
}

/* On conserve les vraies couleurs des états de sommeil */

body.dark-mode .sleep-cell.lights {
    background: #ff9827;
}

body.dark-mode .sleep-cell.sleeping {
    background: #a89ce5;
}

body.dark-mode .sleep-cell.wake {
    background: #df4596;
}

body.dark-mode .sleep-cell.nap {
    background: #49a078;
}

body.dark-mode #sleepPage .legend {
    color: #cbbdd5;
}


/* ---------- CALENDRIER ---------- */

body.dark-mode .calendar-card {
    background: #17121d;
    color: #f2edf7;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
}

body.dark-mode .calendar-navigation button {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .calendar-navigation button:hover {
    background: #2a2032;
    border-color: #76558f;
}

body.dark-mode .calendar-rows {
    border-top-color: #3a2d45;
}

body.dark-mode .calendar-row {
    border-bottom-color: #3a2d45;
}

body.dark-mode .calendar-day {
    color: #cbbdd5;
    border-right-color: #3a2d45;
}

body.dark-mode .calendar-value {
    color: #f2edf7;
}

body.dark-mode .calendar-row.calendar-today {
    outline-color: #8b63a8;
}

body.dark-mode .calendar-legend {
    color: #cbbdd5;
}


/* ---------- RESUME D'UNE JOURNEE ---------- */

body.dark-mode .day-summary {
    background: #17121d;
    border-color: #2d2436;
}

body.dark-mode .day-summary-header h3 {
    color: #f2edf7;
}

body.dark-mode .day-summary-small-title {
    color: #a99bb7;
}

body.dark-mode .day-summary-close {
    background: #2a2032;
    color: #cbbdd5;
}

body.dark-mode .day-summary-close:hover {
    background: #3a2948;
}

body.dark-mode .day-summary-item,
body.dark-mode .day-summary-note {
    background: #211927;
    border-color: #3a2d45;
}

body.dark-mode .day-summary-item > span {
    background: #30233a;
}

body.dark-mode .day-summary-item p {
    color: #a99bb7;
}

body.dark-mode .day-summary-item strong,
body.dark-mode .day-summary-note-title {
    color: #f2edf7;
}

body.dark-mode .day-summary-note p {
    color: #cbbdd5;
}

body.dark-mode .day-summary-edit {
    background: #30233a;
    color: #d8c3e8;
}


/* ---------- ANALYSES : CARTES ---------- */

body.dark-mode .stats-card,
body.dark-mode .stats-chart-card,
body.dark-mode .stats-distribution-card,
body.dark-mode .stats-sleep-section {
    background: #17121d;
    color: #f2edf7;
    border-color: #2d2436;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
}

body.dark-mode .stats-icon,
body.dark-mode .stats-sleep-icon,
body.dark-mode .sleep-regularity-icon {
    background: #30233a;
}

body.dark-mode .stats-card p,
body.dark-mode .stats-sleep-card p,
body.dark-mode .sleep-regularity-card p {
    color: #a99bb7;
}

body.dark-mode .stats-card strong,
body.dark-mode .stats-sleep-card strong,
body.dark-mode .sleep-regularity-card strong {
    color: #f2edf7;
}

body.dark-mode .stats-navigation button {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .stats-navigation button:hover {
    background: #2a2032;
    border-color: #76558f;
}


/* ---------- ANALYSES : SOMMEIL ---------- */

body.dark-mode .stats-sleep-card,
body.dark-mode .sleep-regularity-card {
    background: #211927;
    border-color: #3a2d45;
}

body.dark-mode .sleep-chart-block,
body.dark-mode .sleep-regularity-section {
    border-top-color: #3a2d45;
}

body.dark-mode .sleep-chart-title h4,
body.dark-mode .sleep-regularity-header h4 {
    color: #f2edf7;
}

body.dark-mode .sleep-chart-reference {
    color: #a99bb7;
}


/* ---------- GRAPHIQUES ---------- */

body.dark-mode .stats-chart,
body.dark-mode .sleep-stats-chart {
    border-left-color: #493657;
    border-bottom-color: #493657;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 59px,
            #2a2032 60px
        );
}

body.dark-mode .chart-level,
body.dark-mode .chart-day,
body.dark-mode .sleep-chart-day,
body.dark-mode .sleep-chart-hour {
    color: #a99bb7;
}

body.dark-mode .chart-line {
    background: #76558f;
}

body.dark-mode .chart-point {
    border-color: #17121d;
}

body.dark-mode .sleep-chart-line {
    background: #8b63a8;
}

body.dark-mode .sleep-chart-goal {
    border-top-color: #76558f;
}

body.dark-mode .stats-chart-legend,
body.dark-mode .stats-chart-legend-item {
    color: #b8a9c7;
}


/* ---------- REPARTITION ---------- */

body.dark-mode .distribution-label,
body.dark-mode .distribution-percent {
    color: #cbbdd5;
}

body.dark-mode .distribution-bar {
    background: #2a2032;
}


/* ---------- MEDICAMENTS ---------- */

body.dark-mode .medication-form input {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .medication-form input:focus {
    background: #211927;
    border-color: #8b63a8;
}

body.dark-mode input[type="time"] {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
    color-scheme: dark;
}

body.dark-mode #addMedication,
body.dark-mode #addMedicationButton {
    background: #30233a;
    color: #d8c3e8;
    border-color: #493657;
}

body.dark-mode .medication-reminder {
    background: #211927;
    color: #cbbdd5;
}

body.dark-mode .medication-reminder.active {
    background: #3a2948;
    color: #ffffff;
}

body.dark-mode #enableNotifications {
    background: #211927;
    color: #d8c3e8;
    border: 1px solid #3a2d45;
}


/* ---------- MENUS DEROULANTS ---------- */

body.dark-mode select,
body.dark-mode #calendarCategory,
body.dark-mode #statsChartCategory {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
    color-scheme: dark;
}

body.dark-mode select option {
    background: #211927;
    color: #f2edf7;
}

body.dark-mode select:focus {
    outline: none;
    border-color: #8b63a8;
}


/* ---------- NAVIGATION DU BAS ---------- */

body.dark-mode .bottom-nav {
    background: rgba(23, 18, 29, 0.97);
    border-color: #33283c;

    box-shadow:
        0 8px 35px
        rgba(0, 0, 0, 0.40);
}

body.dark-mode .nav-item {
    color: #a99bb7;
}

body.dark-mode .nav-item:hover {
    background: #2a2032;
    color: #f2edf7;
}

body.dark-mode .nav-item.active {
    background: #3a2948;
    color: #ffffff;
}


/* ---------- ANCIENNE JOURNEE ---------- */

body.dark-mode .past-date-notice {
    background: #211927;
    color: #d8c3e8;
    border-color: #3a2d45;
}

body.dark-mode .past-date-notice button {
    background: #30233a;
    color: #f2edf7;
}


/* ---------- ECRAN DE CONNEXION ---------- */

body.dark-mode #welcomeScreen {
    background:
        radial-gradient(
            circle at top,
            rgba(118, 85, 143, 0.22),
            transparent 45%
        ),
        #0f0c14;
}

body.dark-mode .welcome-card {
    background: #17121d;
    border-color: rgba(180, 145, 205, 0.18);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);
}

body.dark-mode .welcome-card h1,
body.dark-mode #welcomeLoginForm h2,
body.dark-mode #welcomeRegisterForm h2 {
    color: #f2edf7 !important;
}

body.dark-mode .welcome-small-title {
    color: #b8a9c7 !important;
}

body.dark-mode .welcome-description {
    color: #a99bb7 !important;
}

body.dark-mode .welcome-auth-form input {
    background: #211927;
    color: #f2edf7;
    border-color: #3a2d45;
}

body.dark-mode .welcome-auth-form input::placeholder {
    color: #82758c;
}


/* ---------- SCROLLBARS ---------- */

body.dark-mode {
    scrollbar-color: #76558f #17121d;
}

body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #17121d;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #76558f;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #8b63a8;
}