/* -------------------------------------- */
/*          GLOBAL RESET & BASE           */
/* -------------------------------------- */
* {

    border: 0;
    box-sizing: border-box;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

html {
    font-size: 18px;
    /* ou 20px pour encore plus grand */
}

:root {
    /* COLORS */
    --primary: #9D71E8;
    --primary-400: #B18DED;
    --primary-600: #825CC2;
    --primary-700: #66479C;
    --primary-200: #D8C6F6;
    --primary-blue: #704EE7;
    --primary-blue-2: #5A3EB9;
    --secondary: #B2C9FF;
    --secondary-700: #6B89D0;
    --secondary-800: #4769B8;
    --error: #FF5E73;
    --success: #71e89d;
    --success-200: #C6F6D8;
    --success-600: #5CC282;
    --white: #f5f1fd;
    --accent: #FFD35E;
    --accent-700: #AE8E38;
    --gray: #3b3b3b;
    --gray-100: #C4C4C4;
    --gray-200: #949494;
    --gray-300: #767676;
     --gray-400: #595959;
     --gray-600: #2F2F2F;
    --gray-700: #232323;
    --gray-800: #181818;
    --black: #000000;
    --background: #f2f2f2;

    /* SPACING */
    --space-0-5: 0.15rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* RADIUS */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* SHADOWS */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.20);

    /* FONTS */
    --font-main: "Nunito", sans-serif;
    --font-code: "Courier New", monospace;
    --font-size-extra-small: 0.8rem;
    /* ~13px */
    --font-size-small: 0.9rem;
    /* ~14px */
    --font-size-normal: 1rem;
    /* ~16px (standard web) */
    --font-size-medium: 1.125rem;
    /* ~18px */
    --font-size-large: 1.5rem;
    /* ~24px */
    --font-size-title: 2rem;
    /* ~32px */
    --font-size-hero: 3.5rem;
    /* ~56px */
    --weight-extra-light: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semi-bold: 600;
    --weight-bold: 700;
    --weight-extra-bold: 800;
    --weight-black: 900;

    --letter-tight: -0.02em;
    --letter-normal: 0;
    --letter-wide: 0.05em;
}


@media (max-width: 768px) {
    :root {
        /* Réduit toutes les tailles de 10-20% */
        --font-size-hero: 2.5rem;
        /* Au lieu de 3.5rem */
        --font-size-title: 1.75rem;
        /* Au lieu de 2rem */
        --font-size-large: 1.25rem;
        /* Au lieu de 1.5rem */
        --font-size-medium: 1rem;
        /* Au lieu de 1.125rem */
        --font-size-normal: 0.9rem;
        /* Au lieu de 1rem */
    }
}

body {
    font-family: var(--font-main);
    font-optical-sizing: auto;
    font-size: var(--font-size-normal);
    font-weight: var(--weight-regular);
    line-height: var(--line-normal);
    color: var(--gray-800);
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    font-weight: var(--weight-bold);
    line-height: var(--line-normal);
}

h1 {
    /* Hero */
    font-size: var(--font-size-hero);
    font-weight: var(--weight-medium);
    letter-spacing: var(--letter-normal);
    line-height: var(--line-tight);


    @media (max-width: 768px) {
        font-size: var(--font-size-title);
        letter-spacing: var(--letter-normal);
        line-height: var(--line-normal);
    }

}

h2 {
/* TAGLINE */
    text-transform: uppercase;
    color: var(--gray-400);
    font-weight: var(--weight-light);
    letter-spacing: var(--letter-wide);
    font-size: var(--font-size-small);

    @media (max-width: 768px) {
        font-size: var(--font-size-normal);
        font-weight: var(--weight-light);
        line-height: var(--line-tight);
        letter-spacing: var(--letter-wide);
    }

    
    
}


h3 {

    font-size: var(--font-size-large);
    color: var(--gray);


    @media (max-width: 768px) {
        font-size: var(--font-size-large);
        
    }

    

}

h4 {
    color: var(--gray);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-medium);
    line-height: var(--line-loose);

    @media (max-width: 768px) {}
}

h5 {
    color: var(--secondary-800);
    font-weight: var(--weight-medium);
    font-size : 1.20rem;
    line-height: var(--line-normal);
    font-family: 'Kalam', cursive;

    @media (max-width: 768px) {}
}

p {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-normal);
    line-height: var(--line-normal);

    @media (max-width: 768px) {
        font-size: var(--font-size-small);
    }

}

