:root {

    --neutral-black: #263238;
    --neutral-d-grey: #4D4D4D;
    --neutral-grey: #717171;
    --neutral-l-grey: #89939E;
    --neutral-grey-blue: #ABBED1;
    --neutral-silver: #F5F7FA;
    --neutral-white: #FFFFFF;


  --primary-color: #1976D2; 
  --secondary-color: #0D47A1; 
  --info-color: #2196F3; 

  --color-shade-1: #1565C0; 
  --color-shade-2: #0D47A1;
  --color-shade-3: #0B3C91;
  --color-shade-4: #082D73;
  --color-shade-5: #061F54;

  --color-tint-1: #42A5F5;  
  --color-tint-2: #64B5F6;
  --color-tint-3: #90CAF9;
  --color-tint-4: #BBDEFB;
  --color-tint-5: #E3F2FD;

  --color-action-warning: #FFD700; /* Or profond */
  --color-action-error: #E53935;   /* Rouge de contraste */
  --color-action-success: #4CAF50; /* Vert pour validation */
  
  --highlight-yellow: #FFEB3B; /* Jaune doux */

    /* --primary-color: #28CB8B;
    --secondary-color: #263238;
    --info-color: #2194f3;


    --color-shade-1: #43A046;
    --color-shade-2: #388E3B;
    --color-shade-3: #237D31;
    --color-shade-4: #1B5E1F;
    --color-shade-5: #103E13;

    --color-tint-1: #66BB69;
    --color-tint-2: #81C784;
    --color-tint-3: #A5D6A7;
    --color-tint-4: #C8E6C9;
    --color-tint-5: #E8F5E9;

    --color-action-warning: #FBC02D;
    --color-action-error: #E53835;
    --color-action-success: #2E7D31; */


    /* --link-color: #000;
    --navigation-color: #CFCFCF;
    --navigation-link-color: #000;
    --font-color: #000 */
    
    --card-text: 16px;
    --card-button-subtitle: 15px;
    --card-title: 25px;

    --standard-description-h2: 24px;
    --standard-description-h3: 18px;
    --standard-description-text: 18px;

  }
section{
    padding: 60px;
}
.bg-section{
    display: flex;
    justify-content: center;
    width: 100%;
    background: var(--neutral-silver);
    padding: 60px 60px;
}

h1{
    color: var(--neutral-d-grey);
    font-size: 70px;
    font-weight: 600;
}

h2{
    color: var(--neutral-d-grey);
    font-size: 44px;
    font-weight: 600;
}
h3{
    color: var(--neutral-d-grey);
    font-size: 36px;
    font-weight: 700;
}
h4{
    color: var(--neutral-d-grey);
    font-size: 24px;
    font-weight: 600;
}
.subtitle{
    text-align: center;
    margin-bottom: 10px;
    color: var(--neutral-grey);
    text-align: center;
    font-family: Inter;
    font-size: 18px;
}
p{
    color: #000000;
    font-size: 23px;
    font-weight: 400;
}

a{
    color: var(--primary-color)
}
a:hover{
    stroke: var(--color-shade-1);
}
@media (max-width: 768px) {
    h1{
        font-size: 64px;
        font-weight:bold;
    }
    h2{
        font-size: 36px;
        font-weight:bold;
    }
    h3{
        font-size: 28px;
        font-weight:bold;
    }
    h4{
        font-size: 20px;
        font-weight:bold;
    }
    .subtitle{

    }
    p{
        font-weight:bold;
        font-size: 15px;
    
    }
    section{
        padding: 20px;
    }
}


/* Component */

.standard-btn{
    background-color: var(--primary-color);
    padding: 16px 32px 16px 32px;
    color: var(--neutral-white);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 3px;
}
.standard-btn svg {
    margin-left: 10px;
}
.standard-btn:hover{
    color: var(--neutral-grey)
}

.standard-btn:hover svg path{
    stroke: var(--neutral-grey)
}
.standard-btn{
    padding: 10px 22px 10px 22px;
}

.standard-btn--disabled{
    
}


/*********************/
/***TITLE SECTION*****/
/*********************/


.title-section{
    padding-top: 60px;
    padding-bottom: 60px;
}
.title-section__text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.title-section__subtitle{
    text-align: start;
}
.title-section__btn{
    display: flex;
    margin-top: 20px;
}   

.title-section__img{
    display: flex;
    justify-content: center;
}

.title-section__text h1 span{
 color: var(--primary-color);
}
.title-section__text h1 {
    line-height: 73px;
    margin-bottom: 20px;
}
.title-section__text p{
    font-size: 25px;
}

@media screen and (max-width: 1024px){

}

@media screen and (max-width: 768px){
    .title-section{
        padding: 50px 20px 50px 20px;

    }
}