/* ===========================================
   CONNEXION + INSCRIPTION - Le Petit Bled
   Style "maisonnette" : crème, toit brun,
   champs = fenêtres bleues, bouton = soleil
   ===========================================
   Palette :
   - Crème murs   : #FBF3D8 → #F2E2B0
   - Brun trait   : #5C3A1E   Brun toit : #6B4226
   - Bleu fenêtre : #1E4A63
   - Jaune soleil : #F4D03F
   - Vert prés    : #4C8C2B
   - Texte        : #3E2A14
   =========================================== */

/* BODY - BASE POUR LES 2 PAGES */
body {
    background-image: url(village10.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Arial', sans-serif;
    color: #3E2A14;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Classes utilitaires */
.connectfond, #insfond {
    background-image: url(fondins.png);
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
}

#insfond {
    background-image: url(fondins.png);
}

/* FORM SECTION - CENTRAGE
   + vignettage : les fonds (fondins.png, mphone.jpg) sont crème et
   très détaillés, ce halo sombre discret détache la carte du décor */
.connexion-form-section, .inscription-form-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    background: radial-gradient(
        ellipse 70% 60% at center,
        rgba(20, 25, 35, 0.40) 0%,
        rgba(20, 25, 35, 0.18) 55%,
        rgba(20, 25, 35, 0) 100%
    );
}

/* Container principal - CONNEXION */
.connexion-container {
    position: relative;
    background-color: #F7ECC6;
    background-image: linear-gradient(180deg, #FBF3D8 0%, #F2E2B0 100%);
    border: 3px solid #5C3A1E;
    border-radius: 0 0 16px 16px;
    padding: 40px;
    box-shadow:
        0 8px 0 rgba(20, 25, 35, 0.32),
        0 22px 45px rgba(20, 25, 35, 0.40);
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center 70%; /* pivot vers le bas : la maison "avance" vers l'utilisateur */
    animation: maison-approche 0.85s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}

/* Container principal - INSCRIPTION */
.inscription-container {
    position: relative;
    background-color: #F7ECC6;
    background-image: linear-gradient(180deg, #FBF3D8 0%, #F2E2B0 100%);
    border: 3px solid #5C3A1E;
    border-radius: 0 0 16px 16px;
    padding: 40px;
    box-shadow:
        0 8px 0 rgba(20, 25, 35, 0.32),
        0 22px 45px rgba(20, 25, 35, 0.40);
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.45s ease;
}

/* Le toit brun au-dessus de la carte, comme les maisons du village.
   (Uniquement sur la connexion : la carte inscription scrolle, un
   pseudo-élément qui dépasse serait coupé par overflow-y.) */
.connexion-container::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    height: 0;
    border-bottom: 26px solid #6B4226;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    pointer-events: none;
}

/* La lucarne sur le toit */
.connexion-container::after {
    content: "";
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 10px;
    background: #F1DFAE;
    border: 2px solid #1E4A63;
    border-radius: 2px;
    pointer-events: none;
}

/* Inscription : toit plat en bandeau brun, compatible avec le scroll */
.inscription-container {
    border-top: 14px solid #6B4226;
    border-radius: 12px 12px 16px 16px;
}

/* Animation d'entrée (inscription) */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animation d'entrée (connexion) : une maison du village s'avance.
   Elle part petite et un peu haute (comme au fond du décor), légèrement
   translucide, puis grossit et se pose au premier plan avec un léger rebond. */
@keyframes maison-approche {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.35);
        filter: blur(2px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Respect des préférences système : pas de zoom si mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .connexion-container {
        animation: slideUp 0.4s ease both;
    }
}

/* TITRES */
.connexion-container h2, .inscription-container h1 {
    color: #3E2A14;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Petit trait de soleil sous le titre */
.connexion-container h2::after, .inscription-container h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    margin: 12px auto 20px;
    background: #F4D03F;
    border-radius: 3px;
    box-shadow: 0 1px 0 #C79A1B;
}

/* FORM GROUP - LABELS AU-DESSUS */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
}

