/***** top_page *****/
.top_page                          	{ position: relative; padding-top: 180px; background: #eeeeee80; padding-bottom: 100px; overflow: hidden;}
.top_page .content                 	{ width: 90vw; max-width: var(--maxWidthWrapper); margin: 0 auto; position: relative;}
.titre_main	 						{ font: 400 clamp(22px, 3vw, 35px)/130% "Roboto"; }
.chapo                              { margin-bottom: 0;}
.titre-small                        { color: #690d0b; margin-top: 10px;}
.sous_titre                         { color: #d10000;}
.page_content                       { overflow: hidden;}


@media (max-width:1000px) { 
.top_page                { padding-top: 140px; padding-bottom: 60px;}    
}


/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; margin-top: 20px; margin-bottom: 30px; background: #ffffff; padding: 10px 20px; display: inline-block;}
.breadcrumb a                       { color: #222222;}
.breadcrumb a.active                { color: #690d0b;}
.breadcrumb li 						{ display: inline-block; font-size: 12px; line-height: 20px; letter-spacing: 0.4px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 10px; position: absolute; right: -15px; top: 5px; background: #222222; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li:last-child        	{ margin-right: 0;}
.breadcrumb li:last-child a       	{ color: #690d0b;}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:#690d0b;}
}
@media (max-width:1200px) {
.breadcrumb li                      { margin-right: 30px;}
.breadcrumb li::after               { right: -15px;}
}
@media (max-width:1000px) { 
.breadcrumb							{ display: none;}
}



/***** bloc grid *****/
.bloc-grid                              { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: 40px 80px; position: relative;}
.bloc-grid.full                         { width: 90vw; max-width: var(--maxWidthWrapperLarge); }
.bloc-grid.full .texte                  { padding-right: 100px; padding-left: 0;}
.bloc-grid.full .photo img              { width: 100%; height: auto; border-radius: var(--allImgBR);}
.bloc-grid.reverse .texte               { order: 1; padding-left: 100px; padding-right: 0;}
.bloc-grid.reverse .photo               { order: 2;}
.bloc-grid .texte :last-child           {margin-bottom: 0;}

.bloc-info { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: block;  background: var(--bgColorLight); color: #06001B; font: 400 22px / 30px "Roboto"; padding: 60px; text-align: center;}

.bloc-texte { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: block; } 

.bloc-grid:before           { position: absolute; left: -100%; right: 60%; top: 10%; bottom: -10%; background: var(--bgColorLight); border-radius: 0; visibility: visible; content: ""; z-index: -1; }
.bloc-grid.reverse:before   { right: -100%; left: 60%;}

.bloc-occasion              { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: grid; grid-template-columns: 40% 1fr; align-items: center; grid-gap: 40px 80px; position: relative;}
.bloc-occasion .photo img   { max-width: 100%; height: auto;}

@media (max-width:1366px) {
.bloc-grid { align-items: start;}
.bloc-grid:before { content: none;}
}

@media (max-width:1200px) {
.bloc-grid                              { grid-gap: 40px 40px;}
.bloc-grid.full .texte,
.bloc-grid.reverse .texte               { padding-right: 0; padding-left: 0;}
.bloc-info                              { font: 400 18px / 26px "Roboto";}
}
@media (max-width:1000px) {
.bloc-grid                              { grid-template-columns:1fr; }   
.bloc-grid.reverse .texte               { order: 2;}
.bloc-grid.reverse .photo               { order: 1;} 
.bloc-grid.first .texte                 { order: 1;}
.bloc-grid.first .photo                 { order: 2;} 
.bloc-grid.full .photo img              { height: 50vw; object-fit: cover;}
.bloc-occasion                          { grid-gap: 40px 40px;}
}
@media (max-width:1000px) {
.bloc-occasion                          { grid-template-columns: 30% 1fr; align-items: start;}    
}
@media (max-width:600px) {
.bloc-occasion                          { grid-template-columns: 1fr; grid-gap: 80px 0;}  
.bloc-occasion .photo img               { width: 100%; height: 60vw; object-fit: cover;}
}