/* =====================================================
   MOTOCOUNT
   DESIGN MOBILE PREMIUM
   VERSION 1
===================================================== */


/* -----------------------------------------------------
   RESET GENERAL
----------------------------------------------------- */

* {
    box-sizing: border-box;
}


html,
body {

    margin:0;

    padding:0;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

    background:#111418;

    color:#f2f2f2;

}



/* -----------------------------------------------------
   LIENS
----------------------------------------------------- */

a {

    color:inherit;

    text-decoration:none;

}



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

header {

    background:#15191e;

    padding:16px;

    border-bottom:

    1px solid #2b3038;

}



header h1 {

    margin:0;

    font-size:22px;

    font-weight:700;

}



/* -----------------------------------------------------
   CONTENEUR PAGE
----------------------------------------------------- */


.page {

    width:100%;

    max-width:600px;

    margin:auto;

    padding:

    16px 16px 90px;

}



/* -----------------------------------------------------
   CARTES
----------------------------------------------------- */


.card {


    background:#1b2027;


    border-radius:18px;


    padding:20px;


    margin-bottom:16px;


    box-shadow:

    0 8px 25px rgba(0,0,0,.25);


    border:

    1px solid #292f38;


}



.card h2 {

    margin-top:0;

    font-size:24px;

}



.card h3 {

    margin-top:0;

    color:#ff9f1c;

}



/* -----------------------------------------------------
   BOUTONS
----------------------------------------------------- */


.button {


    display:block;


    width:100%;


    padding:15px;


    margin-top:12px;


    text-align:center;


    border-radius:14px;


    background:#ff9f1c;


    color:#111;


    font-weight:700;


    font-size:16px;


    border:none;


    cursor:pointer;


    transition:.2s;


}



.button:hover {

    transform:translateY(-1px);

}



.button:active {

    transform:scale(.98);

}



/* BOUTON DANGER */

.button.danger {


    background:#e63946;

    color:white;

}



/* -----------------------------------------------------
   FORMULAIRES
----------------------------------------------------- */


label {


    display:block;


    margin-bottom:15px;


    font-weight:600;


}



input,
select,
textarea {


    width:100%;


    margin-top:8px;


    padding:14px;


    border-radius:12px;


    border:1px solid #343b45;


    background:#111418;


    color:white;


    font-size:16px;


}



input:focus,
select:focus {


    outline:none;


    border-color:#ff9f1c;


}



/* -----------------------------------------------------
   MENU MOBILE
----------------------------------------------------- */


.menu {


    position:fixed;


    bottom:0;


    left:0;


    right:0;


    height:70px;


    background:#15191e;


    border-top:

    1px solid #2b3038;


    display:flex;


    justify-content:space-around;


    align-items:center;


    z-index:1000;


}



.menu a {


    font-size:13px;


    text-align:center;


    opacity:.8;


}



.menu a:hover {


    opacity:1;

    color:#ff9f1c;

}



/* -----------------------------------------------------
   TITRES
----------------------------------------------------- */


h1,
h2,
h3 {

    letter-spacing:.3px;

}



/* -----------------------------------------------------
   INFORMATIONS
----------------------------------------------------- */


.error {


    background:#3a1518;


    color:#ffb3b8;


    padding:12px;


    border-radius:12px;


}



.success {


    background:#12351e;


    color:#9ff0b5;


    padding:12px;


    border-radius:12px;


}



/* -----------------------------------------------------
   BADGES
----------------------------------------------------- */


.badge {


    display:inline-block;


    padding:6px 12px;


    border-radius:20px;


    background:#ff9f1c;


    color:#111;


    font-weight:700;


}



/* -----------------------------------------------------
   TABLEAU DE BORD
----------------------------------------------------- */


.dashboard-number {


    font-size:34px;


    font-weight:800;


    color:#ff9f1c;


}



/* -----------------------------------------------------
   DESKTOP
----------------------------------------------------- */


@media(min-width:768px){


    .page {

        padding-top:30px;

    }


    .menu {

        position:relative;

        height:auto;

        padding:15px;

    }


}
/* -----------------------------------------------------
   IDENTITE MOTOCOUNT
----------------------------------------------------- */


.brand {

    display:flex;

    align-items:center;

    gap:12px;

}



.logo-moto {

    width:55px !important;

    height:55px !important;

    max-width:55px;

    max-height:55px;

    object-fit:contain;

    flex-shrink:0;

}



.brand h1 {

    margin:0;

}



.brand small {

    display:block;

    margin-top:3px;

    font-size:11px;

    color:#aaa;

}