p {
    color: darkcyan;
}
#italgras :is(i,strong) {
    color: orangered;
}
.pas_important {
    font-weight: normal;
    color: red;
}

.important {
    font-weight: bolder;
    color: red;
}
.pas_important {
    font-weight: normal;
    color: #000;
}
#important_wrapper {
    margin-left: 10px;
    border-left: 3px solid red;
    padding-left: 20px;
}


/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
#test_margin_padding { 
    padding: 30px; /* PADDING */
    margin: 30px; /* MARGIN */
    border: 1px solid;
    background-color: #e3dcff;
    border: 3px solid red;
}
/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding  */
#test_wrapper { 
    border: 1px solid gainsboro;
    background: #fdffdf; /* jaune */
    padding: 10px;
}
/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
#inner_content { 
    background-color: #cff0fb;
    padding: 0px;
}



#mousehover_movemargin_element {
    height: 130px;
    width: 130px;
    background: red;
    color: #FFF;
    padding: 20px;
    text-align: center;
    display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
}
#mousehover_movemargin:hover > #mousehover_movemargin_element {
    margin-left: calc(100% - 130px - 50px);
    background:yellow;
    transition: all 1s;
}


#test_wrapper:before {
    content: "margin";
    margin: 0px;
    font-size: 10px;
    position: absolute;
    margin-top: -5px;
}
#test_margin_padding:before {
    content: "padding";
    margin: 0px;
    font-size: 10px;
    position: absolute;
    margin-top: -25px;
    margin-left: -20px;
}




/* ID */
#text_principal {
    font-family: sans-serif;
    line-height: 0.4em;
}
/* CLASSE */
.para {
    background-color: yellowgreen;
}
/* CLASSE, autres instructions */
.fond_bleu {
    background-color: blue;
    color: #FFF;
}
/* CLASSE/ID plusieures cibles en même temps */
.para, #sad {
   font-weight: bold;
}
/* PSEUDO CLASSE :last-child */
p:last-child .para {
    background-color: orangered;
}




#margin_first,
#margin_seconde,
#margin_last {
    display: inline-block;
    border: 1px solid;
}    
.margin_left {
    margin-left: 100px
}
.margin_right {
    margin-right: 100px
}
.large {
    width:500px;
}
.petite {
    width:200px;
}


#top_margin_block {
    width: 100%
}
#margin_exemples_wrapper {
    background: greenyellow;
    border: 1px solid #000;
    display: block;
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 4rem;
}
.margin_exemples {
    display: inline;
    border: 1px solid #000;
    background: chartreuse;
    padding: 5px 5px 0 5px; /* EXEMPLE Padding */
    height: 100px; width: 100px;
    float: left;
}
.margin_exemples.margin_autour {
    margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
    height: auto; width: auto;
    min-height: 100px;
    background: lavender
}

.border {
    border:1px solid #000;
}
.cascade {
    margin-left: 10px;
    background: #FFF;
    text-align: center;
}
.cascade:hover {
    background: fuchsia;
}
#enfant p {
    text-transform: uppercase;
}