@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');

@font-face {
    font-family: 'ClashDisplay';
    src: url('../fonts/ClashDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
/*@font-face {
    font-family: 'Ethnocentric';
    src: url('../fonts/EthnocentricRgIt.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}*/

@font-face {
    font-family: 'Mundial';
    src: url('../fonts/MundialLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Mundial';
    src: url('../fonts/MundialLightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Mundial';
    src: url('../fonts/MundialRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Mundial';
    src: url('../fonts/MundialItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Mundial';
    src: url('../fonts/MundialBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Mundial';
    src: url('../fonts/MundialBoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* VARIABLES */
:root{
    /* COLORS */
    --body-bg : white;

    --font-color : #4b4b4b;
    --font-blue : #4274b4;
    --font-pink : #FA285B;
    --font-red : #ff1414;
    --font-active : hsl(19, 95%, 57%);
    --font-active-f : hsl(19, 95%, 37%);    
    --font-grey-title : #595959;

    --font-line-height : 1.6;

    --col-red : hsl(355, 80%, 41%);
    --col-red-rgb : 188, 21, 35;
    --col-red-f : hsl(355, 80%, 30%);
    --col-grey : hsl(0, 0%, 16%);
    --col-grey-m : hsl(0, 0%, 29%);
    --col-grey-c : hsl(0, 0%, 69%);
    --col-grey-cc : hsl(0, 0%, 75%);
    --col-grey-ccc : hsl(0, 0%, 85%);
    --hover-grey : hsl(0, 0%, 23%);
    --hover-grey-c : hsl(0, 0%, 31%);
    --col-green : hsl(119, 80%, 41%);
    --col-blue : hsl(209, 80%, 41%);

    /* BUTTONS */    
    --button-bg : hsl(355, 80%, 41%);
    --button-bg-grey : hsl(0, 0%, 29%);
    --button-bg-yellow : hsl(44, 97%, 37%);
    --button-font : white;
    --button-clair-font : hsl(0, 0%, 29%);

    --section-bg : #e6e6e6;

    /* FONTS */
    --font-size : 16px;
    --menu-font-size : 16px;
    --font-main : 'Mundial', sans-serif;
    --font-awesome : "Font Awesome 6 Pro";
    --font-awesome-sharp : "Font Awesome 6 Sharp";
    --font-awesome-brands : "Font Awesome 6 Brands";
    --font-title : 'ClashDisplay', sans-serif;
    --font-special : 'Rajdhani', sans-serif;
    --font-condensed: 'Ubuntu Condensed', 'Ubuntu', sans-serif !important;

    /* SECTIONS */
    --section-padding : 4em;
    --section-max-width : 1700px;
    --section-medium-width : 1200px;
    
    --adm-width : 1200px;

    --page-titre-height : 400px;
    --page-titre-actu-height : 76px;
    
    --header-max-width : 1800px;
    --header-height : 150px;
    --header-small-height : 50px;
    --header-mobile-height : 65px;
    --logo-size : 150px;
    --header-padding-side : 24px;

    --boutons-margin : 1.8%;
	--boutons-radius : .6em;
	--couleur-reseaux : #4c4c4c;

	--box-shadow : 0 0 16px 0px rgba(50, 50, 50, .2);
	--box-shadow-hover : 0 0 16px 0px rgba(50, 50, 50, .6);

	--box-shadow-sm : 0 0 8px 0px rgba(50, 50, 50, .4);
	--box-shadow-sm-hover : 0 0 8px 0px rgba(50, 50, 50, .8);

    --transition-all : all .3s ease-in-out;
}