body {
    /* marges et fond autour de ta grille 
            dans l'ordre haut droite bas gauche donc 20px sur la largeu et 40px sur la hauteur
            à toi de voir 
            ce qui rend le container-fluid utile ou pas?
            */   
            margin: 3px 3px 40px 3px;
    /*couleur de base du texte*/
    /* le reste se trouve dans le  Ajout.min.css c'est juste ce qui chnage dans cette page*/
}

.grid {
    display: grid;
    grid-gap: 5px;/*marges entre box*/
    max-width: 100%;
    grid-template-columns: repeat(12, 1fr);
    background-color: #fff;
    color: #444;
    padding-bottom: 20px;
    margin-left: 40px;/*décalage à gauche retrait du soustritre plus joli*/
    /*marge de 15px avant le h2 espace entre chaque bloc*/
    border-radius: 10px;
    /* arrondi de la grille globale*/
}

/*box*/
.grid>div {
    padding: 5px;
    /*marge à l'intérieur de la box*/
    border-radius: 7px;
    /* dé&calage à gauche pour les sous titres*/
}

/*couleur de fond on laisse les couleurs des fonds */

.fondreset {
    background: white !important;
}

.fond1 {
    background-color: rgb(222, 213, 198);
}

.fond2 {
    background-color: rgb(245, 121, 121);
}
.fond3 {
    background-color: antiquewhite;
}

/******** version ou on enlève les fonds background-color et les bordures border
le css de production la base que tu enrichies
Ce fichier Grille.css  montre le contenu de la verison compressée Grille.min.css 
que l'on met en production
***** */
/*1 rangée de 12 col pour le titre par exemple*/
.col1 {
    grid-column: span 12;
    padding: 5px;
    margin-bottom: 15px;/*
    background-color: rgb(197, 237, 190);
    border-radius: 15px;*/
}

.col1a {
    grid-column: span 12;
    padding: 5px;
}

/* rangée habituelle 2col +10 col =12 col*/
.col2 {
    grid-column: span 2;
    padding: 5px;
    /*2col*/
    /* enlever les bodure et couleur de fond si tu veux
    background-color: rgb(248, 246, 250);
    border: 2px solid red;*/
}

.col2a {
    grid-column: span 10;
    padding: 5px;
    /*10 col
    background-color: rgb(248, 246, 250);
    border: 2px solid red;*/
}

/* rangée habituelle 2col +10 col =12 col*/
.col3a {
    grid-column: span 3;
    padding: 5px;
    /*2col*/
    /* enlever les bodure et couleur de fond si tu veux
    background-color: rgb(248, 246, 250);
    border: 2px solid red;*/
}

.col3b {
    grid-column: span 9;
    padding: 5px;
    /*10 col
    background-color: rgb(248, 246, 250);
    border: 2px solid red;*/
}



/* voir header titre et 1 photo de chaque coté */
.col3headerG {
    grid-column: span 2;
    padding: 5px;
    /*2col*/
    /* enlever les bodure et couleur de fond si tu veux
            background-color: rgb(233, 227, 239);
            border: 2px solid red;*/
}

/* case du milieu du footer  */
.col3headerM {
    margin-top: 20px;
    grid-column: span 8;
    /*10 col
            background-color: rgb(222, 235, 152);
            border: 2px solid red;*/
}

.col3headerD {
    grid-column: span 2;
    /*10 col
            background-color: rgb(247, 224, 244);
            border: 2px solid red;*/
}




/* voir footer */
/* rangée habituelle  voir footer 2col +8col + 2col = 12col*/
.col3footerG {
    grid-column: span 2;
    /*2col*/
    /* enlever les bodure et couleur de fond si tu veux
            background-color: rgb(233, 227, 239);
            border: 2px solid red;*/
}

/* case du milieu du footer  */
.col3footerM {
    margin-top: 20px;
    grid-column: span 8;
    /*10 col
    background-color: rgb(222, 235, 152);
    border: 2px solid red;*/
}

.col3footerD {
    grid-column: span 2;
    /*10 col
            background-color: rgb(247, 224, 244);
            border: 2px solid red;*/
}


/* rangée de 3col 3x4col=12 */
.col3 {
    grid-column: auto / span 4;
    padding: 5px;
    /*
    background-color: rgb(234, 215, 187);*/
}

/* rangée de 4col 4x3col=12 */
.col4 {
    grid-column: auto / span 3;
    padding: 5px;
    /*
    background-color: rgb(234, 215, 187);*/
}

/* rangée de 4col 4x3col=12 */
.col4a {
    grid-column: auto / span 3;
    gap: 0 0;
    margin: 0;
    padding: 5px;
}

/* rangée de 6col 2x6col=12 */
.col6 {
    grid-column: auto / span 6;
    /*
            grid-row: auto / span 3; si tu veux plusieurs rangées
    background-color: rgb(179, 185, 243);*/
}


/*ombres sur les box*/
.boxOmbre {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
}

.boxOmbre1 {
    border: 1px solid;
    padding: 4px;
    box-shadow: 5px 10px 20px #888888;
}

/* bloc les uns sous les autres jusqu'à une largeur de 600px*/
@media only screen and (max-width: 600px) {
    .grid {
        grid-row: inherit;
        display: block;
        /*  met les colonne les unes sous les autres petit écran  */
    }

}