/* RESET DE BASE */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    outline: none;

}

/* CORRECTION CRITIQUE : STRUCTURE GLOBALE */

html {

    height: 100%;

    -webkit-text-size-adjust: 100%;

}

body {

    font-family: system-ui, sans-serif;

    min-height: 100vh;

    min-height: -webkit-fill-available; /* iOS fix */

    display: flex;

    flex-direction: column;

    background-color: #ffffff; /* Backup color */

}

/* VOTRE CONTAINER ORIGINAL - CORRIGÉ */

.container {

    position: relative;

    min-height: auto; /* CHANGÉ : plus de 100vh forcé, pour ne pas étirer la page */

    width: 100%;

    padding: 90px 8% 80px; /* Plus d'espace en haut pour descendre le formulaire */

    background-color: #ffffff;

    display: flex; /* AJOUTÉ */

    flex-direction: column; /* AJOUTÉ */

    justify-content: flex-start; /* CHANGÉ : le formulaire remonte au lieu d'être centré dans tout l'écran */

    align-items: center; /* AJOUTÉ */

    flex: 1; /* AJOUTÉ - étire le container */

}

/* VOTRE SECTION ORIGINALE - CORRIGÉE */

section {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    margin: 20px 0;

    width: 100%;

}

/* VOTRE .form-wrapper ORIGINAL - CORRIGÉ */

.form-wrapper { 

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    flex: 1; /* AJOUTÉ */

}

/* VOTRE .card ORIGINAL - CORRIGÉ */

.form-wrapper .card {

    position: relative;

    width: 360px;

    padding: 28px 24px 20px;

    background-color: #ffffff;

    border: 1px solid rgb(35 20 10 /35%);

    border-radius: 14px;

    box-shadow: 0 12px 32px rgb(35 20 10 /18%);

    visibility: visible;

    opacity: 1;

    overflow: visible;

    animation: cardFadeIn .5s ease-out;

    transition: opacity .3s, visibility .3s;

}

.form-wrapper .card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 6px;

    border-radius: 14px 14px 0 0;

    background: linear-gradient(90deg, #ff8c00, #231407);

}

.form-wrapper .card::after {

    content: none;

    position: absolute;

    top: -16px;

    left: 50%;

    transform: translateX(-50%);

    width: 30px;

    height: 30px;

    line-height: 28px;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid rgb(35 20 10 /35%);

    color: #ff8c00;

    font-size: 15px;

    text-align: center;

}

@keyframes cardFadeIn {

    from { opacity: 0; transform: translateY(14px); }

    to { opacity: 1; transform: translateY(0); }

}    

/* VOTRE .card-header ORIGINAL */

.card-header {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    margin: 12px 4px 0;

    padding: 4px;

    font-size: 1rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    color: #231407;

    background: rgb(255 140 0 /6%);

    box-shadow: none;

    border-radius: 50px;

}

.card-header .form-header {

    flex: 50%;

    text-align: center;

    padding: 10px 0;

    border: 1px solid transparent;

    border-radius: 50px;

    user-select: none;

    transition: background .3s, color .3s;

}

