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

    /***** Structure *****/
    #ansamble {
        margin: 40px 10px;
    }
    #ansamble {
       display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #ansamble h4 {
        margin: 10px 0;
    }
    #ansamble h4 {
        font-family: 'bold-font';
        font-size: 20px;
        text-align: center;
        color: #fff;
    }

    /***** Sections *****/
    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    section {
        background-color: #00000050;
       border-radius: 20px;
        padding: 20px 10px;
    }
    .delivery {
        position: relative;
        overflow: hidden;
        /* Transition uniquement pour le background-color */
        transition: background-color 0.3s ease;
    }
    .delivery-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    /* Contenu interne (texte, images, etc.) */
    .delivery-content {
        transition: opacity 0.3s ease;  /* transition uniquement pour l'opacité */
    }

    /* ============================== */
    /* Checkbox cochée */
    /* ============================== */

    /* Seul le background change */
    .delivery.active {
        background-color: #22222250;
    }

    /* Seule l’opacité change */
    .delivery.active .delivery-content {
        opacity: 0.3;
    }

    /* ============================== */
    /* Checkbox non affectée */
    /* ============================== */

    .checkbox {
        position: relative;
        z-index: 10; /* reste opaque au-dessus du contenu */
    }
    
    /***** N° *****/
    h3 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    h3 {
        height: 30px;
        width: 30px;
    }
    h3 {
        background-color: var(--secondary);
        border-radius: 50%;
        border: 5px solid #eee;
        box-shadow: 0 0 5px #000;
        padding: 5px;
    }
    h3 {
        font-family: 'content-font';
        font-size: 18px;
        text-align: center;
        color: #fff;
    }

    /***** Title *****/
    h2 {
        font-family: 'bold-font';
        font-size: 18px;
        color: #fff;
    }

    /***** Location *****/
    .location {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .location div {
        margin: 10px 0;
    }
    .location div {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .location div img {
        width: auto;
        height: 50px;
    }
    .location div img {
        border-radius: 50%;
    }
    .location p {
        font-family: 'content-font';
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #fff;
    }

    /***** Pass *****/
    .pass {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .pass div {
        display: flex;
        gap: 5px;
    }
    .pass div svg {
        width: auto;
        height: 25px;
        color: #fff;
    }
    .pass div span {
        display: flex;
        align-items: center;
    }
    .pass div span {
        font-family: 'content-font';
        font-size: 14px;
        letter-spacing: 1px;
        color: #fff;
    }

    /***** Keys *****/
    .key {
        width: 25px;
        height: 25px;
        border-radius: 50%;    
    }
    .orange {
        background-color: orange;
    }
    .red {
        background-color: crimson;
    }    
    .white {
        background-color: whitesmoke;
    }
    .yellow {
    background-color: yellow;
    }
    .purple {
        background-color: darkmagenta;
    }
    .blue {
        background-color: cornflowerblue;
    }
    .pink {
        background-color: pink;
    }
    .yellowgreen {
        background-color: yellowgreen;
    }
    .transparent {
        background-color: transparent;
        border: 1px solid white;
    }

    /***** Note *****/
    .note {
        display: grid;
        grid-template-columns: 25px auto;
        align-items: center;
        gap: 5px;
    }
    .note {
        background-color: crimson;
        border-radius: 10px;
        padding: 10px;
    }
    .note svg {
        width: 100%;
        height: auto;
        color: #fff;
    }
    .note span {
        display: flex;
        align-items: center;
    }
    .note span {
        font-family: 'content-font';
        font-size: 14px;
        color: #fff;
    }

    /***** Keys *****/
    .checkbox {
        width: 35px;
        height: 35px;
    }

    /***** Finish *****/
    #finish {
        background-color: #222;
    }
    #finish .finish-flag {
        width: auto;
        height: 60px;
    }

}