.conteneur {
    display: grid;
    grid-template-columns: 0.6fr 1.8fr 0.6fr;
    grid-template-rows: 200px 0px 800px 100px 100px;
    grid-gap: 10px;

}
.box {

    }

    .une {
        grid-column: 1 / 4;
        font-size: 4vw; /* La taille de la police sera 5% de la largeur du viewport */
        font-family:'Fredoka One', sans-serif;
        color:#1A3678;
        letter-spacing: 0.1em;
        text-align : center;
    }

    .deux {
        grid-row: 2 / 5;
        grid-column: 1 / 2;
    }

    .trois {
        grid-row: 2 / 5;
        grid-column: 2 / 3;
        font-family: 'Open Sans', sans-serif;
    }
    ul {
        list-style-position: inside; /* Les puces seront à l'intérieur du conteneur */
        padding-left: 0; /* Enlever le padding de gauche */
    }
    
    li {
        word-wrap: break-word; /* Permet de casser les mots longs qui pourraient déborder */
        overflow-wrap: break-word; /* Assure que les mots longs ne dépassent pas */
        list-style-type: disc; /* Pour utiliser une puce standard */
    }
    
    .quatre {
        grid-row: 2 / 5;
        grid-column: 3 / 4;
    }
 

    
    

    main {
        flex:1;
        padding-top: 125px;
    }

    
    h2 {
        font-family: 'Open Sans', sans-serif;
        color:#064A06;
        font-weight:600;
        font-size: 2rem;
        text-align : center;
        margin-top:20px;
        margin-bottom:20px;
    
    }
    
    
    
    
    /* Media query pour les tablettes */
    @media (max-width: 1024px) and (min-width: 768px)  {
  
        .conteneur {
            grid-template-rows: 100px 600px 400px 400px 0px;

        
        }
        .une {
            grid-column: 1 / 4;
            font-size: 5vw; /* La taille de la police sera 5% de la largeur du viewport */
   
        }
    }
    
    
    
    
    @media (max-width: 767px) and (orientation:portrait) { /* Pour iPhone SE, appareils plus petits */
       
        .conteneur {
            display: grid;
            grid-template-columns: 0.6fr 1.8fr 0.6fr;
            grid-template-rows: 150px 0px 1800px 0px;
            grid-gap: 10px;
        
        }
        .une {
            padding-top:50px;
            grid-column: 1 / 4;
            margin-left: 10px;
            margin-right: 5px;
            font-size: 1.5rem; /* La taille de la police sera 5% de la largeur du viewport */
   
        }
        .trois {
            grid-column: 1 / 4;
            margin-left: 20px;
            margin-right: 10px;
        }
        h2 {

            font-size: 1.5rem;

        
        }
    }