/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-chiffres.css
 * Rôle : Section Chiffres clés.
 *
 * Lecture conseillée :
 * 1. fondations et structure du composant ;
 * 2. éléments internes et états ;
 * 3. adaptations responsive et compatibilité.
 *
 * IMPORTANT : l'ordre de cascade est volontairement préservé lorsqu'un déplacement
 * pourrait modifier le rendu. Les doublons retirés sont uniquement ceux dont une
 * déclaration strictement identique existe plus loin dans le même contexte CSS.
  */

/* * FICHIER CSS RÉORGANISÉ
 * Fichier : assets/css/jp-chiffres.css
 * Rôle : Styles du composant ou du module indiqué par le nom du fichier.
 *
 * Organisation :
 * 1. Styles de base du module
 * 2. États et interactions
 * 3. Adaptations responsives, dans l’ordre du fichier d’origine
 *
 * Maintenance : l’ordre des règles est conservé afin de respecter la cascade CSS.
 * Les doublons strictement identiques dans un même bloc ont été supprimés. */

/* *
 * jp-chiffres.css
 * Rôle : Module Chiffres clés.
 *
 * Organisation du fichier :
 * 1. Variables et fondations éventuelles
 * 2. Structure principale du composant
 * 3. États, variantes et interactions
 * 4. Adaptations responsives
 *
 * Les doublons strictement identiques ont été supprimés. Les surcharges
 * volontaires et les fallbacks compatibles ont été conservés pour ne pas
 * modifier le rendu ou le comportement existant. */

/* =========================================================
   CHIFFRES : cartes statistiques avec effet 3D
   ========================================================= */

/* Grille des chiffres */

.jp-numbers {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 18px;
        row-gap: 28px;
        margin-top: -10px;
}

/* Carte chiffre */

.jp-number {
        position: relative;
        border-radius: 22px;
        padding: 26px 24px 32px;
        text-align: center;
        box-shadow: 0 18px 35px rgba(16,35,63,.16),
        inset 0 1px 0 rgba(255,255,255,.75);
        transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
        transition: transform .25s ease, box-shadow .25s ease;
        overflow: hidden;
}

/* Reflet de surface de la carte chiffre */

.jp-number:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 45%);
        pointer-events: none;
}

/*  CIBLE — État interactif : .jp-number:hover  */

.jp-number:hover {
        transform: perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-6px);
        box-shadow: 0 26px 48px rgba(16,35,63,.24),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/*  CIBLE — Composant : .jp-number > *  */

.jp-number > * {
        position: relative;
        z-index: 1;
}

/*  CIBLE — Composant : .jp-number:nth-child(1), .jp-number:nth-child(2), .jp-number:nth-child(4)  */

.jp-number:nth-child(1), .jp-number:nth-child(2), .jp-number:nth-child(4) {
        background: var(--jp-sec1);
}

/*  CIBLE — Composant : .jp-number:nth-child(3)  */

.jp-number:nth-child(3) {
        background: var(--jp-sec2);
}

/* Icône de carte chiffre */

.jp-number-icon {
        width: 44px;
        height: 44px;
        display: block;
        margin: 0 auto 20px;
        background: var(--jp-main);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

/* Valeur principale du chiffre */

.jp-number strong {
        display: block;
        font-size: 22px;
        line-height: 1.35;
        color: var(--jp-dark);
        margin-bottom: 18px;
        font-weight: 800;
}

/* Libellé du chiffre */

.jp-number div {
        line-height: 1.7;
        font-size: 12px;
}

/* ==========================================================
   CARTES CHIFFRES — ICÔNE ET TITRE CENTRÉS
   ========================================================== */

.jp-number,
.jp-number-icon,
.jp-number strong {
        text-align: center;
}

/*  CIBLE — Icônes : .jp-number-icon  */

.jp-number-icon {
        margin-left: auto;
        margin-right: auto;
}

/*  CIBLE — Composant : .jp-number strong  */

.jp-number strong {
        width: 100%;
}