/* MIse en page generale */

    body {
        box-sizing: border-box;
        width: 95%;
        margin: 10px 10px 10px 10px;
        font:
          1em/1.3 Arial,
          Helvetica,
          sans-serif;
      }
      
    h1 {
        display: block;
        font-size: 2em;
        margin-top: 0em;
        margin-bottom: 0em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
      
/* Mise en page des pages générales */

    .gridindex {
        position: relative;
  		display: flex;
  		flex-flow: row wrap;
  		justify-content: flex-start;
 		width: 95%;
        list-style: none;
        margin: 10px 10px;
        padding: 0;
      }

    .gridindex li {
        flex-basis: 170px;
        height: auto;
        border: 1px solid #666;
        padding: 5px;
        background-color: HoneyDew;
       }
    
    .listeauteurs{
        display: none;
    }

/* Mise en page auteur */

      .grid {
        width: 95%;
        list-style: none;
        margin: 10px 10px;
        padding: 0;
        display: grid;
        grid-template-columns: 100%;        
        gap: 5px;
      }

      .grid li {
        width: 97%;
        height: auto;
        border: 1px solid #666;
        padding: 5px;
       }

      .grid li:first-child {
        width: 97%;
        border: 0;
        padding: 0;
       }
       
       .grid li:nth-child(2) {
        width: 97%;
        border: 0;
        padding: 0;
       }
      

/* Pour le mode appel telephone */

	  .container-appel {
  			position: absolute;
  			display: flex;
            flex-flow: column wrap;
            width: 281px;
 			height: 500px;
 			margin-top: 10px;
  			margin-left: 10px;
		 	justify-content: center;
            align-items: center;
			font-size: 1.5em;
 	  }
		
		.fond {
  			display: block;
			position: absolute;
		}
		
		.nom {
  			display: inline-block;
			position: absolute;
			top: 10px;
			color: white;
			visibility: hidden;
		}
		
		.photo {
  			display: block;
			position: absolute;
			width: 130px;
			height: auto;
			transform: translate(0, -50px);

		}
		
		.boutonvert {
  			display: block;
			position: absolute;
			transform: translate(70px, 150px);
   			background-color: transparent;
	    	font-size: 16px;
  			padding: 30px 30px;
  			border: none;
  			cursor: pointer;
  			border-radius: 50%;
		}

		.boutonrouge {
  			display: block;
			position: absolute;
			transform: translate(-70px, 150px);
   			background-color: transparent;
	    	font-size: 16px;
  			padding: 30px 30px;
  			border: none;
  			cursor: pointer;
  			border-radius: 50%;
		}		

/* Pour l'affichage photo et vieux telephone */

	    .container-photos {
  			position: relative;
  			display: block;
 			width: 100%;
 			height:230px;
        }

        .grandephoto {
  			display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 130px;
            height: 230px;
        }

       .boutoncomplet {
   			display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 130px;
            height: 230px;
       }

        .vieuxtelephone {
 			position: absolute;
            transform: translate(100%, -230px);
            width: 130px;
            height: auto;
        }

        .boutontel {
 			position: absolute;
            width: 150px;
            height:230px;
            transform: translate(100%, -100%);
   			background-color: transparent;
	    	font-size: 20px;
  			border: 0;
  			cursor: pointer;
        }
 
 /* Partie responsive */
 
      @media screen and (max-width: 600px) {

		.boutonrouge {
  			display: block;
			position: absolute;
			transform: translate(-70px, 150px);
   			background-color: transparent;
	    	font-size: 16px;
  			padding: 30px 30px;
  			border: none;
  			cursor: pointer;
  			border-radius: 50%;
		}		



      }

      @media screen and (min-width: 600px) {

        .grid {
            list-style: none;
            width: 95%;
            margin: 10px 10px 10px 10px;
            padding: 0;
            display: grid;
            grid-template-columns: 75%;        
            gap: 10px;
        }
      

      }