/***** top_page *****/
.top_page                          	{ position: relative; background: var(--bgColorLight);; padding-top: 120px; padding-bottom: 100px;}
.top_page .content                 	{ width: 90vw; max-width: var(--maxWidthWrapper); margin: 0 auto; position: relative;}
.titre_main	 						{ color: var(--mainColor1); font: 400 50px / 58px "DM Sans"; margin-bottom: 15px; }
.chapo                              { margin-bottom: 0;}
.sous_titre                         { color: var(--mainColor1); }

@media (max-width:1200px) {
.titre_main	 						{ font: 400 40px / 48px "DM Sans"; }     
}

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

@media (max-width:800px) {
.top_page                { padding-top: 100px;}     
.titre_main              { font: 400 30px / 38px "DM Sans"; }     
}

/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding:0 0 40px; margin-top: 20px;}
.breadcrumb a                       { color: #ffffff;}
.breadcrumb a.active                { color: var(--mainColor1);}
.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: #ffffff; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li:last-child a       	{ color: var(--mainColor1);}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:var(--mainColor1);}
}
@media (max-width:1200px) {
.breadcrumb                         { padding-bottom: 30px;}
.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; }
.bloc-grid.full                         { width: 90vw; max-width: var(--maxWidthWrapperLarge); }
.bloc-grid.full .texte                  { padding-right: 100px; padding-left: 0;}
.bloc-grid.full .photo                  { position: relative;}
.bloc-grid.full .video                  { position: relative;}
.bloc-grid.full .photo img              { width: 100%; height: auto; border-radius: var(--allImgBR);}
.bloc-grid.full .video 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.reverse .video               { order: 2;}
.bloc-grid .texte :last-child           {margin-bottom: 0;}


.bloc-grid .photo:after, .bloc-grid .video:after             { position: absolute; left: -20px; top: 20px; border: 3px solid var(--mainColor1); transition: none; content: ""; width: 100%; height: 100%; display: block; z-index: -10;}
.bloc-grid.reverse .photo:after, .bloc-grid.reverse .video:after     { left: 20px;}

.bloc-grid .video a 						{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; border-radius: var(--allImgBR)}
.bloc-grid .video a span					{ position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; background: url("../images/play.svg") 55% 50% no-repeat var(--mainColor2); border-radius: 50%; transform: translate(-50%, -50%);}


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

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

.bloc-grid-3 { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px 40px; }
.bloc-grid-3 .item :last-child { margin-bottom: 0;}
.bloc-grid-3.color .item        { color: #ffffff;  border-radius: var(--allImgBR); background: var(--bgColorDark); padding: 40px;}
.bloc-grid-3.color .sous_titre  { color: var(--mainColor1); }

@media (max-width:1366px) {
.bloc-grid                              { grid-gap: 40px 40px; align-items: start;}
.bloc-grid.full .texte,
.bloc-grid.reverse .texte               { padding-right: 0; padding-left: 0;}
.bloc-info                              { font: 400 18px / 26px "DM Sans";}
}

@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-grid-3                            { grid-template-columns: repeat(2, 1fr); }    
.bloc-grid-3 .item:nth-child(3)         { grid-column: span 2;}
.bloc-grid .photo:after, .bloc-grid .video:after { content: none;}
}

@media (max-width:700px) {
.bloc-grid-3                            { grid-template-columns:1fr; }    
.bloc-grid-3 .item:nth-child(3)         { grid-column: span 1;}    
}

.cta_bloc { margin: var(--marginTB);}