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

/* =========================================================
   OUTILS : cartes des outils utilisés
   ========================================================= */

/* Grille des outils */

.jp-tools {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 14px;
}

/* Carte outil */

.jp-tool {
        background: #fff;
        border-radius: 16px;
        padding: 16px 12px;
        text-align: center;
        box-shadow: 0 8px 22px rgba(0,0,0,.07);
        font-weight: 800;
        transition: transform .25s ease, box-shadow .25s ease;
}

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

.jp-tool:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 18px 38px rgba(16,35,63,.18);
}

/* Zone image de l’outil */

.jp-tool-image {
        height: 82px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
}

/*  CIBLE — Composant : .jp-tool-image img  */

.jp-tool-image img {
        max-width: 78px;
        max-height: 78px;
        object-fit: contain;
        display: block;
}

/* Titre de l’outil */

.jp-tool-title {
        font-size: 14px;
        font-weight: 800;
        color: var(--jp-dark);
}

/* Icône fallback de l’outil */

.jp-tool-icon {
        font-size: 28px;
        color: var(--jp-main);
        margin-bottom: 8px;
}

/* ==========================================================
   CARTES OUTILS — ICÔNE, IMAGE ET TITRE CENTRÉS
   ========================================================== */

.jp-tool,
.jp-tool-image,
.jp-tool-icon,
.jp-tool-title {
        text-align: center;
}

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

.jp-tool-icon {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

/*  CIBLE — Composant : .jp-tool-title  */

.jp-tool-title {
        width: 100%;
}