/*

Palette :

Couleur Primaire : #4285F4 (Bleu)
Couleur Secondaire : #8b5cf6 (Violet)
Couleur d'Accent : #EA4335 (Rouge)
Texte Principal : #252849 (Bleu foncé)
Texte Secondaire : #585b5f (Gris)
Arrière-plan Clair : #f3f6ff (Bleu très clair)

*/

:root {
    /* Couleurs principales */
    --primary-color: #4285F4;
    --secondary-color: #A142F4;
    --danger-color: #EA4335;
    --dark-text-color: #252849; /* Renommé pour refléter la teinte sombre */
    --light-text-color: #585b5f;
    --background-light: #f3f6ff;
    --background-dark: #252849;
    --gradient-colors: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--danger-color));
    --short-gradient-colors: linear-gradient(to right, var(--primary-color), var(--secondary-color));

    /* Tailles de police */
    --font-size-h1: 4rem;
    --font-size-lead: 1.5rem;
    --font-size-card-title: 1.25rem;

    /* Rayons de bordure */
    --border-radius-btn: 2rem;
    --border-radius-rounded: 1.5rem;
    --border-radius-circle: 100%;

    /* Espacements */
    --section-padding: 8rem;
}

.bg-light-gradient {
    background-color: #ffffff;
    background-image: radial-gradient(ellipse at top left, rgba(34, 124, 241, 0.3), rgba(0, 0, 0, 0) 50%),
    radial-gradient(ellipse at top right, rgba(215, 45, 45, 0.3), rgba(0, 0, 0, 0) 50%),
    radial-gradient(ellipse at center right, rgba(181, 125, 212, 0.3), rgba(0, 0, 0, 0) 50%),
    radial-gradient(ellipse at center left, rgba(106, 140, 240, 0.3), rgba(0, 0, 0, 0) 50%);
}

.hero h1 {
    font-size: var(--font-size-h1);
}
.lead {
    font-size: var(--font-size-lead);
    font-weight: 400;
    color: var(--light-text-color) !important;
}

/* Ajuster la taille du texte pour les appareils mobiles */

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2.5rem!important;
    }
    .hero img {
        max-width: 100px;
    }
    .lead {
        font-size: 1rem!important;
    }
}

.btn {
    border-radius: var(--border-radius-btn);
}

body, h2, .navbar a, .nav-link {
    font-family: Roboto, sans-serif !important;
    color: var(--dark-text-color) !important;
}

.navbar.scroll-dark-navbar, .navbar.dark-navbar
{
    background-color: var(--background-dark)!important;
    color: white!important;
}

.navbar.scroll-dark-navbar .nav-link,  .navbar.dark-navbar .nav-link
{
    color: white!important;
}

.navbar.scroll-dark-navbar .light-logo, .navbar.dark-navbar .light-logo
{
    display: flex!important;
}
.navbar.scroll-dark-navbar .dark-logo, .navbar.dark-navbar .dark-logo
{
    display: none!important;
}


h2 {
    font-weight: bold;
}

.card-title {
    font-weight: bold;
    font-size: var(--font-size-card-title);
}

.color-gradient {
    background: var(--gradient-colors);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-light-grey {
    background-color: rgba(139, 92, 246, 0.07);
}

.text-purple {
    color: var(--secondary-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.x-danger {
    color: #F87171!important;
}
.check-success {
    color: var(--secondary-color)!important;
}

section, footer {
    padding-top: var(--section-padding) !important;
    padding-bottom: var(--section-padding) !important;
}

.text-grey {
    color: var(--light-text-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-gradient {
    background: var(--short-gradient-colors)!important;
    color: white!important;
    border-color: var(--short-gradient-colors)!important;
}


.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-gradient: none;
}

.text-bg-primary {
    color: var(--secondary-color) !important;
    background-color: var(--background-light) !important;
}

.picto {
    font-size: 3rem;
    color: var(--secondary-color);
}

.bg-light-blue {
    background-color: var(--background-light);
}

.bg-dark-blue {
    background-color: var(--background-dark);
}

.picto-container {
    background-color: var(--background-light);
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius-circle);
    display: flex;
    justify-content: center;
    align-items: center;
}

.rounded {
    border-radius: var(--border-radius-rounded) !important;
}

.badge {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem;
}

.text-gradient {
    background: var(--gradient-colors);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

footer {
    background-color: var(--background-dark);
}

/* Ajuster la taille du texte pour les appareils mobiles */

@media (max-width: 576px) {
    .fs-5 {
        font-size: 0.875rem!important; /* supprimer cette class pour appliquer à toute la page la valeur sans avoir à préciser la taille dans les class */
    }
}

.form-check-input:checked {
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}

textarea
{
    min-height: 250px!important;
}
 /*

TODO dans les illustrations, remplacer + pas des etoiles ?
 */