.form-group label.td1 {
    color: #5C3A1E;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    text-align: left;
}

/* Checkbox - Alignement */
.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.checkbox-group label.td1 {
    margin-bottom: 0;
}

/* TOUS LES INPUTS - style "fenêtre de maison" */
.connexion-container input[type="text"],
.connexion-container input[type="email"],
.connexion-container input[type="password"],
.inscription-container input[type="text"],
.inscription-container input[type="email"],
.inscription-container input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    background: #FFFDF5;
    border: 2px solid #1E4A63;
    border-radius: 8px;
    font-size: 16px;
    color: #14324A;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    box-shadow: inset 0 2px 3px rgba(30, 74, 99, 0.12);
}

/* Focus : le soleil éclaire la fenêtre */
.connexion-container input[type="text"]:focus,
.connexion-container input[type="email"]:focus,
.connexion-container input[type="password"]:focus,
.inscription-container input[type="text"]:focus,
.inscription-container input[type="email"]:focus,
.inscription-container input[type="password"]:focus {
    outline: none;
    border-color: #E0A800;
    box-shadow:
        0 0 0 4px rgba(244, 208, 63, 0.35),
        inset 0 2px 3px rgba(30, 74, 99, 0.08);
    background: #FFFFFF;
}

/* Autofill Chrome/Safari : rester dans le thème */
.connexion-container input:-webkit-autofill,
.inscription-container input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFDF5 inset;
    -webkit-text-fill-color: #14324A;
    transition: background-color 5000s ease-in-out 0s;
}

/* Placeholders */
.connexion-container input::placeholder,
.inscription-container input::placeholder {
    color: rgba(20, 50, 74, 0.45);
}

.connexion-container input:focus::placeholder,
.inscription-container input:focus::placeholder {
    color: rgba(20, 50, 74, 0.3);
}

/* Bouton Submit : le soleil du village */
.connexion-container input[type="submit"],
.inscription-container input[type="submit"] {
    width: 100%;
    padding: 13px 15px;
    background: linear-gradient(180deg, #FFE066 0%, #F4C531 100%);
    color: #3E2A14;
    font-weight: bold;
    font-size: 17px;
    border: 2px solid #5C3A1E;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 0 #B98A1F;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.connexion-container input[type="submit"]:hover,
.inscription-container input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #B98A1F, 0 10px 18px rgba(244, 208, 63, 0.45);
}

.connexion-container input[type="submit"]:active,
.inscription-container input[type="submit"]:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #B98A1F;
}

/* Checkbox Se souvenir */
.connexion-container input[type="checkbox"] {
    width: auto !important;
    transform: scale(1.2);
    accent-color: #4C8C2B;
}

/* SUGGESTIONS VILLE */
.ville-group {
    position: relative;
    width: 100%;
}

#Ville { cursor: pointer; }

#suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFDF5;
    border: 2px solid #1E4A63;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 8px 16px rgba(20, 25, 35, 0.25);
}

#suggestions ul { margin: 0; padding: 0; list-style: none; }

#suggestions li {
    padding: 12px 15px;
    color: #14324A;
    cursor: pointer;
    border-bottom: 1px solid rgba(30, 74, 99, 0.15);
    transition: all 0.2s ease;
    font-size: 14px;
}

#suggestions li:hover {
    background: rgba(244, 208, 63, 0.3);
    color: #3E2A14;
    padding-left: 20px;
}

#suggestions li:last-child { border-bottom: none; }

