/* ==================================================
   Layout
================================================== */

.politique-grid {
    grid-template-areas:
        "main main main main main main main main main sidebar sidebar sidebar";

    align-items: start;
}

/* ==================================================
   Areas
================================================== */

.politique-main {
    grid-area: main;
}

.politique-sidebar {
    grid-area: sidebar;
}

/* ==================================================
   Main
================================================== */

.politique-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ==================================================
   Sidebar
================================================== */

.politique-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ==================================================
   Fidelity
================================================== */

.card-fidelity {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    padding-right: 30%;

    display: flex;
    flex-direction: column;

    gap: var(--space-sm);
}

.card-fidelity h1,
.card-fidelity p {
    position: relative;
    z-index: 2;
}

.fidelity-card-image {
    position: absolute;
    top: 45%;
    right: -150px;

    width: 400px;
    height: auto;

    transform: translateY(-50%) rotate(-10deg);
    transform-origin: center;

    display: block;
    z-index: 1;
}


/* ==================================================
   Responsive
================================================== */

@media (max-width: 900px) {

    /* grille mobile */

    .politique-grid {
        grid-template-areas:
            "main main"
            "sidebar sidebar";
    }

    .politique-form-row {
        grid-template-columns: 1fr;
    }


    /* Fidélité */
    .card-fidelity {
        min-height: auto;
        padding-right: var(--space-md);
    }

    .card-fidelity .page-title {
        padding-right: 40%;
        min-height: 110px;
    }

    .fidelity-card-image {
        top: 20px;
        right: -50px;

        width: 170px;

        transform: rotate(-10deg);
    }
}