/* Global */

.tri {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    align-items: center;
    /* On réduit le padding du bas (passé de 24px à 12px) */
    padding: 24px 100px 24px; 
    background-color: #F2F4F6;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #003f87 #e6e8ef;
}

.tri::-webkit-scrollbar{
    height: 8px;
}

.tri::-webkit-scrollbar-track{
    background: #e6e8ef;
    border-radius: 999px;
}

.tri::-webkit-scrollbar-thumb{
    background: #003f87;
    border-radius: 999px;
}

.tri-item{
    padding:10px 18px;
    border-radius:999px;
    background:#e6e8ef;
    color:#394152;
    cursor:pointer;
    font-weight:600;
    transition: background 0.2s ease, color 0.2s ease;
    border:1px solid transparent;
    flex:0 0 auto;
}

.tri-item:hover{
    background:#d7ddec;
}

.tri-item.active{
    background:#003f87;
    color:#ffffff;
    border-color:#002b61;
}



.modif_link{
    width:48px;
    height:auto;
    
}









/* Ordinateur */
@media screen and (min-width : 900px){
    main{
        padding:100px 100px 0px 100px;
    }

    .page-title-container{
        max-width:75%;
    }

    .realisations-firstrow{
        display:grid;
        grid-template-columns: minmax(420px, 3.5fr) minmax(260px, 1fr);
        gap:24px;
        align-items:start;
    }

    .first-row-infos{
        display:flex;
        flex-direction:column;
        gap:18px;
        background-color:#4D4C4C;
        color:white;
        padding:32px;
        min-width:260px;
        max-width:320px;
    }

    .machine-icone{
        width: 16px;
        height: 16px;
    }

    .realisations-firstrow{
        display:grid;
        grid-template-columns: minmax(280px, 2.2fr) minmax(220px, 1fr);
        gap:36px;
        margin-top:40px;
        align-items:stretch;
        min-width:0;
    }

    .realisations-firstrow > .realisation-card:first-child{
        min-height:600px;
        max-height:600px;
    }

    .first-row-infos{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        gap:24px;
        background-color:#3c3c3c;
        color:#ffffff;
        padding:40px;
        border-radius:28px;
        min-height:520px;
        align-self:stretch;
        min-width:0;
        max-width:none;
    }

    .first-row-infos .machine-icone{
        width:50px;
        height:50px;
    }

    .first-row-infos h4{
        margin:0;
        font-size:2.25rem;
        line-height:1.1;
    }

    .first-row-infos p{
        margin:0;
        font-size:1rem;
        color: #d1d5db;
        line-height:1.9;
    }

    .first-row-infos p{
        margin:0;
        color: #d1d5db;
        line-height:1.8;
    }

    .button-holder{
        display:flex;
        width:100%;
        justify-content:center;
    }

    



    .realisations-content{
        padding:40px 75px 80px;
    }



    .realisation-card{
        position:relative;
        overflow:visible;
        border-radius:28px;
        box-shadow:0 30px 70px rgba(20,31,75,0.12);
        min-height:520px;
        background:#111;
    }

    .realisation-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .realisation-card .realisation-description{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        padding:32px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.86) 100%);
        color:#ffffff;
    }

    .realisation-card .realisation-description h2{
        margin:0 0 12px;
        font-size:2rem;
        line-height:1.05;
    }

    .realisation-card .realisation-description p{
        margin:0;
        color: rgba(255,255,255,0.86);
        line-height:1.8;
    }

    .realisations-grid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap:24px;
        margin-top:40px;
    }

}







/* Tablette */
@media screen and (min-width : 600px) and (max-width : 900px) {
    main{
        padding:75px 75px 0px 75px;
        margin-bottom:50px;
    }
    
    h3{
        font-family:"Inter", sans-serif;
        font-size: 1rem;
        letter-spacing: 15%;
        font-weight:bold;
        color:#003F87;
    }

    .page-title-container{
        max-width:90%;
    }
    
    .tri{
        flex-wrap:nowrap;
        gap:12px;
        padding:24px 24px 24px;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
    }


    .realisations-content{
        padding:40px 15px 80px;
    }



    .realisation-card{
        position:relative;
        overflow:visible;
        border-radius:28px;
        box-shadow:0 30px 70px rgba(20,31,75,0.12);
        min-height:520px;
        background:#111;
    }

    .realisation-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .realisation-card .realisation-description{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        padding:32px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.86) 100%);
        color:#ffffff;
    }

    .realisation-card .realisation-description h2{
        margin:0 0 12px;
        font-size:2rem;
        line-height:1.05;
    }

    .realisation-card .realisation-description p{
        margin:0;
        color: rgba(255,255,255,0.86);
        line-height:1.8;
    }

    .realisations-grid{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:24px;
        margin-top:40px;
    }
}













/* Téléphone */
@media screen and (max-width : 600px) {
    main{
        padding:25px 25px 0px 25px;
    }
    
    h3{
        font-family:"Inter", sans-serif;
        font-size: 1rem;
        letter-spacing: 15%;
        font-weight:bold;
        color:#003F87;
    }

    .page-title-container{
        max-width:90%;
    }
    
    .tri{
        flex-wrap:nowrap;
        gap:12px;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
        padding:24px 16px 24px;
    }



    .realisations-content{
        padding:40px 20px 80px;
    }



    .realisation-card{
        position:relative;
        overflow:visible;
        border-radius:28px;
        box-shadow:0 30px 70px rgba(20,31,75,0.12);
        min-height:520px;
        background:#111;
        margin-bottom:75px;
    }

    .realisation-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .realisation-card .realisation-description{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        padding:32px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.86) 100%);
        color:#ffffff;
    }

    .realisation-card .realisation-description h2{
        margin:0 0 12px;
        font-size:2rem;
        line-height:1.05;
    }

    .realisation-card .realisation-description p{
        margin:0;
        color: rgba(255,255,255,0.86);
        line-height:1.8;
    }

    .realisations-grid{
        display:grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap:24px;
        margin-top:40px;
    }
}






.voir-plus{
        margin:50px 25px;
        padding:14px 24px;
        border:none;
        border-radius:999px;
        background:#003f87;
        color:#ffffff;
        cursor:pointer;
        transition: background 0.2s ease;
    }

    .voir-plus:hover{
        background:#002d6d;
    }

/* Styles spécifiques pour la page admin des réalisations */

/* Positionnement de l'icône de modification en haut à droite des cards */
.realisation-card {
    position: relative;
    overflow: visible;
}

.realisation-card a[href*="/modif"] {
    position: absolute;
    z-index: 998;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    transform: translate(50%, -50%);
    top: 3px;
    right: 3px;
}

.realisation-card a[href*="/modif"]:hover {
    background: rgba(255, 255, 255, 1);
    transform: translate(50%, -50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.realisation-card a[href*="/modif"] img {
    width: 46px;
    height: 46px;
    opacity: 0.8;
}

.realisation-card a[href*="/modif"]:hover img {
    opacity: 1;
}

/* Pour la première card qui a une structure différente */
/* (Removed redundant positioning) */

/* Responsive */
@media screen and (max-width: 900px) {
    .realisation-card{ 
        overflow: visible; 
    }
    .realisation-card a[href*="/modif"] {
        width: 48px;
        height: 48px;
        top: 12px;
        right: 12px;
    }

    .realisation-card a[href*="/modif"] img {
        width: 48px;
        height: 48px;
    }
}



.tri-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    align-items: center;
    /* On ajoute 20px de padding en bas pour éloigner la scrollbar */
    padding-bottom: 20px; 
    width: 100%;
}