/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/components/jp-hero-2.css
 * Rôle : Seconde génération du Hero.
 *
 * 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/components/jp-hero-2.css
 * Rôle : Bandeaux héro et contenus d’introduction.
 *
 * 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-hero-2.css
 * Rôle : Bandeau principal (hero).
 *
 * 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. */

/* ==========================================================
   FRAMEWORK JEAN PROUVÉ 4.0 — HERO 2.0
   Couche d'amélioration non destructive du Hero historique.
   ========================================================== */

/* ==========================================================================
   Bandeau principal
   ========================================================================== */

.jp-framework-v4 .jp-hero, .jp-framework-v4 .jpds-hero {
        isolation: isolate;
        min-height: var(--jp-hero-height-desktop);
        border-radius: 0 0 var(--jp-radius-xl) var(--jp-radius-xl);
        box-shadow: var(--jp-shadow-sm);
        background-color: var(--jp-color-navy-900);
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero-bg-img, .jp-framework-v4 .jpds-hero__image  */

.jp-framework-v4 .jp-hero-bg-img, .jp-framework-v4 .jpds-hero__image {
        object-position: var(--jp-hero-image-x) var(--jp-hero-image-y);
        transform: scale(var(--jp-hero-image-scale));
        transition: transform 8s var(--jp-ease-standard), filter 700ms ease;
        will-change: transform;
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero.is-jp-ready .jp-hero-bg-img, .jp-framework-v4 .jpds-hero.is-jp-ready .jpds-h…  */

.jp-framework-v4 .jp-hero.is-jp-ready .jp-hero-bg-img, .jp-framework-v4 .jpds-hero.is-jp-ready .jpds-hero__image {
        transform: scale(1.035);
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero::after  */

.jp-framework-v4 .jp-hero::after {
        background: linear-gradient(
    90deg,
    var(--jp-hero-overlay-start) 0%,
    var(--jp-hero-overlay-strong) 18%,
    var(--jp-hero-overlay-mid) 27%,
    var(--jp-hero-overlay-soft) 38%,
    var(--jp-hero-overlay-end) 50%
  );
}

/* * Le contenu principal doit rester visible même si JavaScript ne se charge pas.
 * L’animation est appliquée directement en CSS : elle ne peut donc plus laisser
 * durablement le bloc gauche à opacity:0. */

.jp-framework-v4 .jp-hero-main, .jp-framework-v4 .jpds-hero__main {
        opacity: 1;
        transform: translateY(0);
        animation: jpHeroMainEnter 650ms var(--jp-ease-standard) both;
}

/*  ANIMATION — jpHeroMainEnter  */

@keyframes jpHeroMainEnter {
        /*  CIBLE — Composant : from  */
        from {
            opacity: 0;
            transform: translateY(14px);
    }
        /*  CIBLE — Composant : to  */
        to {
            opacity: 1;
            transform: translateY(0);
    }
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-script, .jp-framework-v4 .jpds-hero__script  */

.jp-framework-v4 .jp-script, .jp-framework-v4 .jpds-hero__script {
        font-family: var(--jp-font-script) !important;
        font-size: var(--jp-font-size-script) !important;
        font-weight: 500 !important;
        line-height: 0.98 !important;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero h1, .jp-framework-v4 .jpds-hero h1  */

.jp-framework-v4 .jp-hero h1, .jp-framework-v4 .jpds-hero h1 {
        font-family: var(--jp-font-heading);
        font-size: var(--jp-font-size-h1);
        font-weight: 500;
        line-height: var(--jp-line-height-heading);
        letter-spacing: -0.015em;
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero-surtitre, .jp-framework-v4 .jp-type, .jp-framework-v4 .jpds-badge  */

.jp-framework-v4 .jp-hero-surtitre, .jp-framework-v4 .jp-type, .jp-framework-v4 .jpds-badge {
        border-radius: var(--jp-radius-sm);
}

/*  CIBLE — Boutons : .jp-framework-v4 .jp-btn, .jp-framework-v4 .jpds-btn  */

.jp-framework-v4 .jp-btn, .jp-framework-v4 .jpds-btn {
        transition: transform var(--jp-duration-fast) var(--jp-ease-standard),
              box-shadow var(--jp-duration-fast) var(--jp-ease-standard),
              background-color var(--jp-duration-fast) ease;
}

/*  CIBLE — Boutons : .jp-framework-v4 .jp-btn:hover, .jp-framework-v4 .jpds-btn:hover  */

.jp-framework-v4 .jp-btn:hover, .jp-framework-v4 .jpds-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--jp-shadow-sm);
}

/* Offres d'emploi : centrage horizontal réel de la phrase. */

/* ==========================================================================
   Adaptation responsive : (min-width: 901px)
   ========================================================================== */

@media (min-width: 901px) {
        /*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-service-jobs .jp-service-hero.jp-hero  */
        .jp-framework-v4 .jp-service-jobs .jp-service-hero.jp-hero {
            --jp-script-top: 48px;
            --jp-script-left: 0;
            --jp-script-right: 0;
            --jp-script-width: 100%;
            --jp-script-max-width: 100%;
            --jp-script-align: center;
    }
        /*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-service-jobs .jp-service-hero .jp-script  */
        .jp-framework-v4 .jp-service-jobs .jp-service-hero .jp-script {
            box-sizing: border-box;
            padding-inline: 7%;
            text-align: center !important;
    }
}

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

@media (max-width: 900px) {
        /*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero, .jp-framework-v4 .jpds-hero  */
        .jp-framework-v4 .jp-hero, .jp-framework-v4 .jpds-hero {
            min-height: auto;
            border-radius: 0 0 var(--jp-radius-lg) var(--jp-radius-lg);
    }
        /*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero-bg-img, .jp-framework-v4 .jpds-hero__image  */
        .jp-framework-v4 .jp-hero-bg-img, .jp-framework-v4 .jpds-hero__image {
            transform: none;
    }
}

/* ==========================================================================
   Adaptation responsive : (prefers-reduced-motion: reduce)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
        /*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero-bg-img, .jp-framework-v4 .jpds-hero__image, .jp-framework-v4 .jp-hero-main, …  */
        .jp-framework-v4 .jp-hero-bg-img, .jp-framework-v4 .jpds-hero__image, .jp-framework-v4 .jp-hero-main, .jp-framework-v4 .jpds-hero__main, .jp-framework-v4 .jp-btn, .jp-framework-v4 .jpds-btn {
            animation: none !important;
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
    }
}

/* La palette choisie dans l'éditeur prend le pas sur le voile fixe de Hero 2.0. */

.jp-framework-v4 .jp-hero::after {
        background: linear-gradient(
    90deg,
    var(--jp-hero-overlay-start, rgba(8, 23, 47, .94)) 0%,
    var(--jp-hero-overlay-strong, rgba(8, 23, 47, .86)) 32%,
    var(--jp-hero-overlay-mid, rgba(8, 23, 47, .58)) 46%,
    var(--jp-hero-overlay-soft, rgba(8, 23, 47, .20)) 61%,
    var(--jp-hero-overlay-end, rgba(8, 23, 47, .05)) 100%
  );
}

/*  CIBLE — Bandeau Hero : .jp-framework-v4 .jp-hero-gradient-none::after, .jp-framework-v4 .jp-hero-bg-none::after  */

.jp-framework-v4 .jp-hero-gradient-none::after, .jp-framework-v4 .jp-hero-bg-none::after {
        display: none;
}