/***** top_page *****/
.top_page                          	{ position: relative; padding-top: 180px; background: #0d76bd; padding-bottom: 100px; overflow: hidden;}
.top_page .content                 	{ width: 90vw; max-width: var(--maxWidthWrapper); margin: 0 auto; position: relative; color: #ffffff;}
.top_page .titre_main	 			{ font: 800 clamp(25px, 4vw, 40px) / 120% "Roboto"; margin-bottom: 20px; color: #f6dc01; }
.titre_main	 						{ font: 800 clamp(25px, 4vw, 40px) / 120% "Roboto"; margin-bottom: 20px; color: #1b57a4; }
.chapo                              { margin-bottom: 0;}
.page_content                       { overflow: hidden;}
.ul_check.col-2                     { columns: 2;}

@media (max-width:1200px) { 
.top_page                { padding-top: 140px; padding-bottom: 60px;}   
.top_page .titre_main,
.titre_main	             { font-size: 30px;} 
}
@media (max-width:700px) { 
.top_page .titre_main,
.titre_main	             { font-size: 20px;}     
}
@media (max-width:600px) {
.ul_check.col-2                     { columns: 1;}
}

/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; margin-top: 20px; margin-bottom: 30px; background: #f6dc01; padding: 10px 20px; display: inline-block;}
.breadcrumb a                       { color: #222222;}
.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: #0d76bd;}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:#0d76bd;}
}
@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(--maxWidthWrapperSmall); margin: var(--marginTB); display: block; font: 400 20px / 30px "Roboto"; padding: 0 0 0 20px; border-left: 4px solid var(--mainColor4);}
.bloc-info :last-child { margin-bottom: 0;}

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

.bloc-grid:before           { width: 100%; height: 100%; position: absolute; right: 100%; left: -60%; top: 20px; border: 4px solid var(--mainColor4); transition: none;  content: ""; z-index: -20 }
.bloc-grid.reverse:before   { right: -100%; left: 60%;}


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

}

@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";}
.bloc-grid:before { content: none;}
}
@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;}
}