/**
 * valeur-chiffres.css — Section Valeur Chiffres
 */

/* -------------------------
   Section
------------------------- */
.section-valeur-chiffres {
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
}

/* -------------------------
   Inner layout — colonne (titre toujours en bas)
------------------------- */
.section-valeur-chiffres__inner {
    position: relative;
    z-index: var(--z-above); /* au-dessus des shapes des sections adjacentes */
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-inline: var(--container-padding);
}

.section-valeur-chiffres .shapes {
    overflow:visible;
}

/* -------------------------
   Titre — toujours en bas (sous la grille)
------------------------- */
.section-valeur-chiffres__title {
    order: 2;
    font-family: var(--font-primary);
    font-size: clamp(3rem, 14vw, 9rem);
    font-weight: var(--font-weight-black);
    color: var(--color-black);
    line-height: var(--line-height-tight);
}

/* -------------------------
   Grille — collage asymétrique dès le mobile
------------------------- */
.section-valeur-chiffres__grid {
    order: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* On crée 12 lignes. Ajustez 40px selon la hauteur totale voulue */
    grid-template-rows: repeat(12, minmax(30px, auto)); 
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* -------------------------
   Carte — split bleu (chiffre) / lime (label)
------------------------- */
/* Carte 1 — "Inchiffrable" (Gauche, s'arrête vers le milieu) */
.section-valeur-chiffres__card:nth-child(1) {
    grid-column: 1 / 7;  /* De la ligne 1 à 6 */
    grid-row: 1 / 9;     /* Occupe les 8 premières lignes */
    z-index: 1;

}

/* Carte 2 — "100%" (Haut droite, chevauche la 1) */
.section-valeur-chiffres__card:nth-child(2) {
    grid-column: 5 / 12; /* Commence à 5 pour chevaucher la 1 */
    grid-row: 2 / 7;     /* Décalée d'une ligne vers le bas */
    z-index: 2;          /* Passe au-dessus */
    font-size: clamp(3rem, 12vw, 7rem);
}

/* Carte 3 — "x2" (Bas droite) */
.section-valeur-chiffres__card:nth-child(3) {
    grid-column: 6 / 13; 
    grid-row: 8 / 12;    /* En bas de la grille */
    z-index: 1;
}

/* -------------------------
   Le Titre (LA VALEUR) 
   S'il fait partie de la grille, positionnez-le ici :
------------------------- */
.section-valeur-chiffres__title {
    grid-column: 1 / 12;
    grid-row: 11 / 14;   /* Mobile : léger chevauchement avec la carte 3 */
    margin: 0;
    align-self: end;
}

/* -------------------------
   Chiffre — zone bleue, texte en bas
------------------------- */
.section-valeur-chiffres__card-number {
    flex: 1;
    background-color: var(--color-blue);
    color: var(--color-white);
    display: flex;
    align-items: flex-end;
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 12vw, 6rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* -------------------------
   Label — zone lime, texte noir
------------------------- */
.section-valeur-chiffres__card-label {
    background-color: var(--color-lime);
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-valeur-chiffres__card-label strong {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
}

.section-valeur-chiffres__card-label span {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

/* -------------------------
   Tablette 768px
------------------------- */
@media (min-width: 768px) {

    .section-valeur-chiffres__inner {
        max-width: 760px;
        margin-inline: auto;
    }


    .section-valeur-chiffres__card-label span {
        font-size: var(--font-size-base);
    }

    .section-valeur-chiffres__title {
        grid-row: 10 / 13; /* Tablette+ : chevauchement avec la carte 3 */
    }
}

/* -------------------------
   Desktop 1024px — proportions élargies
------------------------- */
@media (min-width: 1024px) {

}