/**
 * valeurs.css — Section Valeurs
 */

/* -------------------------
   Section
------------------------- */
.section-valeurs {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
}

/* -------------------------
   Inner layout — mobile : colonne
------------------------- */
.section-valeurs__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-inline: var(--section-padding-x);
    max-width: var(--container-max-width-xl);
    margin:auto;
}

.section-valeurs__step-header{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap:var(--space-sm)
}

.section-valeurs ul,
.section-valeurs ol {
    padding: 0;
    list-style-position: inside;
    margin: auto;
}

/* -------------------------
   Titre
------------------------- */
.section-valeurs__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

.section-valeurs__highlight {
    background-color: var(--color-lime);
    color: var(--color-black);
    padding-inline: 4px;
    font-style: normal;
}

/* -------------------------
   Étapes — mobile : colonne
------------------------- */
.section-valeurs__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: 0;
    margin: 0; 
}

.section-valeurs__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
}

.section-valeurs__step-number {
    font-family: var(--font-primary);
    font-size: var(--font-size-8xl);
    font-weight: var(--font-weight-black);
    color: var(--color-blue);
    line-height: 1;
}

.section-valeurs__step-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    color: var(--color-black);
    text-transform: uppercase;
    margin-bottom: 0;
}

/* -------------------------
   Points clés
------------------------- */
.section-valeurs__step-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin:0;
}

.section-valeurs__step-point {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    color: var(--color-gray-dark);
    padding-left: var(--space-md);
    position: relative;
    line-height: var(--line-height-normal);
}


.section-valeurs__step-point::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background-color: var(--color-blue);
    border-radius: var(--radius-full);
}

/* -------------------------
   Image
------------------------- */
.section-valeurs__step-image {
    overflow: hidden;
}

.section-valeurs__step-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* -------------------------
   Tablette 768px
------------------------- */
@media (min-width: 768px) {
    
    .section-valeurs__inner{
    padding-inline: var(--section-padding-x);
    }
    
    .section-valeurs__title {
        font-size: var(--font-size-7xl);
    }

    .section-valeurs__step-title {
    font-size: var(--font-size-5xl);
}


    .section-valeurs__steps {
        display: grid;
        gap: var(--space-md);
    }
}

/* -------------------------
   Desktop 1024px
------------------------- */



@media (min-width: 1024px) {


    .section-valeurs__inner{
    padding-inline: var(--section-padding-x);
    padding-block: var(--section-padding-y);
    }

    .section-valeurs__step-title {
    font-size: var(--font-size-3xl);
}

    .section-valeurs__steps {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        width:80%;
        margin:auto;

    }

/* -------------------------
   Cartes en cascade sur Desktop
------------------------- */

.section-valeurs__step:nth-child(1) {
    transform: translateX(-100px);
    z-index: 1;
}

.section-valeurs__step:nth-child(2) {
    transform: translateX(-100px);
    z-index: 2;
}

.section-valeurs__step:nth-child(3) {
    margin-top: -120px;
    transform: translateX(100px);   /* plus près du centre */
    z-index: 3;
}

.section-valeurs__step:nth-child(4) {
    margin-top: -120px;
    transform: translateX(100px);
    z-index: 4;
}

}