/* ==========================================================
   CANPEM — PAGE PROJET — INTRO
   DESKTOP UNIQUEMENT
   ========================================================== */

@media (min-width: 1025px) {

    /* SECTION */
    .canpem-projet-intro {
        background: #f7f8f2;
        padding: 48px 50px 60px;
        overflow: hidden;
        hyphens: none;
    }


    /* ======================================================
       STRUCTURE PRINCIPALE
       ====================================================== */

    /* DEUX COLONNES PRINCIPALES */
.canpem-projet-intro__columns {
    display: grid !important;
    grid-template-columns: 625px 620px !important;
    column-gap: 65px !important;
    align-items: start !important;

    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.canpem-projet-intro__columns > .wp-block-column {
    min-width: 0 !important;
    margin: 0 !important;
}

/* COLONNE GAUCHE */
.canpem-projet-intro-media {
    width: 625px !important;
    margin: 0 !important;
}

/* COLONNE DROITE */
.canpem-projet-intro-content {
    width: 620px !important;
    max-width: 620px !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
}

    /* ======================================================
       BLOC GAUCHE
       ====================================================== */

    .canpem-projet-intro-media {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* IMAGE PRINCIPALE */

    .canpem-projet-intro-media > .wp-block-image {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .canpem-projet-intro-media > .wp-block-image img {
        display: block;

        width: 100% !important;
        max-width: none !important;
        height: 560px !important;

        object-fit: cover;
        object-position: center;

        border-radius: 16px !important;
    }


    /* ======================================================
       CARD STATISTIQUE
       ====================================================== */

    .canpem-projet-stat {
    display: grid !important;
    grid-template-columns: 130px 1fr !important;
    align-items: center !important;

    width: 625px !important;
    max-width: 100% !important;
    min-height: 140px !important;
    

    margin: 18px 0 0 !important;
    padding: 16px 34px !important;
    box-sizing: border-box !important;

    background: #07553f !important;
    border-radius: 16px !important;
    color: #fff;
}

    /* ARBRE */

    .canpem-projet-stat > .wp-block-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 105px !important;

        margin: 0 !important;
        padding: 0 28px 0 0 !important;

        box-sizing: border-box !important;

        border-right: 1px solid rgba(255, 255, 255, .22);
    }

    .canpem-projet-stat > .wp-block-image img {
        display: block;

        width: 95px !important;
        height: 95px !important;

        object-fit: contain;
    }


    /* ARBRE + SÉPARATEUR : un peu plus à gauche */
    .canpem-projet-stat > .wp-block-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    
        width: 130px !important;
        height: 105px !important;
    
        margin: 0 !important;
        padding: 0 22px 0 0 !important;
    
        border-right: 1px solid rgba(255,255,255,.30) !important;
        box-sizing: border-box !important;
    }
    
    /* TEXTE : rapproché du séparateur et décalé à gauche */
    .canpem-projet-stat-texte {
        margin: 0 !important;
        padding: 0 0 0 28px !important;
    }
    
    /* On garde le motif complètement libre à droite */
    .canpem-projet-stat-texte {
        max-width: 330px !important;
    }


    /* ======================================================
       BLOC DROIT
       ====================================================== */

    .canpem-projet-intro-content {
        position: relative;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 8px 0 0 !important;
    }


    /* LE CONTEXTE */

    .canpem-projet-intro-content > p:first-child {
        margin: 0 0 42px !important;

        color: #07553f !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        letter-spacing: .18em !important;
        text-transform: uppercase;
    }

    .canpem-projet-intro-content > p:first-child::after {
        content: "";

        display: block;

        width: 54px;
        height: 3px;

        margin-top: 25px;

        background: #76a92d;
    }


    /* TITRE PRINCIPAL */

    .canpem-projet-intro-content h2 {
        margin: 0 0 42px !important;

        color: #064c38 !important;

        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 52px !important;
        font-weight: 700 !important;
        line-height: 1.04 !important;

        letter-spacing: -.02em !important;
    }


    /* PARAGRAPHES */

    .canpem-projet-intro-content p:not(:first-child) {
        margin: 0 !important;

        color: #394047 !important;

        font-size: 18px !important;
        line-height: 1.55 !important;
    }


    /* SECOND TITRE */

    .canpem-projet-intro-content h3 {
        margin: 62px 0 20px !important;

        color: #064c38 !important;

        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;

        letter-spacing: -.015em !important;
    }
}

/* ==========================================================
   CANPEM — MOTIFS VÉGÉTAUX — ISO MAQUETTE
   ========================================================== */

@media (min-width: 1025px) {

    /* ------------------------------------------------------
       SECTION
       Sert uniquement de repère aux motifs de droite
       ------------------------------------------------------ */

    .canpem-projet-intro {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate;
    }

    /* Les colonnes passent devant les décorations */
    .canpem-projet-intro__columns {
        position: relative !important;
        z-index: 2 !important;
    }


    /* ======================================================
       1. GRANDE FEUILLE — HAUT DROITE
       ====================================================== */

    .canpem-projet-intro::before {
        content: "";
        position: absolute;

        top: 20px;
        right: -25px;

        width: 245px;
        height: 230px;

        background-image: url("https://canpem.org/wp-content/uploads/2026/09/motif-haut-droite.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: contain;

        opacity: .42;

        pointer-events: none;
        z-index: 1;
    }


    /* ======================================================
       2. FEUILLES — BAS DROITE
       ====================================================== */

    .canpem-projet-intro::after {
        content: "";
        position: absolute;

        right: -35px;
        bottom: -55px;

        width: 340px;
        height: 330px;

        background-image: url("https://canpem.org/wp-content/uploads/2026/09/motif-bas-droite.png");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: contain;

        opacity: .38;

        pointer-events: none;
        z-index: 1;
    }


    /* ======================================================
       3. MOTIF DANS LA CARD VERTE
       ====================================================== */

    .canpem-projet-stat {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    }
    
    /* motif */
    .canpem-projet-stat::after {
        content: "";
        position: absolute;
    
        right: 12px;
        bottom: 30px;
    
        width: 190px;
        height: 190px;
    
        background-image: url("https://canpem.org/wp-content/uploads/2026/09/motif_card2.png");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: contain;
    
        /* beaucoup plus visible */
        opacity: 0.15;
    
        pointer-events: none;
        z-index: 1;
    }
    
    /* arbre + textes au-dessus */
    .canpem-projet-stat > * {
        position: relative;
        z-index: 2;
    }
}
/* =========================================================
   SECTION — UNE SECONDE VIE
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    /* SECTION ENTIÈRE */
    .canpem-seconde-vie {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 35px 40px 70px !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       INTRO DU HAUT
       ----------------------------------------------------- */

    .canpem-seconde-vie-intro {
        position: relative !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin: 0 auto 45px !important;
        padding: 0 0 0 18px !important;
        box-sizing: border-box !important;
        font-size: 15px;
    }

    .canpem-seconde-vie-intro::before {
        content: "";
        position: absolute;

        left: 0;
        top: 2px;

        width: 2px;
        height: calc(100% - 4px);

        background: #76a92d;
    }

    .canpem-seconde-vie-intro > p {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        color: #394047 !important;
    }


     /* =========================================
       SECTION 2 — GRILLE IDENTIQUE À CELLE DU HAUT
       ========================================= */

    .canpem-seconde-vie__columns {
        display: grid !important;
        grid-template-columns: 625px 625px !important;
        column-gap: 65px !important;
        align-items: center !important;

        width: 1315px !important;
        max-width: 1315px !important;

        margin: 24px auto 0 !important;
        padding: 0 !important;
    }

    .canpem-seconde-vie__columns > .wp-block-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* ===== COLONNE GAUCHE ===== */

    .canpem-seconde-vie-content {
        width: 625px !important;
        max-width: 625px !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        height: 360px;
        hyphens: none;
    }

    .canpem-seconde-vie-content > * {
        max-width: none !important;
    }

    .canpem-seconde-vie-content > p:last-child {
        width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
        max-inline-size: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        white-space: normal !important;
    }

    .canpem-seconde-vie-content h2 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 22px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .canpem-seconde-vie-content > p:last-child {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }


    /* ===== COLONNE DROITE ===== */

    .canpem-seconde-vie-media {
        width: 625px !important;
        max-width: 625px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .canpem-seconde-vie-media .wp-block-image {
        width: 625px !important;
        max-width: 625px !important;
        margin: 0 !important;
    }

    .canpem-seconde-vie-media .wp-block-image img {
        display: block !important;
        width: 625px !important;
        height: 390px !important;
        max-width: none !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 14px !important;
    }
}

/* =========================================================
   DERNIÈRE SECTION — TRANSFORMATION
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    /* SECTION GLOBALE */
    .canpem-transformation {
        width: 100% !important;
        margin: 0 !important;
        padding: 55px 0 65px !important;
        background: #fff !important;
    }


    /* =========================================
       CARD / DEUX COLONNES
       ========================================= */

    .canpem-transformation__columns {
        display: grid !important;
        grid-template-columns: 625px 625px !important;
        column-gap: 65px !important;
        align-items: stretch !important;

        width: 1315px !important;
        max-width: 1315px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        background: #f5f7f0 !important;

        border-radius: 18px !important;
        overflow: hidden !important;
    }


    /* Neutralisation Gutenberg */
    .canpem-transformation__columns > .wp-block-column {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =========================================
       COLONNE GAUCHE
       ========================================= */

    .canpem-transformation-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        width: 625px !important;
        max-width: 625px !important;

        padding: 55px 0 55px 55px !important;
        box-sizing: border-box !important;
    }


    /* SURTITRE */

    .canpem-transformation-content > p:first-child {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 18px !important;

        color: #075531 !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;

        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
    }


    /* TITRE */

    .canpem-transformation-content h2 {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 0 24px !important;

        color: #075531 !important;

        font-size: 42px !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* PARAGRAPHE */

    .canpem-transformation-content > p:last-child {
        width: 100% !important;
        max-width: 500px !important;

        margin: 0 !important;

        font-size: 17px !important;
        line-height: 1.55 !important;

        color: #26352f !important;
    }


    /* =========================================
       COLONNE IMAGE
       ========================================= */

    .canpem-transformation-media {
        width: 625px !important;
        max-width: 625px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .canpem-transformation-media .wp-block-image {
        width: 625px !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .canpem-transformation-media .wp-block-image img {
        display: block !important;

        width: 625px !important;
        height: 100% !important;
        min-height: 330px !important;

        max-width: none !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 0 !important;
    }
}

/* ==========================================================
   CANPEM — PAGE PROJET — INTRO
   TABLETTE 600 → 1024
   ========================================================== */

@media screen and (min-width:600px) and (max-width:1024px) {

    /* SECTION */

    .canpem-projet-intro {
        position:relative !important;
        background:#f7f8f2 !important;
        padding:28px 32px 38px !important;
        overflow:hidden !important;
        isolation:isolate;
        hyphens:none !important;
    }


    /* =========================
       2 COLONNES
       ========================= */

    .canpem-projet-intro__columns {
        position:relative !important;
        z-index:2 !important;

        display:grid !important;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap:34px !important;
        align-items:start !important;

        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
    }

    .canpem-projet-intro__columns > .wp-block-column {
        width:100% !important;
        min-width:0 !important;
        flex-basis:auto !important;
        margin:0 !important;
    }


    /* =========================
       COLONNE GAUCHE
       ========================= */

    .canpem-projet-intro-media {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    .canpem-projet-intro-media > .wp-block-image {
        width:100% !important;
        margin:0 !important;
    }

    .canpem-projet-intro-media > .wp-block-image img {
        display:block !important;
        width:100% !important;
        height:355px !important;
        max-width:none !important;

        object-fit:cover !important;
        object-position:center !important;

        border-radius:14px !important;
    }


    /* =========================
       CARD 80 %
       ========================= */

    .canpem-projet-stat {
        position:relative !important;
        isolation:isolate;
        overflow:hidden !important;

        display:grid !important;
        grid-template-columns:105px minmax(0, 1fr) !important;
        align-items:center !important;

        width:100% !important;
        max-width:100% !important;
        min-height:120px !important;

        margin:12px 0 0 !important;
        padding:12px 22px !important;

        box-sizing:border-box !important;

        background:#07553f !important;
        border-radius:14px !important;
        color:#fff !important;
    }

    .canpem-projet-stat > .wp-block-image {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:105px !important;
        height:82px !important;

        margin:0 !important;
        padding:0 18px 0 0 !important;

        box-sizing:border-box !important;

        border-right:1px solid rgba(255,255,255,.30) !important;
    }

    .canpem-projet-stat > .wp-block-image img {
        display:block !important;

        width:68px !important;
        height:68px !important;

        max-width:68px !important;
        max-height:68px !important;

        object-fit:contain !important;
        margin:0 !important;
    }

    .canpem-projet-stat-texte {
        position:relative !important;
        z-index:2 !important;

        width:100% !important;
        max-width:210px !important;

        margin:0 !important;
        padding:0 0 0 20px !important;

        box-sizing:border-box !important;
    }

    .canpem-projet-stat-texte h3 {
        margin:0 0 8px !important;

        color:#fff !important;
        font-size:25px !important;
        line-height:1.05 !important;

        white-space:nowrap !important;
    }

    .canpem-projet-stat-texte p {
        margin:0 !important;
        padding:0 !important;

        color:#fff !important;
        font-size:13px !important;
        line-height:1.4 !important;
    }


    /* MOTIF CARD */

    .canpem-projet-stat::after {
        content:"";
        position:absolute !important;

        right:8px !important;
        bottom:12px !important;

        width:125px !important;
        height:125px !important;

        background-image:url("https://canpem.org/wp-content/uploads/2026/09/motif_card2.png") !important;
        background-repeat:no-repeat !important;
        background-position:right bottom !important;
        background-size:contain !important;

        opacity:.15 !important;

        pointer-events:none !important;
        z-index:1 !important;
    }

    .canpem-projet-stat > * {
        position:relative !important;
        z-index:2 !important;
    }


    /* =========================
       COLONNE DROITE
       ========================= */

    .canpem-projet-intro-content {
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:4px 0 0 !important;
    }


    /* LE CONTEXTE */

    .canpem-projet-intro-content > p:first-child {
        margin:0 0 25px !important;

        color:#07553f !important;

        font-size:12px !important;
        font-weight:700 !important;
        line-height:1.2 !important;

        letter-spacing:.16em !important;
        text-transform:uppercase !important;
    }

    .canpem-projet-intro-content > p:first-child::after {
        content:"";
        display:block;

        width:40px;
        height:2px;

        margin-top:15px;

        background:#76a92d;
    }


    /* TITRE PRINCIPAL */

    .canpem-projet-intro-content h2 {
        margin:0 0 28px !important;

        color:#064c38 !important;

        font-family:Georgia, "Times New Roman", serif !important;
        font-size:34px !important;
        font-weight:700 !important;
        line-height:1.04 !important;

        letter-spacing:-.02em !important;
    }


    /* PARAGRAPHES */

    .canpem-projet-intro-content p:not(:first-child) {
        margin:0 !important;

        color:#394047 !important;

        font-size:14px !important;
        line-height:1.5 !important;

        hyphens:none !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }


    /* SECOND TITRE */

    .canpem-projet-intro-content h3 {
        margin:38px 0 14px !important;

        color:#064c38 !important;

        font-family:Georgia, "Times New Roman", serif !important;
        font-size:25px !important;
        font-weight:700 !important;
        line-height:1.1 !important;

        letter-spacing:-.015em !important;
    }


    /* =========================
       MOTIFS VÉGÉTAUX
       ========================= */

    .canpem-projet-intro::before {
        content:"";
        position:absolute;

        top:18px;
        right:-30px;

        width:145px;
        height:145px;

        background-image:url("https://canpem.org/wp-content/uploads/2026/09/motif-haut-droite.png");
        background-repeat:no-repeat;
        background-position:right top;
        background-size:contain;

        opacity:.32;

        pointer-events:none;
        z-index:1;
    }

    .canpem-projet-intro::after {
        content:"";
        position:absolute;

        right:-35px;
        bottom:-35px;

        width:190px;
        height:190px;

        background-image:url("https://canpem.org/wp-content/uploads/2026/09/motif-bas-droite.png");
        background-repeat:no-repeat;
        background-position:right bottom;
        background-size:contain;

        opacity:.30;

        pointer-events:none;
        z-index:1;
    }
}
/* =========================================================
   SECTION — UNE SECONDE VIE
   TABLETTE
   ========================================================= */

@media screen and (min-width:600px) and (max-width:1024px) {

    .canpem-seconde-vie {
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:30px 32px 55px !important;
        box-sizing:border-box !important;
    }


    /* INTRO */

    .canpem-seconde-vie-intro {
        position:relative !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 auto 38px !important;
        padding:0 0 0 16px !important;
        box-sizing:border-box !important;
    }

    .canpem-seconde-vie-intro::before {
        content:"";
        position:absolute;

        left:0;
        top:2px;

        width:2px;
        height:calc(100% - 4px);

        background:#76a92d;
    }

    .canpem-seconde-vie-intro > p {
        margin:0 !important;
        padding:0 !important;

        font-size: 10px !important;
        line-height:1.45 !important;

        color:#394047 !important;
    }
    .canpem-seconde-vie-intro p.wp-block-paragraph {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }


    /* DEUX COLONNES */

    .canpem-seconde-vie__columns {
        display: grid !important;
        grid-template-columns: 44% 56% !important;
        column-gap: 32px !important;
        align-items: center !important;
    }


    .canpem-seconde-vie__columns > .wp-block-column {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        flex:none !important;

        margin:0 !important;
        padding:0 !important;
    }


    /* COLONNE TEXTE */

    .canpem-seconde-vie-content {
        width:100% !important;
        max-width:none !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    .canpem-seconde-vie-content > * {
        width:100% !important;
        max-width:none !important;
    }

    .canpem-seconde-vie-content h2 {
        width:100% !important;
        max-width:none !important;

        margin:0 0 18px !important;

        font-size:30px !important;
        line-height:1.08 !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
        hyphens:none !important;
    }

    .canpem-seconde-vie-content > p:last-child {
        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;

        font-size:15px !important;
        line-height:1.55 !important;

        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        hyphens:none !important;
    }


    /* IMAGE */

    .canpem-seconde-vie-media {
        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;
    }

    .canpem-seconde-vie-media .wp-block-image {
        width:95% !important;
        max-width:none !important;

        margin:0 !important;
    }

    .canpem-seconde-vie-media .wp-block-image img {
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        aspect-ratio:625 / 450;

        object-fit:cover !important;
        object-position:center !important;

        border-radius:14px !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {

    /* DERNIÈRE SECTION — TRANSFORMATION */

    .canpem-transformation {
        width: calc(100% - 40px) !important;
        margin: 35px auto 45px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .canpem-transformation .wp-block-columns {
        display: grid !important;
        grid-template-columns: 48% 52% !important;
        gap: 0 !important;
        align-items: stretch !important;
        background: #f5f7f0;
    }

    .canpem-transformation .wp-block-column {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* IMAGE */

    .canpem-transformation figure {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .canpem-transformation figure img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 330px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* CONTENU DROIT */

    .canpem-transformation .wp-block-column:last-child {
        padding: 30px 34px !important;
        box-sizing: border-box !important;
    }

    .canpem-transformation h2 {
        font-size: 30px !important;
        line-height: 1.08 !important;
        margin-bottom: 20px !important;
    }

    .canpem-transformation p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #07553f;
    }
}
/* ==========================================================
   CANPEM — PAGE PROJET — INTRO
   MOBILE
   ========================================================== */

@media screen and (max-width: 599px) {

    /* SECTION */
    .canpem-projet-intro {
        width: 100% !important;
        padding: 18px 20px 42px !important;
        box-sizing: border-box !important;
        background: #f7f8f2 !important;
        overflow: hidden !important;
    }

    /* UNE SEULE COLONNE */
    .canpem-projet-intro__columns {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .canpem-projet-intro__columns > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        margin: 0 !important;
    }


    /* =========================
       IMAGE
       ========================= */

    .canpem-projet-intro-media {
        width: 100% !important;
        margin: 0 !important;
    }

    .canpem-projet-intro-media > .wp-block-image {
        width: 100% !important;
        margin: 0 !important;
    }

    .canpem-projet-intro-media > .wp-block-image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 14px !important;
    }


    /* =========================
       CARD 80 %
       ========================= */

    .canpem-projet-stat {
        display: grid !important;
        grid-template-columns: 82px 1fr !important;
        align-items: center !important;

        position: relative !important;
        width: 100% !important;
        min-height: 125px !important;

        margin: 10px 0 0 !important;
        padding: 15px 18px !important;
        box-sizing: border-box !important;

        background: #07553f !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        color: #fff !important;
    }

    .canpem-projet-stat > .wp-block-image {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 70px !important;
        margin: 0 !important;
        padding: 0 14px 0 0 !important;

        border-right: 1px solid rgba(255,255,255,.28) !important;
        box-sizing: border-box !important;
    }

    .canpem-projet-stat > .wp-block-image img {
        display: block !important;
        width: 55px !important;
        height: 55px !important;
        object-fit: contain !important;
    }

    .canpem-projet-stat-texte {
        margin: 0 !important;
        padding: 0 0 0 15px !important;
    }

    .canpem-projet-stat-texte h3 {
        margin: 0 0 8px !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #fff !important;
    }

    .canpem-projet-stat-texte p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #fff !important;
    }


    /* =========================
       CONTEXTE
       ========================= */

    .canpem-projet-intro-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 38px 0 0 !important;
    }

    .canpem-projet-intro-content > p:first-child {
        margin: 0 0 28px !important;
        color: #07553f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .15em !important;
        text-transform: uppercase !important;
    }

    .canpem-projet-intro-content > p:first-child::after {
        content: "";
        display: block;
        width: 45px;
        height: 2px;
        margin-top: 15px;
        background: #76a92d;
    }

    .canpem-projet-intro-content h2 {
        margin: 0 0 25px !important;
        color: #064c38 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 34px !important;
        line-height: 1.06 !important;
        hyphens: none !important;
    }

    .canpem-projet-intro-content p:not(:first-child) {
        margin: 0 !important;
        color: #394047 !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
        hyphens: none !important;
    }

    .canpem-projet-intro-content h3 {
        margin: 38px 0 16px !important;
        color: #064c38 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 27px !important;
        line-height: 1.1 !important;
    }


    /* =========================
       MOTIFS
       ========================= */

    .canpem-projet-intro::before,
    .canpem-projet-intro::after {
        display: none !important;
    }
}
/* ==========================================================
   CANPEM — UNE SECONDE VIE
   MOBILE
   ========================================================== */

@media screen and (max-width: 599px) {

    .canpem-seconde-vie {
        width: 100% !important;
        margin: 0 !important;
        padding: 32px 20px 45px !important;
        box-sizing: border-box !important;
    }

    /* INTRO */
    .canpem-seconde-vie-intro {
        position: relative !important;
        width: 100% !important;
        margin: 0 0 35px !important;
        padding: 0 0 0 15px !important;
        box-sizing: border-box !important;
    }

    .canpem-seconde-vie-intro::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 2px;
        height: calc(100% - 4px);
        background: #76a92d;
    }

    .canpem-seconde-vie-intro p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }


    /* TEXTE + IMAGE */
    .canpem-seconde-vie__columns {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .canpem-seconde-vie__columns > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* COLONNE TEXTE */
    .canpem-seconde-vie-content {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 35px !important;
    }

    .canpem-seconde-vie-content h2 {
        width: 100% !important;
        margin: 0 0 20px !important;

        font-size: 29px !important;
        line-height: 1.08 !important;

        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .canpem-seconde-vie-content > p:last-child {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.55 !important;

        hyphens: none !important;
    }


    /* IMAGE */
    .canpem-seconde-vie-media,
    .canpem-seconde-vie-media .wp-block-image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .canpem-seconde-vie-media .wp-block-image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        object-position: center !important;

        border-radius: 14px !important;
    }
}
/* ==========================================================
   CANPEM — TRANSFORMATION
   MOBILE
   ========================================================== */

@media screen and (max-width: 599px) {

    /* CARD COMPLÈTE */
    .canpem-transformation {
        width: calc(100% - 40px) !important;
        margin: 35px auto 45px !important;
        padding: 0 !important;

        background: #f3f6ed !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* COLONNES → VERTICAL */
    .canpem-transformation .wp-block-columns {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .canpem-transformation .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* =========================
       TEXTE EN PREMIER
       ========================= */

    .canpem-transformation .wp-block-column:last-child {
        padding: 28px 24px 30px !important;
        background: #f3f6ed !important;
    }

    .canpem-transformation .wp-block-column:last-child > p:first-child {
        margin: 0 0 22px !important;

        color: #07553f !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;

        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    .canpem-transformation h2 {
        margin: 0 0 22px !important;

        font-size: 29px !important;
        line-height: 1.08 !important;

        hyphens: none !important;
        word-break: normal !important;
    }

    .canpem-transformation .wp-block-column:last-child > p:last-child {
        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.55 !important;

        color: #394047 !important;
        hyphens: none !important;
    }

    /* =========================
       IMAGE EN DESSOUS
       ========================= */

    .canpem-transformation figure {
        width: 100% !important;
        margin: 0 !important;
    }

    .canpem-transformation figure img {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 0 !important;
    }
}