/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-atouts.css
 * Rôle : Section Atouts.
 *
 * 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-atouts.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-atouts.css
 * Rôle : Module Atouts.
 *
 * 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. */

/* =========================================================
   ATOUTS : cartes centrées avec images au format 4:3
   =========================================================

   Principes :
   - la hauteur d'image historique est conservée selon le nombre
     de cartes présentes sur la ligne ;
   - la largeur de chaque carte est calculée à partir de cette
     hauteur afin d'obtenir une image strictement au format 4:3 ;
   - les cartes ne s'étirent plus pour remplir toute la largeur ;
   - chaque ligne est centrée dans la page. */

.jp-atouts {
        --jp-atout-side-padding: 24px;
        --jp-atout-gap: 24px;
        display: flex;
        flex-direction: column;
        gap: 34px;
        width: 100%;
        padding: 0 var(--jp-atout-side-padding);
        box-sizing: border-box;
}

/*  CIBLE — Atouts : .jp-atouts-row  */

.jp-atouts-row {
        --jp-atout-image-height: 180px;
        --jp-atout-card-width: calc(var(--jp-atout-image-height) * 4 / 3 * 1.2);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: var(--jp-atout-gap);
        width: 100%;
}

/* ==========================================================================
   Cartes et contenus structurés
   ========================================================================== */

.jp-atouts .jp-card {
        flex: 0 0 var(--jp-atout-card-width);
        width: var(--jp-atout-card-width);
        max-width: 100%;
        min-width: 0;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(0,0,0,.10);
        transition: transform .25s ease, box-shadow .25s ease;
}

/*  CIBLE — Cartes : .jp-atouts .jp-card:hover  */

.jp-atouts .jp-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 22px 46px rgba(16,35,63,.22);
}

/*  CIBLE — Cartes : .jp-atouts .jp-card img  */

.jp-atouts .jp-card img {
        display: block;
        width: 100%;
        height: var(--jp-atout-image-height);
        aspect-ratio: 4 / 3;
        object-fit: cover;
}

/* ==========================================================================
   Fondations et règles globales
   ========================================================================== */

.jp-atouts .jp-card-body {
        padding: 20px 18px 18px;
        text-align: center;
}

/* ==========================================================================
   Cartes et contenus structurés
   ========================================================================== */

.jp-atouts .jp-card h3 {
        color: var(--jp-dark);
        font-size: 16px;
        line-height: 1.2;
        margin: 0 0 10px;
        font-weight: 900;
        text-align: center;
}

/*  CIBLE — Cartes : .jp-atouts .jp-card p  */

.jp-atouts .jp-card p {
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
        margin: 0;
}

/* Hauteurs historiques conservées.
   La largeur correspondante est automatiquement calculée en 4:3. */

.jp-atouts-row-cols-2 {
        --jp-atout-image-height: 320px;
}

/*  CIBLE — Atouts : .jp-atouts-row-cols-3  */

.jp-atouts-row-cols-3 {
        --jp-atout-image-height: 260px;
}

/*  CIBLE — Atouts : .jp-atouts-row-cols-4  */

.jp-atouts-row-cols-4 {
        --jp-atout-image-height: 200px;
}

/*  CIBLE — Atouts : .jp-atouts-row-cols-5, .jp-atouts-count-5 .jp-atouts-row  */

.jp-atouts-row-cols-5, .jp-atouts-count-5 .jp-atouts-row {
        --jp-atout-image-height: 150px;
}

/* Cinq cartes : conserver des proportions plus compactes. */

/* ==========================================================================
   Fondations et règles globales
   ========================================================================== */

.jp-atouts-count-5 .jp-card-body {
        padding: 18px 16px 16px;
}

/* ==========================================================================
   Cartes et contenus structurés
   ========================================================================== */

.jp-atouts-count-5 .jp-card h3 {
        font-size: 15px;
}

/*  CIBLE — Cartes : .jp-atouts-count-5 .jp-card p  */

.jp-atouts-count-5 .jp-card p {
        font-size: 12px;
}

/* Tablettes et petits ordinateurs :
   hauteur commune de 220 px, soit une largeur de 293,33 px. */

/* ==========================================================================
   Adaptation responsive : (max-width:1200px)
   ========================================================================== */

@media (max-width:1200px) {
        /*  CIBLE — Atouts : .jp-atouts-row  */
        .jp-atouts-row {
            --jp-atout-image-height: 220px;
    }
        /*  CIBLE — Cartes : .jp-atouts .jp-card-body, .jp-atouts-count-5 .jp-card-body  */
        .jp-atouts .jp-card-body, .jp-atouts-count-5 .jp-card-body {
            padding: 20px 18px 18px;
    }
        /*  CIBLE — Cartes : .jp-atouts .jp-card h3, .jp-atouts-count-5 .jp-card h3  */
        .jp-atouts .jp-card h3, .jp-atouts-count-5 .jp-card h3 {
            font-size: 16px;
    }
        /*  CIBLE — Cartes : .jp-atouts .jp-card p, .jp-atouts-count-5 .jp-card p  */
        .jp-atouts .jp-card p, .jp-atouts-count-5 .jp-card p {
            font-size: 13px;
    }
}

/* Mobiles :
   une carte par ligne, centrée, sans l'étirer au-delà du 4:3.
   Si l'écran est très étroit, la carte se réduit avec une image
   dont la hauteur est recalculée automatiquement. */

/* ==========================================================================
   Adaptation responsive : (max-width:768px)
   ========================================================================== */

@media (max-width:768px) {
        /*  CIBLE — Atouts : .jp-atouts  */
        .jp-atouts {
            --jp-atout-side-padding: 0px;
            gap: 26px;
    }
        /*  CIBLE — Atouts : .jp-atouts-row  */
        .jp-atouts-row {
            --jp-atout-image-height: 190px;
            gap: 26px;
    }
        /*  CIBLE — Cartes : .jp-atouts .jp-card  */
        .jp-atouts .jp-card {
            flex-basis: min(var(--jp-atout-card-width), 100%);
            width: min(var(--jp-atout-card-width), 100%);
    }
        /*  CIBLE — Cartes : .jp-atouts .jp-card img  */
        .jp-atouts .jp-card img {
            height: auto;
            aspect-ratio: 4 / 3;
    }
        /*  CIBLE — Cartes : .jp-atouts .jp-card-body, .jp-atouts-count-5 .jp-card-body  */
        .jp-atouts .jp-card-body, .jp-atouts-count-5 .jp-card-body {
            padding: 22px 20px 20px;
    }
}