/***** top *****/
.top_page { display: block; width: 90vw; max-width: 1200px; margin: 150px auto 40px auto;}

.breadcrumb                         { margin-bottom: 40px;}
.breadcrumb a                       { color: var(--colorBody); font-size: 13px;}
.breadcrumb li 						{ display: inline-block; line-height: 30px; letter-spacing: 1.2px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -16px; top: 11px; background: var(--colorBody); content: "";}
.breadcrumb li:last-child a       	{ color: var(--colorLinkHover);}
.breadcrumb li:last-child:after 	{ display: none;}

.top_page i                         { color: var(--colorLinkHover);}


@media (max-width:1200px) {
.top_page           { margin-top: 110px;}   
}

@media (max-width:1000px) {
.breadcrumb         { display: none;}
}

@media (max-width:800px) {
.top_page           { margin-top: 80px;}   
}


/***** class / ID / tag *****/
.anchor                     { top: -180px;}
h3                          { margin-bottom: 20px;}
.ul_list                    { margin-bottom: 30px;}
.ul_list.tarifs li          { border: 1px solid #ddd; border-top: 0; padding-left: 50px; transition: all 300ms ease-in-out;}
.ul_list.tarifs li:before   { width: 16px; height: 12px; position: absolute; left: 20px; top: 6px; background: url("../images/icone-li.svg") 0 0 / contain no-repeat; content: "";}
.ul_list.tarifs li span     { right: 20px; position: absolute;}
.ul_list.tarifs li:hover    { background: #f9f9f9;}
.show_hide                  { margin: var(--marginBloc);}


/***** bloc grid *****/
.bloc_top_page                      { display: block; width: 90vw; max-width: 1600px; margin: 40px auto 100px auto;}
.bloc_top_page>img                  { width: 100%; height: 580px; object-fit: cover; display: block; }

.bloc_top_page .bloc_txt_semeraro   { position: absolute; width: 140px; height: 580px; top:0; left: 0; background: #bfa477; display: flex; z-index: 10; justify-content: center; align-items: center;}
.bloc_top_page .bloc_txt_semeraro img { width: 27px; height: 238px;}

.bloc_top_page .bloc_grid                       { margin-top: -120px; align-items: start; }  
.bloc_top_page .bloc_grid .item:nth-child(1)    { padding-top: 200px;}
.bloc_top_page .bloc_grid p.quote,
.bloc_top_page .bloc_grid h2.quote              { margin-top: 20px;}
.bloc_top_page .bloc_grid p.quote:before,
.bloc_top_page .bloc_grid h2.quote:before       { content: ''; background: url("../images/icone-quote.svg") left top no-repeat; width: 53px; height: 40px; position: absolute; top:
-60px; }

.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; }


.bloc_grid .photo img                 { width: 100%; height: auto; object-fit: cover; }
.bloc_grid .texte p                   { margin-bottom: 30px; }
.bloc_grid .texte p:last-of-type      { margin-bottom: 0; }

.bloc_grid-photo-slogan p                   { margin-bottom: 30px; }
.bloc_grid-photo-slogan p:last-of-type      { margin-bottom: 0; }

.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(1) { grid-area: 1 / 1;}
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(2) { grid-area: 1 / 2;}

.bloc_texte p                   { margin-bottom: 30px; }
.bloc_texte p:last-of-type      { margin-bottom: 0; }

.bloc_texte ul.ul_list li                { border-bottom: 1px solid #ddd; padding-top: 15px; padding-bottom: 15px; margin-bottom: 0; }
.bloc_texte ul.ul_list li:nth-child(1)   { border-top: 1px solid #ddd;}
.bloc_texte ul.ul_list li:before         { top: 21px; }

@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) { padding: 40px;}
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(2) { display: none;}
}

@media (max-width:800px) {
.bloc_top_page>img                  { height: 50vh; }
.bloc_top_page .bloc_txt_semeraro   { height: 50vh; width: 70px; }

.bloc_top_page .bloc_grid                    { margin-top: 0; grid-template-columns: 1fr;} 
.bloc_top_page .bloc_grid .item:nth-child(1) { padding: 80px 40px 0 40px; }
.bloc_grid                                   { grid-template-columns: 1fr; grid-gap:40px 0;} 
.bloc_grid .photo img,
.bloc_grid-photo-slogan img                  { height: 50vh; object-fit: cover;}   
.bloc_grid-photo-slogan,
.bloc_grid-photo-slogan.reverse              { grid-template-columns: 1fr; grid-gap:40px 0;}  

.bloc_grid-photo-slogan.reverse .photo       {grid-area: 1 / 1; display: grid;}
.bloc_grid-photo-slogan.reverse .texte       {grid-area: 2 / 1;}

.bloc_grid-photo-slogan.reverse .photo img   {grid-area: 2 / 1;}
.bloc_grid-photo-slogan.reverse .photo div   {grid-area: 1 / 1;}
}

@media (max-width:600px) {
.bloc_top_page .bloc_txt_semeraro   { width: 50px; }
.bloc_top_page .bloc_txt_semeraro img { width: 20px; height: auto;}
}

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

@media (max-width:1000px) {
.bloc_produits           { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:800px) {
.bloc_produits           { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:600px) {
.bloc_produits           { grid-template-columns: 1fr; }
.bloc_produits a img     { height: auto; object-fit: cover; }
}


/***** tarifications - photos *****/
.bloc_tarifications          { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0 24px; width: 90vw; max-width: 1200px; margin-top: 40px; }
.bloc_tarifications .item    { background: #ffffff; padding:  20px; box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);}
.bloc_tarifications img      { width: 100%; height: 340px; object-fit: cover; }

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

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

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


/***** 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;}
}