body {
    margin: 0;
    padding: 20px;
    word-wrap: break-word;
    /*briser les line trop longue */
}

.footer {
    margin: 0 10% 0 10%;
    padding: 5px;
    text-align: center;
}

.container>div {
    /*
    background-color: antiquewhite;
    border: solid 1px red;*/
    padding: 10px;
}

.container {
    display: grid;
    grid-template-columns: 2fr 10fr;
    grid-gap: 10px;
    padding: 5px 0px 0px 30px;
}

.col1 {
    /*  1 colonne pour le titre centrer*/
    display: grid;
    align-content: center;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 10px;
    /*
    background-color: antiquewhite;    */
    /*
    height: 400px;*/
}

.container2case {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-gap: 10px;
    padding: 5px 0px 0px 15px;
}

.container3case {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-gap: 10px;
    padding: 5px 0px 0px 15px;
}

/* 3 colonnes ********************  */
.containertitre {
    display: grid;
    grid-gap: 10px;
    /*
          background-color: rgb(160, 9, 9);*/
}


.c3rowauto {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    background-color: rgb(92, 238, 99);
    padding: 15px;
}

.c3 {
    /* pour les empiller verticalement 
              display: block;  */
    grid-template-columns: 1fr 70% 1fr;
    /*
          grid-template-rows: 1fr 1fr;*/
    padding: 2px 30px 2px 30px;
    /*
          background-color: rgb(238, 114, 92);*/
}

/*aligne en bas le titre*/
.c3itemtitre {
    display: grid;
    align-items: center;
    /* left and right */
    align-content: flex-end;
    /* up and down */
}

.c3colauto {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    padding: 15px;
    /*
          background-color: rgb(92, 238, 99);*/
}

.titre ul {
    margin-left: 15px;
    font-weight: 700;
    padding: 15px;
}

.itemtitre {
    /*
          border: 1px solid black;*/
    padding: 15px;
    border-radius: 15px;
}


.itemtitre1 {
    background-color: rgb(145, 236, 150);
    border: 3px solid black;
    border-radius: 10px;
    padding: 15px;
}

.itemtitre2 {
    background-color: rgb(155, 191, 249);
    border: 3px solid rgb(35, 6, 180);
    border-radius: 10px;
    padding: 15px;
}

.itemtitre3 {
    background-color: rgb(238, 197, 197);
    border: 3px solid rgb(229, 7, 7);
    border-radius: 10px;
    padding: 15px;
}

.itemtitre4 {
    background-color: antiquewhite;
    border: solid 1px red;
    border-radius: 15px;
}

.itemlogo {
    border: 1px solid black;
    background-color: rgb(222, 235, 152);
    padding: 15px;
    border-radius: 10px;
}



.hr-mb-5 {
    margin-bottom: 3rem !important;
}

.c3footer {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    padding: 15px;
    border: 1px solid black;
    background-color: rgb(222, 235, 152);
    padding: 15px 0px 15px 0px;
    padding: 15px;
}

/* liste ul sans puces  *************** */
.liste1 ul {
    list-style-type: none;
}

.liste1 li::before {
    margin-left: 5px;
}

.liste1 li {
    margin-left: 20px;
    padding-top: 5px;
    font-weight: 700;
}

.red {
    color: red;
}

/* titre et contact du dojo */
.item1 {
    grid-area: header;
    grid-area: ideo;
}

.c1head {
    display: grid;
    /*
            height: 400px;*/
    align-content: center;
    grid-template-columns: 2fr 8fr 2fr;
    gap: 10px;
    /*
            background-color: #2196F3;*/
    padding: 10px;
}

.c1head>div {
    /**/
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 1.8vmin;
}

.c1colcontact {
    display: grid;
    /*
            height: 400px;
            align-content: center;*/
    grid-template-columns: 3fr 6fr 3fr;
    gap: 10px;
    /*
            background-color: #2196F3;*/
    padding: 10px;
}

.c1colcontact>div {
    /*
            text-align: center;*/
    padding: 20px 0;
    font-size: 1.8vmin;
}


@media (min-width:576px) and (max-width:767.98px) {

    .container,
    .containertitre,
    .container2case,
    .container3case,
    .c1colcontact,
    .c1head {
        display: block;
        /*  met les colonne les unes sous les autres petit écran  */
    }
}