/* Tablettes en mode paysage et petits écrans */
@media screen and (max-width: 1200px) {
    main {
        padding: 40px 32px;
        gap: 24px;
    }

    .titre-projet {
        font-size: 80px;
    }

    .photo_tdf {
        padding: 0 32px;
        gap: 24px;
    }
}

/* Tablettes en mode portrait */
@media screen and (max-width: 900px) {
    main {
        padding: 30px 24px;
        gap: 20px;
    }

    .titre-projet {
        grid-column: 2 / span 10;
        font-size: 60px;
    }

    .photo_tdf {
        padding: 0 24px;
        gap: 20px;
    }

    .sous-titre-projet {
        font-size: 22px;
    }

    /* Réorganisation simple en 2 colonnes */
    .img_tdf_1, .img_tdf_2, .img_tdf_3, .img_tdf_4, .img_tdf_5,
    .img_tdf_6, .img_tdf_7, .img_tdf_8, .img_tdf_9, .img_tdf_10,
    .img_tdf_11, .img_tdf_12, .img_tdf_13, .img_tdf_14 {
        grid-column: 2 / span 10;
        margin-top: 0;
    }
}

/* Smartphones en mode paysage et plus petit */
@media screen and (max-width: 768px) {
    main {
        padding: 25px 20px;
        gap: 16px;
    }

    .titre-projet {
        font-size: 50px;
    }

    .photo_tdf {
        padding: 0 20px;
        gap: 16px;
    }

    .sous-titre-projet {
        font-size: 20px;
    }

    /* Une seule colonne sur mobile */
    .img_tdf_1, .img_tdf_2, .img_tdf_3, .img_tdf_4, .img_tdf_5,
    .img_tdf_6, .img_tdf_7, .img_tdf_8, .img_tdf_9, .img_tdf_10,
    .img_tdf_11, .img_tdf_12, .img_tdf_13, .img_tdf_14 {
        grid-column: 1 / span 12;
        margin-top: 0;
    }
}

/* Smartphones en mode portrait */
@media screen and (max-width: 480px) {
    main {
        padding: 20px 16px;
        gap: 12px;
    }

    .fleche-retour {
        grid-column: 1 / span 2;
    }

    .titre-projet {
        grid-column: 1 / span 12;
        font-size: 40px;
    }

    .contenu-projet {
        grid-column: 1 / span 12;
    }

    .photo_tdf {
        padding: 0 16px;
        gap: 12px;
    }

    .sous-titre-projet {
        font-size: 18px;
    }
}

/* Très petits écrans */
@media screen and (max-width: 320px) {
    .titre-projet {
        font-size: 32px;
    }

    .sous-titre-projet {
        font-size: 16px;
    }

    .photo_tdf {
        gap: 8px;
    }
}