@charset "UTF-8";

/*!
 * Version - 1.1.1
 * Copyright (c) 2023 Cooland <info@cooland.com>

 * L’autorisation est accordée à toute personne qui en obtient une copie de ce style.
 * Il est strictement interdit de publier(vendre) sans l'autorisation préalable des auteurs.
 * Des spécialistes sont à l'origine des documents fournis.

*/

/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('../vendor/bootstrap/css/bootstrap.min.css');
@import url('typography.css');
@import url('color.css');


/*  ==========================================
*   ================= GENERAL ================
*/
* {
    font-family: var(--ff-source);
    color: var(--dark);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none !important;
}

p {
    font-size: 1rem !important;
    font-weight: 300 !important;
}

/* Form */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/** 
=========================================================
================== 0. PERSONNALISATION ==================
=========================================================
 **/

.form-control {
    display: block;
    width: 100%;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dfe2e1;
}

.form-control.search {
    background-color: #DEF2FC !important;
    border-color: var(--light);
}

.form-control::placeholder {
    color: #77878F;
    font-weight: 400;
}

/* Pop up */

.popup-text {
    font-size: 40px;
    font-weight: 800;
    background-image: linear-gradient(90deg, #0086ff 0%, #d63626 100%) !important;
    color: transparent;
    background-clip: text;
}

/** 
=========================================================
======================= 1. HEADER =======================
=========================================================
 **/

.topbar {
    background-color: var(--primary);
}

.topbar-text {
    font-size: 13px;
    letter-spacing: 3.5px;
    color: var(--light);
}

.dropdown-item {
    line-height: 20px;
    font-weight: 400;
    font-size: 15px;
    padding: .325rem .75rem;
    display: flex;
    align-items: center;
    background-color: transparent;
    border-radius: .5rem !important;
}

.dropdown-item:hover {
    background-color: #0088ff3b;
}


#nav .nav-item:hover {
    color: var(--primary) !important;
    background-color: var(--orange);
    transition-duration: .3s;
}

#nav .nav-item:not(.active):hover::after {
    color: var(--primary) !important;
    /* transform: translateX(-50%) scaleX(1); */
}

/** 
=========================================================
======================= 5. FOOTER =======================
=========================================================
 **/

#newsletter {
    background-image: url('../images/newsletter.png');
    background-size: cover;
    background-position: right bottom 100%;
}

footer {
    background-color: #000000 !important;
    color: var(--light) !important;
}

footer p {
    font-size: 14px !important;
}

footer .text-gray {
    color: #77878F;
}

#copyright {
    border-top: 1px solid #ffffff3b;
}

/*  ===============================================
*   ================= Mobile =================
*/
@media only screen and (max-width: 768px) {

    /* pub */

    #adv h4 {
        font-size: 25px !important;
    }
}

/*  ===============================================
*   ============== Variables Global ===============
*/

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--light);
    background-color: var(--light);
}

*::-webkit-scrollbar {
    width: 10px;
    background-color: var(--light);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary) !important;
}

::selection {
    background-color: var(--secondary);
    color: var(--light);
}

:root {
    --primary: #0152A8;
    --secondary: #0086FF;
    --red: #D63626;
    --orange: #FA8232;
    --green: #2DB224;
    --yellow: #FAEBB1;
    --dark: #000000;
    --light-blue: #1DA1F2;
    --sky-blue: #E9F7FE;
    --dark-blue: #04327A;
    --light: #ffffff;
    --gray: #f0f0f0;

    --ff-source: 'Public Sans', sans-serif;

}