:root {
	
	--gutter-security: 20px;

    --max-width: 1250px;
    --max-width-admin: 1140px;

    --primary: #1D2696;
    --primary-dark: #0C156B;
    --secondary: #ECEDFA;
    --secondary-dark: #DBDDF2;
	--highlight: #F23900;
	--highlight-dark: #DC3400;
	--dark: #323232;
    --white : #FDFDF8;
	--black : #121212;

	--tonic: var(--highlight);
	--tonic-darker: var(--highlight-dark);
	--neutral: var(--secondary);
	--darker-gray: #626262;
	--dark-gray: #C2C2C2;
	--light-gray: #F8F8F8;
	--light: var(--white);

    --primary-hover: var(--primary-dark);
    --secondary-hover: var(--secondary-dark);
	--highlight-hover: var(--highlight-dark);

    --body-bg: var(--white);
    --text-color: var(--dark);
    --texte-strong: 800;

    --link-color: var(--primary);
    --link-color-hover: var(--primary-hover);

    --logo-height-mobile: 30px;
    --logo-height-tablet: 45px;
    --logo-height-desktop: 50px;
    
    --header-mobile-height: 62px;
    --header-tablet-height: 93px;
    --header-desktop-height: 114px;

    --header-bg-color: var(--primary);
    --topbar-bg-color: var(--highlight);
    --burger-bg-color: var(--white);
    --menu-mobile-bg-color: var(--primary);

    /* Boutons */
    --button-01-bg-color: var(--highlight);
    --button-01-bg-color-hover: var(--highlight-hover);
    --button-01-text-color: var(--white);

    --button-02-bg-color: var(--primary);
    --button-02-bg-color-hover: var(--primary-hover);
    --button-02-text-color: var(--white);

    --button-03-bg-color: var(--white);
    --button-03-bg-color-hover: var(--secondary);
    --button-03-text-color: var(--primary);

    --button-default-padding-x: 1.5rem;
    --button-default-padding-y: .625rem;
    --button-default-radius: 6px;

    
    --icon-social-radius: 100%;
    --icon-social-bg-color: var(--white);
    --icon-social-color: var(--primary);

    --fontfamily: 'Roboto', sans-serif;

	--heading-fontfamily: 'Saira', sans-serif;
    --heading-fontcolor: var(--primary);
    --heading-fontweight: 700;
    --heading-fontweight-strong: 700;

    --fontsize-base: 1rem;
    --fontsize-base-mobile : .8rem; /* taille redéfini pour h1, h2, h3, h4 */

    --fontsize-scale: 1.3;
    --fontsize-scale-mobile: 1.2; /* ratio redéfini pour h1, h2, h3, h4 */


    --text-lineheight: calc( var(--fontsize-base) * 1.6 );
    --heading-lineheight-ratio: 1.3;

    --marge-between-default: 2rem;
    --marge-between-default-desktop: 4rem;

    --marge-between-p-p: 1rem;
    --marge-between-p-h: 1.5rem;
    --marge-between-p-h-desktop: 2rem;
    --marge-y-block: 2rem;

    --column-gap: 2rem;

    /* Largeur des colonnes pour style personnalisé is-style-one-two */
    --size-column-one: calc( 40% - ( var(--column-gap) / 2 ) );
    --size-column-two: calc( 100% - var(--size-column-one) - ( var(--column-gap) / 2 ) );

    /* Largeur de la plus petite colonne media pour le style personnalisé */
    --size-media-text-one: var(--size-column-one);

    /* Couleur pour mettre en evidence les input des formulaire lorsqu'ils ont le focus */
    --color-focus-input: var(--primary);

    --adminbar-height: 46px;

    --spacer-xs: 1rem;
    --spacer-s: 2rem;
    --spacer-m: 3rem;
    --spacer-l: 4rem;
    --spacer-xl: 5rem;

    --card-border-radius: 6px;
    --card-padding: 0px;

    --header-height: var(--header-mobile-height);
	
}

@media screen and (min-width:782px){
    :root {
        --spacer-xs: 1.5rem;
        --spacer-s: 3rem;
        --spacer-m: 4.5rem;
        --spacer-l: 6rem;
        --spacer-xl: 7.5rem;

        --header-height: var(--header-tablet-height);

        --marge-y-block: 4rem;
    }
}

@media screen and (min-width:783px){
    :root {
        --adminbar-height: 32px;
    }
}

@media screen and (min-width:1200px){
    :root {
        --text-lineheight: calc( var(--fontsize-base) * 1.6 );
        --heading-lineheight-ratio: 1.2;

        --spacer-xs: 2rem;
        --spacer-s: 4rem;
        --spacer-m: 6rem;
        --spacer-l: 8rem;
        --spacer-xl: 10rem;

        --marge-y-block: 5rem;
    }
}

@media screen and (min-width:1250px){
    :root {
        --header-height: var(--header-desktop-height);
    }
}