body {
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: white;
    color: #333;
}


/* PARTIE PICTURE TITLE */

.container-title {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    overflow: hidden;
    /* margin-bottom: 1rem; */
}

.grid-title {
    width: 1200px;
    height: 800px;
    min-width: 1200px;
    min-height: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem; /* gap-5 = 20px */
    margin-top: 3rem; /* mt-28 = 112px */
    position: relative;
}

.centered-text-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 3.75rem; /* text-6xl = 60px */
    text-align: center;
    width: 300px;
  }

  .bloc-up-title {
    max-height: 700px;
  }
  .bloc-down-title {
    max-height: 700px;
    margin-top: 80px;
  }
    /* TEXTE CONTAINER */
        .container-text {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            background-color: #ABB194
        }
        .p-text {
            width: 700px;
            margin: 4rem; /* m-16 = 64px */
            font-weight: 600; /* font-semibold */
        }
        /* BLOC CHOSES à FAIRE  */
            .h1-card {
                text-align: center;
                font-weight: bold;
                background-color: white;
                color: black;
                font-size: 3rem; /* text-5xl ≈ 48px */
                margin-top: 1.25rem; /* mt-5 = 20px */
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                margin-bottom: 30px;
            }

            .container-card {
                width: 100vw;
                height: 120vh;
                background-color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 90px;
            }

            .print-flex-card {
                display: flex;
                flex-direction: column;
                width: 90%;
                height: 70%;
                gap: 1.25rem; /* gap-5 = 20px */
                justify-content: center;
            }
            .card-card {
                background-color: #ABB194;
                min-width: 304px;
                min-height: 210px;
                border-radius: 20px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
            }
            .container-part-top-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                height: 25%;
                width: 100%;
            }
            .weui--time-outlined {
                display: inline-block;
                width: 48px;
                height: 48px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m12.6 11.503l3.891 3.891l-.848.849L11.4 12V6h1.2zM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-1.2a8.8 8.8 0 1 0 0-17.6a8.8 8.8 0 0 0 0 17.6'/%3E%3C/svg%3E");
            }
            .container-picture-card {
                align-self: flex-start;           /* self-start */
                justify-self: start;             /* justify-items-start (valide en grid uniquement) */
                margin-left: 1rem;               /* ml-4 = 16px */
                margin-top: 1rem;                /* mt-4 = 16px */
                border-radius: 9999px;           /* rounded-full */
                width: 3rem;                     /* w-12 = 48px */
                height: 3rem;                    /* h-12 = 48px */
            }
            .container-part-bottom-card {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                height: 75%;          /* h-3/4 */
                width: 100%;          /* w-full */
                font-size: 20px; /* text-3xl */
            }
            .content-part1-bottom-card {
                color: white;
                text-align: center;
                font-weight: bold;
                margin-bottom: 8px;  /* mb-2 = 8px */
                margin-left: 10px;      /* ml-4 = 16px */
                margin-top: 10px;
                /* line-height: 10px; */
            }
            .content-part2-bottom-card {
                color: white;
                font-weight: 300;    /* font-light */
                font-size: 15px; /* text-lg = 18px */
                margin-left: 1rem;
                line-height: 10px;
            }
            
            /* SVG */

            .game-icons--open-gate {
                display: inline-block;
                width: 48px;
                height: 48px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M192 64c-15.4 3.77-35.7 16.04-53 33.17c-19.2 19.13-34.9 43.63-39.58 64.63l-.58 135.3l.37 157.4l93.99-40.3zm128 0l-1.2 350.2l94 40.3l.4-156.8l-.6-135.9c-4.7-21-20.3-45.5-39.6-64.63c-17.3-17.13-37.6-29.4-53-33.17M57.24 94.67c-8.39 0-15 6.63-15 15.03s6.61 15 15 15s15-6.6 15-15s-6.61-15.03-15-15.03m397.56 0c-8.4 0-15 6.63-15 15.03s6.6 15 15 15s15-6.6 15-15s-6.6-15.03-15-15.03M35.5 142.7l-1.42 334h46l1.42-334zm395 0l1.5 334h46l-1.5-334zM159.2 231h18v48h-18zm175.6 0h18v48h-18z' stroke-width='13' stroke='%23fff'/%3E%3C/svg%3E");
              }

@media (min-width: 640px) {

}
@media (min-width: 768px) { /* md */
}

@media (min-width: 1024px) { /* lg */
    .centered-text-title {
        font-size: 6rem;
    }
    .container-card {
        height: 80vh;
    }
    .print-flex-card {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card-card {
        max-height: 300px;
      }
}
  /* Pour écran >= xl (1280px) */
  @media (min-width: 1280px) {
    .card-card {
        max-height: 300px;
      }
}

@media (min-width: 1536px) {
    
}