/* 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/nunito-v26-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/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/nunito-v26-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/nunito-v26-latin/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
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.containerGrid {
  /* position: relative; */
 
  max-width: 960px;
  margin: 0px auto;
  padding: 0 0px;
  box-sizing: border-box; 
  display: grid;
  width:100vw;
  grid-template-columns: repeat(4,1fr);
  gap:16px;
  

}




.card
{
  
 margin: 4px 16px;
 padding: 4rem 2rem;
 border-radius: 24px;
 background-color: var(--cardBgColor);
 grid-column: 1/5;
 place-self: stretch;
 display: grid;
 grid-template-columns:3.5rem repeat(2,1fr) 3.5rem;
 gap: 16px;
}




.alignTitle{
    grid-column: 2/5;
    place-self: start;
}

.roundNumber{
  grid-column: 1/2;
  place-self: start center;  
  border:1px solid var(--firstTextColor);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.paragraphGrid{
  grid-column: 1/5;
  place-self: stretch;
}

.paragraphFull{
  grid-column: 1/5;
  place-self: stretch;
}

.appleStoreLink {
  grid-column: 2/4;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.appleStoreLink img{
  max-width:60%;
  height:15vh;

}



#logoSomelog{
  grid-column: 2/4;
  place-self: stretch center;
  width:80%;
  
}

.logoSomelog{
  background-image: url('../img/somelog.svg');
  background-size: contain;
  background-repeat: no-repeat;
  height:20vh;
  Background-position: center;
  grid-column: 2/4;
 
}


.imgGrid{
  width:100%;
grid-column: 2/4;
place-self: auto center ;
max-width: 320px;

}

.imgGrid2{
  width:100%;
grid-column: 1/5;
place-self: auto center ;
max-width: 100%;

}


.imgFull{
  grid-column: 1/5;
place-self: stretch stretch ;
}

.gif{
  grid-column: 1/5;
  place-self: stretch ;
}
.gif img{
  max-width:100%;
  margin: auto;
}

.nowrap
{
  flex-wrap: nowrap;
}




/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html est paramétré sur 62,5% donc tous les REM sont basé sur 10px.
ex 1.5rem=15px*/

html {
  font-size: 62.5%; }
body {
  font-size: 1.5rem; 
  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;
    font-family: 'Nunito';font-weight:900;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; 
    font-family: 'Nunito';font-weight:900;}
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem;
    font-family: 'Nunito';font-weight:900;}
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; 
    font-family: 'Nunito';font-weight:900;}
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem;
    font-family: 'Nunito';font-weight:700;}
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; 
    font-family: 'Nunito';font-weight:700;}

.marginTop{
  margin-top: 2rem;
}
.noMarginBottom{
  margin-bottom: 0px;
}    





/* plus grand qu'un smartphone */
@media (min-width: 550px) {
  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; }
}

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


.responsiveTitle{
  grid-column: 1/5;
  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
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.button,
button,
input[type="submit"],
input[type="reset"],
input[type="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: none;
  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;
  grid-column: 2/4;
  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;
}

.bigButton a:hover{
  background-color: var(--cardBgColor);
}


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

}



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


/* 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;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  overflow-x: hidden;
}

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


/* 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 {
  /* margin-bottom: 1rem; */
  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
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {
  /* .biggradient{
    font-size: calc(26px + 4vw);
  } */


}


/* phablet  */
@media (min-width: 576px) {
   

}

/* tablet and PC */
@media (min-width: 768px) {
    
  .containerGrid{
    grid-template-columns: repeat(12,1fr);
    gap:32px;
  }

  .biggradient{
    grid-column: 1/13;
  }
  .card{
        margin: 8px 32px;   
        grid-column: 1/13;
        grid-template-columns:repeat(12,1fr);
        gap: 16px;
    }
    
   .responsiveTitle{
    grid-column: 1/13;
   }
    
    .title{
        grid-column: 1/9;
    }
    .alignTitle{
      grid-column: 2/13;
    }
    .roundNumber{
      grid-column: 1/2;

    }
    .paragraphGrid{
        grid-column: 2/7;
        
    }
    .paragraphFull{
      grid-column: 2/13;
      place-self: stretch;
    }

    #logoSomelog{
      grid-column: 4/10;

    }
    .logoSomelog{
      grid-column: 4/10;
    }
    .appleStoreLink{
      grid-column: 4/10;
    }
    
    .imgGrid{
      grid-column: 8/12;
      place-self: stretch;
      /* display: flex;
      align-items: center; */
     max-width: 100%;

    }
    .imgGrid2{
      grid-column: 7/13;
      place-self: stretch;
      /* display: flex;
      align-items: center; */
     /* max-width: 100%; */

    }

   

    .gif{
      grid-column: 8/12;
      place-self: stretch;
    
    }
    .imgFull{
      grid-column: 2/12;
    }

    .startStretch{
      place-self: start stretch;
    }
    .centerStretch{
      place-self: start stretch;
    }
 
    .tenColumns{
      grid-column: 1/11;
        place-self: start start;

    }
    .item38{
      grid-column: 3/11;
        place-self: stretch;
    }
    .left{
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width:100%;
        /* height:auto; */
        /* grid-column: 1/7;
        grid-row: 2/3;
        width:90%;
        align-self: stretch; */
    }
    
    .item1{
        background-color: yellow;
        flex-shrink: 1;
        flex-grow: 1;
       flex-basis:48%;
        /* width:48%; */
    }
    .item2{
        background-color: green;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis:25%;
    
        /* width:30%; */
    }


}

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

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



@media (prefers-color-scheme:dark){
 :root{
  --bgColor: rgb(40,40,40);
  --buttonBgColor: rgb(150,150,150);
  --cardBgColor: rgb(63, 63, 68);
  /* rgb(243, 240, 240); */
    --textColor:rgb(183, 183, 186);
    --buttonTextColor:#1a2434;
    --firstTextColor:#1a2434;
    --secondTextColor:#1a2434;
    --thirdTextColor:#1a2434;
    --fourthTextColor:rgb(209,209,213);  
 } 
 .logoSomelog{
  background-image: url('../img/somelog_dark.svg');

 }
 


}