/* @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}
a{
    color: inherit;
    text-decoration: none;
}
body{
    min-height: 100vh;
    max-width: 100%;
}
@font-face {
    font-family: 'Anton';
    src: url('../asset/Anton-Regular.woff2') format('woff2'),
        url('../asset/Anton-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Carlito-Regular';
    src: url('../asset/Carlito-Regular.ttf') format('ttf');
    src: url('../asset/Carlito-Regular.woff2') format('woff2');
    font-weight: normal;
    line-height: 105%;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: 'Carlito-Bold';
    src: url('../font/Carlito-Bold.ttf') format('ttf');
    font-weight: normal;
    line-height: 105%;
    font-style: normal;
    font-display: swap;
  }
  html { font-size: 16px;}

  @media (min-width: 0px) and (max-width: 480) {
     html {font-size: calc(12.52px + 3.48 * ((100vw - 350px) / 129));}
  }
  @media (min-width: 481px) and (max-width: 767px) {
     html {font-size: calc(12.4px + 1.20 * ((100vw - 350px) / 129));}
  }
  @media (min-width: 768px) and (max-width: 991px) {
     html {font-size: calc(12.8px + 3.2 * ((100vw - 768px) / 223));}
  }
  @media (min-width: 992px) and (max-width: 1439px) {
     html {font-size: calc(12.2px + 3.8 * ((100vw - 992px) / 448));}
  }
  @media (min-width: 1440px) {
     html {font-size: 16px;}
  }
.anton-font{
    font-family: var(--anton);
}
:root{
    --anton: "Anton";
    --h1-accueil:8rem;
    --menu-li:3.5rem;
    --menu-legal-li:1.5rem;
    --margin-top-bottom:1.25rem;
    --margin-section:5rem;
    --m-padding: 2.5rem;
    --border-radius:10px;
    --h1:6rem;
    --h2:6rem;
    --h3:3rem;
    --h4:1.5rem;
    --h5:1.25rem;
    --p:1.25rem;

    --blanc :#F1F0ED;
    --noir: #211F21;
    --rouge: #CF2020;
    --bleu: #1A4FD1;
}

h1{
    font-family: 'Anton';
    font-size: var(--h1);
    line-height: 105%;
    font-weight: 400;
    font-display: swap;
}
h2{
    font-family: 'Anton';
    font-size: var(--h2);
    line-height: 105%;
    font-weight: 400;
    font-display: swap;
}
h3{
    font-family: 'Anton';
    font-size: var(--h3);
    line-height: 105%;
    font-weight: 400;
    font-display: swap;
}
h4{
    font-family: 'Anton';
    font-size: var(--h4);
    line-height: 105%;
    font-weight: 400;
    font-display: swap;
}
h5{
    font-family: 'Anton';
    font-size: var(--h5);
    line-height: 105%;
    font-weight: 400;
    font-display: swap;
}
p{
    font-family: 'Carlito-Regular';
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 105%;
    font-display: swap;
}
li{
    font-family: 'Anton';
    font-size: 1.5rem;
    line-height: 105%;
    font-weight: 400;
    font-display: swap;
}
button{
    font-family: 'Anton';
    font-size: 1.25rem;
    padding: 0.75rem 2rem;
    font-weight: 400;
    outline: none;
    border-radius: 3.125rem;
    border: none;
    cursor: pointer;
    font-display: swap;
}

@media (min-width: 769px) and (max-width: 992px) {
    :root{
        --h1-accueil:5.625rem;
        --menu-li:2.5rem;
        --menu-legal-li:1.5rem;
        --h1:4.125rem;
        --h2:4.125rem;
        --h3:2.5rem;
        --h4:1.5rem;
        --h5:1.25rem;
        --p:1.25rem;
    }
    p{
        font-family: 'Carlito-Regular';
        font-size: 1.25rem;
    }
    li{
        font-family: 'Anton';
        font-size: 1.25rem;
    }
    button{
        font-family: 'Anton';
        font-size: 1.125rem;
        padding: 0.5rem 2rem;
        outline: none;
    }
}

@media (min-width: 482px) and (max-width: 768px) {
    :root{
        --h1-accueil:3rem;
        --menu-li:6rem;
        --menu-legal-li: 1.5rem;
        --h1:4.125rem;
        --h2:4.125rem;
        --h3:3rem;
        --h4:1.5rem;
        --h5:1.25rem;
        --p:1.25rem;
    }
    p{
        font-family: 'Carlito-Regular';
        font-size: 1.25rem;
    }
    li{
        font-family: 'Anton';
        font-size: 1.25rem;
    }
    button{
        font-family: 'Anton';
        font-size: 1.125rem;
        padding: 0.5rem 2rem;
        outline: none;
    }
}
@media (min-width: 351px) and (max-width: 481px) {
    :root{
        --h1-accueil:2.875rem;
        --menu-li:4.5rem;
        --menu-legal-li:1.5rem;
        --margin-section:3rem;
        --h1:2.5rem;
        --h2:2.5rem;
        --h3:2rem;
        --h4:1.25rem;
        --h5:1.125rem;
        --p:1.125rem;
    }
    p{
        font-family: 'Carlito-Regular';
        font-size: 1.125rem;
    }
    li{
        font-family: 'Anton';
        font-size: 1.25rem;
    }
    button{
        font-family: 'Anton';
        font-size: 1.125rem;
        padding: 0.5rem 2rem;
        outline: none;
    }
}
@media (min-width: 0px) and (max-width: 350px) {
    :root{
        --h1-accueil:2.25rem;
        --menu-li: 3.5rem;
        --menu-legal-li: 1.5rem;
        --margin-section:2rem;
        --h1:2rem;
        --h2:2rem;
        --h3:1.75rem;
        --h4:1.25rem;
        --h5:1.125rem;
        --p:1rem;
    }
    p{
        font-family: 'Carlito-Regular';
        font-size: 1rem;
    }
    li{
        font-family: 'Anton';
        font-size: 1.25rem;
    }
    button{
        font-family: 'Anton';
        font-size: 1.125rem;
        padding: 0.5rem 2rem;
        outline: none;
    }
}
/* Base styles */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 1.5625rem; /* 25px */
    padding-right: 1.5625rem; /* 25px */
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.625rem; /* 10px */
    margin-right: -0.625rem; /* 10px */
    box-sizing: border-box;
  }
  
  .col {
    padding-left: 0.625rem; /* 10px */
    padding-right: 0.625rem; /* 10px */
    box-sizing: border-box;
  }
  .test{
    padding: 20px;
    background-color: var(--bleu);
  }

  /* 1440px: 12 columns, gutter 20px, margin 25px */
  @media (min-width: 992px) {
    .container {
      padding-left: 1.5625rem; /* 25px */
      padding-right: 1.5625rem; /* 25px */
    }
    .row {
      margin-left: -0.625rem; /* 10px */
      margin-right: -0.625rem; /* 10px */
    }
    .col-1440-1 { width: calc(8.33%); } 
    .col-1440-2 { width: calc(16.66%); } 
    .col-1440-3 { width: calc(25%); }    
    .col-1440-4 { width: calc(33.33%); } 
    .col-1440-5 { width: calc(41.66%); } 
    .col-1440-6 { width: calc(50% ); }    
    .col-1440-7 { width: calc(58.33%); } 
    .col-1440-8 { width: calc(66.66% ); } 
    .col-1440-9 { width: calc(75% ); }    
    .col-1440-10 { width: calc(83.33% ); }
    .col-1440-11 { width: calc(91.66%); }
    .col-1440-12 { width: calc(100%); }  
  }

  @media (min-width: 768px) and (max-width: 991px) {

    .col-992-1 { width: calc(8.33%); } 
    .col-992-2 { width: calc(16.66%); } 
    .col-992-3 { width: calc(25%); }    
    .col-992-4 { width: calc(33.33%); } 
    .col-992-5 { width: calc(41.66%); } 
    .col-992-6 { width: calc(50% ); }    
    .col-992-7 { width: calc(58.33%); } 
    .col-992-8 { width: calc(66.66% ); } 
    .col-992-9 { width: calc(75% ); }    
    .col-992-10 { width: calc(83.33% ); }
    .col-992-11 { width: calc(91.66%); }
    .col-992-12 { width: calc(100%); }  
  }
  
  /* 768px: 6 columns, gutter 20px, margin 25px */
  @media (min-width: 481px) and (max-width: 767px) {
    .container {
      padding-left: 1.5625rem; /* 25px */
      padding-right: 1.5625rem; /* 25px */
    }
    .row {
      margin-left: -0.625rem; /* 10px */
      margin-right: -0.625rem; /* 10px */
    }

    .col-768-1 { width: calc(16.66%); }
    .col-768-2 { width: calc(33.33%); }
    .col-768-3 { width: calc(50%); }   
    .col-768-4 { width: calc(66.66%); }
    .col-768-5 { width: calc(83.33%); }
    .col-768-6 { width: calc(100%); }  
  }
  
  /* 481px: 6 columns, gutter 10px, margin 10px */
  @media (min-width: 350px) and (max-width: 480px){
    .container {
      padding-left: 0.625rem; /* 10px */
      padding-right: 0.625rem; /* 10px */
    }
    .row {
      margin-left: -0.3125rem; /* 5px */
      margin-right: -0.3125rem; /* 5px */
    }
    .col {
        padding-left: 0.3125rem; /* 5px */
        padding-right: 0.3125rem; /* 5px */
      }
    .col-481-1 { width: calc(16.66%); }
    .col-481-2 { width: calc(33.33%); } 
    .col-481-3 { width: calc(50%); }   
    .col-481-4 { width: calc(66.66%); } 
    .col-481-5 { width: calc(83.33%); } 
    .col-481-6 { width: calc(100%); }
  }
  
  /* 350px: 4 columns, gutter 5px, margin 5px */
  @media (min-width: 0px) and (max-width: 350px) {
    .container {
      padding-left: 0.3125rem; /* 5px */
      padding-right: 0.3125rem; /* 5px */
    }
    .row {
      margin-left: -0.15625rem; /* 2.5px */
      margin-right: -0.15625rem; /* 2.5px */
    }
    .col {
        padding-left: 0.15625rem; /* 2.5px */
        padding-right: 0.15625rem; /* 2.5px */
      }
    .col-350-1 { width: calc(25%); } 
    .col-350-2 { width: calc(50%); } 
    .col-350-3 { width: calc(75%); } 
    .col-350-4 { width: calc(100%); } 
  }