body{
   display: grid;
   width:100%;
   height: 100vh;
    grid-template:
    "header" var(--header-height)
    "nav "   var(--nav-height)
    "mainTDC" auto
    "Article1" auto
    "Article2" auto
    "Article3" auto
    "Article4" auto
    "Article5" auto
    "Article6" auto
    "Article7" auto
    "Article8" auto
    "Article9" auto
    "Article10" auto
    "footer" var(--footer-height)
    / 1fr   ;
}   

/*  La définition des zones de la page  */

#pageHeader{grid-area: header;}
#mainNav{grid-area: nav;}
#mainTDC{grid-area: main;}
#HistoireTDC{grid-area: Article1;}
#SynopsisTDC{grid-area: Article2;}
#AvantLaRepre{grid-area: Article3;}
#DatesRep{grid-area: Article4;}
#DetForf{grid-area: Article5;}
#PossRepas{grid-area: Article6;}
#Tarifs{grid-area: Article7;}
#Condition{grid-area: Article8;}
#ChangementCXX{grid-area: Article9;}
#NousAcceptions{grid-area: Article10;}
#pageFooter{grid-area: footer;}


/*  La définition pour les médias  */
@media screen and (max-widht: 768px)   {
    body{
        grid-template:
        "header" var(--header-height)
        "nav "   auto
        "mainTDC" auto
        "Article1" auto
        "Article2" auto
        "Article3" auto
        "Article4" auto
        "Article5" auto
        "Article6" auto
        "Article7" auto
        "Article8" auto
        "Article9" auto
        "Article10" auto
        "RepaDuSoir" var(--footer-height)
        / 1fr   ;}
 } 
 
 .mainTDC{
   Width:100%;
   height: 10fr;
 }
 .itemTDC_Comp{
   Width:100%;
   height: 10fr;
 }

 .Image_TDC{
   width:100%;        
   height: 100%;
}
.Image_TDC img{
   width: 100%;
   height:95%;
}
.LesSections
{
   display: flex;
   flex-wrap: wrap;
   margin:0;
   padding:0;
   width: 100%;
   height: 15fr;
   margin-top:5px;
   border-radius: 15px;
   box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
   border: 1px inset var(--grisfonce);
   flex-direction: row;
}

.HistoireTDC{grid-area: Article1;}
.SynopsisTDC{grid-area: Article2;}
.AvantLaRepre{grid-area: Article3;}
.DatesRep{grid-area: Article4;}
.DetForf{grid-area: Article5;}
.PossRepas{grid-area: Article16;}
.Tarifs{grid-area: Article17;}
.Condition{grid-area: Article8;}
.ChangementCXX{grid-area: Article9;}
.NousAcceptions{grid-area: Article10;}

.itemTDC{
   width:100%;
   margin:5px;
}
.itemTDC:nth-child(1){
  width: 100%;
}

.itemUFD{
   width:100%;
   margin:5px;
   height: 15r;
}
.itemUFD:nth-child(1){
  width: 100%;
}

.ItemALSP{
   width:100%;
   height: 10fr;
   margin:5px;
}
.ItemALSP:nth-child(1){
  width: 70%;
}
.ItemALSP:nth-child(2){
  width: 20%;
  height: 50%;
}
.ImgMargot{
   width: 20%;
   height: 100%;}

.ImgPaulHippo{
      float: right;
      width: 20%;
      height: 80%;}
.itemUFD{
   width:100%;
   height: 20fr;
}
.itemUFD:nth-child(1){
  width: 100%;
}

.ItemANIM{
   width:100%;
   height: 10fr;
   margin:5px;
}
.ItemANIM:nth-child(1){
  width: 100%;
}
.ItemANIM:nth-child(2){
  width: 58%;
}
.ItemANIM:nth-child(3){
  width: 40%;
}



.ModeAccepte{
   margin-top:10px;
   display:flex;
   align-items: center;
}
.AvantTypePaiement{
   margin-top:10px
}

.Tarification table{
   border: 5px double var(--grisfonce);
   border-collapse : collapse;
   margin-left: 12%;
}
.Tarification td{
   border: 1PX solid var(--grisfonce);
   padding: 10px;
}
.PrixDesc{
   width: 70%;
   text-align: left;
}
.montant{
   text-align:right;
   width: 30%;
}
.Prix {
   margin: 10px;;
}
   @media screen and (max-width: 760px){
      .ItemANIM:nth-child(2){
         width: 50%;
       }
       .ItemANIM:nth-child(3){
         width: 40%;
         height:50%;
       } 
}

@media screen and (max-width: 500px){
   .ItemANIM:nth-child(2){
      width: 100%;
    }
    .ItemANIM:nth-child(3){
      width: 100%;
      height:30%;
    } 
    .ItemALSP{
      margin:0;
      height: 1fr;

    }
    .ItemALSP:nth-child(1){
      width: 100%;
    }
    .ItemALSP:nth-child(2){
      width: 100%;
    } 
    .ImgMargot,  .ImgPaulHippo{
       width: 100%;
       height: 30%;
      }
    
}