/* Settings-v1.0.0.css 
  VNFacade.com =>  v.1.0 */

/* ================================
   FICHIER CSS INDISPENSABLE 
    - LibFusion - v1.0.0
================================= */

/* ================================
   PALETTE GENERIQUE & TYPOGRAPHIE
================================= */
:root {
    /* Couleurs Charte graphique client */
    /* Couleur principale bleu ( deux nuances utilisées dans le logo) */
    --color-primary: #326a8b; /* Couleur principale bleu claire (utilisée dans le logo) */
    --color-primaryRGB: rgba(50, 106, 139);
    --shadow-primary: 0 5px 15px rgba(50, 106, 139, 0.3);
    /********************/
    --color-primary-hover: #01233f; /* Couleur principale bleu foncé (annexe - utilisée dans le logo) */
    --color-primary-active: #fff;
    --color-border-primary: #77A6F7;
    --color-primary-txt: #fff;
    /********************/
    /********************/
    /* CTA principale JAUNE (utilisée comme CTA action majeur) */
    --color-CTA-primary: #f9c401;
    --color-CTA-primaryRGB: rgb(255, 199, 44);
    --color-CTA-primary-hover: #ffd33d;
    --color-CTA-primary-txt: #01233f;
    /*******************/
    /********************/
    /* CTA secondaire VERT (utilisée comme CTA action de second ordre) */
    --color-CTA-secondary: #7ed957;
    --color-CTA-secondaryRGB: rgb(126, 217, 87);
    --color-CTA-secondary-hover: #68b948;
    --color-CTA-secondary-txt: #01233f;
    /********************/
    /********************/
    /********************/
    --color-blue-vif: #00A8E8;
    --color-border-blue: #2A6F97;
    /********************/
    --color-bg-main: linear-gradient( 60deg, var(--color-primary) 20%, var(--color-CTA-primary) 90% );
    /****************************/
    /* RADIUS */
    --radius-min: 0.3rem;
    --radius-medium: 0.6rem;
    --radius-normal: 1rem;
    --radius: 1.5rem;
    --radius-double: 3rem;
    --radius-xxl: 4rem;
    --radius-circle: 100%;
    /* Couleurs de Texte */
    --color-text-body: var(--color-primary-hover);
    --color-text-dark: #333;
    --color-text-on-light: #3a0648;
    --color-white: #ffffff;
    --color-white-break1: #FCFCFC;
    --color-white-break2: #FFFAFA;
    --color-text-link: var(--color-primary);
    /****************************/
    /* Couleurs Fonctionnelles */
    --color-disabled: #cccccc;
    /* SUCCESS */
    --color-success: #41cd01;
    --color-success-hover: #6ee82f;
    --color-success-shadow: rgba(65, 205, 1, 0.3);
    /* ERROR - WARNING */
    --color-warning: #ffc711;
    --color-warning-light: lightyellow;
    --color-error: #ee2410;
    --color-error-hover: #f5533c;
    /* Couleurs de Fond / Accents */
    --color-background-light: #edf1fa;
    --color-accent-light: #d3e3fd;
    --color-background-grey: #2d2d2d;
    --color-background-panel: #f9faff;
    --shadow-card-light: 0 2px 10px rgb(0 0 0 / 0.05);
    --shadow-card-hover: 0 4px 15px rgb(0 0 0 / 0.12);
    /* MODAL */
    --color-backdrop: rgba(0,0,0,0.4);
    --shadow-modal: 0 4px 12px rgba(0,0,0,0.3);
    --color-grey: #bfbfbf;
    --color-grey-hover: #b1b1b1;
    --color-grey-active: #8f8f8f;
    /* AUTRES */
    --color-black: #000;
    --color-info: #2488f5;
    --color-grey-shadow: #444444;
    --color-anthracite: #303030;
    --color-blue-light: #E7ECF3;
    --color-blue-clear: #2ebaf9;
    --color-violet: #3a0647;
    --color-green: #26b050;
    /****************************/
    /* 1. Définir les variables de police (nom) */
    /* * ⚠️ TYPOGRAPHIE : A MODIFIER PAR PROJET
     * La valeur de cette variable définit la font-family utilisée par toutes les classes.
     * La source (@font-face) doit être définie séparément si besoin.
     */
    --TypoSize-default: 16px;
    /* Familles de Polices (À mettre à jour avec les noms réels des @font-face) */
    /* <- Première police */
    --font-family-base: 'segoe ui','Helvetica Neue', Helvetica, Arial, sans-serif;
    /* <- Deuxième police/famille */
    --font-family-secondary: 'Inter', sans-serif;
    /**************/
    --height-taskbar: 3rem;
    --height-menu-taskbar: 10rem;
    --master-margin-left: 12rem; /* marge gauche cadre du site */
    /**********/
    --clamp-2: clamp(1rem, 6vw, 2rem);
    --clamp-3: clamp(1.5rem, 5vw, 3rem);
    --clamp-4: clamp(2rem, 6vw, 4rem);
    --clamp-6: clamp(2rem, 8vw, 6rem);
    --clamp-8: clamp(3rem, 8vw, 8rem);
    --clamp-10: clamp(4rem, 9vw, 10rem);
    --clamp-11: clamp(4rem, 9vw, 11rem);
    --clamp-12: clamp(5rem, 10vw, 12rem);
    /**************/
    --f-size-title: clamp(1.8rem, 5vw, 2.6rem);
    --f-size-medium: clamp(1.4rem, 4vw, 1.8rem);
    --f-size-small: clamp(1rem, 3vw, 1.4rem);
    /*************/
    --w-min: 300px;
    --w-min-small: 250px;
}



