/* Fichier de thème spécifique pour XavPC */
:root {
    font-family: 'Manrope';
    --bg-color: #F1F3FF;
    --text-color: #00051D;
    --bleu-principal:#0B2EC8;
    --bleu-secondaire:#4361EE;
    --violet-secondaire: #7643EE;
    --dgrad-bleu: linear-gradient(90deg, #0B2EC8 0%, #4361EE 100%);
    --dgrad-3-couleurs: linear-gradient(128deg, #0B2EC8 1.87%, #4361EE 50.93%, #7343EE 100%);
    --bg-btn-v2: rgba(255, 255, 255, 0.30);
    --white: #FFFFFF;

    --font-size-xs: 1.125rem 'Viga'; /*18px*/
    --font-size-s: 1.25rem 'Viga'; /*20px*/
    --font-size-m: 1.5rem 'Viga'; /*24px*/
    --font-size-l: 1.75rem 'Viga'; /*28px*/
    --font-size-xl: 2.0rem 'Viga'; /*32px*/
    --font-size-xxl: 2.25rem 'Viga'; /*36px*/

    --font-size-xs-m: 1.0rem 'Viga'; /*16px*/
    --font-size-s-m: 1.125rem 'Viga'; /*18px*/
    --font-size-m-m: 1.25rem 'Viga'; /*20px*/
    --font-size-l-m: 1.5rem 'Viga'; /*24px*/
    --font-size-xl-m: 1.625rem 'Viga'; /*26px*/
    --font-size-xxl-m: 2.0rem 'Viga'; /*32px*/
}

/* Reset général */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.bold {
    font-weight: 600;
}

/* Style spécifique pour les entrées de formulaire au focus */
input:focus, textarea:focus {
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

/* Bouton principal */
button[type="submit"], .cta-button, .cta-button{
    font-family:'Manrope';
    font-weight: 600;
    border-radius: 1000px;
    background: var(--dgrad-bleu);
    box-shadow: 0px 0px 50px 0px rgba(11, 46, 200, 0.35);
    display: flex;
    width: 288px;
    height: 56px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: var(--white);
    border: none;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
}

button[type="submit"]:hover, .cta-button:hover {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.20) inset, 0px 0px 50px 0px rgba(11, 46, 200, 0.20);
    transform: translateY(-2px);
}

button[type="submit"]:active, .cta-button:active {
    transform: translateY(0);
}

/* Bouton secondaire */
.cta-button-v2 {
    font-family:'Manrope';
    font-weight: 600;
    border-radius: 1000px;
    border: 3px solid #FFF;
    background: var(--bg-btn-v2);
    box-shadow: 0px 4px 26.3px 0px rgba(153, 153, 153, 0.35);
    display: flex;
    width: 288px;
    height: 56px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: var(--text-color);
    border: none;
    cursor: pointer;
    align-self: center;
    margin-top: 10px;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
}

.cta-button-v2:hover {
    box-shadow: 0px 0px 40px 0px rgba(153, 153, 153, 0.20) inset, 0px 4px 26.3px 0px rgba(153, 153, 153, 0.35);
    transform: translateY(-2px);
}

.cta-button-v2:active{
    transform: translateY(0);
}

/* Style spécifique pour les titres de la section contact */
.contact-info h3 {
    color: var(--text-color);
    font-weight: 600;
    line-height: 1.5;
}

.contact-info h4 {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom: 1px solid rgba(26, 86, 219, 0.2);
    padding-bottom: 5px;
    margin-top: 30px;
}

/* Style spécifique pour les éléments de la section contact */
.contact-item {
    transition: transform 0.2s;
}

.contact-item:hover {
    transform: translateX(5px);
}

/* Animation pour le header */
.header {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour le contenu principal */
.main-content {
    animation: slideUp 0.5s ease-in-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour les dropdowns */
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 300px;
    }
}

.dropdown-content.active {
    animation: slideDown 0.3s ease-in-out;
}

@media (max-width: 480px) {
    .header, .formulaire, .contact-info {
        padding: 15px;
    }
}