body {
    background-color: rgba(204, 204, 154, 1);
}

img {
    width: 100%;
    /* largeur = celle du PARENT */
}

.Principal {
    display: grid;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    /*border: 2px solid red;*/
}

.TXT {
    font-size: 1.2em;
    text-shadow: 0 0 3px black;
    font-style: italic;
    color: white;
    align-self: flex-end;
}

.SRG,
.TSH,
.STP,
.RPA {
    padding: 0.5em;
    /*sur 4 cotes*/
    margin-top: 0.5em;
    justify-self: center;
    /*d'abord selon axe  horizontal*/
    align-self: center;
    /*axe vertical*/
    text-align: center;
    border: 0.1em solid;
    font-size: 1.5em;
    border-radius: 5em;
    color: darkslategrey;
    background-color: rgba(204, 204, 154, 1);
}

/*
/* ************** IMAGE PHONE VERTICAL ****** */
@media screen and (max-width :29.995em) and (orientation : portrait) {
    .Principal {
        /*grid-template-columns: 1fr;*/
    }

    #MaPhoto-IH,
    #MaPhoto-TH,
    #MaPhoto-TV {
        display: none;
    }

    .PHT-IVn {
        grid-row: 2;
        grid-column: 1;
    }

    .TXT {
        grid-row: 2;
        grid-column: 1;
    }

    .RPA {
        grid-row: 1;
        margin-top: 0.2em;
        font-size: 0.75em;
        margin-bottom: 0.5em;
    }

    .BLOCB {
        text-align: center;
        justify-self: center;
        align-self: center;
    }

    .TSH,
    .STP,
    .SRG {
        font-size: 1.25em;
    }
}

/* ************** IMAGE PHONE HORIZONTAL ****** */
@media screen and (max-width :51.25em) and (orientation: landscape) {
    .Principal {
        /*border: 2px solid red;*/
        grid-template-columns: 2.95fr 0.05fr 0.50fr;
        grid-template-rows: 9% 91%;
    }

    #MaPhoto-IV,
    #MaPhoto-TH,
    #MaPhoto-TV {
        display: none;
    }

    .PHT-IHn,
    .TXT {
        grid-column: 1;
        grid-row: 2/5;
    }

    .RPA {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0.5em;
        font-size: 0.9em;
    }

    .BLOCB {
        grid-column: 3;
        grid-row: 2;
    }

}

/* ************** IMAGE TABLET HORIZONTAL ****** */
@media screen and (min-width : 51.3125em) and (max-width :80em) and (orientation : landscape) {
    .Principal {
        /*border: 2px solid red;*/
        grid-template-columns: 3fr 0.2fr 1fr;
        grid-template-rows: 8% 92%;
    }

    #MaPhoto-IV,
    #MaPhoto-IH,
    #MaPhoto-TV {
        display: none;
    }

    .PHT-THn,
    .TXT {
        grid-column: 1;
        grid-row: 2;
    }

    .RPA {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0.7em;
        font-size: 0.9em;
    }

    .BLOCB {
        /*border: 0.1em solid;
        color: darkslategrey;*/
        grid-column: 3;
        grid-row: 2;
    }

}

/* ************** IMAGE TABLET VERTICAL ****** */
@media screen and (min-width : 30em) and (orientation : portrait) {
    .Principal {
        /*border: 2px solid blue;*/
    }

    #MaPhoto-IH,
    #MaPhoto-IV,
    #MaPhoto-TH {
        display: none;
    }

    .PHT-TVn {
        grid-row: 2;
        grid-column: 1;
    }

    .BLOCB {
        text-align: center;
        justify-self: center;
        align-self: center;
    }

    .TXT {
        grid-row: 2;
        grid-column: 1;
    }

    .RPA {
        grid-row: 1;
        margin-bottom: 0.5em;
        font-size: 0.75em;
    }

}