/* LIENS SECONDAIRES : les chemins verts du village */
.connexion-container .link-button,
.connexion-ligneco a,
.inscription-container .link-button {
    color: #2F6B1C;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 11px 25px;
    border-radius: 25px;
    background: rgba(76, 140, 43, 0.12);
    transition: all 0.25s ease;
    border: 2px solid rgba(76, 140, 43, 0.45);
    display: inline-block;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.connexion-container .link-button:hover,
.connexion-ligneco a:hover,
.inscription-container .link-button:hover {
    background: #4C8C2B;
    color: #FBF3D8;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(76, 140, 43, 0.4);
}

/* Barre navigation sous formulaire - CONNEXION */
.connexion-ligneco {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    border-top: 2px dashed rgba(92, 58, 30, 0.35);
    padding-top: 20px;
    width: 100%;
}

.connexion-ligneco li { margin: 0; flex: 1; }

/* Messages d'erreur */
.error-message {
    color: #A93226 !important;
    font-weight: bold;
    margin: 20px 0 0;
    padding: 15px;
    background: rgba(231, 76, 60, 0.12);
    border-radius: 8px;
    border-left: 4px solid #C0392B;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* BOTTOM BANNER - INSCRIPTION UNIQUEMENT */
.bottom-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(62, 42, 20, 0.95);
    border-top: 3px solid #F4D03F;
    color: #FBF3D8;
    padding: 20px 0;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.h1inscri {
    font-size: 24px !important;
    margin: 0;
    color: #F4D03F;
}

/* MOBILE EXPERIENCE - CONNEXION */
@media (max-width: 480px) {
    .connectfond {
        background-image: url('afficheMV1.png') !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: fixed !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 100vh !important;
        touch-action: auto !important;
    }

    .connexion-form-section {
        display: flex !important;
        width: 100%;
        min-height: 100vh;
        padding: 30px 20px 20px;
        box-sizing: border-box;
        justify-content: center !important;
        align-items: center !important;
    }

    .connexion-container {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        padding: 25px 20px;
    }

    .connexion-container h2 { font-size: 24px; }

    .form-group label.td1 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .connexion-container input[type="text"],
    .connexion-container input[type="email"],
    .connexion-container input[type="password"] {
        padding: 10px 12px;
        font-size: 15px;
    }
}

/* MOBILE EXPERIENCE - INSCRIPTION */
@media (max-width: 480px) {
    #insfond {
        background-image: url('img/mphone.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: fixed !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 100vh !important;
        touch-action: auto !important;
    }

    .bottom-banner {
        display: block;
        transition: opacity 0.5s ease;
    }

    .inscription-form-section {
        display: none;
        width: 100%;
        min-height: 100vh;
        padding: 30px 20px 20px;
        box-sizing: border-box;
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.5s ease;
        justify-content: center !important;
        align-items: center !important;
        pointer-events: none;
    }

    .inscription-form-section.visible {
        display: flex !important;
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
    }

    .inscription-container {
        display: flex !important;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        padding: 25px 20px;
        max-height: none;
    }

    .inscription-container h1 { font-size: 26px; }

    .inscription-container input[type="text"],
    .inscription-container input[type="email"],
    .inscription-container input[type="password"] {
        padding: 10px 12px;
        font-size: 15px;
    }

    #suggestions li { padding: 10px 12px; font-size: 13px; }

    .inscription-container .link-button { display: none !important; }
}

/* ORDINATEUR */
@media (min-width: 481px) {
    .bottom-banner { display: none !important; }
    .connexion-form-section, .inscription-form-section {
        display: flex !important;
        position: static;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .connexion-container, .inscription-container {
        display: flex !important;
    }
}

/* Accessibilité : moins d'animations si demandé par le système */
@media (prefers-reduced-motion: reduce) {
    .connexion-container, .inscription-container { animation: none; }
    .connexion-container input[type="submit"],
    .inscription-container input[type="submit"],
    .connexion-container .link-button,
    .connexion-ligneco a,
    .inscription-container .link-button { transition: none; }
}

/* Container caché */
.container { display: none; }

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
    background-color: #F2E2B0;
}

::-webkit-scrollbar-thumb {
    background-color: #6B4226;
    border-radius: 4px;
}

::-webkit-scrollbar-corner {
    background-color: #F2E2B0;
}