@import "_common.css";
@import "_menu.css";
@import "_back_to_top.css";

.submenu > li:nth-of-type(2), .submenu > li:nth-of-type(4) {
    margin-right: 20px;
}

/*@media (width > 480px) {*/
@media (min-width: 481px) {
    .submenu {
        grid-column: 3/5;
    }
    #colibert-rheims {
        grid-template-rows: 1fr auto auto;
    }
    #colibert-rheims > h1 {
        grid-column: 1/6;
        grid-row: 1;
        align-self: end;
        margin: 0 0 40px;
    }
    #colibert-rheims > img:first-of-type {
        grid-column: 3/7;
        grid-row: 2;
        align-self: end;
    }
    #colibert-rheims > span:first-of-type {
        grid-column: 1/2;
        grid-row: 2;
        align-self: end;
    }
    #colibert-rheims > hr:first-of-type {
        grid-column: 1/7;
        grid-row: 3;
    }
    #colibert-rheims > img:last-of-type {
        grid-column: 7/12;
        grid-row: 1/3;
    }
    #colibert-rheims > span:last-of-type {
        grid-column: 12;
        grid-row: 2;
        text-align: right;
        align-self: end;
    }
    #colibert-rheims > hr:last-of-type {
        grid-column: 7/13;
        grid-row: 3;
    }

    #rouvre-morice img:first-of-type {
        grid-column: 1/7;
        grid-row: 1/3;
    }
    #rouvre-morice img:last-of-type {
        grid-column: 7/11;
        grid-row: 1;
    }
    #rouvre-morice span:first-of-type {
        grid-column: 8/10;
        grid-row: 2;
        align-self: end;
        text-align: right;
    }
    #rouvre-morice span:last-of-type {
        grid-column: 11/13;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #rouvre-morice hr:first-of-type {
        grid-column: 7/13;
        grid-row: 2;
    }
    #rouvre-morice hr:last-of-type {
        grid-column: 1/10;
        grid-row: 3;
    }

    #belin > img {
        grid-column: 1/9;
    }
    #belin > span {
        grid-column: 11;
        text-align: right;
        align-self: end;
    }
    #belin > hr {
        grid-column: 1/12;
    }
    #stelzenberger > span:first-of-type {
        grid-column: 2/4;
        grid-row: 1;
        align-self: end;
    }
    #stelzenberger > span:last-of-type {
        grid-column: 5/8;
        grid-row: 3;
        align-self: end;
    }
    #stelzenberger > img:first-of-type {
        grid-column: 4/8;
        grid-row: 1;
    }
    #stelzenberger hr:first-of-type {
        grid-column: 2/8;
        grid-row: 2;
    }
    #stelzenberger > img:last-of-type {
        grid-column: 8/13;
        grid-row: 1/4;
    }
    #stelzenberger hr:last-of-type {
        grid-column: 5/13;
        grid-row: 4;
    }
    #rheims img:first-of-type {
        grid-column: 1/5;
    }
    #rheims img:last-of-type {
        grid-column: 5/9;
    }
    #rheims span {
        grid-column: 10/12;
        align-self: end;
        text-align: right;
    }
    #rheims hr {
        grid-column: 1/12;
        grid-row: 2;
    }
    #degez {
        grid-template-rows: auto auto 1fr;
    }
    #degez > img:first-of-type {
        grid-column: 2/5;
        grid-row: 1;
    }
    #degez hr:first-of-type {
        grid-column: 2/5;
        grid-row: 2;
    }
    #degez span {
        grid-column: 2/4;
        grid-row: 3;
    }
    #degez div {
        display: flex;
        gap: 20px;
        grid-column: 5/12;
        grid-row: 1/4;
        /* Ajoutez ces propriétés pour contraindre le flexbox */
        width: 100%;
        min-width: 0; /* Permet aux flex items de se rétrécir en dessous de leur taille intrinsèque */
        overflow: hidden; /* Empêche tout débordement */
    }

    #degez div img {
        /* Contraindre les images pour qu'elles s'adaptent au conteneur */
        flex: 1; /* Les images se partagent l'espace disponible */
        min-width: 0; /* Permet aux images de se rétrécir */
        max-width: 100%; /* Empêche les images de dépasser */
        height: auto; /* Maintient le ratio d'aspect */
        object-fit: cover; /* Ajuste l'image si nécessaire */
    }
    #degez hr:last-of-type {
        grid-column: 5/12;
        grid-row: 4;
    }
    #grinta span {
        grid-column: 1/3;
        align-self: end;
    }
    #grinta video {
        grid-column: 4/13;
    }
    #grinta hr {
        grid-column: 1/13;
        grid-row: 2;
    }
    #lipppmann {
        grid-template-rows: 1fr auto;
    }
    #lipppmann span:first-of-type {
        grid-column: 1/3;
        grid-row: 2;
        align-self: end;
    }
    #lipppmann img:first-of-type {
        grid-column: 3/7;
        grid-row: 1/3;
    }
    #lipppmann hr:first-of-type {
        grid-column: 7/12;
        grid-row: 1;
        align-self: end;
        width: calc(100% + 20px);
    }
    #lipppmann img:last-of-type {
        grid-column: 7/11;
        grid-row: 2;
        align-self: end;
    }
    #lipppmann span:last-of-type {
        grid-column: 11/12;
        grid-row: 2;
        text-align: right;
        width: calc(100% + 20px);
    }
    #lipppmann hr:last-of-type {
        grid-column: 1/7;
        grid-row: 3;
    }
    #gapaillard-schwoerer {
        grid-template-rows: auto auto 1fr;
    }
    #gapaillard-schwoerer > span:first-of-type {
        grid-column: 2/4;
        grid-row: 3;
        align-self: end;
    }
    #gapaillard-schwoerer > video {
        grid-column: 4/7;
        grid-row: 1/4;
    }
    #gapaillard-schwoerer > img {
        grid-column: 7/12;
        grid-row: 1;
    }
    #gapaillard-schwoerer hr:first-of-type {
        grid-column: 7/13;
        grid-row: 2;
    }
    #gapaillard-schwoerer > span:last-of-type {
        grid-column: 13/11;
        grid-row: 3;
        text-align: right;
    }
    #gapaillard-schwoerer hr:last-of-type {
        grid-column: 2/7;
        grid-row: 4;
    }
    #degez-fujimoto {
        grid-template-rows: auto 1fr auto;
    }
    #degez-fujimoto span:first-of-type {
        grid-column: 1/3;
        grid-row: 1;
        align-self: end;
    }
    #degez-fujimoto img:first-of-type {
        grid-column: 4/7;
        grid-row: 1;
    }
    #degez-fujimoto hr:first-of-type {
        grid-column: 1/7;
        grid-row: 2;
    }
    #degez-fujimoto img:last-of-type {
        grid-column: 7/11;
        grid-row: 1/3;
    }
    #degez-fujimoto span:last-of-type {
        grid-column: 13/11;
        grid-row: 2;
        align-self: end;
        text-align: right;
    }
    #degez-fujimoto hr:last-of-type {
        grid-column: 7/13;
        grid-row: 3;
    }
    #greco span {
        grid-column: 1/3;
        align-self: end;
    }
    #greco img:first-of-type {
        grid-column: 3/7;
    }
    #greco img:last-of-type {
        grid-column: 7/11;
    }
    #greco hr:first-of-type {
        grid-column: 1/11;
        grid-row: 2;
    }
    #greco hr:last-of-type {
        display: none;
    }
    #wonderland-schwoerer {
        grid-template-rows: auto 1fr ;
    }
    #wonderland-schwoerer span:first-of-type {
        grid-column: 2/4;
        grid-row: 2;
        align-self: end;
    }
    #wonderland-schwoerer img:first-of-type {
        grid-column: 4/8;
        grid-row: 1/3;
    }
    #wonderland-schwoerer img:last-of-type {
        grid-column: 8/11;
        grid-row: 1;
    }
    #wonderland-schwoerer span:last-of-type {
        grid-column: 13/11;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #wonderland-schwoerer hr:first-of-type {
        grid-column: 8/13;
        grid-row: 2;
    }
    #wonderland-schwoerer hr:last-of-type {
        grid-column: 2/8;
    }
    #stelzenberger-yoan {
        grid-template-rows: auto auto 1fr;
    }
    #stelzenberger-yoan img:first-of-type {
        grid-column: 1/7;
        grid-row: 1/4;
    }
    #stelzenberger-yoan span:first-of-type {
        grid-column: 12/10;
        grid-row: 3;
        align-self: end;
        text-align: right;
    }
    #stelzenberger-yoan img:last-of-type {
        grid-column: 7/11;
        grid-row: 1;
    }
    #stelzenberger-yoan span:last-of-type {
        grid-column: -1/-3;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #stelzenberger-yoan hr:first-of-type {
        grid-column: 7/13;
    }
    #stelzenberger-yoan hr:last-of-type {
        grid-column: 1/12;
        grid-row: 4;
    }
    #dumas span {
        grid-column: 4/7;
        grid-row: 1;
        align-self: end;
    }
    #dumas img {
        grid-column: 7/12;
    }
    #dumas hr {
        grid-column: 4/12;
        grid-row: 2;
    }
    #zaghian-perriau {
        grid-template-rows: auto auto 1fr;
    }
    #zaghian-perriau img:last-of-type {
        grid-column: 1/6;
        grid-row: 1/4;
    }
    #zaghian-perriau span:last-of-type {
        grid-column: 10/8;
        grid-row: 3;
        align-self: end;
        text-align: right;
    }
    #zaghian-perriau img:first-of-type {
        grid-column: 6/10;
        grid-row: 1;
    }
    #zaghian-perriau span:first-of-type {
        grid-column: 12/10;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #zaghian-perriau hr:first-of-type {
        grid-column: 6/12;
        grid-row: 2;
    }
    #zaghian-perriau hr:last-of-type {
        grid-column: 1/10;
        grid-row: 4;
    }
    #mongins span {
        grid-column: 3/5;
        align-self: end;
    }
    #mongins img:first-of-type {
        grid-column: 5/9;
    }
    #mongins img:last-of-type {
        grid-column: 9/13;
    }
    #mongins hr {
        grid-column: 3/13;
        grid-row: 2;
    }
}

