@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');

/* VARIABLES */
:root{
    /* COLORS */
    --body-bg : var(--col-pink);
    --articles-bg : rgb(255, 239, 242);

    /*--font-color : #4b4b4b;*/
    --font-color : white;
    --font-blue : #4274b4;
    --font-pink : #FA285B;
    --font-red : #ff1414;
    --font-a : white;
    --font-a-hover : hsl(337, 68%, 20%);    
    --font-grey-title : #595959;

    --font-line-height : 1.6;

    --col-pink : hsl(347, 57%, 54%);
    --col-pink-c : hsl(347, 57%, 74%);
    --col-pink-f : hsl(337, 68%, 27%);
    --col-pink-ff : hsl(337, 68%, 15%);
    --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 : 'Lato', sans-serif;
    --font-awesome : "Font Awesome 6 Pro";
    --font-awesome-sharp : "Font Awesome 6 Sharp";
    --font-awesome-brands : "Font Awesome 6 Brands";
    --font-title : 'Lato', sans-serif;
    --font-special : 'Rajdhani', sans-serif;
    --font-condensed: 'Ubuntu Condensed', 'Ubuntu', sans-serif !important;

    /* SECTIONS */
    --main-padding : 48px;
    --section-max-width : 1300px;
    --section-medium-width : 1000px;
    
    --adm-width : 1200px;

    --page-titre-height : 400px;
    --page-titre-actu-height : 76px;
    
    --header-max-width : 1300px;
    --header-height : 80px;
    --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;
}


@media screen and (max-width: 1079px) {
    :root {
        --main-padding : 1em;
    }
}