.text-small {
    font-size: var(--font-size-small);

}

strong,
b {
    font-weight: var(--weight-bold);
}

/* BLOCKQUOTE */
blockquote {
    font-family: "Merriweather", cursive;
    font-style: italic;
    font-size: var(--font-size-medium);
    letter-spacing: var(--letter-normal);
    line-height: var(--line-loose);
    font-weight: var(--weight-regular);
   
    @media (max-width: 768px) {
        font-size: var(--font-size-small);
    }

}

/* UTILITY CLASSES */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-gray {
    color: var(--gray-300);
}

.text-white {
    color: var(--white);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.section {
    padding-block: var(--space-12);
}


/* test typo curcive */

.kalam {
    font-family: "Kalam", cursive;
    font-style: normal;
}

.kalam-light {
    font-weight: 300;
}

.kalam-regular {
    font-weight: 400;
}

.kalam-bold {
    font-weight: 700;
}

/* exemple utiliation HTML */
/* <p class="kalam kalam-light">Texte light</p>
<p class="kalam kalam-regular">Texte regular</p>
<p class="kalam kalam-bold">Texte bold</p> */
/* 
.solitreo-regular {
  font-family: "Solitreo", cursive;
  font-weight: 500;
  font-style: normal;
} */

/* DECO  */
.sticky-img {
    position: fixed;
    top: 160px;
    right: 50px;
    width: 10%;
    height: auto;
    box-shadow: none;
}



/* BUTTONS */
.btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: var(--font-size-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--letter-normal);
    box-shadow: var(--shadow-sm);
    transition: all .2s ease;
    display: inline-block;
    width: fit-content;
}

.btn i {
    margin-right: var(--space-2);
}

.btn:focus-visible {
    outline: 3px solid var(--primary-600);
    outline-offset: 2px;
}

.option-btn:focus-visible {
    outline: 3px solid var(--secondary-800);
    outline-offset: 2px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-700);
    color: var(--white);
}

.btn-primary:focus-visible {
    background: var(--primary-700);
    color: var(--white);
    outline: 2px solid var(--primary-700);
}



.btn-secondary {
    background: var(--secondary);
    color: var(--gray-800);
}

.btn-secondary:hover {
    background: var(--secondary-700);
    color: var(--white);
}

.btn-secondary:disabled {
    background: var(--gray-200);
}

.btn-secondary:focus-visible {
    background: var(--secondary-700);
    color: var(--white);
    outline: 2px solid var(--secondary-700);
}

.btn-secondary-light {
    background: var(--white);
    color: var(--secondary-800);
    border: 0.5px solid var(--secondary-800);
    padding: 0.3em 0.8em;
    transition: all 0.1s ease;
    font-size: var(--font-size-extra-small);
}

.btn-secondary-light:hover {
    background: var(--secondary);
    color: var(--secondary-800);
}

.btn-secondary-lighty:disabled {
    background: transparent;
    color: var(--gray-300);
    border-color: var(--gray-300);
}

.btn-secondary-light:focus-visible {
    outline: 2px solid var(--secondary-800);
    outline-offset: 2px;
}

.btn-cta {
    background: var(--accent);
    color: var(--gray-800);
}

.btn-cta:hover {
    background: var(--accent-700);
    color: var(--white);
}

.btn-cta:focus-visible {
    background: var(--accent-700);
    color: var(--white);
    outline: 2px solid var(--accent-700);
}

.btn-success {
    background: var(--success);
    color: var(--gray-800);
}

.btn-error {
    background: var(--error);
    color: var(--white);
}

.btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-medium);
}

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-small);
}

/* page scenario */

.btn-nav {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: var(--gray-200) solid 1px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: var(--font-size-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--letter-normal);
    box-shadow: var(--shadow-sm);
    transition: all .2s ease;
}

.btn-nav:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background-color: #B2C9FF;
    color: var(--gray-800)
}

.btn-nav:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background-color: var(--secondary);
    color: var(--gray-800);
    outline: 2px solid var(--secondary);
}

/* page ressource  */

.label-btn {
    border-radius: var(--radius-xs);
    background-color: var(--success-200);
    color: var(--gray-700);
    font-weight: var(--weight-light);
    font-size: var(--font-size-extra-small);

    &:hover {
        background-color: var(--success);
    }

    &active {
        background-color: var(--success);
    }


}




/* -------------------------------------- */
/*                 HEADER NAV             */
/* -------------------------------------- */
header nav {
    /* background-color: var(--gray-800); */
    /* box-shadow: var(--shadow-lg); */
}