@media (max-width: 480px) {
    header nav ul li:last-of-type {
        display: none;
    }
    #colibert-rheims img:last-of-type {
        grid-row: 1;
    }
    #colibert-rheims hr:last-of-type {
        grid-row: 2;
    }
    #colibert-rheims span:last-of-type {
        grid-row: 3;
        text-align: right;
    }
    #colibert-rheims h1 {
        grid-column: 1/5;
        grid-row: 4;
    }
    #colibert-rheims img:first-of-type {
        grid-row: 5;
    }
    #colibert-rheims hr:first-of-type {
        grid-row: 6;
    }
    #colibert-rheims span:first-of-type {
        grid-row: 7;
        text-align: right;
    }
    #rouvre-morice {
        margin-top: 20px;
    }
    #rouvre-morice img:first-of-type {
        grid-row: 1;
    }
    #rouvre-morice hr:first-of-type {
        grid-row: 2;
    }
    #rouvre-morice span:first-of-type {
        grid-row: 3;
        text-align: right;
    }
    #rouvre-morice img:last-of-type {
        margin-top: 24px;
        grid-row: 4;
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #rouvre-morice hr:last-of-type {
        grid-column: 1/-2;
        grid-row: 5;
        width: calc(100% + 20px);
    }
    #rouvre-morice span:last-of-type {
        grid-column: 1/5;
        grid-row: 6;
    }
    #belin {
        margin-top: 27px;
    }
    #belin img {
        grid-row: 1;
    }
    #belin hr {
        grid-row: 2;
    }
    #belin span {
        text-align: right;
    }
    #stelzenberger {
        margin-top: 26px;
    }
    #stelzenberger img:first-of-type {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #stelzenberger span:first-of-type {
        display: none;
    }
    #stelzenberger hr:first-of-type {
        grid-column: 2/6;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #stelzenberger span:last-of-type {
        grid-row: 5;
        text-align: right;
    }
    #rheims {
        margin-top: 25px;
    }
    #rheims img:last-of-type {
        margin-top:20px;
    }
    #rheims span {
        text-align: right;
    }
    #degez {
        margin-top: 26px;
    }
    #degez > img:first-of-type {
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #degez hr:first-of-type {
        grid-column: 1/-2;
        width: calc(100% + var(--gutters));
    }
    #degez span {
        grid-row: 6;
        text-align: right;
    }
    #degez div {
        display: grid;
        grid-template-columns: subgrid;
    }
    #degez > div > img:first-of-type {
        grid-row: 4;
        margin-top: 20px;
    }
    #degez > div > img:last-of-type {
        grid-row: 3;
    }
    #grinta {
        display: none;
    }
    #lipppmann {
        margin-top: 26px;
    }
    #lipppmann hr:first-of-type {
        grid-row: 2;
    }
    #lipppmann span:first-of-type {
        grid-row: 3;
        text-align: right;
    }
    #lipppmann img:last-of-type {
        margin-top: 20px;
    }
    #lipppmann hr:last-of-type {
        grid-row: 5;
    }
    #lipppmann span:last-of-type {
        text-align: right;
    }
    #gapaillard-schwoerer {
        margin-top: 27px;
    }
    #gapaillard-schwoerer img {
        grid-row: 1;
    }
    #gapaillard-schwoerer hr:last-of-type {
        grid-row: 2;
    }
    #gapaillard-schwoerer span:last-of-type {
        grid-row: 3;
        text-align: right;
    }
    #gapaillard-schwoerer video {
        margin-top: 26px;
    }
    #gapaillard-schwoerer span:first-of-type {
        grid-row: 6;
        text-align: right;
    }
    #degez-fujimoto {
        margin-top: 26px;
    }
    #degez-fujimoto img:last-of-type {
        grid-row: 1;
    }
    #degez-fujimoto hr:last-of-type {
        grid-row: 2;
    }
    #degez-fujimoto span:last-of-type {
        grid-row: 3;
        text-align: right;
    }
    #degez-fujimoto img:first-of-type {
        grid-row: 4;
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
        margin-top: 26px;
    }
    #degez-fujimoto hr:first-of-type {
        grid-column: 1/-2;
        grid-row: 5;
        width: calc(100% + var(--gutters));
    }
    #greco {
        margin-top: 23px;
    }
    #greco span {
        grid-row: 5;
        text-align: right;
    }
    #greco hr:first-of-type {
        grid-row: 2;
    }
    #greco hr:last-of-type {
        grid-row: 4;
    }
    #wonderland-schwoerer {
        margin-top: 24px;
    }
    #wonderland-schwoerer span:first-of-type {
        text-align: right;
    }
    #wonderland-schwoerer img:last-of-type {
        margin-top: 24px;
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #stelzenberger-yoan img:first-of-type {
        margin-top: 26px;
    }
    #stelzenberger-yoan span:first-of-type {
        text-align: right;
    }
    #stelzenberger-yoan img:last-of-type {
        margin-top: 24px;
        grid-column: 2/-2;
        width: calc(100% + (2 * var(--gutters)));
        transform: translateX(calc(var(--gutters) * -1));
    }
    #stelzenberger-yoan hr:last-of-type {
        grid-column: 1/-2;
        width: calc(100% + var(--gutters));
    }
    #dumas {
        margin-top: 25px;
    }
    #dumas span {
        text-align: right;
    }
    #zaghian-perriau img:first-of-type {
        margin-top: 29px;
    }
    #zaghian-perriau img:last-of-type {
        margin-top: 26px;
    }
    #zaghian-perriau span:last-of-type {
        text-align: right;
    }
    #mongins span {
        grid-row: 4;
        text-align: right;
    }
    #mongins img:first-of-type {
        margin-top: 24px;
    }
    #mongins img:last-of-type {
        margin-top: 20px;
    }
}