/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-texte-libre.css
 * Rôle : Blocs de texte libre.
 *
 * 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-texte-libre.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-texte-libre.css
 * Rôle : Module Texte libre.
 *
 * 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. */

/* =========================================================
   Bloc texte libre
   ========================================================= */

.jp-texte-libre {
        padding: 70px 0;
        background: #fff;
}

/*  CIBLE — Composant : .jp-texte-libre-inner  */

.jp-texte-libre-inner {
        width: 100%;
        max-width: none;
        margin: 0;
        display: grid;
        grid-template-columns: 26% minmax(0,1fr);
        gap: 44px;
        align-items: start;
}

/*  CIBLE — Composant : .jp-texte-libre-image img  */

.jp-texte-libre-image img {
        width: 100%;
        max-height: 360px;
        object-fit: cover;
        object-position: center;
        border-radius: 0 26px 26px 0;
        display: block;
}

/*  CIBLE — Composant : .jp-texte-libre-content  */

.jp-texte-libre-content {
        max-width: none;
        width: 100%;
        padding-right: 40px;
}

/*  CIBLE — Composant : .jp-texte-libre-content h2  */

.jp-texte-libre-content h2 {
        margin: 0 0 24px;
        color: var(--jp-main);
        font-size: clamp(20px,2vw,30px);
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.04em;
        text-transform: uppercase;
}

/*  CIBLE — Composant : .jp-texte-libre-texte  */

.jp-texte-libre-texte {
        color: var(--jp-text);
}

/*  CIBLE — Composant : .jp-texte-libre-image_droite .jp-texte-libre-inner  */

.jp-texte-libre-image_droite .jp-texte-libre-inner {
        grid-template-columns: minmax(0,1fr) 32%;
}

/*  CIBLE — Composant : .jp-texte-libre-image_droite .jp-texte-libre-image  */

.jp-texte-libre-image_droite .jp-texte-libre-image {
        order: 2;
}

/*  CIBLE — Composant : .jp-texte-libre-image_droite .jp-texte-libre-image img  */

.jp-texte-libre-image_droite .jp-texte-libre-image img {
        border-radius: 26px 0 0 26px;
}

/*  CIBLE — Composant : .jp-texte-libre-image_droite .jp-texte-libre-content  */

.jp-texte-libre-image_droite .jp-texte-libre-content {
        padding-left: 6vw;
        padding-right: 0;
}

/*  CIBLE — Composant : .jp-texte-libre-pleine_largeur .jp-texte-libre-inner  */

.jp-texte-libre-pleine_largeur .jp-texte-libre-inner {
        display: block;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 6vw;
}

/*  CIBLE — Composant : .jp-texte-libre-pleine_largeur .jp-texte-libre-content  */

.jp-texte-libre-pleine_largeur .jp-texte-libre-content {
        max-width: 950px;
        padding: 0;
}

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

@media (max-width:900px) {
        /*  CIBLE — Composant : .jp-texte-libre  */
        .jp-texte-libre {
            padding: 48px 0;
    }
        /*  CIBLE — Composant : .jp-texte-libre-inner, .jp-texte-libre-image_droite .jp-texte-libre-inner  */
        .jp-texte-libre-inner, .jp-texte-libre-image_droite .jp-texte-libre-inner {
            display: block;
    }
        /*  CIBLE — Composant : .jp-texte-libre-image  */
        .jp-texte-libre-image {
            margin-bottom: 28px;
    }
        /*  CIBLE — Composant : .jp-texte-libre-image img, .jp-texte-libre-image_droite .jp-texte-libre-image img  */
        .jp-texte-libre-image img, .jp-texte-libre-image_droite .jp-texte-libre-image img {
            border-radius: 0;
            max-height: 280px;
    }
        /*  CIBLE — Composant : .jp-texte-libre-content, .jp-texte-libre-image_droite .jp-texte-libre-content  */
        .jp-texte-libre-content, .jp-texte-libre-image_droite .jp-texte-libre-content {
            padding: 0 24px;
            max-width: none;
    }
        /*  CIBLE — Composant : .jp-texte-libre-content h2  */
        .jp-texte-libre-content h2 {
            font-size: 34px;
    }
}

/* =========================================================
   MARGES LATÉRALES — ZONE DE TEXTE
   ========================================================= */

/* * La zone Texte libre conserve désormais une marge identique à gauche
 * et à droite, quelle que soit la position de l'image. */

.jp-texte-libre .jp-texte-libre-inner {
        width: min(calc(100% - 120px), 1680px);
        max-width: 1680px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
}

/* * Les anciennes bordures collées au bord de l'écran ne sont plus adaptées
 * puisque l'image se trouve maintenant dans un conteneur centré. */

.jp-texte-libre .jp-texte-libre-image img,
.jp-texte-libre-image_droite .jp-texte-libre-image img {
        border-radius: 24px;
}

/*  CIBLE — Composant : .jp-texte-libre .jp-texte-libre-content, .jp-texte-libre-image_droite .jp-texte-libre-content  */

.jp-texte-libre .jp-texte-libre-content,
.jp-texte-libre-image_droite .jp-texte-libre-content {
        padding-left: 0;
        padding-right: 0;
}

/*  RESPONSIVE — (max-width: 1200px)  */

@media (max-width: 1200px) {
        /*  CIBLE — Composant : .jp-texte-libre .jp-texte-libre-inner  */
        .jp-texte-libre .jp-texte-libre-inner {
            width: calc(100% - 64px);
    }
}

/*  RESPONSIVE — (max-width: 900px)  */

@media (max-width: 900px) {
        /*  CIBLE — Composant : .jp-texte-libre .jp-texte-libre-inner  */
        .jp-texte-libre .jp-texte-libre-inner {
            width: 100%;
            max-width: 100%;
    }
        /*  CIBLE — Composant : .jp-texte-libre .jp-texte-libre-content, .jp-texte-libre-image_droite .jp-texte-libre-content  */
        .jp-texte-libre .jp-texte-libre-content,
    .jp-texte-libre-image_droite .jp-texte-libre-content {
            padding-left: 24px;
            padding-right: 24px;
    }
}