.card-header .form-header.active { /* AJOUT de .active */

    background: linear-gradient(135deg, #ff8c00, #231407);

    color: #ffffff;

    box-shadow: 0 4px 12px rgb(35 20 10 /30%);

    border-color: transparent;

    transition: background .3s, box-shadow .3s;

}

a.form-options {

    display: block;

    margin: 6px 0 14px;

    padding: 8px 10px 8px 34px;

    font-size: .82rem;

    font-style: italic;

    text-align: left;

    color: rgb(35 20 10 /75%);

    background-color: rgb(35 20 10 /4%);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 2-3 4'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: 10px center;

    background-size: 14px 14px;

    border-radius: 6px;

    border-left: 3px solid #ff8c00;

}

.card-body {

    display: flex;

    flex-wrap: nowrap;

    padding: 40px 0;

    text-align: center;

}

form {

    flex: 0 0 100%;

}

/* VOTRE .form-control ORIGINAL - CORRIGÉ */

.form-control {

    width: 100%;

    border: 1px solid rgb(35 20 10 /15%);

    border-radius: 8px;

    background: rgb(255 140 0 /4%);

    background-repeat: no-repeat;

    background-position: 12px center;

    background-size: 16px 16px;

    outline: none;

    padding: 12px 14px 12px 40px;

    margin-bottom: 18px;

    color: #231407;

    font-size: 16px; /* AJOUTÉ - empêche zoom iOS */

    transition: border-color .25s, box-shadow .25s;

}

.form-control:focus {

    border-color: #ff8c00;

    box-shadow: 0 0 0 3px rgb(255 140 0 /15%);

}

.form-control::placeholder {

    color: rgb(35 20 10 /55%);

}

input[name="Nom"], input[name="Prenom"] {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231407' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");

}

input[name="Email"] {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231407' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");

}

input[name="Password"], input[name="Confirmation"], input[name="Reponse"] {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231407' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");

}

/* VOTRE .formButton ORIGINAL - CORRIGÉ */

.formButton {

    display: block;

    margin: 0 auto;

    border: 1px solid transparent;

    padding: 1rem 3rem;

    background: linear-gradient(135deg, #ff8c00, #b85c00);

    color: #ffffff;

    letter-spacing: .04em;

    text-transform: uppercase;

    border-radius: 50px;

    margin-top: 1rem;

    font-size: .95rem;

    font-weight: 600;

    box-shadow: 0 6px 16px rgb(255 140 0 /35%);

    transition: transform .3s, box-shadow .3s;

    width: 100%;

    max-width: 300px;

}

.formButton::after {

    content: " \2192";

}

.formButton:hover {

    box-shadow: 0 8px 22px rgb(255 140 0 /55%);

    transform: translateY(-3px); 

}

/* CORRECTIONS POUR LES MESSAGES */

.text-center {

    text-align: center;

    margin: 15px 0;

    min-height: 40px;

}

.text-center p {

    color: #c0392b;

    background: rgb(35 20 10 /8%);

    padding: 10px;

    border-radius: 4px;

    font-size: 0.9rem;

    margin: 10px 0;

}

/* VOS OPTIONS ORIGINALES */

.card-body .form-options ul {

    color: rgb(35 20 10 /100%);

    list-style: none;

}

.card-body .form-options a {

    color: rgb(244 148 33 /100%);

    font-weight: 600;

    text-decoration: none;

    transition: color .2s;

}

.card-body .form-options a:hover {

    color: #231407;

    text-decoration: underline;

}

.card-body .form-options p {

    color: rgb(35 20 10 /100%);

    margin: 10px 0;

}

/* ========== MOBILE FIX CRITIQUE ========== */

@media (max-width: 768px) {

    /* CORRECTION HAUTEUR MOBILE */

    html, body {

        height: 100% !important;

        overflow-x: hidden !important;

    }

    

    body {

        min-height: 100vh;

        min-height: -webkit-fill-available;

        display: flex !important;

        flex-direction: column !important;

    }

    

    /* VOTRE CONTAINER SUR MOBILE */

    .container {

        min-height: auto !important;

        height: auto !important;

        padding: 20px 5% 60px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-start !important;

    }

    

    /* VOTRE SECTION SUR MOBILE */

    section {

        margin: 15px 0 !important;

    }

    

    /* VOTRE FORM SUR MOBILE */

    .form-wrapper .card {

        width: 100% !important;

        max-width: 360px !important;

        margin: 0 auto !important;

    }

    

    .formButton {

        max-width: 100% !important;

    }

    

    /* Empêche le zoom sur iOS */

    .form-control {

        font-size: 16px !important;

    }

}

/* CORRECTION iOS SAFARI */

@supports (-webkit-touch-callout: none) {

    .container {

        min-height: auto;

    }

}

/* MODE PAYSAGE MOBILE */

@media (max-height: 600px) and (orientation: landscape) {

    .container {

        padding: 10px 5% !important;

    }

    

    section {

        margin: 10px 0 !important;

    }

    

    .card-body {

        padding: 20px 0 !important;

    }

}