/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Colors
- Fonts
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Lists
- Images and videos
- Tables
- Spacing
- Clearing
- Media Queries
-----------------------------------------------------*/


/*Colors
----------------------------------------------------*/

:root 
{
  --bgColor: rgb(249,249,253);
  --buttonBgColor:rgb(249,249,253);
  --cardBgColor: rgb(236, 236, 240);
  /* rgb(243, 240, 240); */
    --textColor:rgb(40,40,40);
    --buttonTextColor: rgb(40,40,40);
    --firstTextColor:rgb(40,40,40);
    --secondTextColor:rgb(40,40,40);
    --thirdTextColor:rgb(40,40,40);
    --fourthTextColor:rgb(40,40,40);
    --invertedGradient:linear-gradient(45deg, rgb(255, 174, 61) 18%,  rgb(253, 76, 76) 35%,rgb(187, 84, 255) 50%, rgb(105, 82, 255) 85%);
    --gradient:linear-gradient(45deg, rgba(43,23,179,1) 15%, rgba(131,58,180,1) 26%, rgba(253,29,29,1) 55%, rgba(238,163,56,1) 90%);
    /* rgb(161,109,203)   rgb(225,0,0)*/
}
/* .cardBgColor{
  background-color: var(--cardBgColor);
} */
.firstTitleColor{
  color:var(--firstTextColor);
  
}

.secondTitleColor{
  color:var(--secondTextColor);
  
}

.thirdTitleColor{
  color:var(--thirdTextColor);
  
}

.fourthTitleColor{
  color:var(--fourthTextColor);
  
}





/* color: var(--bgColor); */






/*Fonts
----------------------------------------------------*/
/* Variables Fonts*/

/*#######################################################################
 ###########  nunito   ####################################################### */

/* nunito-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/nunito-v26-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/nunito-v26-latin/nunito-v26-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/nunito-v26-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* nunito-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/nunito-v26-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/*#######################################################################
 ###########  Roboto   ####################################################### */

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin/roboto-v30-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin/roboto-v30-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0px auto;
  padding: 0 0px;
  box-sizing: border-box; }



/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Roboto","HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--bgColor);
  color: var(--textColor); 
}




/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }



p {
  margin-top: 0;
  line-height: 2rem;
  color:var(--textColor);
}

h1{
  font-family: 'Nunito';
  font-weight:900;
}

.biggradient{
  font-size: calc(24px + 3vw);
  text-align: center; 
  background: linear-gradient(45deg, rgba(43,23,179,1) 15%, rgba(131,58,180,1) 26%, rgba(253,29,29,1) 55%, rgba(238,163,56,1) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

     /* No px */
     --font-size-min: 42; 
     --font-size-max: 128;
     --font-view-min: 350;
     --font-view-max: 960;
   
     /* Responsive Font clamp (not working with IE9) */
     font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) ); 
     line-height: 1.6em;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  /* vertical-align: middle; */
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }



/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.card
{
 margin: 4px 16px;
 padding: 4rem 2rem;
 border-radius: 24px;
 background-color: var(--cardBgColor);
}

.nowrap
{
  flex-wrap: nowrap;
}

.button,
button { 
  display: inline-block;
  height: 3rem; /* 30px*/
  padding:0px 12px;
  color: var(--buttonTextColor);
  font-size: 1.2rem; /*12px*/
  font-weight: 600;
  /*line height +2 X border = height */
  line-height: 3rem;
  letter-spacing: .1rem;
  /* text-transform: uppercase; */
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--buttonBgColor);  /*transparent*/
  border-radius: 100px;
  /* border: 1.5px solid var(--textColor) ;    */
  border: 1px solid rgb(255,255,255,0);
  box-shadow: 0 1px 2px rgba(60,64,67,0.3),0 2px 6px 2px rgba(60,64,67,0.15);
  cursor: pointer;
  box-sizing: border-box; 
  margin:18px 8px 4px 8px;
  position: relative;   /*importanrt position relative ajoutée pour que la notification se mettent sur le bouton et par sur le div parent */

}



.displayNone {
  display: none;
}


.buttonBorder{
  box-shadow: none;
  border: 1px solid black;

}

.buttonGradient{
  background: linear-gradient(45deg, rgb(105, 82, 255) 15%, rgb(187, 84, 255) 26%, rgb(253, 76, 76) 55%, rgb(255, 174, 61) 90%);
  color: var(--bgColor);
  border:violet;
}

.buttonGradient:hover{
  background: linear-gradient(45deg, rgb(255, 174, 61) 15%,  rgb(253, 76, 76) 26%,rgb(187, 84, 255) 55%, rgb(105, 82, 255) 90%);
  color:#FFF;
}


a span{
  position:absolute;
    top: -18px;
    right: -1.2rem;
    background:linear-gradient(45deg, rgb(255, 174, 61) 18%,  rgb(253, 76, 76) 35%,rgb(187, 84, 255) 50%, rgb(105, 82, 255) 85%);
    color: rgb(255, 225, 255);
    width: 30px;
    height: 30px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;

}
.bigButton{
  height:100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}

.bigButton a{
  font-family: 'Nunito';
  font-size: 4rem;
  font-weight: 700;
  background-color: var(--buttonBgColor);
  color: var(--buttonTextColor);
  border: 1px solid var(--buttonTextColor);
  border-radius: 50px;
  text-decoration: none;
  padding:16px 64px;
  margin: 16px auto;
  width:60vw;
  /* max-width: 90vw; */
  text-align: center;
}


.button:hover,
button:hover,
.button:focus,
button:focus{ 
  color: var(--textColor);
  border-color: var(--textColor);
  background-color: transparent;
  outline: 0; 
}
.bigButton a:hover{
  background-color: var(--cardBgColor);
}


.arrowBack{
  position:absolute;  
  left :5%; 
  top: 5%;

}

/* .arrowBackDarkMode{
  background-image: url("../img/arrow_back.svg") ;
  background-size: contain;
  background-repeat: no-repeat;
  height:32px;
  Background-position: center;
  position:absolute;  
  left :5%; 
  top: 5%;
  
} */



/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }

/* Images and videos
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.videoContainer {
  background: rgb(40,40,40);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

video {
  width: auto !important;
  max-width: 95% !important;
  max-height:90% !important;
  border-radius: 10px;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  
  position: relative;   /*importanrt position relative ajoutée pour que la notification se mettent sur le bouton et par sur le div parent */

}
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  /* Typography */
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }

  /* button */
  .card{
    margin: 8px 32px;
  }

}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}




@media (max-width: 750px) {

  .scroll{
   
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y:hidden;
    scrollbar-width: none;
    
  }
  .scroll::-webkit-scrollbar {
    display: none;
  }
   
  .bigButton a {
    width:40vw;
  }
  
}

@media (prefers-color-scheme:dark){
  :root{
    --bgColor: rgb(40,40,40);
    --buttonBgColor: rgb(150,150,150);
    --cardBgColor: rgb(63, 63, 68);
    --textColor:rgb(183, 183, 186);
    --buttonTextColor:#1a2434;
    --firstTextColor:#1a2434;
    --secondTextColor:#1a2434;
    --thirdTextColor:#1a2434;
    --fourthTextColor:rgb(209,209,213); 
  } 
  .button:hover{
    border: 1px solid var(--textColor);
  }

  .arrowBackDarkMode{
    background-image: url("../img/arrow_back_white.svg") ;
  
  }

}