/* ==========================================================
   CANPEM — NOTRE SOLUTION
   SECTION MAG — DESKTOP COMPLET
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* ======================================================
       1. SECTION FULL WIDTH
       On sort des 1170px imposés par Kava
       ====================================================== */

    .solution-mag {
        position: relative !important;

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

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding: 70px 40px 70px 240px !important;

        background: #fff !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* ======================================================
       2. WRAPPER GUTENBERG
       On supprime la contrainte is-layout-constrained
       ====================================================== */

    .solution-mag > .wp-block-group__inner-container {
        width: 100% !important;
        max-width: none !important;

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

    .solution-mag > .wp-block-group__inner-container > * {
        max-width: none !important;
    }


    /* ======================================================
       3. COLONNES
       ====================================================== */

    .solution-mag__columns {
        display: grid !important;

        grid-template-columns: 480px minmax(0, 1fr) !important;
        column-gap: 55px !important;

        align-items: center !important;

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

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

        box-sizing: border-box !important;
    }

    .solution-mag__columns > .wp-block-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        flex: none !important;

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


    /* ======================================================
       4. TEXTE
       Départ = même verticale que le logo
       ====================================================== */

    .solution-mag__content {
        width: 480px !important;
        max-width: 480px !important;

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

        box-sizing: border-box !important;
    }


    /* SURTITRE */

    .solution-mag__content > p:first-child {
        margin: 0 0 32px !important;
        padding: 0 !important;

        color: #07553f !important;

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

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

    .solution-mag__content > p:first-child::after {
        content: "";

        display: block;

        width: 45px;
        height: 2px;

        margin-top: 18px;

        background: #76a92d;
    }


    /* TITRE */

    .solution-mag__content h3 {
        width: 100% !important;
        max-width: 470px !important;

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

        color: #064c38 !important;

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

        letter-spacing: -.02em !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

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


    /* PARAGRAPHE */

    .solution-mag__content > p:last-child {
        width: 100% !important;
        max-width: 460px !important;

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

        color: #394047 !important;

        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

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


    /* ======================================================
       5. GRANDE PHOTO À DROITE
       ====================================================== */

    .solution-mag__media {
        width: 100% !important;
        max-width: none !important;

        height: 600px !important;

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

        overflow: hidden !important;

        border-radius: 16px !important;

        box-sizing: border-box !important;
    }

    .solution-mag__media .wp-block-image {
        display: block !important;

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

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

    .solution-mag__media .wp-block-image img {
        display: block !important;

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

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

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

        border-radius: 16px !important;
    }


    /* ======================================================
       6. AUCUN MOTIF — AUCUN FONDU
       ====================================================== */

    .solution-mag::before,
    .solution-mag::after,
    .solution-mag__media::before,
    .solution-mag__media::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
    }
}

/* ==========================================================
   CANPEM — ÉCONOMIE CIRCULAIRE
   DESKTOP COMPLET
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* SECTION FULL WIDTH */

    .solution-circulaire {
        position: relative !important;

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

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding: 70px 70px 75px !important;

        background: #f7f9f3 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }


    /* WRAPPER GUTENBERG */

    .solution-circulaire > .wp-block-group__inner-container {
        position: relative !important;
        z-index: 2 !important;

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

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

    .solution-circulaire > .wp-block-group__inner-container > * {
        max-width: none !important;
    }


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

    .solution-circulaire__columns {
        display: grid !important;

        grid-template-columns: 500px 900px !important;
        column-gap: 75px !important;

        align-items: center !important;

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

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

    .solution-circulaire__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
       ====================================================== */

    .solution-circulaire__content {
        position: relative !important;
        z-index: 3 !important;

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

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


    /* SURTITRE */

    .solution-circulaire__content > p:first-child {
        margin: 0 0 34px !important;
        padding: 0 !important;

        color: #07553f !important;

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

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

    .solution-circulaire__content > p:first-child::after {
        content: "";
        color: #064c38 !important;
        display: block;

        width: 45px;
        height: 2px;

        margin-top: 18px;

        background: #76a92d;
    }


    /* TITRE */

    .solution-circulaire__content h2 {
        width: 100% !important;
        max-width: 500px !important;

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

        color: #064c38 !important;

        font-family: Georgia, "Times New Roman", serif !important;

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

        letter-spacing: -.02em !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }


    /* PARAGRAPHE */

    .solution-circulaire__content > p:last-child {
        width: 100% !important;
        max-width: 450px !important;

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

        color: #394047 !important;

        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

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


    /* ======================================================
       SCHÉMA
       ====================================================== */

    .solution-circulaire__schema {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

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

    .solution-circulaire__schema .wp-block-image {
        width: 100% !important;
        max-width: 900px !important;

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

    .solution-circulaire__schema .wp-block-image img {
        display: block !important;

        width: 100% !important;
        max-width: 900px !important;
        height: auto !important;

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


    /* ======================================================
       MOTIF HAUT GAUCHE
       ====================================================== */

    .solution-circulaire::before {
        content: "";

        position: absolute !important;

        left: -35px !important;
        top: -20px !important;

        width: 190px !important;
        height: 210px !important;

        background-image:
            url("https://canpem.org/wp-content/uploads/2026/09/motif-haut-droite.png") !important;

        background-repeat: no-repeat !important;
        background-position: left top !important;
        background-size: contain !important;

        transform: scaleX(-1);

        opacity: .16 !important;

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


    /* ======================================================
       MOTIF BAS GAUCHE
       ====================================================== */

    .solution-circulaire::after {
        content: "";

        position: absolute !important;

        left: -25px !important;
        bottom: -80px !important;

        width: 360px !important;
        height: 300px !important;

        background-image:
            url("https://canpem.org/wp-content/uploads/2026/09/motif-bas-droite.png") !important;

        background-repeat: no-repeat !important;
        background-position: left bottom !important;
        background-size: contain !important;

        transform: scaleX(-1);

        opacity: .15 !important;

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

/* ==========================================================
   CANPEM — SECTION MARCHÉS — DESKTOP
   VERSION COMPLÈTE
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* ---------- SECTION ---------- */

    .solution-marches {
        position: relative !important;
        width: 100vw !important;
        max-width: none !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding: 65px 60px 80px !important;

        background: #fff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .solution-marches > .wp-block-group__inner-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-marches > .wp-block-group__inner-container > * {
        max-width: none !important;
    }


    /* ======================================================
       EN-TÊTE
       ====================================================== */

    .solution-marches__header {
        display: grid !important;
        grid-template-columns: 700px 520px !important;
        column-gap: 120px !important;
        align-items: start !important;

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

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

    .solution-marches__header > .wp-block-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

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

        flex: none !important;
        hyphens: none;
    }


    /* ---------- TITRE GAUCHE ---------- */

    .solution-marches__title {
        width: 700px !important;
        max-width: 700px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-marches__title > p:first-child {
        margin: 0 0 30px !important;
        padding: 0 !important;

        color: #07553f !important;

        font-family: "Open Sans", sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

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

    .solution-marches__title > p:first-child::after {
        content: "";
        display: block;

        width: 45px;
        height: 2px;

        margin-top: 17px;

        background: #76a92d;
    }

    .solution-marches__title h2 {
        width: 100% !important;
        max-width: 700px !important;

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

        color: #064c38 !important;

        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 44px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        letter-spacing: -.02em !important;

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


    /* ======================================================
       INTRO DROITE
       Texte placé au niveau de la petite barre verte gauche
       ====================================================== */

    .solution-marches__intro {
        position: relative !important;

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

        margin: 31px 0 0 !important;
        padding: 0 0 0 42px !important;

        box-sizing: border-box !important;
    }

    .solution-marches__intro::before {
        content: "";

        position: absolute !important;
        left: 0 !important;
        top: 0 !important;

        width: 2px !important;
        height: 48px !important;

        background: #76a92d !important;
        margin-top: 26px;
    }

    .solution-marches__intro p,
    .solution-marches__intro p.wp-block-paragraph {
        width: 100% !important;
        max-width: 475px !important;

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

        color: #4b5355 !important;

        font-family: "Open Sans", sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;

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


    /* ======================================================
       LES 3 CARTES
       ====================================================== */

    .solution-marches__cards {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 28px !important;

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

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

        align-items: stretch !important;
    }


    /* ======================================================
       CARTE — STRUCTURE ABSOLUE
       ====================================================== */

    .solution-marches__cards > .solution-marche-card {
        position: relative !important;
        display: block !important;

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

        height: 290px !important;
        min-height: 290px !important;

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

        flex: none !important;

        background: #f7f9f3 !important;

        border-radius: 15px !important;
        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       PHOTO
       42% EXACTEMENT SUR LES TROIS
       ====================================================== */

    .solution-marche-card > .wp-block-image {
        position: absolute !important;

        left: 0 !important;
        top: 0 !important;

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

        height: 290px !important;

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

        overflow: hidden !important;
    }

    .solution-marche-card > .wp-block-image img {
        display: block !important;

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

        height: 100% !important;

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

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

        border: 0 !important;
        border-radius: 0 !important;
    }


    /* ======================================================
       ZONE CONTENU
       58% EXACTEMENT SUR LES TROIS
       ====================================================== */

    .solution-marche-card__content {
        position: absolute !important;

        left: 42% !important;
        top: 0 !important;

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

        height: 290px !important;

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

        background: transparent !important;

        box-sizing: border-box !important;

        display: block !important;
    }


    /* RESET DU WRAPPER GUTENBERG */

    .solution-marche-card__content >
    .wp-block-group__inner-container {

        position: relative !important;

        display: block !important;

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

        height: 100% !important;

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

        box-sizing: border-box !important;
    }


    /* ======================================================
       ICÔNE
       POSITION IDENTIQUE
       ====================================================== */

    .solution-marche-card__icon {
        position: absolute !important;

        top: 67px !important;
        left: 26px !important;

        display: block !important;

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

        height: 42px !important;

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

    .solution-marche-card__icon img {
        display: block !important;

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

        height: 42px !important;

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

        object-fit: contain !important;
    }


    /* ======================================================
       TITRE
       MÊME Y SUR LES TROIS CARTES
       ====================================================== */

    .solution-marche-card__content h3,
    .solution-marche-card__content h4 {

        position: absolute !important;

        top: 128px !important;
        left: 26px !important;

        width: calc(100% - 52px) !important;
        max-width: none !important;

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

        color: #064c38 !important;

        font-family: "Open Sans", sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;

        letter-spacing: 0 !important;
        text-transform: uppercase !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

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


    /* ======================================================
       PARAGRAPHE
       MÊME Y SUR LES TROIS CARTES
       ====================================================== */

    .solution-marche-card__content p,
    .solution-marche-card__content p.wp-block-paragraph {

        position: absolute !important;

        top: 168px !important;
        left: 26px !important;

        width: calc(100% - 52px) !important;
        max-width: 215px !important;

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

        color: #4b5355 !important;

        font-family: "Open Sans", sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;

        letter-spacing: 0 !important;

        hyphens: none !important;
        -webkit-hyphens: none !important;

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


    /* ======================================================
       AUCUN BOUTON
       ====================================================== */

    .solution-marche-card__content .wp-block-buttons,
    .solution-marche-card__content .wp-block-button {
        display: none !important;
    }
}

/* =========================================
   SOLUTION — TABLETTE — SECTION MAG
   600px → 1024px
========================================= */

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

    .solution-mag {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:45px 35px 60px !important;
        box-sizing:border-box !important;
        background:transparent !important;
    }

    .solution-mag > .wp-block-group__inner-container {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    .solution-mag__columns {
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        gap:0 !important;
    }

    .solution-mag__columns > .wp-block-column {
        width:100% !important;
        max-width:none !important;
        flex:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    /* On utilise contents pour pouvoir réordonner
       les éléments des deux colonnes */

    .solution-mag__content,
    .solution-mag__media {
        display:contents !important;
    }

    /* 1 — SURTITRE */

    .solution-mag__content > p:first-child {
        order:1 !important;
        width:100% !important;
        margin:0 0 28px !important;
        padding:0 !important;

        color:#07553f !important;
        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.3 !important;
        letter-spacing:.14em !important;
        text-transform:uppercase !important;
    }

    .solution-mag__content > p:first-child::after {
        content:"";
        display:block;
        width:45px;
        height:2px;
        margin-top:17px;
        background:#76a92d;
    }

    /* 2 — GRANDE PHOTO */

    .solution-mag__media .wp-block-image {
        order:2 !important;
        width:100% !important;
        max-width:none !important;
        margin:0 0 35px !important;
        padding:0 !important;
    }

    .solution-mag__media .wp-block-image img {
        display:block !important;
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        aspect-ratio:16 / 8.5 !important;
        object-fit:cover !important;
        object-position:center !important;
        border-radius:14px !important;
    }

    /* 3 — TITRE */

    .solution-mag__content h3 {
        order:3 !important;
        width:100% !important;
        max-width:650px !important;
        margin:0 0 24px !important;
        padding:0 !important;

        color:#064c38 !important;
        font-family:Georgia,"Times New Roman",serif !important;
        font-size:40px !important;
        font-weight:700 !important;
        line-height:1.08 !important;
        letter-spacing:-.02em !important;

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

    /* 4 — TEXTE */

    .solution-mag__content p:not(:first-child) {
        order:4 !important;
        width:100% !important;
        max-width:700px !important;
        margin-left:0 !important;
        margin-right:0 !important;

        color:#394047 !important;
        font-size:16px !important;
        line-height:1.6 !important;

        hyphens:none !important;
        -webkit-hyphens:none !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }
}
/* =========================================
   ÉCONOMIE CIRCULAIRE — TABLETTE
   600px → 1024px
========================================= */

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

    .solution-circulaire {
        position:relative !important;

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

        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;

        padding:45px 45px 55px !important;
        box-sizing:border-box !important;

        background:#f4f7ee !important;

        overflow:hidden !important;
        isolation:isolate;
    }

    /* MOTIF VÉGÉTAL HAUT GAUCHE */

    .solution-circulaire::before {
        content:"";
        position:absolute;
        top:-20px;
        left:-25px;

        width:180px;
        height:180px;

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

        opacity:.12;
        transform:rotate(-90deg);

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

    /* MOTIF VÉGÉTAL BAS GAUCHE */

    .solution-circulaire::after {
        content:"";
        position:absolute;
        left:-35px;
        bottom:-45px;

        width:230px;
        height:230px;

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

        opacity:.12;
        transform:scaleX(-1);

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

    .solution-circulaire__columns {
        position:relative !important;
        z-index:2 !important;

        display:grid !important;
        grid-template-columns:34% 66% !important;
        column-gap:25px !important;
        align-items:center !important;

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

    .solution-circulaire__content,
    .solution-circulaire__schema {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        flex:none !important;
    }

    /* SURTITRE */

    .solution-circulaire__content > p:first-child {
        margin:0 0 25px !important;

        color:#07553f !important;
        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.25 !important;
        letter-spacing:.14em !important;
        text-transform:uppercase !important;
    }

    .solution-circulaire__content > p:first-child::after {
        content:"";
        display:block;

        width:45px;
        height:2px;
        margin-top:16px;

        background:#76a92d;
    }

    /* TITRE */

    .solution-circulaire__content h3 {
        margin:0 0 22px !important;

        color:#064c38 !important;
        font-family:Georgia,"Times New Roman",serif !important;
        font-size:36px !important;
        font-weight:700 !important;
        line-height:1.08 !important;
        letter-spacing:-.02em !important;

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

    /* TEXTE */

    .solution-circulaire__content > p:last-child {
        margin:0 !important;
        max-width:280px !important;

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

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

    /* SCHÉMA */

    .solution-circulaire__schema {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .solution-circulaire__schema .wp-block-image {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }

    .solution-circulaire__schema .wp-block-image img {
        display:block !important;
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        object-fit:contain !important;
        margin:0 auto !important;
    }
}
/* =========================================================
   MARCHÉS — TABLETTE
   ========================================================= */

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

    /* SECTION : TOUTE LA LARGEUR */
    .solution-marches {
        position:relative !important;

        width:calc(100% + 210px) !important;
        max-width:none !important;

        margin-left:-105px !important;
        margin-right:-105px !important;

        padding:45px 35px 60px !important;

        box-sizing:border-box !important;
    }


    .solution-marches > .wp-block-group__inner-container {
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .solution-marches__header {
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
        gap:55px !important;

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

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

    .solution-marches__header > .wp-block-column {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        flex:none !important;

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


    /* PETIT TITRE */
    .solution-marches__title > p:first-child {
        margin:0 0 20px !important;

        font-size:13px !important;
        line-height:1.3 !important;
        letter-spacing:.04em !important;
    }

    .solution-marches__title > p:first-child::after {
        content:"";
        display:block;

        width:44px;
        height:2px;

        margin-top:14px;

        background:#76a92d;
    }


    /* GRAND TITRE */
    .solution-marches__title h3 {
        margin:0 !important;

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

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


    /* =====================================================
       INTRO
       ===================================================== */

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

    .solution-marches {
        width:calc(100vw - 30px) !important;
        max-width:none !important;

        margin-left:calc((100% - 100vw) / 2 + 15px) !important;
        margin-right:0 !important;

        padding:45px 25px 60px !important;

        box-sizing:border-box !important;

        /* surtout pas de déplacement avec transform */
        left:auto !important;
        transform:none !important;
    }

}


    /* Gutenberg peut mettre directement le texte
       dans la colonne OU dans un paragraphe */
    .solution-marches__intro,
    .solution-marches__intro p,
    .solution-marches__intro > p,
    .solution-marches__header .solution-marches__intro p {
        font-size:13px !important;
        line-height:1.45 !important;
        font-weight:400 !important;
        hyphens: none;
    }

    .solution-marches__intro p,
    .solution-marches__intro > p {
        margin:0 !important;
        padding:0 !important;
    }

    
    /* Supprime uniquement la barre verticale parasite */
    .solution-marches::before,
    .solution-marches__header::before {
        content:none !important;
        display:none !important;
    }



    /* =====================================================
       LES 3 CARTES
       ===================================================== */

    .solution-marches__cards {
        display:grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap:28px !important;

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

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

    .solution-marches__cards > .wp-block-column,
    .solution-marche-card {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        flex:none !important;

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


    /* PHOTO */
    .solution-marche-card > .wp-block-image {
        width:100% !important;
        max-width:none !important;

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

    .solution-marche-card > .wp-block-image img {
        display:block !important;

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

        object-fit:cover !important;

        border-radius:10px 10px 0 0 !important;
    }


    /* ZONE TEXTE */
    .solution-marche-card__content {
        width:100% !important;
        max-width:none !important;

        min-height:180px !important;

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

        box-sizing:border-box !important;

        background:#f7f8f2 !important;

        border-radius:0 0 10px 10px !important;
    }


    /* ICÔNES */
    .solution-marche-card__icon,
    .solution-marche-card__icon.wp-block-image {
        width:26px !important;
        max-width:26px !important;
        height:26px !important;

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

    .solution-marche-card__icon img,
    .solution-marche-card__content .solution-marche-card__icon img {
        display:block !important;

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

        object-fit:contain !important;
    }


    /* TITRES CARTES */
    .solution-marche-card__content h4 {
        margin:0 0 10px !important;

        font-size:13px !important;
        line-height:1.25 !important;

        color:#07553f !important;

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


    /* TEXTES CARTES */
    .solution-marche-card__content p {
        margin:0 !important;

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

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

/* =========================================================
   MAG — MOBILE
   ========================================================= */

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

    .solution-mag {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:38px 20px 45px !important;
        box-sizing:border-box !important;
        background:#fff !important;
    }

    .solution-mag__columns {
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        gap:0 !important;
    }

    .solution-mag__columns > .wp-block-column {
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    /* Le contenu ne crée plus sa propre mise en page */
    .solution-mag__content {
        display:contents !important;
    }

    /* EYEBROW */
    .solution-mag__content > p:first-child {
        order:1;
        margin:0 0 25px !important;

        color:#07553f !important;
        font-size:12px !important;
        font-weight:700 !important;
        line-height:1.3 !important;
        letter-spacing:.08em !important;
        text-transform:uppercase !important;
    }

    .solution-mag__content > p:first-child::after {
        content:"";
        display:block;
        width:44px;
        height:2px;
        margin-top:14px;
        background:#76a92d;
    }

    /* TITRE */
    .solution-mag__content h3 {
        order:2;

        margin:0 0 25px !important;

        color:#064c38 !important;
        font-family:Georgia,"Times New Roman",serif !important;
        font-size:36px !important;
        font-weight:700 !important;
        line-height:1.05 !important;
        letter-spacing:-.02em !important;

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

    /* PHOTO */
    .solution-mag__media {
        order:3;

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

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

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

    .solution-mag__media .wp-block-image {
        width:100% !important;
        margin:0 !important;
    }

    .solution-mag__media img {
        display:block !important;

        width:100% !important;
        height:auto !important;
        aspect-ratio:16 / 10 !important;

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

        border-radius:12px !important;
    }

    /* TEXTE */
    .solution-mag__content > p:not(:first-child) {
        order:4;

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

        margin:0 0 18px !important;

        color:#394047 !important;
        font-size:16px !important;
        line-height:1.6 !important;

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

    .solution-mag__content > p:last-child {
        margin-bottom:0 !important;
    }
}
/* =========================================================
   ÉCONOMIE CIRCULAIRE — MOBILE
   ========================================================= */

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

    .solution-circulaire {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 38px 16px 35px !important;
        box-sizing: border-box !important;
        background: #f7f8f2 !important;
        overflow: hidden !important;
    }

    .solution-circulaire__columns {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 32px !important;
    }

    .solution-circulaire__columns > .wp-block-column {
        width: 100% !important;
        max-width: none !important;
        flex-basis: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* TEXTE */

    .solution-circulaire__content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-circulaire__content > p:first-child {
        margin: 0 0 28px !important;
        color: #07553f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    .solution-circulaire__content > p:first-child::after {
        content: "";
        display: block;
        width: 44px;
        height: 2px;
        margin-top: 16px;
        background: #76a92d;
    }

    .solution-circulaire__content h3 {
        margin: 0 0 20px !important;
        padding: 0 !important;
        color: #064c38 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 37px !important;
        font-weight: 700 !important;
        line-height: 1.08 !important;
        letter-spacing: -.02em !important;
        hyphens: none !important;
        word-break: normal !important;
    }

    .solution-circulaire__content > p:last-child {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #394047 !important;
        font-size: 17px !important;
        line-height: 1.7 !important;
        hyphens: none !important;
        word-break: normal !important;
    }

    /* SCHÉMA */

    .solution-circulaire__schema {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-circulaire__schema .wp-block-image {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-circulaire__schema img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}
/* =========================================================
   MARCHÉS — MOBILE
   ========================================================= */

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

    .solution-marches {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 38px 16px 45px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* ---------- EN-TÊTE ---------- */

    .solution-marches__header {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 35px !important;
        padding: 0 !important;
    }

    .solution-marches__header > .wp-block-column {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-marches__title > p:first-child {
        margin: 0 0 26px !important;
        color: #07553f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    .solution-marches__title > p:first-child::after {
        content: "";
        display: block;
        width: 44px;
        height: 2px;
        margin-top: 16px;
        background: #76a92d;
    }

    .solution-marches__title h3 {
        margin: 0 0 24px !important;
        padding: 0 !important;
        color: #064c38 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 37px !important;
        font-weight: 700 !important;
        line-height: 1.08 !important;
        letter-spacing: -.02em !important;
        hyphens: none !important;
        word-break: normal !important;
    }

    .solution-marches__intro {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 0 14px !important;
        box-sizing: border-box !important;
    }

    /* Supprime uniquement la barre verticale parasite */
    .solution-marches::before,
    .solution-marches__header::before {
        content:none !important;
        display:none !important;
    }

    .solution-marches__intro p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        color: #394047 !important;
        hyphens: none;
    }

    /* ---------- CARTES ---------- */

    .solution-marches__cards {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-marches__cards > .wp-block-column,
    .solution-marche-card {
        display: grid !important;
        grid-template-columns: 42% 58% !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 180px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f7f8f2 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Photo principale */

    .solution-marche-card > .wp-block-image {
        grid-column: 1 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .solution-marche-card > .wp-block-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 180px !important;
        object-fit: cover !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Contenu */

    .solution-marche-card__content {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px !important;
        box-sizing: border-box !important;
    }

    /* PETITE icône */

    .solution-marche-card__icon,
    .solution-marche-card__icon.wp-block-image {
        width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    .solution-marche-card__icon img {
        display: block !important;
        width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .solution-marche-card__content h4 {
        margin: 0 0 10px !important;
        padding: 0 !important;
        color: #07553f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .solution-marche-card__content p {
        margin: 0 !important;
        padding: 0 !important;
        color: #394047 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        hyphens: none !important;
        word-break: normal !important;
    }
    
}