.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* Mini reset, no margins, paddings or bullets */
.menu,
.submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Main level */


.menu > li {
    background: #34495e;
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial, Helvetica;
    font-size: 14px;
}

.menu li:hover {
    background: #e74c3c;
}

.menu > li > a {
    transform: skewX(-25deg);
    padding: 1em 2em;
}

/* Dropdown */
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color: #34495e;
    position: relative;
    overflow: hidden;
}

.submenu > li > a {
    padding: 1em 2em;
}

.submenu > li::after {
    content: '';
    position: absolute;
    top: -125%;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}

/* Odd stuff */
.submenu > li:nth-child(odd){
    transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
    transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
    right: -50%;
    transform: skewX(-25deg) rotate(3deg);
}

/* Even stuff */
.submenu > li:nth-child(even){
    transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
    transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
    left: -50%;
    transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
    opacity: 0;
    visibility: hidden;
}

.submenu li {
    transition: .2s ease transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
    opacity: 1;
    visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
    transform: skewX(25deg) translateX(15px);
}

.menu > li:hover .submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(-15px);
}

body {
    background: #1c242d;
}
.box {
    border: 1px solid #c4c4c4;
    padding: 30px 25px 10px 25px;
    background: white;
    margin: 30px auto;
    width: 360px;
}
h1.box-logo a {
    text-decoration:none;
}
h1.box-title {
    color: #AEAEAE;
    background: #f8f8f8;
    font-weight: 300;
    padding: 15px 25px;
    line-height: 30px;
    font-size: 25px;
    text-align:center;
    margin: -27px -26px 26px;
}
.box-button {
    border-radius: 5px;
    background: #d2483c;
    text-align: center;
    cursor: pointer;
    font-size: 19px;
    width: 100%;
    height: 51px;
    padding: 0;
    color: #fff;
    border: 0;
    outline:0;
}
.box-register
{
    text-align:center;
    margin-bottom:0px;
}
.box-register a
{
    text-decoration:none;
    font-size:12px;
    color:#666;
}
.box-input {
    font-size: 14px;
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 25px;
    padding-left:10px;
    border-radius: 5px;
    width: 347px;
    height: 50px;
}
.box-input:focus {
    outline: none;
    border-color:#5c7186;
}
.sucess{
    text-align: center;
    color: white;
}
.sucess a {
    text-decoration: none;
    color: #58aef7;
}


body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f1f1f1;
}

form.box {
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.box-button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.box-button:hover {
    background-color: #0056b3;
}

.box-title {
    text-align: center;
    margin-bottom: 20px;
}

.errorMessage {
    color: red;
    text-align: center;
    margin-top: 10px;
}

/* ✅ Responsive pour mobile */
@media screen and (max-width: 600px) {
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background-color: white;
    }

    form.box {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-input, .box-button {
        font-size: 1rem;
    }

    .box-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .box-register {
        text-align: center;
        font-size: 0.9rem;
        margin-top: 20px;
    }

    .errorMessage {
        text-align: center;
        color: red;
        margin-top: 15px;
    }
}