header nav .containerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
}

header nav .containerNav .navLeft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}

header nav img {
    max-width: 300px;
    box-shadow: none;
}

header nav ul {
    display: flex;
    gap: var(--space-4);
    list-style: none;
}

header nav ul li a {
    color: var(--gray-800);
    text-decoration: none;
    font-weight: var(--weight-medium);
}

header nav ul li a:hover {
    color: var(--accent);
}

.navMiddle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .logo_mobile {
        max-width: 20%;
    }
}
/* -------------------------------------- */
/*        HERO        */
/* -------------------------------------- */


/* -------------------------------------- */
/*         HAMBURGER MENU MOBILE          */
/* -------------------------------------- */

/* Cache l'icône hamburger par défaut (desktop) */
.topnav .icon {
    display: none;
}


/* Cache le bouton CTA mobile par défaut */
.mobile-cta {
    display: none;
}

/* ====== RESPONSIVE MOBILE ====== */
@media (max-width: 768px) {

    /* Affiche l'icône hamburger */
    .topnav .icon {
        display: block;
        position: absolute;
        right: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--font-size-large);
        color: var(--gray-800);
        padding: var(--space-2);
        z-index: 1001;
    }

    .topnav .icon:hover {
        color: var(--accent);
    }

    /* Cache le menu par défaut sur mobile */
    .topnav #myLinks {
        display: none;
        /* ← Clé : caché par défaut */
        position: fixed;
        left: 0;
        top: 70px;
        /* Ajuste selon la hauteur de ton header */
        width: 100%;
        background-color: var(--white);
        box-shadow: var(--shadow-lg);
        padding: var(--space-4);
        z-index: 1000;
    }

    /* Menu en colonne sur mobile */
    .topnav #myLinks ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .topnav #myLinks ul li {
        width: 100%;
    }

    .topnav #myLinks ul li a {
        display: block;
        width: 100%;
        padding: var(--space-3);
        text-align: left;
    }

    /* Affiche le bouton CTA dans le menu mobile */
    /* .mobile-cta {
        display: block !important;
        width: 100%;
        text-align: center;
        margin-top: var(--space-4);
    } */

    /* Cache le bouton CTA desktop */
    .navRight a:first-of-type {
        display: none !important;
    }


    /* Ajuste le conteneur de nav */
    .containerNav {
        position: relative;
    }

   
}



/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */

/*! vérifier doublon */
/* CARDS */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-md);
}


/* IMG */
img {
    border-radius: var(--radius-md);
   
}


a.btn,
.btn {
    display: inline-block !important;
    /* width: auto !important; */
}



/* -------------------------------------- */
/*                FOOTER                  */
/* -------------------------------------- */

.footerContainer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background-color: var(--gray-700);
    padding: var(--space-4);
    color: var(--white);
    align-items: center;
    width: 100%;

    @media (max-width: 768px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    a {
        color: var(--white);
        text-decoration: none;
        font-weight: var(--weight-light);

        &:hover {
            color: var(--white);
            text-decoration: underline;
        }
    }

    p {
        font-size: var(--font-size-extra-small);
    }

    .container-three-col {
        display: flex;
        justify-content: space-between;
        padding: var(--space-2);
        font-size: var(--font-size-extra-small);
        width: 90%;


        @media (max-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            /* border: #773162 1px solid; */
        }

        .footerContainerLeft,
        .navListFooter_right,
        .navListFooter_middle {

            ul {
                list-style: none;

                li {
                    color: var(--success);
                    font-weight: var(--weight-semi-bold);

                    @media (max-width: 768px) {
                        text-align: center;
                    }
                }
            }

            img {
                max-width: 180px;
                border-radius: 0%;
                box-shadow: none
            }

            @media (max-width: 768px) {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                /* border: burlywood 1px solid; */
                width: 100%;
            }
        }
    }

    .ligne {
        border-top: 1px solid var(--primary-700);
        width: 80%
    }

    .bottomFooterContainer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 90%;
        padding-top: 1%;
        font-size: var(--font-size-extra-small);

        .elemBottomFooter p {
            font-size: var(--font-size-extra-small);
        }

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: center;
        }
    }
}

/* @media (max-width: 768px) {
    .footerContainer .container-three-col {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footerContainer .bottomFooterContainer .footerContainerLeft {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        align-items: center;
        justify-content: center;
    }
} */