:root {
    /* Palette bleu pastel moderne pour Baby Days */
    --bg-color1: #F8FAFF; /* Bleu très clair, presque blanc */
    --bg-color2: #EDF4FF; /* Bleu pastel très doux */
    --bg-color3: #E3F0FF; /* Bleu ciel pastel */

    /* Couleurs principales - Palette bleu moderne */
    --primary-blue: #7BB3F0; /* Bleu principal moderne */
    --primary-blue-light: #A8CCEF; /* Bleu clair */
    --primary-blue-soft: #C8E0F7; /* Bleu très doux */
    --primary-indigo: #9BB5FF; /* Indigo pastel */
    --primary-sky: #87CEEB; /* Bleu ciel */
    --primary-powder: #B0E0E6; /* Bleu poudre */

    /* Couleurs d'accent modernes */
    --accent-teal: #4DD0E1; /* Turquoise moderne */
    --accent-mint: #81C784; /* Vert menthe */
    --accent-lavender: #B39DDB; /* Lavande moderne */

    /* Textes - Palette moderne */
    --text1: #234fa2; /* Bleu-gris foncé moderne */
    --text-light: #607D8B; /* Bleu-gris moyen */
    --text-dark: #1A252F; /* Bleu très foncé */
    --text-muted: #90A4AE; /* Gris-bleu clair */

    /* Backgrounds */
    --bg-dark: #1A252F;
    --card-bg: #FFFFFF; /* Blanc pur pour les cartes */
    --card-shadow: rgba(123, 179, 240, 0.1); /* Ombre bleue douce */

    /* Couleurs d'état modernes */
    --success: #66BB6A; /* Vert moderne */
    --warning: #FFA726; /* Orange moderne */
    --error: #EF5350; /* Rouge moderne */
    --info: #42A5F5; /* Bleu info moderne */

    /* Gradients modernes */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-indigo) 100%);
    --gradient-soft: linear-gradient(135deg, var(--bg-color2) 0%, var(--bg-color3) 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
    --heading-wt-light: 300;
    --heading-wt-regular: 400;
    --heading-wt-medium: 500;
    --heading-wt-bold: 700;
}


.pointer {
    cursor: pointer;
}

html, body {
    background: var(--gradient-soft);
    background: url('../images/fond2.png?as=webp&width=500');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;



    height: 100%;
    color: var(--text1);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    padding: 0px;
    font-size: 0.9em;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--bg-color1);

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--bg-color2);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--text1);
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
}

span {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
}

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], input[type=email], input[type=url], select, textarea {
    background: var(--bg-color2) !important;
    border-color: var(--bg-color2) !important;
    border-radius: 8px !important;
    color: white !important;
    height: 30px !important;

}

.icon-hover {
    color: var(--text1) !important;
    transition: all ease-in-out 300ms;
    z-index: 10;
    cursor: pointer;
    margin: 2px;
    padding: 3px;
}


.icon-hover:hover {
    color: var(--text-light) !important;
    background: var(--bg-color2);
    border-radius: 100px;
}

.mini-ico {
    font-size: 1.2em;
    transform: translate(-3px, 3px);
}

.h1 {
    font-size: clamp(1.75rem, 1.2vw + 1.5rem, 2.75rem);
    font-weight: 300; /* --heading-wt-light */
    letter-spacing: -0.015em;
}

.h2 {
    font-size: clamp(1.5rem, 1vw + 1.2rem, 2.25rem);
    font-weight: 300; /* --heading-wt-light */
    letter-spacing: -0.01em;
}

/* Compléments */
.h3 {
    font-size: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
    font-weight: var(--heading-wt-regular);
}

.h4 {
    font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.5rem);
    font-weight: var(--heading-wt-medium);
}

.h5 {
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
    font-weight: var(--heading-wt-medium);
}

.h6 {
    font-size: 0.95rem;
    font-weight: var(--heading-wt-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}