@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

/* PROTECTION ULTIME CONTRE LE MODE SOMBRE ANDROID */
html {
    background-color: #F5F5F7 !important;
    min-height: 100vh;
}

:root {
    color-scheme: light; /* Force le mode clair */
    --primary-color: #0071E3;
    --card-bg: rgba(255, 255, 255, 0.95);
}



/* PROTECTION MODE SOMBRE */

html, body {
    background-color: #F5F5F7 !important;
    color: #1D1D1F !important;
}



/* Astérisque rouge */

.required-star {
    color: red;
    font-weight: bold;
    margin-left: 3px;
}



* { box-sizing: border-box; margin: 0; padding: 0; }



body {
    background: url('fond.jpg') no-repeat center center fixed; 
    background-size: cover;
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    padding: 20px;
}



.container { max-width: 700px; margin: 20px auto; }



header {

    text-align: center; margin-bottom: 30px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
    padding: 20px; border-radius: 20px;
}



/* Fix Logo (Ne s'étire plus) */

.logo { 
    width: auto;
    height: auto;
    max-width: 180px; 
    max-height: 150px;
    object-fit: contain;
    display: block; 
    margin: 0 auto 10px auto; 
}



p.subtitle { font-size: 1.2rem; font-weight: 700; color: #333; }



.card {

    background: var(--card-bg);
    border-radius: 24px; padding: 40px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    margin-bottom: 30px;
}



h2 { color: var(--primary-color); margin-bottom: 25px; text-align: center; text-transform: uppercase; }


.form-group { margin-bottom: 20px; }

label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; color: #4a4a4a; text-transform: uppercase; }



/* INPUTS : Blanc forcé + Largeur max */

input, select, textarea {

    width: 100%; 

    padding: 14px; 

    border-radius: 12px;

    border: 1px solid #d2d2d7; 

    background-color: #ffffff !important; 

    color: #000000 !important;

    font-size: 16px; 

    font-family: inherit;

    /* SÉCURITÉ MOBILE : Empêche de dépasser */

    max-width: 100%; 

    min-width: 0;

}



input:focus, select:focus, textarea:focus {

    outline: none; border-color: var(--primary-color);

    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);

}



/* Grille par défaut (PC) */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }



.btn-primary {

    width: 100%; padding: 16px;

    background-image: linear-gradient(135deg, #0071E3 0%, #00C6FB 100%);

    color: white !important;

    border: none; border-radius: 12px; font-size: 18px; font-weight: 800;

    cursor: pointer; text-transform: uppercase; margin-top: 10px;

}



.checkbox-group {

    display: flex; align-items: flex-start; margin-bottom: 15px;

    background: rgba(255,255,255,0.5); padding: 10px; border-radius: 10px;

}

.checkbox-group input { width: 22px; height: 22px; margin-right: 12px; accent-color: var(--primary-color); min-width: 22px; }

.checkbox-group label { margin: 0; text-transform: none; font-weight: 600; color: #333; }

.checkbox-group label a { color: var(--primary-color); }



.hidden { display: none !important; }

#message { margin-top: 20px; text-align: center; font-weight: 700; }

.success { color: #2ecc71; background: #e8f8f5; padding: 10px; border-radius: 8px; }

.error { color: #e74c3c; background: #fdedec; padding: 10px; border-radius: 8px; }



footer p, footer a { color: white !important; text-shadow: 0 1px 3px rgba(0,0,0,0.8); font-weight: 600; }



/* --- RESPONSIVE MOBILE (La correction est ici) --- */

@media (max-width: 768px) {

    body { padding: 10px; }

    

    .container { margin: 10px auto; width: 100%; }

    

    .card { 

        padding: 20px; /* Moins de marge interne pour gagner de la place */

        width: 100%;

        border-radius: 15px;

    }



    /* FORCE LES GRILLES EN 1 COLONNE (Empilement) */

    .grid-2 {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }



    /* Ajustement taille texte et logo */

    h1 { font-size: 1.8rem; }

    .logo { max-width: 120px; }

    

    /* Sécurité supplémentaire pour les dates sur iPhone */

    input[type="date"] {

        appearance: none;

        -webkit-appearance: none;

        display: block;

        width: 100%;

    }