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

/* =========================================================
   PROFILS : Êtes-vous fait pour ce BTS ?
   ========================================================= */

/* Carte de profil avec fond et bordure personnalisés */

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

.jp-profile-card {
        --profile-bg: #EAF4FF;
        --profile-dark: #1E6091;
        background: var(--profile-bg);
        border-radius: 18px;
        padding: 20px;
        margin-bottom: 16px;
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 16px;
        align-items: center;
        border: 1px solid color-mix(in srgb, var(--profile-dark) 25%, white);
        box-shadow: 0 12px 28px rgba(16,35,63,.08),
        0 0 0 1px color-mix(in srgb, var(--profile-dark) 15%, transparent);
        transition: transform .2s ease, box-shadow .2s ease;
}

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

.jp-profile-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 38px rgba(16,35,63,.14);
}

/*  CIBLE — Cartes : .jp-profile-card:last-child  */

.jp-profile-card:last-child {
        margin-bottom: 0;
}

/* En-tête interne de la carte profil */

.jp-profile-head {
        display: contents;
}

/* Fond blanc contenant l’icône profil */

.jp-profile-icon-wrap {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.78);
        border-radius: 18px;
        grid-row: 1 / span 2;
        box-shadow: 0 10px 24px rgba(16,35,63,.13);
}

/* Icône profil et fallback si l’icône est absente */

.jp-profile-icon-mask, .jp-profile-icon-fallback {
        width: 58px;
        height: 58px;
        display: block;
}

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

.jp-profile-icon-mask {
        background: var(--profile-dark);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

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

.jp-profile-icon-fallback {
        border-radius: 50%;
        background: var(--profile-dark);
}

/* Titre de la carte profil */

.jp-profile-card h3 {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 900;
        color: var(--profile-dark);
}

/* Texte de la carte profil */

.jp-profile-card p {
        font-size: 13px;
        margin: 0;
        line-height: 1.6;
}

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

.jp-profile-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
}

/*  CIBLE — Profils : .jp-profile-head  */

.jp-profile-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
        margin-bottom: 10px;
        text-align: center;
}

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

.jp-profile-icon-wrap {
        grid-row: auto;
        margin-left: auto;
        margin-right: auto;
}

/*  CIBLE — Cartes : .jp-profile-card h3  */

.jp-profile-card h3 {
        width: 100%;
        margin: 0;
        text-align: center;
}

/*  CIBLE — Cartes : .jp-profile-card > p, .jp-profile-card > div:not(.jp-profile-head)  */

.jp-profile-card > p,
.jp-profile-card > div:not(.jp-profile-head) {
        width: 100%;
        text-align: left;
}