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

    --max-width: 1250px;

    --primary: #212121;
    --tonic: #e30613;
    --highlight: #ffcd07;
    --neutral: #edeae4;

    --body-bg: #FFF;
    --text-color: var(--primary);

    --link-color: var(--tonic);
    --link-color-hover: #ff1928;

    --logo-height-mobile: 45px;
    --logo-height-tablet: 55px;
    --logo-height-desktop: 85px;
    
    --header-mobile-height: 69px;
    --header-tablet-height: 87px;
    --header-desktop-height: 153px;

    --header-bg-color: var(--neutral);
    --topbar-bg-color: var(--tonic);
    --burger-bg-color: var(--tonic);
    --menu-mobile-bg-color: var(--highlight);

    /* Boutons */
    --button-01-bg-color: var(--tonic);
    --button-01-bg-color-hover: #ff1928;
    --button-01-text-color: #FFF;

    --button-02-bg-color: var(--highlight);
    --button-02-bg-color-hover: #ffdf5e;
    --button-02-text-color: var(--primary);

    --button-03-bg-color: var(--primary);
    --button-03-bg-color-hover: #373737;
    --button-03-text-color: var(--button-01-text-color);

    --button-default-padding-x: 1.4rem;
    --button-default-padding-y: .7rem;
    --button-default-radius: .375rem;

    
    --icon-social-radius: var(--button-default-radius);
    --icon-social-bg-color: var(--highlight);
    --icon-social-color: var(--primary);

    --fontfamily: 'Raleway', arial, sans-serif;
    
    --heading-fontfamily: 'Kanit',sans-serif;
    --heading-fontcolor: var(--tonic);
    --heading-fontweight: 500;
    --heading-fontweight-strong: 700;

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

    --fontsize-scale: 1.25;
    --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: 40%;
    --size-column-two: calc( 100% - var(--size-column-one) - var(--column-gap) );

    /* 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(--tonic);

    --adminbar-height: 46px;

}
@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;
    }
}