/* Container principal */
.scratch-form-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

/* Boutons de basculement */
.toggle-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.toggle-button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    cursor: pointer;
    background-color: #f0f0f0;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s;
    margin: 0 5px;
}

.toggle-button.active {
    background-color: #2fa1ef;
    color: white;
}

/* Styles de la carte */
.form-card {
    display: none;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-card.active {
    display: block;
}

/* Titre du formulaire */
.form-card h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 12px;
}

/* Conteneur de chaque champ */
.form-group {
    margin-bottom: 8px; /* Contrôle l'espace entre les champs */
    text-align: left;
}

/* Labels */
.form-group label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 2px; /* Contrôle l'espace entre label et champ */
}

/* Champs de saisie */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    box-sizing: border-box;
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.checkbox-group label {
    margin-left: 5px;
    font-size: 0.85em;
}

/* Bouton de soumission */
.form-card input[type="submit"] {
    width: 100%;
    background-color: #2fa1ef;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.form-card input[type="submit"]:hover {
    background-color: #2fa1ef;
}
.has-text-align-center.wp-block-post-title {
    display: none;
}
.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    display: none;
}
:root :where(.is-layout-flow) > :last-child {
    margin-block-end: 0;
    padding: 0px;
}

     /* Styles pour l'en-tête et le pied de page avec dégradé */
    .header-banner, .footer-banner {
    position: relative;
    text-align: center;
    color: white;
    padding: 34px 16px 58px 0;
    background: #dde8ee;
    }

    .header-banner::before, .footer-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://your-image-url.com/snow-background.png'); /* URL de fond de neige PNG */
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.1; /* Réduire l'opacité pour plus de subtilité */
        z-index: -1;
    }

    /* Animation de flocons de neige plus subtile */
    .snowflake {
        position: absolute;
        top: -10px;
        font-size: 1.5em;
        color: #2fa1ef; /* Bleu clair translucide pour discrétion */
        opacity: 0.6;
        animation: fall linear infinite;
        z-index: 1;
    }

    /* Styles de l'animation pour faire tomber les flocons */
    @keyframes fall {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
    }

    /* Variation des flocons pour un effet naturel */
    .snowflake:nth-child(1) { left: 10%; animation-duration: 10s; }
    .snowflake:nth-child(2) { left: 30%; animation-duration: 12s; }
    .snowflake:nth-child(3) { left: 50%; animation-duration: 8s; }
    .snowflake:nth-child(4) { left: 70%; animation-duration: 15s; }
    .snowflake:nth-child(5) { left: 90%; animation-duration: 9s; }

.sos_saw_message {
    text-align: center; /* Centre le texte horizontalement */
}

.wp-block-group {
    box-sizing: border-box;
    margin: 15px;
}
.page-template-page-php h3,
.page-template-page-php .scratch-login-register-cards,
.page-template-page-php .scratch-win {
    text-align: center;
}

/* Styliser le bouton de connexion automatique */
    .auto-login-button {
        background-color: #28a745; /* Vert moderne */
        color: #ffffff; /* Texte blanc */
        padding: 12px 24px;
        border: none;
        border-radius: 25px; /* Bordure arrondie */
        cursor: pointer;
        font-size: 1rem; /* Taille du texte */
        font-weight: bold;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    }

    .auto-login-button:hover {
        background-color: #218838; /* Couleur au survol */
        transform: translateY(-2px); /* Effet de déplacement */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Augmente l'ombre */
    }

    .auto-login-button:active {
        background-color: #1e7e34; /* Couleur lors du clic */
        transform: translateY(0); /* Réinitialisation de la position */
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2); /* Ombre réduite */
    }