/* Constructions class de Police */
/* POLICE MAJEUR - font-1 */

.font-1-light {
    font-family: var(--font-family-base);
    font-weight: 200;
}

.font-1-regular {
    font-family: var(--font-family-base);
    font-weight: 400;
}

.font-1-SemiBold {
    font-family: var(--font-family-base);
    font-weight: 600;
}

.font-1-bold {
    font-family: var(--font-family-base);
    font-weight: 700;
}



/* POLICE MINEUR - font-2 */

.font-2-light {
    font-family: var(--font-family-secondary);
    font-weight: 200;
}

.font-2-regular {
    font-family: var(--font-family-secondary);
    font-weight: 400;
}

.font-2-SemiBold {
    font-family: var(--font-family-secondary);
    font-weight: 600;
}

.font-2-bold {
    font-family: var(--font-family-secondary);
    font-weight: 700;
}

/*****************************/
/*****************************/
/*****************************/



/* ================================
            POLICES
================================= */

/* 2. Définir les @font-face (source) */


/* POLICE MAJEUR */

/* Biryani ExtraLight (200) */
/*@font-face {
    font-family: 'Biryani';*/ /* Doit correspondre à --font-family-base */
/*src: url('../font/Biryani/Biryani-UltraLight.otf') format('otf');*/
/* , url('../font/Biryani/Biryani-ExtraLight.woff') format('woff'), url('../font/Biryani/Biryani-ExtraLight.ttf') format('truetype'); */
/*font-weight: 200;
    font-style: normal;
    font-display: swap;
}*/

/* Biryani Regular (400) */
/*@font-face {
    font-family: 'Biryani';
    src: url('../font/Biryani/Biryani-Regular.otf') format('otf');*/
/*, url('../font/Biryani/Biryani-Regular.woff') format('woff'), url('../font/Biryani/Biryani-Regular.ttf') format('truetype');*/
/*font-weight: 400;
    font-style: normal;
    font-display: swap;
}*/

/* Biryani Bold (700) */
/*@font-face {
    font-family: 'Biryani';
    src: url('../font/Biryani/Biryani-Bold.otf') format('otf');*/
/*, url('../font/Biryani/Biryani-Bold.woff') format('woff'), url('../font/Biryani/Biryani-Bold.ttf') format('truetype');*/
/*font-weight: 700;
    font-style: normal;
    font-display: swap;
}*/

/* POLICE MINEUR */

/* Poppins SemiBold (600) */
/*@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins/Poppins-SemiBold.woff2') format('woff2'), url('../font/Poppins/Poppins-SemiBold.woff') format('woff'), url('../font/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}*/