/***** banner *****/

banner           { width: 90vw; max-width: 1740px; margin: 150px auto 100px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0 30px;  }
banner .item img { width: 100%; height: 750px; object-fit: cover;}
banner .item h1  { margin: 10px 0 40px 0; text-align: center;}

@media (max-width:1200px) {
banner           { width: inherit; margin-top: 110px; margin-left: -150px; margin-right: -150px; margin-bottom: 50px;}   
banner .item img { height: 100vh;}
}

@media (max-width:1000px) {
banner              { margin-left: -250px; margin-right: -250px;}  
banner .item img    { height: 80vh;}    
}

@media (max-width:800px) {
banner              { margin-left: -300px; margin-right: -300px; margin-bottom: 0;} 
banner .item img    { height: 60vh;}
banner .item:nth-child(2)           { display: grid;}
banner .item:nth-child(2) h1        { grid-area: 2 / 1; margin-top: 40px; margin-bottom: 0;}
banner .item:nth-child(2) img       { grid-area: 1 / 1;}
}

@media (max-width:600px) {
banner { margin-top: 80px;  grid-gap: 0 10px;}    
}

/***** bloc grid *****/
.bloc_grid .item.coordonnees        { background: #ffffff; padding: 20px; box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);}
.bloc_grid .item.coordonnees>div    { border: 1px solid #bfa477; padding: 45px 55px;}
.bloc_grid .item.coordonnees>div p  { margin-bottom: 30px; }
.bloc_grid .item.coordonnees>div p:last-of-type  { margin-bottom: 0; }

@media (max-width:1200px) {
.bloc_top_page .bloc_grid           { grid-template-columns: 1fr auto; }
.bloc_grid .item.coordonnees>div    { padding: 25px 35px;}  
.bloc_grid                          { align-items: start;} 
.bloc_grid-photo-slogan             { align-items: start;} 
.bloc_grid-photo-slogan-inner       { grid-template-columns: 1fr;}
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(1),
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(2)    { grid-area: inherit;}
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(1),
.bloc_grid-photo-slogan .bloc_grid-photo-slogan-inner .item:nth-child(1)            { padding: 40px;}
.bloc_grid-photo-slogan .bloc_grid-photo-slogan-inner .item:nth-child(2),
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(2)    { display: none;}
}

@media (max-width:800px) {
.bloc_grid.first                           { grid-template-columns: 1fr; margin-top: 0;}
.bloc_grid.first .item:nth-child(1)        { display: none;}    

.bloc_grid .item.coordonnees                    { text-align: center; padding:0; box-shadow: none;}
.bloc_grid .item.coordonnees>div                { padding: 0; border:none;}
.bloc_grid .item.coordonnees>div p.icone        { display: block;}
.bloc_grid .item.coordonnees>div p.icone img    { display: none;}
.bloc_grid .item.coordonnees>div a[href^=tel]   { color: #ffffff; background: #bfa477; display: block; padding: 15px 0;}

.bloc_grid-photo-slogan                  { grid-template-columns: 1fr; grid-gap: 40px 0;}
.bloc_grid-photo-slogan-inner            { display: none;}
.bloc_grid-photo-slogan.reverse .photo   {grid-area: 1 / 1;}
.bloc_grid-photo-slogan.reverse .texte   {grid-area: 2 / 1;}
}

/***** horaires *****/
.horaires               { position: relative; background-color: #f2f2f2; color: var(--colorBody); width: 100%; padding: 20px; vertical-align: top; margin-top: 25px; transition: all 300ms ease-in-out; z-index: 20;}
.horaires p             { cursor: pointer; position: relative; margin: 0; z-index: 10;}
.horaires p span        { text-transform: uppercase; }
.horaires:after         { width: 50px; height: 50px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url("../images/arrow_select.svg") 50% 52% no-repeat transparent; content:""; z-index: 1;}
.horaires.active:after  { transform: rotate(-180deg) translateY(50%);}
.horaires ul            { width: 100%; background: #bfa477; text-align: left; line-height: 30px; padding: 40px 30px 20px; position: absolute; left: 0; top: 100%; color: #fff; display: none;}
.horaires li            { display: grid; grid-template-columns: 80px 1fr; align-items: center;}
.horaires li.title      { display: block;}
.horaires li span       { text-align: left; padding: 0 0 0 30px;}

@media (max-width:1200px) {
.horaires               { max-width: none; text-align: left;}
}
@media (max-width:600px) {
.horaires               { padding: 15px 0 15px 20px; margin-top: 20px; }
.horaires ul            { padding: 40px 20px 20px;}
}

/***** bloc produits *****/
.bloc_produits              { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0 24px; width: 90vw; max-width: 1200px; margin: var(--marginBloc);}
.bloc_produits .item        { background: #ffffff; padding: 40px 20px; box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1); text-align: center;}
.bloc_produits .item img    { width: 100%; height: 340px; object-fit: cover; }
.bloc_produits .item h4     { font-weight: 600; text-transform: uppercase;} 
.bloc_produits .item h4 i   { display: block; font-weight: 400; text-transform: initial;} 
.bloc_produits .item .price { color: var(--colorTitle); margin-top: 15px; }
.bloc_produits .item a      { position: absolute; height: 100%; width: 100%; bottom: 0; left: 0; z-index: 10;}

@media (max-width:1200px) {
.bloc_produits                          { grid-template-columns: repeat(3, 1fr);}  
.bloc_produits .item.item:nth-child(4)  { display: none;} 
}

@media (max-width:800px) {
.bloc_produits      { display: none;}    
}

/***** bloc salon *****/
.bloc_salon                { display: block; width: 90vw; max-width: 1600px; margin: var(--marginBloc);}
.bloc_salon img            { width: 100%; height: auto; display: block; }
.bloc_salon .bloc_grid     { margin-top: -120px; align-items: start; grid-template-columns:1fr; }  
.bloc_salon .bloc_grid .item:nth-child(1) { padding-top: 50px;}

@media (max-width:800px) {
.bloc_salon .bloc_grid      { margin-top: inherit; grid-template-columns:1fr;}  
.bloc_salon .bloc_grid .item:nth-child(1)   {grid-area: 2 / 1;}
.bloc_salon .bloc_grid .item:nth-child(2)   {grid-area: 1 / 1;}  
.bloc_salon .bloc_grid .item.coordonnees    { text-align: left;}
.bloc_salon .bloc_grid .item:nth-child(1)   { padding-top: 0;}
.bloc_salon .bloc_grid .item:nth-child(1) .show_hide { margin: var(--marginBloc);}
}