/* ==========================================================================
   ==========================================================================

    * Config *
    Configuration du reset css, des fonts, des déclarations de variables css (fonts, couleurs, dimensions)

    Sommaire :
    - Reset
    - Fonts
    - Colors Theme
    - Style Variables
    - Global Images Links

============================================================================= */

/* ========================================================================== */
/* # Reset   */
/* ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  text-wrap: balance;
}

ul, ol, dl, dt, dd{
    list-style: none; 
    padding: 0; 
    list-style-position: outside; 
}

a {
  color: inherit;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

.sr_only,
.ei_sronly {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

table,
table tr,
tr td,
table tbody,
table thead,
table tfoot,
table tr th,
table tfoot tr tf {
    margin:0;
    padding:0;
    background:none;
    border:none;
    border-collapse:collapse;
    border-spacing:0;
    background-image:none;
}


/* ========================================================================== */
/* # Fonts   */
/* ========================================================================== */

@font-face {
    font-family: 'OpenSansCondensed';
    src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format("truetype-variations");
    font-weight: 300 800;
    font-stretch: condensed;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format("truetype-variations");
    font-weight: 300 800;
}

@font-face {
    font-family: 'Kalam';
    src: url('fonts/Kalam-Bold.ttf') format("truetype-variations");
    font-weight: 700;
}
@font-face {
    font-family: 'Icon';
    src: url('fonts/icoSKP.woff') format("woff");
    src: url('fonts/icoSKP.woff2') format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-main: 'OpenSans', 'Merriweather Sans', 'Lucida Grande', 'Century Gothic', Arial, sans-serif;
    --font-secondary: 'OpenSansCondensed', 'Merriweather Sans', Arial, serif;
    --font-tertiary: 'Kalam', 'Merriweather Sans', Arial, serif;
    --font-icon: 'Icon';
}

/* ========================================================================== */
/* # Colors Theme   */
/* ========================================================================== */

:root {
    --color-main: #164194;
    --color-secondary: #E10714;
    --color-tertiary: #00A0E6;

    --color-clear: rgba(22, 64, 148, 0.3);

    --color-background: #FFFFFF;
    --color-background_alt: #182A7F;
    --color-background_light: #f1f5f8;

    --color-text: #414141;
    --color-text_alt: #231080;
    --color-text_contrast: rgba(25,16,16,0.32);

    --color-invariant_white: #FFFFFF;
    --color-invariant_black: #212121;
    --color-invariant_overlay: rgba(0,0,0,0.54);
    --color-accessibility-focus: #0bf;
  }


/* ========================================================================== */
/* # Style Variables   */
/* ========================================================================== */

:root {
    --f-6XL : 13rem;
    --f-4XL : 6rem;
    --f-3XL : 4.8rem;
    --f-2XL : 3.2rem;
    --f-XL : 2.2rem;
    --f-M : 1.7rem;
    --f-M-Strong : 1.8rem;
    --f-S : 1.2rem;
    --f-XS : 1rem;
    
    @media screen and (max-width: 700px) {
        --f-6XL : 6rem;
        --f-4XL : 5rem;
        --f-3XL : 2.4rem;
        --f-2XL : 2rem;
        --f-XL : 2.4rem;
        --f-M : 1.7rem;
        --f-S : 1.2rem;
        --f-XS : 1rem;
    }

  --size-wrapper: 1140px;

  --shadow-div: 0 3px 6px rgba(0,0,0,0),0 3px 6px rgba(0,0,0,0.11);
  --shadow-img: 0 4px 24px rgba(0,0,0,0.12)
}

@keyframes closeMenuTop {
  0% {
        transform: rotate(0deg);
    }
    10%{
      transform: rotate(10deg);
    }
    90%{
      transform: rotate(-55deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}

@keyframes closeMenuBottom {
    0% {
        transform: rotate(0deg);
    }
    10%{
      transform: rotate(-10deg);
    }
    90%{
      transform: rotate(55deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

/* ========================================================================== */
/* # Global Icones   */
/* ========================================================================== */
[class^="icoSKP"],
[class*=" icoSKP"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: var(--font-icon) !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.8rem;
    vertical-align: middle;
    display: inline-block;
}

.icoSKP[data-icon]::before {
    content: attr(data-icon);
}
/* ========================================================================== */
/* # Global Images Links   */
/* ========================================================================== */