/* ==========================================================
   ZOUFRUN — FLOW DOCK
   ========================================================== */

:root {
    --violet: #7252F4;
    --violet-fonce: #4D31C8;
    --violet-profond: #2B1F48;
    --violet-nuit: #1C152C;
    --violet-electrique: #8B6CFF;
    --lavande: #D4C6FF;
    --lavande-forte: #B9A4FF;

    --fond: #F2F0F5;
    --fond-chaud: #F7F6F8;
    --blanc: #FFFFFF;

    --texte: #211A2E;
    --texte-secondaire: #655E73;
    --texte-muted: #8B8496;

    --bordure: #DED9E7;
    --bordure-forte: #C7BED8;

    --rouge: #D9455F;
    --rouge-fonce: #B72E47;

    --vert: #247B5B;
    --jaune: #F3B33D;

    --ombre:
        0 12px 35px rgba(31, 20, 58, .08);

    --ombre-forte:
        0 22px 60px rgba(31, 20, 58, .14);

    --rayon: 18px;
    --rayon-grand: 26px;

    --sidebar: 244px;
    --contenu: 1220px;
}


/* ==========================================================
   BASE
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--texte);

    background:
        radial-gradient(circle at 85% 10%,
            rgba(114, 82, 244, .07),
            transparent 27%),
        linear-gradient(180deg,
            #F8F7F9 0%,
            #F1EFF4 100%);

    line-height: 1.55;
}

body.mobile-sheet-open {
    overflow: hidden;
}

img {
    display: block;

    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: var(--violet-fonce);

    text-decoration: none;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

a:hover {
    color: var(--violet);
}

h1,
h2,
h3 {
    margin-top: 0;

    color: var(--texte);

    line-height: 1.15;
}

h1 {
    margin-bottom: 12px;

    font-size:
        clamp(2rem,
            3vw,
            3rem);

    letter-spacing: -.04em;
}

h2 {
    margin-bottom: 10px;

    font-size:
        clamp(1.35rem,
            2vw,
            1.8rem);

    letter-spacing: -.025em;
}

h3 {
    margin-bottom: 8px;

    font-size: 1.08rem;
}

p {
    margin-top: 0;
    margin-bottom: 14px;
}

.texte-secondaire {
    color:
        var(--texte-secondaire);
}

.texte-vide {
    color:
        var(--texte-muted);
}


/* ==========================================================
   STRUCTURE PRINCIPALE
   ========================================================== */

.app-shell {
    min-height: 100vh;
}

.app-content {
    min-height: 100vh;

    margin-left:
        var(--sidebar);

    padding-bottom: 0;
}

.conteneur {
    width:
        min(calc(100% - 48px),
            var(--contenu));

    margin: 0 auto;

    padding:
        34px 0 46px;
}

.profil-page,
.page-formulaire-profil {
    padding-top: 34px;
}

.mobile-brandline {
    display: none;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar {
    position: fixed;

    inset:
        0 auto 0 0;

    z-index: 1100;

    width:
        var(--sidebar);

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(circle at 50% -10%,
            rgba(139, 108, 255, .24),
            transparent 34%),
        linear-gradient(180deg,
            #211831 0%,
            #181121 100%);

    color: #FFF;

    border-right:
        1px solid rgba(255, 255, 255, .08);

    box-shadow:
        14px 0 45px rgba(22, 14, 35, .12);
}


/* ==========================================================
   LOGO SIDEBAR
   ========================================================== */

.sidebar-brand {
    padding:
        24px 24px 18px;
}

.brand-link {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 92px;

    border-radius: 20px;

    background-image: url(images/piste.png);
    background-size: 210px;
    background-repeat: no-repeat;

    border:
        1px solid rgba(255, 255, 255, .18);

    box-shadow:
        inset 0 0 0 1px rgba(77, 49, 200, .04);
}

.brand-link img {
    width: 180px;
    height: 128px;

    object-fit: contain;
}


/* ==========================================================
   ACTION RAPIDE
   ========================================================== */

.sidebar-quick {
    margin:
        0 18px 12px;

    padding: 14px;

    border-radius: 18px;

    background:
        rgba(139, 108, 255, .11);

    border:
        1px solid rgba(159, 132, 255, .2);
}

.sidebar-quick-label {
    display: block;

    margin-bottom: 9px;

    color: #BDB2D1;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.quick-course-link {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 44px;

    padding:
        9px 12px;

    border-radius: 12px;

    color: #FFF;

    background:
        linear-gradient(135deg,
            #805EFF,
            #6442E6);

    font-size: .9rem;
    font-weight: 800;

    box-shadow:
        0 10px 22px rgba(91, 59, 215, .3);
}

.quick-course-link:hover {
    color: #FFF;

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 28px rgba(91, 59, 215, .38);
}

.quick-course-plus {
    width: 26px;
    height: 26px;

    flex:
        0 0 26px;

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

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .17);

    font-size: 1.25rem;

    line-height: 1;
}


/* ==========================================================
   NAVIGATION SIDEBAR
   ========================================================== */

.sidebar-scroll {
    flex: 1;

    overflow-y: auto;

    padding:
        8px 14px 16px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, .15) transparent;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.nav-group {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.nav-group+.nav-group {
    padding-top: 14px;

    border-top:
        1px solid rgba(255, 255, 255, .07);
}

.nav-group-title {
    padding:
        0 11px 7px;

    color: #8F849F;

    font-size: .66rem;
    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.nav-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 44px;

    padding:
        9px 12px;

    border-radius: 13px;

    color: #CFC6DC;

    font-size: .92rem;
    font-weight: 700;
}

.nav-item:hover {
    color: #FFF;

    background:
        rgba(255, 255, 255, .07);
}

.nav-item.actif {
    color: #FFF;

    background:
        linear-gradient(90deg,
            rgba(128, 94, 255, .3),
            rgba(128, 94, 255, .12));

    box-shadow:
        inset 0 0 0 1px rgba(161, 137, 255, .16);
}

.nav-item.actif::before {
    content: "";

    position: absolute;

    left: -14px;
    top: 9px;
    bottom: 9px;

    width: 4px;

    border-radius:
        0 5px 5px 0;

    background: #9A7CFF;

    box-shadow:
        0 0 14px rgba(154, 124, 255, .75);
}

.nav-icon {
    width: 22px;
    height: 22px;

    flex:
        0 0 22px;

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

.nav-icon svg,
.sidebar-logout svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item.actif .nav-icon {
    color: #B9A8FF;
}

.admin-nav-item {
    color: #E1D7FF;
}


/* ==========================================================
   UTILISATEUR SIDEBAR
   ========================================================== */

.sidebar-user {
    display: flex;
    align-items: center;

    gap: 8px;

    margin:
        0 14px 16px;

    padding: 9px;

    border-radius: 16px;

    background:
        rgba(255, 255, 255, .055);

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

.sidebar-user-profile {
    min-width: 0;

    flex: 1;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #FFF;
}

.sidebar-user-profile:hover {
    color: #FFF;
}

.sidebar-avatar {
    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

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

    border-radius: 12px;

    background:
        linear-gradient(135deg,
            #8E6FFF,
            #5F3FD9);

    color: #FFF;

    font-size: .9rem;
    font-weight: 900;
}

.sidebar-user-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.sidebar-user-text strong {
    overflow: hidden;

    font-size: .86rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.sidebar-user-text small {
    color: #978BA7;

    font-size: .7rem;
}

.sidebar-logout {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

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

    border-radius: 11px;

    color: #B3A9C0;
}

.sidebar-logout:hover {
    color: #FFF;

    background:
        rgba(217, 69, 95, .16);
}


/* ==========================================================
   VISITEUR SIDEBAR
   ========================================================== */

.sidebar-invite-cta {
    margin:
        0 16px 16px;

    padding: 15px;

    border-radius: 18px;

    background:
        linear-gradient(145deg,
            rgba(124, 91, 255, .19),
            rgba(255, 255, 255, .04));

    border:
        1px solid rgba(162, 141, 255, .18);
}

.sidebar-invite-cta p {
    margin-bottom: 10px;

    color: #CFC6DB;

    font-size: .83rem;
}

.sidebar-signup {
    display: inline-flex;

    width: 100%;

    justify-content: center;

    padding:
        10px 12px;

    border-radius: 12px;

    color: #FFF;

    background:
        var(--violet);

    font-size: .86rem;
    font-weight: 800;
}

.sidebar-signup:hover {
    color: #FFF;

    background:
        var(--violet-electrique);
}


/* ==========================================================
   EN-TÊTES
   ========================================================== */

.entete-page {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;

    padding-bottom: 24px;

    border-bottom:
        1px solid var(--bordure);
}

.entete-page>div:first-child {
    max-width: 760px;
}

.entete-page p:last-child {
    max-width: 720px;

    color:
        var(--texte-secondaire);
}

.entete-page .actions {
    justify-content: flex-end;
}

.profil-petit-titre,
.hero-etiquette {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin:
        0 0 9px;

    color:
        var(--violet-fonce);

    font-size: .72rem;
    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.profil-petit-titre::before,
.hero-etiquette::before {
    content: "";

    width: 18px;
    height: 3px;

    border-radius: 999px;

    background:
        var(--violet);
}

.section-profil {
    margin-top: 30px;
}

.titre-section {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 14px;
}

.titre-section h2 {
    margin: 0;
}


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

.carte,
.profil-carte,
.course-carte,
.section-formulaire {
    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        var(--rayon);

    box-shadow:
        var(--ombre);
}

.carte {
    padding: 24px;
}

.profil-carte {
    padding: 28px;
}

.course-carte {
    padding: 22px;
}

.section-formulaire {
    padding: 26px;
}

.profil-principal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 22px;

    margin-bottom: 22px;
}

.profil-nom {
    margin-bottom: 6px;
}

.profil-nom-reel {
    margin-bottom: 10px;

    color:
        var(--texte-secondaire);
}

.biographie {
    color:
        var(--texte-secondaire);
}


/* ==========================================================
   INFO
   ========================================================== */

.info-pb {
    margin-top: 16px;
    margin-bottom: 16px;

    padding:
        17px 18px;

    border:
        1px solid #CBBEFF;

    border-left:
        5px solid var(--violet);

    border-radius: 14px;

    background: #ECE6FF;

    color: #3F315F;
}

.info-pb p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   STATISTIQUES
   ========================================================== */

.profil-statistiques {
    display: grid;

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

    gap: 12px;
}

.profil-stat {
    min-width: 0;

    padding: 17px;

    border-radius: 15px;

    background: #EBE5F9;

    border:
        1px solid #CEC3E7;
}

.profil-stat:nth-child(2n) {
    background: #E3DCF5;
}

.profil-stat-titre {
    display: block;

    margin-bottom: 7px;

    color: #655A78;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.profil-stat strong {
    display: block;

    overflow: hidden;

    color:
        var(--texte);

    font-size: 1.14rem;

    text-overflow: ellipsis;
}


/* ==========================================================
   BOUTONS
   ========================================================== */

.bouton,
.bouton-secondaire,
.bouton-danger {
    min-height: 43px;

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

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 12px;

    font-size: .91rem;
    font-weight: 800;

    text-align: center;
}

.bouton {
    border:
        1px solid var(--violet-fonce);

    background:
        linear-gradient(135deg,
            #7959F9,
            #5A38D9);

    color: #FFF;

    box-shadow:
        0 9px 20px rgba(90, 56, 217, .2);
}

.bouton:hover {
    color: #FFF;

    transform:
        translateY(-1px);

    background:
        linear-gradient(135deg,
            #886BFF,
            #6542E6);

    box-shadow:
        0 12px 25px rgba(90, 56, 217, .28);
}

.bouton-action-principale {
    min-height: 50px;

    padding:
        12px 20px;

    border-radius: 14px;

    font-size: .96rem;
}

.bouton-secondaire {
    border:
        1px solid var(--bordure-forte);

    background:
        var(--blanc);

    color: #433951;
}

.bouton-secondaire:hover {
    color:
        var(--violet-fonce);

    border-color: #A997E3;

    background: #F1EDFA;
}

.bouton-danger {
    border:
        1px solid var(--rouge-fonce);

    background:
        var(--rouge);

    color: #FFF;
}

.bouton-danger:hover {
    color: #FFF;

    background:
        var(--rouge-fonce);

    transform:
        translateY(-1px);
}

.bouton-danger:disabled {
    opacity: .45;

    cursor: not-allowed;
}

.bouton-large {
    width: 100%;
}

.actions,
.profil-actions,
.admin-actions,
.admin-actions-profil,
.hero-boutons,
.home-inline-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}

.actions form,
.profil-actions form,
.admin-actions form {
    margin: 0;
}

.actions-formulaire {
    justify-content: flex-end;

    margin-top: 18px;

    padding-top: 18px;

    border-top:
        1px solid var(--bordure);
}

.lien-action {
    display: inline-flex;
    align-items: center;

    min-height: 42px;

    color:
        var(--violet-fonce);

    font-weight: 850;
}

.lien-action:hover {
    transform:
        translateX(2px);
}


/* ==========================================================
   FORMULAIRES
   ========================================================== */

.formulaire {
    width: 100%;
}

.formulaire label {
    display: block;

    margin:
        15px 0 7px;

    color: #342A41;

    font-size: .86rem;
    font-weight: 800;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="password"],
.formulaire input[type="number"],
.formulaire input[type="date"],
.formulaire input[type="url"],
.formulaire select,
.formulaire textarea {
    width: 100%;

    padding:
        12px 13px;

    border:
        1.5px solid #CFC8DA;

    border-radius: 12px;

    background: #FBFAFC;

    color:
        var(--texte);

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.formulaire input:hover,
.formulaire select:hover,
.formulaire textarea:hover {
    border-color: #B5AAC8;
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
    border-color:
        var(--violet);

    background: #FFF;

    box-shadow:
        0 0 0 4px rgba(114, 82, 244, .12);
}

.formulaire textarea {
    min-height: 120px;

    resize: vertical;
}

.aide-formulaire {
    margin:
        6px 0 0;

    color:
        var(--texte-muted);

    font-size: .82rem;
}

.deux-colonnes,
.grille-formulaire-profil {
    display: grid;

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

    gap: 18px;
}

.section-formulaire-entete {
    margin-bottom: 16px;

    padding-bottom: 14px;

    border-bottom:
        1px solid var(--bordure);
}


/* ==========================================================
   TEMPS
   ========================================================== */

.temps-pb {
    display: grid;

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

    gap: 10px;
}

.temps-champ {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.temps-champ span {
    color:
        var(--texte-muted);

    font-size: .76rem;

    text-align: center;
}


/* ==========================================================
   PERSONAL BEST
   ========================================================== */

.pb-formulaire {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.admin-pb-bloc {
    position: relative;

    margin:
        0 0 16px;

    padding: 20px;

    border:
        1px solid #CFC3EA;

    border-left:
        5px solid var(--violet);

    border-radius: 16px;

    background:
        linear-gradient(135deg,
            #F2EEFA 0%,
            #EAE3F7 100%);

    box-shadow:
        0 4px 14px rgba(43, 31, 72, .05);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.admin-pb-bloc:last-of-type {
    border-bottom:
        1px solid #CFC3EA;
}

.admin-pb-bloc:hover {
    border-color: #B6A3E4;

    border-left-color:
        var(--violet-fonce);

    box-shadow:
        0 8px 22px rgba(43, 31, 72, .09);

    transform:
        translateY(-1px);
}

.admin-pb-bloc>strong {
    min-width: 72px;

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

    margin:
        0 0 16px;

    padding:
        7px 12px;

    border-radius: 999px;

    background:
        var(--violet-fonce);

    color: #FFF;

    font-size: .9rem;
    font-weight: 900;

    letter-spacing: .01em;

    box-shadow:
        0 5px 12px rgba(77, 49, 200, .18);
}

.admin-pb-bloc .temps-pb {
    display: grid;

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

    gap: 10px;

    margin-bottom: 16px;
}

.admin-pb-bloc .temps-champ {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.admin-pb-bloc .temps-champ input {
    width: 100%;

    min-height: 50px;

    padding:
        10px 12px;

    border:
        1.5px solid #C5B7E2;

    border-radius: 12px;

    background: #FFF;

    color:
        var(--texte);

    font-size: .95rem;

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

.admin-pb-bloc .temps-champ input:focus {
    outline: none;

    border-color:
        var(--violet);

    box-shadow:
        0 0 0 4px rgba(114, 82, 244, .12);
}

.admin-pb-bloc .temps-champ span {
    color: #766B88;

    font-size: .74rem;
    font-weight: 600;

    text-align: center;
}

.admin-pb-bloc>label {
    display: block;

    margin:
        4px 0 7px;

    color: #352A46;

    font-size: .82rem;
    font-weight: 850;
}

.admin-pb-bloc>input[type="date"] {
    width: 100%;

    min-height: 50px;

    padding:
        11px 13px;

    border:
        1.5px solid #C5B7E2;

    border-radius: 12px;

    background: #FFF;

    color:
        var(--texte);
}

.admin-pb-bloc>input[type="date"]:focus {
    outline: none;

    border-color:
        var(--violet);

    box-shadow:
        0 0 0 4px rgba(114, 82, 244, .12);
}

.admin-pb-bloc:nth-of-type(even) {
    background:
        linear-gradient(135deg,
            #ECE6F8 0%,
            #E3DAF3 100%);
}


/* ==========================================================
   TABLEAUX
   ========================================================== */

.table-conteneur {
    overflow-x: auto;

    border:
        1px solid var(--bordure-forte);

    border-radius:
        var(--rayon);

    background: #FFF;

    box-shadow:
        var(--ombre);
}

table {
    width: 100%;

    min-width: 760px;

    border-collapse: collapse;
}

thead th {
    padding:
        14px 13px;

    background: #342647;

    color: #FFF;

    border-bottom:
        1px solid #4B385F;

    font-size: .78rem;
    font-weight: 900;

    letter-spacing: .035em;

    text-align: left;

    white-space: nowrap;
}

thead th:first-child {
    border-radius:
        15px 0 0 0;
}

thead th:last-child {
    border-radius:
        0 15px 0 0;
}

tbody td {
    padding:
        14px 13px;

    border-bottom:
        1px solid #E5DFEA;

    color: #554E60;

    vertical-align: middle;
}

tbody tr:nth-child(even) {
    background: #F4F1F8;
}

tbody tr:hover {
    background: #E9E2F6;
}

tbody tr:last-child td {
    border-bottom: none;
}

.pace {
    color:
        var(--violet-fonce);

    font-weight: 800;
}


/* ==========================================================
   BADGES
   ========================================================== */

.badge-violet,
.distance-badge,
.badge-role,
.badge-moi,
.position-classement {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: .75rem;
    font-weight: 900;

    line-height: 1;
}

.badge-violet {
    padding:
        7px 10px;

    background: #D2C4FA;

    color: #3E287C;

    border:
        1px solid #B8A4EE;
}

.distance-badge {
    padding:
        7px 10px;

    background: #C6B6F6;

    color: #352269;

    border:
        1px solid #A78FE7;
}

.badge-role {
    padding:
        7px 10px;

    color: #FFF;
}

.role-owner {
    background: #2F1F68;
}

.role-admin {
    background: #6644D7;
}

.role-client {
    background: #6D6577;
}

.badge-moi {
    margin-left: 5px;

    padding:
        5px 8px;

    color: #FFF;

    background: #5F3FD3;
}


/* ==========================================================
   COURSES
   ========================================================== */

.grille-courses,
.grille-avantages,
.admin-grille {
    display: grid;

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

    gap: 17px;
}

.grille-avantages {
    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));
}

.course-carte {
    position: relative;

    overflow: hidden;
}

.course-carte::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 4px;

    border-radius:
        0 999px 999px 0;

    background:
        linear-gradient(180deg,
            var(--violet),
            #A17FFF);
}

.course-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 15px;
}

.course-lieu {
    margin-bottom: 0;

    color:
        var(--texte-muted);
}

.course-donnees {
    display: grid;

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

    gap: 9px;

    margin:
        14px 0;
}

.course-donnees>div {
    padding: 12px;

    border-radius: 12px;

    background: #EEE9F6;

    border:
        1px solid #D7CDE7;
}

.course-donnees span {
    display: block;

    margin-bottom: 4px;

    color: #776D85;

    font-size: .7rem;
    font-weight: 800;

    letter-spacing: .04em;

    text-transform: uppercase;
}

.course-donnees strong {
    color: #2F2739;
}

.course-position,
.course-commentaire {
    color:
        var(--texte-secondaire);
}


/* ==========================================================
   CLASSEMENTS
   ========================================================== */

.onglets {
    display: inline-flex;

    gap: 5px;

    margin:
        2px 0 18px;

    padding: 5px;

    border-radius: 14px;

    background: #D8D0E5;

    border:
        1px solid #C5BAD6;
}

.onglets a {
    padding:
        9px 14px;

    border-radius: 10px;

    color: #544A61;

    font-size: .86rem;
    font-weight: 850;
}

.onglets a:hover {
    color:
        var(--texte);

    background:
        rgba(255, 255, 255, .6);
}

.onglets a.actif {
    color: #FFF;

    background: #49316E;

    box-shadow:
        0 6px 15px rgba(65, 45, 99, .22);
}

.classement-section {
    margin-top: 20px;
}

.classement-barre {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 13px;

    padding:
        22px 23px;

    border-radius: 18px;

    background:
        radial-gradient(circle at 90% 0%,
            rgba(155, 127, 255, .28),
            transparent 30%),
        linear-gradient(135deg,
            #312248 0%,
            #4C3372 100%);

    color: #FFF;

    box-shadow:
        var(--ombre-forte);
}

.classement-barre h2,
.classement-barre p,
.classement-barre .profil-petit-titre {
    color: #FFF;
}

.classement-barre p:last-child {
    margin-bottom: 0;

    color: #DDD2EC;
}

.classement-barre .badge-violet {
    background: #BEAFFF;

    color: #291A52;

    border-color: #D0C4FF;
}

.classement-barre-distance {
    align-items: center;
}

.classement-filtre {
    min-width: 210px;
}

.classement-filtre label {
    color: #E5DDF0;

    font-size: .75rem;
}

.classement-filtre select {
    background: #FFF;
}

.classement-table {
    border-color: #8E76C9;
}

.classement-table thead th {
    background: #4B3373;

    border-bottom-color: #6B4E98;
}

.classement-table tbody tr:nth-child(odd) {
    background: #EEE8FA;
}

.classement-table tbody tr:nth-child(even) {
    background: #DDD2F4;
}

.classement-table tbody tr:hover {
    background: #CFC0EE;
}

.classement-table tbody tr.ligne-moi {
    background: #BBA6ED;

    box-shadow:
        inset 4px 0 0 #5B3CC8;
}

.classement-table tbody tr.ligne-moi:hover {
    background: #AD95E5;
}

.position-classement {
    width: 31px;
    height: 31px;

    color: #FFF;

    background: #5E4779;
}

.classement-table tbody tr:nth-child(1) .position-classement {
    background: #D99A13;
}

.classement-table tbody tr:nth-child(2) .position-classement {
    background: #7D8792;
}

.classement-table tbody tr:nth-child(3) .position-classement {
    background: #A96638;
}

.score-total {
    color: #382267;
}

.score-absent {
    color: #81778D;
}

.colonne-position {
    width: 62px;

    text-align: center;
}

.colonne-total {
    white-space: nowrap;
}


/* ==========================================================
   ADMIN
   ========================================================== */

.admin-carte {
    min-height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 18px;

    padding: 22px;
}

.admin-carte:nth-child(1) {
    border-top:
        4px solid #6B48DA;
}

.admin-carte:nth-child(2) {
    border-top:
        4px solid #7B5CE2;
}

.admin-carte:nth-child(3) {
    border-top:
        4px solid #4A7E89;
}

.admin-carte:nth-child(4) {
    border-top:
        4px solid #A5673F;
}

.admin-filtres {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr) minmax(160px, 1fr) auto;

    gap: 14px;

    align-items: end;
}

.admin-filtres-actions {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}

.admin-input-table,
.admin-select-table,
.admin-table-utilisateurs input,
.admin-table-utilisateurs select {
    width: 100%;

    min-width: 105px;

    padding:
        9px 10px;

    border:
        1.5px solid #B7ABCA;

    border-radius: 10px;

    background: #FFF;

    color:
        var(--texte);
}

.admin-validation-table {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: 14px;

    padding:
        17px 18px;

    border-radius: 15px;

    background: #D7CBF4;

    border:
        1px solid #B49FEA;
}

.admin-validation-table p {
    margin: 0;

    color: #45375F;
}


/* ==========================================================
   NOTIFICATIONS
   ========================================================== */

.message-global-conteneur {
    position: fixed;

    z-index: 1600;

    left: 50%;

    right: auto;
    top: auto;

    bottom: 26px;

    width:
        min(460px,
            calc(100% - 32px));

    transform:
        translateX(-50%);

    pointer-events: none;
}

.message-global {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        13px 12px 13px 14px;

    border:
        1px solid transparent;

    border-radius: 14px;

    background: #FFF;

    color:
        var(--texte);

    box-shadow:
        0 14px 38px rgba(32, 24, 48, .16),
        0 3px 10px rgba(32, 24, 48, .08);

    pointer-events: auto;

    animation:
        message-apparition .3s ease forwards;
}

.message-global::before {
    width: 28px;
    height: 28px;

    flex:
        0 0 28px;

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

    border-radius: 50%;

    color: #FFF;

    font-size: .92rem;
    font-weight: 900;
}

.message-global-succes {
    color: #176647;

    background: #F5FBF8;

    border-color: #B7DFCC;
}

.message-global-succes::before {
    content: "✓";

    background: #23815B;
}

.message-global-erreur {
    color: #9D3046;

    background: #FFF6F7;

    border-color: #EFC6CE;
}

.message-global-erreur::before {
    content: "!";

    background: #D6455D;
}

.message-global-info {
    color: #5137BD;

    background: #F6F3FF;

    border-color: #D8CEFF;
}

.message-global-info::before {
    content: "i";

    background: #7657FF;
}

.message-fermer {
    width: 30px;
    height: 30px;

    flex:
        0 0 30px;

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

    margin-left: auto;

    padding: 0;

    border: 0;

    border-radius: 8px;

    color:
        currentColor;

    background:
        transparent;

    font-size: 1.15rem;

    line-height: 1;

    opacity: .55;

    transition:
        background .15s ease,
        opacity .15s ease,
        transform .15s ease;
}

.message-fermer:hover {
    background:
        rgba(0, 0, 0, .06);

    opacity: 1;

    transform:
        scale(1.05);
}

.message-global.disparition {
    pointer-events: none;

    animation:
        message-disparition .35s ease forwards;
}

@keyframes message-apparition {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

@keyframes message-disparition {

    from {
        opacity: 1;

        transform:
            translateY(0);
    }

    to {
        opacity: 0;

        transform:
            translateY(16px);
    }

}


/* ==========================================================
   MESSAGES NORMAUX
   ========================================================== */

.erreur,
.succes,
.info {
    margin-bottom: 17px;

    padding:
        14px 16px;

    border-radius: 13px;

    font-weight: 700;
}

.erreur {
    color: #8B233A;

    background: #F9DCE2;

    border:
        1px solid #ECAABB;
}

.succes {
    color: #195F46;

    background: #D9F1E6;

    border:
        1px solid #A9DAC6;
}

.info {
    color: #432B84;

    background: #E1D8FB;

    border:
        1px solid #C6B6EF;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

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

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 20px;
}

.pagination a,
.pagination strong {
    min-width: 39px;
    height: 39px;

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

    padding:
        0 10px;

    border-radius: 11px;

    font-size: .86rem;
    font-weight: 850;
}

.pagination a {
    color: #433850;

    background: #FFF;

    border:
        1px solid var(--bordure-forte);
}

.pagination a:hover {
    border-color: #A793E0;

    background: #E8E1F6;
}

.pagination strong {
    color: #FFF;

    background:
        var(--violet-fonce);
}


/* ==========================================================
   COMPTE
   ========================================================== */

.page-compte .app-content {
    display: flex;
    flex-direction: column;
}

.carte-compte {
    width:
        min(520px,
            calc(100% - 40px));

    margin: auto;

    padding: 34px;

    border-radius: 24px;

    background: #FFF;

    border:
        1px solid var(--bordure);

    box-shadow:
        var(--ombre-forte);
}

.logo-compte {
    display: none;
}

.carte-compte h1,
.sous-titre-compte {
    text-align: left;
}

.sous-titre-compte {
    color:
        var(--texte-secondaire);
}

.separateur-compte {
    position: relative;

    margin:
        20px 0;

    color:
        var(--texte-muted);

    font-size: .8rem;

    text-align: center;
}

.separateur-compte::before,
.separateur-compte::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 42%;
    height: 1px;

    background:
        var(--bordure);
}

.separateur-compte::before {
    left: 0;
}

.separateur-compte::after {
    right: 0;
}

.retour-compte {
    display: block;

    margin-top: 18px;

    color:
        var(--texte-secondaire);

    font-size: .86rem;
    font-weight: 800;

    text-align: center;
}


/* ==========================================================
   ACCUEIL CONNECTÉ
   ========================================================== */

.accueil-site .conteneur {
    padding-top: 34px;
}

.home-command {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.home-welcome {
    position: relative;

    overflow: hidden;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    padding: 34px;

    border-radius:
        var(--rayon-grand);

    background:
        radial-gradient(circle at 88% 0%,
            rgba(160, 133, 255, .35),
            transparent 30%),
        linear-gradient(135deg,
            #251A38 0%,
            #3D285A 50%,
            #523777 100%);

    color: #FFF;

    box-shadow:
        var(--ombre-forte);
}

.home-welcome::after {
    content: "";

    position: absolute;

    right: -60px;
    bottom: -90px;

    width: 280px;
    height: 280px;

    border:
        34px solid rgba(255, 255, 255, .05);

    border-radius: 50%;
}

.home-welcome>* {
    position: relative;

    z-index: 1;
}

.home-welcome h1,
.home-welcome .hero-description,
.home-welcome .hero-etiquette {
    color: #FFF;
}

.home-welcome h1 {
    max-width: 780px;

    margin-bottom: 10px;
}

.home-welcome h1 span {
    color: #BFAFFF;
}

.home-welcome .hero-description {
    max-width: 690px;

    margin-bottom: 0;

    color: #DDD4E8;
}

.journey-grid {
    display: grid;

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

    gap: 14px;
}

.journey-card {
    position: relative;

    min-height: 190px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 15px;

    align-items: start;

    padding: 22px;

    border-radius: 19px;

    color:
        var(--texte);

    background: #FFF;

    border:
        1px solid var(--bordure);

    box-shadow:
        var(--ombre);
}

.journey-card:hover {
    color:
        var(--texte);

    transform:
        translateY(-3px);

    border-color: #B4A3D8;

    box-shadow:
        var(--ombre-forte);
}

.journey-card-primary {
    background: #D8CCFA;

    border-color: #B7A3EA;
}

.journey-number {
    width: 36px;
    height: 36px;

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

    border-radius: 11px;

    color: #FFF;

    background: #4D337A;

    font-size: .73rem;
    font-weight: 900;
}

.journey-kicker {
    display: block;

    margin-bottom: 7px;

    color: #695C78;

    font-size: .7rem;
    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.journey-card h2 {
    font-size: 1.3rem;
}

.journey-card p {
    margin-bottom: 0;

    color:
        var(--texte-secondaire);

    font-size: .91rem;
}

.journey-arrow {
    color:
        var(--violet-fonce);

    font-size: 1.4rem;
    font-weight: 900;
}

.home-two-columns {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr) minmax(280px, .75fr);

    gap: 16px;
}

.home-panel {
    overflow: hidden;

    border-radius: 20px;

    border:
        1px solid var(--bordure);

    background: #FFF;

    box-shadow:
        var(--ombre);
}

.home-panel-track {
    min-height: 295px;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;
}

.home-panel-copy {
    padding: 28px;
}

.home-panel-image {
    min-height: 280px;
}

.home-panel-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.home-panel-event {
    padding: 28px;

    color: #FFF;

    background:
        radial-gradient(circle at 110% -10%,
            rgba(190, 172, 255, .26),
            transparent 35%),
        linear-gradient(160deg,
            #49336C,
            #261A38);

    border-color:
        #3E2A5A;
}

.home-panel-event h2,
.home-panel-event p,
.home-panel-event .hero-etiquette {
    color: #FFF;
}

.home-panel-event p {
    color: #D7CCDF;
}

.home-panel-event .bouton-secondaire {
    color: #FFF;

    background:
        rgba(255, 255, 255, .08);

    border-color:
        rgba(255, 255, 255, .22);
}

.home-panel-event .bouton-secondaire:hover {
    color: #FFF;

    background:
        rgba(255, 255, 255, .16);
}


/* ==========================================================
   ACCUEIL INVITÉ
   ========================================================== */

.guest-hero {
    min-height: 680px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 42px;

    align-items: center;
}

.guest-hero-copy {
    max-width: 620px;
}

.guest-hero-copy h1 {
    margin-bottom: 18px;

    font-size:
        clamp(3rem,
            5.8vw,
            6.1rem);

    line-height: .98;
}

.guest-hero-copy h1 span {
    color:
        var(--violet);
}

.hero-description {
    color:
        var(--texte-secondaire);

    font-size: 1.05rem;
}

.hero-boutons {
    margin-top: 23px;
}

.guest-trust-row {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
}

.guest-trust-row span {
    padding:
        7px 10px;

    border-radius: 999px;

    background: #DDD6E8;

    color: #594F68;

    font-size: .73rem;
    font-weight: 850;
}

.guest-hero-visual {
    display: flex;

    justify-content: center;
}

.guest-visual-frame {
    position: relative;

    width:
        min(100%,
            520px);

    padding: 13px;

    border-radius: 30px;

    background: #251B35;

    box-shadow:
        0 35px 80px rgba(32, 21, 49, .25);

    transform:
        rotate(1.5deg);
}

.guest-visual-frame::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        -22px 25px 22px -28px;

    border-radius: 36px;

    background: #BDAAFA;

    transform:
        rotate(-4deg);
}

.guest-visual-frame img {
    width: 100%;

    min-height: 500px;

    object-fit: cover;

    border-radius: 20px;
}

.guest-floating-card {
    position: absolute;

    max-width: 210px;

    padding:
        13px 15px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 16px 35px rgba(34, 22, 52, .17);
}

.guest-floating-card strong,
.guest-floating-card span {
    display: block;
}

.guest-floating-card span {
    margin-top: 2px;

    color:
        var(--texte-secondaire);

    font-size: .78rem;
}

.guest-floating-card-top {
    top: 38px;

    left: -36px;
}

.guest-floating-card-bottom {
    right: -28px;

    bottom: 44px;
}

.guest-steps {
    padding-top: 0;

    display: grid;

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

    gap: 14px;
}

.guest-step {
    padding: 22px;

    border-radius: 18px;

    background: #FFF;

    border:
        1px solid var(--bordure);

    box-shadow:
        var(--ombre);
}

.guest-step>span {
    width: 35px;
    height: 35px;

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

    margin-bottom: 14px;

    border-radius: 11px;

    color: #FFF;

    background:
        var(--violet-fonce);

    font-weight: 900;
}

.guest-step p {
    margin-bottom: 0;

    color:
        var(--texte-secondaire);
}


/* ==========================================================
   ANCIENNES CLASSES ACCUEIL
   ========================================================== */

.section-accueil {
    margin-bottom: 30px;
}

.titre-section-accueil {
    max-width: 780px;

    margin-bottom: 20px;
}

.avantage-carte {
    padding: 23px;
}

.bloc-piste {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 22px;

    align-items: center;
}

.bloc-piste-image img,
.hero-carte img {
    border-radius: 20px;
}

.liste-accueil {
    color:
        var(--texte-secondaire);
}

.bloc-vague-fond {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: #302047;
}

.bloc-vague-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(37, 26, 56, .9),
            rgba(96, 65, 159, .72));
}

.bloc-vague-contenu {
    position: relative;

    z-index: 1;

    max-width: 760px;

    padding: 34px;
}

.bloc-vague-contenu h2,
.bloc-vague-contenu p,
.bloc-vague-contenu .hero-etiquette {
    color: #FFF;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer {
    margin-top: 22px;

    padding:
        18px 24px 22px;
}

.footer-contenu {
    width:
        min(calc(100% - 48px),
            var(--contenu));

    margin: 0 auto;

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

    gap: 16px;

    padding-top: 17px;

    border-top:
        1px solid var(--bordure);
}

.footer-marque {
    display: flex;
    align-items: center;

    gap: 9px;
}

.footer-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--violet);

    box-shadow:
        0 0 0 5px rgba(114, 82, 244, .1);
}

.footer p {
    margin: 0;

    color:
        var(--texte-muted);

    font-size: .79rem;
}


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

.mobile-dock,
.mobile-sheet,
.mobile-sheet-backdrop {
    display: none;
}


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

@media (max-width: 1120px) {

    :root {
        --sidebar: 218px;
    }


    .journey-grid,
    .guest-steps {
        grid-template-columns:
            1fr;
    }


    .home-two-columns {
        grid-template-columns:
            1fr;
    }


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


    .grille-avantages {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 900px) {

    body {
        padding-bottom: 90px;
    }


    .sidebar {
        display: none;
    }


    .app-content {
        margin-left: 0;
    }


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

    .mobile-brandline {
        height: 66px;

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

        gap: 14px;

        padding:
            8px 18px;

        border-bottom:
            1px solid var(--bordure);

        background:
            rgba(248, 247, 249, .92);

        backdrop-filter:
            blur(12px);
    }


    .mobile-brandline a {
        display: block;

        height: 48px;
    }


    .mobile-brandline img {
        width: 78px;
        height: 48px;

        object-fit: contain;
    }


    .mobile-brandline span {
        overflow: hidden;

        color: #4D4558;

        font-size: .82rem;
        font-weight: 850;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


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

    .conteneur {
        width:
            min(calc(100% - 30px),
                var(--contenu));

        padding-top: 24px;
    }


    .home-welcome {
        align-items: flex-start;

        flex-direction: column;
    }


    .home-panel-track,
    .guest-hero,
    .grille-formulaire-profil,
    .bloc-piste {
        grid-template-columns:
            1fr;
    }


    .guest-hero {
        min-height: 0;

        gap: 34px;
    }


    .guest-hero-copy h1 {
        font-size:
            clamp(3rem,
                12vw,
                5.5rem);
    }


    .guest-hero-visual {
        padding:
            0 26px;
    }


    .guest-floating-card-top {
        left: -16px;
    }


    .guest-floating-card-bottom {
        right: -14px;
    }


    .grille-courses,
    .admin-grille {
        grid-template-columns:
            1fr;
    }


    .admin-filtres {
        grid-template-columns:
            1fr;
    }


    .entete-page,
    .profil-principal,
    .classement-barre,
    .admin-validation-table {
        align-items: flex-start;

        flex-direction: column;
    }


    .classement-filtre {
        width: 100%;
    }


    /* ======================================================
       DOCK DU BAS
       ====================================================== */

    .mobile-dock {
        position: fixed;

        z-index: 1400;

        left: 12px;
        right: 12px;
        bottom: 10px;

        height: 70px;

        display: grid;

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

        align-items: end;

        padding:
            6px 5px;

        border-radius: 22px;

        background:
            rgba(31, 23, 43, .96);

        border:
            1px solid rgba(255, 255, 255, .1);

        box-shadow:
            0 20px 45px rgba(31, 19, 49, .3);

        backdrop-filter:
            blur(16px);
    }


    .mobile-dock-invite {
        grid-template-columns:
            repeat(3,
                1fr);
    }


    .mobile-dock-item,
    .mobile-dock-more {
        min-width: 0;

        height: 58px;

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

        gap: 3px;

        padding:
            0 2px;

        border: none;

        border-radius: 14px;

        color: #BEB4CA;

        background:
            transparent;

        font-size: .64rem;
        font-weight: 750;
    }


    .mobile-dock-item:hover,
    .mobile-dock-item.actif {
        color: #FFF;

        background:
            rgba(132, 98, 255, .18);
    }


    .mobile-dock-item .nav-icon {
        width: 21px;
        height: 21px;
    }


    .mobile-dock-more {
        position: relative;

        overflow: visible;

        color: #FFF;
    }


    .mobile-dock-more-circle {
        position: absolute;

        top: -24px;

        width: 53px;
        height: 53px;

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

        border-radius: 18px;

        color: #FFF;

        background:
            linear-gradient(135deg,
                #8B6CFF,
                #5934DB);

        border:
            5px solid #20172B;

        box-shadow:
            0 9px 22px rgba(91, 52, 220, .45);

        font-size: .73rem;
        font-weight: 950;

        letter-spacing: -.03em;
    }


    .mobile-dock-more>span:last-child {
        margin-top: 29px;
    }


    /* ======================================================
       BACKDROP
       ====================================================== */

    .mobile-sheet-backdrop {
        position: fixed;

        z-index: 1450;

        inset: 0;

        display: block;

        visibility: hidden;

        opacity: 0;

        background:
            rgba(21, 14, 31, .54);

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }


    .mobile-sheet-backdrop.ouvert {
        visibility: visible;

        opacity: 1;
    }


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

    .mobile-sheet {
        position: fixed;

        z-index: 1500;

        left: 10px;
        right: 10px;
        bottom: 10px;

        display: block;

        max-height:
            calc(100vh - 30px);

        padding:
            10px 17px 22px;

        border-radius: 26px;

        background: #FFF;

        box-shadow:
            0 25px 70px rgba(31, 20, 45, .35);

        transform:
            translateY(calc(100% + 30px));

        transition:
            transform .26s cubic-bezier(.2,
                .8,
                .2,
                1);
    }


    .mobile-sheet.ouvert {
        transform:
            translateY(0);
    }


    .mobile-sheet-handle {
        width: 44px;
        height: 5px;

        margin:
            1px auto 14px;

        border-radius: 99px;

        background: #D6D0DC;
    }


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

        gap: 16px;

        margin-bottom: 14px;
    }


    .mobile-sheet-header strong {
        display: block;

        font-size: 1.15rem;
    }


    .mobile-sheet-kicker {
        display: block;

        color:
            var(--violet-fonce);

        font-size: .66rem;
        font-weight: 900;

        letter-spacing: .12em;

        text-transform: uppercase;
    }


    .mobile-sheet-close {
        width: 38px;
        height: 38px;

        border: 0;

        border-radius: 12px;

        background: #EEEAF2;

        color: #4B4256;

        font-size: 1.35rem;
    }


    .mobile-sheet-grid {
        display: grid;

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

        gap: 10px;
    }


    .mobile-sheet-action {
        min-height: 86px;

        display: flex;
        align-items: center;

        gap: 12px;

        padding: 15px;

        border-radius: 15px;

        color: #352D3E;

        background: #EEEAF2;

        border:
            1px solid #DCD4E4;

        font-size: .86rem;
        font-weight: 850;
    }


    .mobile-sheet-action:hover {
        color: #352D3E;

        background: #E3DCEC;
    }


    .mobile-sheet-action-primary {
        color: #FFF;

        background:
            linear-gradient(135deg,
                #7757F5,
                #5234CA);

        border-color: #5234CA;
    }


    .mobile-sheet-action-primary:hover {
        color: #FFF;

        background:
            linear-gradient(135deg,
                #886BFF,
                #6040D7);
    }


    .mobile-sheet-action-danger {
        color: #A43148;

        background: #F6E2E6;

        border-color: #E8BBC5;
    }


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

    .message-global-conteneur {
        left: 50%;

        right: auto;
        top: auto;

        bottom: 92px;

        width:
            min(460px,
                calc(100% - 28px));

        transform:
            translateX(-50%);
    }


    .message-global {
        padding:
            12px 11px 12px 13px;

        border-radius: 13px;

        font-size: .84rem;
    }


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

    .footer {
        padding-bottom: 95px;
    }

}


/* ==========================================================
   PETITS ÉCRANS
   ========================================================== */

@media (max-width: 650px) {

    .conteneur {
        width:
            min(calc(100% - 24px),
                var(--contenu));
    }


    h1 {
        font-size: 2rem;
    }


    .profil-statistiques,
    .deux-colonnes,
    .course-donnees,
    .temps-pb {
        grid-template-columns:
            1fr;
    }


    .carte,
    .profil-carte,
    .course-carte,
    .section-formulaire,
    .carte-compte {
        padding: 18px;
    }


    .home-welcome {
        padding: 24px;
    }


    .journey-card {
        min-height: 0;

        grid-template-columns:
            auto 1fr;
    }


    .journey-arrow {
        display: none;
    }


    .home-panel-track {
        display: flex;
        flex-direction: column;
    }


    .home-panel-image {
        min-height: 220px;
    }


    .guest-hero-copy h1 {
        font-size:
            clamp(2.7rem,
                14vw,
                4.5rem);
    }


    .guest-visual-frame img {
        min-height: 360px;
    }


    .guest-floating-card {
        max-width: 170px;
    }


    .guest-floating-card-top {
        top: 20px;

        left: -10px;
    }


    .guest-floating-card-bottom {
        right: -8px;

        bottom: 20px;
    }


    .entete-page .actions,
    .actions-formulaire {
        width: 100%;
    }


    .entete-page .actions>*,
    .actions-formulaire>* {
        flex:
            1 1 100%;
    }


    .admin-validation-table .bouton {
        width: 100%;
    }


    .footer-contenu {
        width:
            min(calc(100% - 24px),
                var(--contenu));

        align-items: flex-start;

        flex-direction: column;
    }


    .mobile-sheet-grid {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 650px) {

    .admin-pb-bloc {
        padding: 16px;

        margin-bottom: 12px;
    }


    .admin-pb-bloc .temps-pb {
        grid-template-columns:
            repeat(3,
                minmax(0, 1fr));

        gap: 7px;
    }


    .admin-pb-bloc .temps-champ input {
        min-width: 0;

        padding:
            9px 8px;
    }


    .admin-pb-bloc>strong {
        margin-bottom: 14px;
    }

}


@media (max-width: 430px) {

    .admin-pb-bloc .temps-pb {
        grid-template-columns:
            1fr;
    }


    .admin-pb-bloc .temps-champ {
        display: grid;

        grid-template-columns:
            1fr 80px;

        align-items: center;
    }


    .admin-pb-bloc .temps-champ span {
        text-align: left;
    }

}


/* ==========================================================
   BOUTON MODE SOMBRE
   ========================================================== */

.sidebar-theme {
    margin:
        0 14px 10px;
}

.theme-toggle {
    width: 100%;

    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        9px 12px;

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .055);

    color: #CFC6DC;

    font-size: .86rem;
    font-weight: 750;

    text-align: left;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.theme-toggle:hover {
    color: #FFF;

    background:
        rgba(255, 255, 255, .09);

    border-color:
        rgba(160, 136, 255, .24);
}

.theme-toggle-icon,
.mobile-theme-toggle span,
.mobile-sheet-theme .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-icon {
    width: 22px;
    height: 22px;

    flex:
        0 0 22px;
}

.theme-toggle-icon svg,
.mobile-theme-toggle svg,
.mobile-sheet-theme svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-icon-soleil {
    display: none !important;
}

html.mode-sombre .theme-icon-lune {
    display: none !important;
}

html.mode-sombre .theme-icon-soleil {
    display:
        inline-flex !important;
}

.mobile-theme-toggle {
    display: none;
}

.mobile-sheet-theme {
    width: 100%;

    text-align: left;

    font-family: inherit;
}


/* ==========================================================
   MODE SOMBRE
   ========================================================== */

html.mode-sombre {
    color-scheme: dark;

    --fond: #121017;
    --fond-chaud: #17131D;

    --blanc: #211B29;

    --texte: #F2EDF7;
    --texte-secondaire: #BBB2C7;
    --texte-muted: #91879E;

    --bordure: #3B3245;
    --bordure-forte: #51445F;

    --ombre:
        0 12px 35px rgba(0, 0, 0, .22);

    --ombre-forte:
        0 22px 60px rgba(0, 0, 0, .32);
}

html.mode-sombre body {
    background:
        radial-gradient(circle at 85% 10%,
            rgba(114, 82, 244, .11),
            transparent 27%),
        linear-gradient(180deg,
            #17131D 0%,
            #100D14 100%);

    color:
        var(--texte);
}

html.mode-sombre h1,
html.mode-sombre h2,
html.mode-sombre h3 {
    color:
        var(--texte);
}

html.mode-sombre a {
    color: #AE98FF;
}

html.mode-sombre a:hover {
    color: #C2B2FF;
}


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

html.mode-sombre .carte,
html.mode-sombre .profil-carte,
html.mode-sombre .course-carte,
html.mode-sombre .section-formulaire,
html.mode-sombre .home-panel,
html.mode-sombre .guest-step,
html.mode-sombre .journey-card,
html.mode-sombre .carte-compte {
    background: #211B29;

    border-color: #3B3245;
}

html.mode-sombre .journey-card-primary {
    background: #302445;

    border-color: #5B477B;
}

html.mode-sombre .journey-card:hover {
    color:
        var(--texte);

    border-color: #725A9A;
}


/* ==========================================================
   STATISTIQUES SOMBRES
   ========================================================== */

html.mode-sombre .profil-stat {
    background: #2A2233;

    border-color: #463952;
}

html.mode-sombre .profil-stat:nth-child(2n) {
    background: #31273B;
}

html.mode-sombre .profil-stat-titre,
html.mode-sombre .course-donnees span,
html.mode-sombre .journey-kicker {
    color: #A69AAF;
}

html.mode-sombre .profil-stat strong,
html.mode-sombre .course-donnees strong {
    color: #F2EDF7;
}


/* ==========================================================
   BOUTONS SOMBRES
   ========================================================== */

html.mode-sombre .bouton-secondaire {
    background: #2A2332;

    border-color: #51445F;

    color: #E4DDEC;
}

html.mode-sombre .bouton-secondaire:hover {
    background: #342A3E;

    border-color: #725D8A;

    color: #C5B5FF;
}


/* ==========================================================
   FORMULAIRES SOMBRES
   ========================================================== */

html.mode-sombre .formulaire label,
html.mode-sombre .admin-pb-bloc>label {
    color: #E0D8E8;
}

html.mode-sombre .formulaire input[type="text"],
html.mode-sombre .formulaire input[type="email"],
html.mode-sombre .formulaire input[type="password"],
html.mode-sombre .formulaire input[type="number"],
html.mode-sombre .formulaire input[type="date"],
html.mode-sombre .formulaire input[type="url"],
html.mode-sombre .formulaire select,
html.mode-sombre .formulaire textarea,
html.mode-sombre .admin-input-table,
html.mode-sombre .admin-select-table,
html.mode-sombre .admin-table-utilisateurs input,
html.mode-sombre .admin-table-utilisateurs select,
html.mode-sombre .admin-pb-bloc .temps-champ input,
html.mode-sombre .admin-pb-bloc>input[type="date"] {
    background: #19151F;

    border-color: #51445F;

    color: #F2EDF7;
}

html.mode-sombre .formulaire input:hover,
html.mode-sombre .formulaire select:hover,
html.mode-sombre .formulaire textarea:hover {
    border-color: #6C5A7D;
}

html.mode-sombre .formulaire input:focus,
html.mode-sombre .formulaire select:focus,
html.mode-sombre .formulaire textarea:focus {
    background: #1D1824;

    border-color: #8B6CFF;

    box-shadow:
        0 0 0 4px rgba(139, 108, 255, .14);
}

html.mode-sombre input::placeholder,
html.mode-sombre textarea::placeholder {
    color: #776C83;
}


/* ==========================================================
   TABLEAUX SOMBRES
   ========================================================== */

html.mode-sombre .table-conteneur {
    background: #211B29;

    border-color: #51445F;
}

html.mode-sombre tbody td {
    color: #D1C8DA;

    border-bottom-color: #3B3245;
}

html.mode-sombre tbody tr:nth-child(even) {
    background: #28212F;
}

html.mode-sombre tbody tr:hover {
    background: #33283E;
}

html.mode-sombre .classement-table tbody tr:nth-child(odd) {
    background: #251E2E;
}

html.mode-sombre .classement-table tbody tr:nth-child(even) {
    background: #2E2538;
}

html.mode-sombre .classement-table tbody tr:hover {
    background: #3A2D47;
}

html.mode-sombre .classement-table tbody tr.ligne-moi {
    background: #493765;
}

html.mode-sombre .classement-table tbody tr.ligne-moi:hover {
    background: #554075;
}

html.mode-sombre .score-total {
    color: #C8B8FF;
}

html.mode-sombre .score-absent {
    color: #948A9E;
}


/* ==========================================================
   COURSES SOMBRES
   ========================================================== */

html.mode-sombre .course-donnees>div {
    background: #2B2333;

    border-color: #44374E;
}


/* ==========================================================
   ONGLETS SOMBRES
   ========================================================== */

html.mode-sombre .onglets {
    background: #2A2332;

    border-color: #51445F;
}

html.mode-sombre .onglets a {
    color: #BBB2C7;
}

html.mode-sombre .onglets a:hover {
    color: #FFF;

    background:
        rgba(255, 255, 255, .06);
}


/* ==========================================================
   ADMIN SOMBRE
   ========================================================== */

html.mode-sombre .admin-validation-table {
    background: #302540;

    border-color: #5D4A78;
}

html.mode-sombre .admin-validation-table p {
    color: #DDD4E6;
}


/* ==========================================================
   INFO SOMBRE
   ========================================================== */

html.mode-sombre .info-pb {
    background: #302541;

    border-color: #5A4975;

    border-left-color: #8B6CFF;

    color: #DDD3EA;
}


/* ==========================================================
   MESSAGES SOMBRES
   ========================================================== */

html.mode-sombre .erreur {
    color: #F5BAC6;

    background: #3A2028;

    border-color: #713847;
}

html.mode-sombre .succes {
    color: #AEE2CC;

    background: #1F332C;

    border-color: #315D4D;
}

html.mode-sombre .info {
    color: #CBBEFF;

    background: #2B2340;

    border-color: #534377;
}

html.mode-sombre .message-global-succes {
    color: #AEE2CC;

    background: #1C3029;

    border-color: #315D4D;
}

html.mode-sombre .message-global-erreur {
    color: #F3BAC5;

    background: #392028;

    border-color: #713847;
}

html.mode-sombre .message-global-info {
    color: #CCBFFF;

    background: #29213B;

    border-color: #55437A;
}


/* ==========================================================
   PAGINATION SOMBRE
   ========================================================== */

html.mode-sombre .pagination a {
    color: #D9D0E2;

    background: #211B29;

    border-color: #51445F;
}

html.mode-sombre .pagination a:hover {
    background: #31273B;

    border-color: #725D8A;
}


/* ==========================================================
   PERSONAL BEST SOMBRE
   ========================================================== */

html.mode-sombre .admin-pb-bloc {
    background:
        linear-gradient(135deg,
            #282031 0%,
            #211A2A 100%);

    border-color: #4A3B59;

    border-left-color: #8B6CFF;
}

html.mode-sombre .admin-pb-bloc:nth-of-type(even) {
    background:
        linear-gradient(135deg,
            #2E2439 0%,
            #251D2E 100%);
}

html.mode-sombre .admin-pb-bloc .temps-champ span {
    color: #A89DB3;
}


/* ==========================================================
   ACCUEIL SOMBRE
   ========================================================== */

html.mode-sombre .guest-trust-row span {
    background: #2A2332;

    color: #BBB2C7;
}


/* ==========================================================
   COMPTE SOMBRE
   ========================================================== */

html.mode-sombre .separateur-compte::before,
html.mode-sombre .separateur-compte::after {
    background: #3B3245;
}


/* ==========================================================
   FOOTER SOMBRE
   ========================================================== */

html.mode-sombre .footer-contenu {
    border-top-color: #3B3245;
}


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

html.mode-sombre .mobile-brandline {
    background:
        rgba(23, 19, 29, .94);

    border-bottom-color: #3B3245;
}

html.mode-sombre .mobile-brandline-title {
    color: #D9D0E2;
}

html.mode-sombre .mobile-sheet {
    background: #211B29;
}

html.mode-sombre .mobile-sheet-handle {
    background: #5B4C68;
}

html.mode-sombre .mobile-sheet-close {
    background: #30273A;

    color: #DDD4E6;
}

html.mode-sombre .mobile-sheet-action {
    color: #E4DDEC;

    background: #2A2332;

    border-color: #45384F;
}

html.mode-sombre .mobile-sheet-action:hover {
    color: #FFF;

    background: #342A3E;
}

html.mode-sombre .mobile-sheet-action-primary {
    color: #FFF;

    background:
        linear-gradient(135deg,
            #7757F5,
            #5234CA);

    border-color: #6243D4;
}

html.mode-sombre .mobile-sheet-action-danger {
    color: #F1B7C3;

    background: #3A232B;

    border-color: #673747;
}


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

.mobile-brandline-title {
    min-width: 0;

    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================
   BOUTON THÈME MOBILE
   ========================================================== */

@media (max-width: 900px) {

    .mobile-theme-toggle {
        width: 40px;
        height: 40px;

        flex:
            0 0 40px;

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

        padding: 0;

        border:
            1px solid var(--bordure);

        border-radius: 12px;

        background:
            var(--blanc);

        color:
            var(--texte);
    }


    .mobile-theme-toggle svg {
        width: 20px;
        height: 20px;
    }


    html.mode-sombre .mobile-theme-toggle {
        background: #2A2332;

        border-color: #51445F;

        color: #E8E0F0;
    }

}

/* ==========================================================
   MODE SOMBRE — TEXTE BLANC DES BOUTONS PRINCIPAUX
   ========================================================== */

/* Ajouter une course dans la sidebar */

html.mode-sombre .quick-course-link,
html.mode-sombre .quick-course-link:visited,
html.mode-sombre .quick-course-link:hover,
html.mode-sombre .quick-course-link span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* Modifier le profil et autres boutons violets principaux */

html.mode-sombre .bouton,
html.mode-sombre .bouton:visited,
html.mode-sombre .bouton:hover,
html.mode-sombre .bouton:active,
html.mode-sombre .bouton span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}