.bloc-text a,
.bloc-grid a               { color: var(--mainColor1);}
#footer                    { margin-top: 100px;}
.anchorL                    { top: -160px; position: relative;}
.link.link-brochure        { height: auto; line-height: 30px; padding: 20px 30px; color: #ffffff;}

/***** banner *****/
.banner                     { width: 100%; position: relative;}
.banner:before              { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,90%) 0%, rgba(0,0,0,0) 100%); transition: none; z-index: 5; content: "";}
.banner img                 { height: 80vh; max-height: 900px; min-height: 500px; width: 100%;  object-fit: cover;}
.banner .content            { position: absolute; bottom: 100px; width: 90vw; max-width: var(--maxWidthWrapperLarge); left: 50%; transform: translateX(-50%); z-index: 10;}
.banner .content .titre     { font-size:50px; line-height: 70px; color: #ffffff; max-width: 760px;}


@media (max-width:1200px) { 
.banner img                 { height: 80vh; max-height: 750px; min-height: 500px;}  
.banner .content .titre     { font-size:40px; line-height: 60px;} 
}

@media (max-width:1000px) { 
.banner img                 { height: 70vh; max-height: 750px; min-height: 500px;}  
}

@media (max-width:800px) { 
.banner .content .titre     { font-size:30px; line-height: 50px; max-width: 560px;}    
}

@media (max-width:600px) { 
.banner img                 { height: 60vh; max-height: 650px; min-height: 400px;}     
.banner .content .titre     { font-size:25px; line-height: 45px; max-width: 80%;}    
}

/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; margin-bottom: 10px;  display: inline-block; border-radius: 5px; background: #353b3790; padding: 10px 20px;}
.breadcrumb a,
.breadcrumb span                       { color: #ffffff;}
.breadcrumb a.active                { color: #ffffff;}
.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        	{ margin-right: 0;}
.breadcrumb li:last-child a       	{ color: #ffffff;}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:#ffffff;}
}
@media (max-width:1000px) { 
.breadcrumb							{ display: none;}
}


/***** bloc *****/
.bloc-text          { width: 90vw; max-width: var(--maxWidthWrapper); margin: var(--marginTB); display: block; }
.bloc-text .intro   { max-width: 560px; font-weight: 600; font-size: 30px; line-height: 44px; padding: 40px 0;} 




.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.align_top                    { align-items: start;} 
.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-grid-info                         { width: 90vw; max-width: var(--maxWidthWrapperSmall); gap: 0 40px; margin: var(--marginTB); display: grid; grid-template-columns: repeat(2, 1fr);}
.bloc-grid-info .item                   { overflow: hidden; background: var(--bgColorLight); border-radius: var(--allImgBR);}
.bloc-grid-info .item img               { max-width: 100%; height: auto;}
.bloc-grid-info .item .sous_titre       { padding: 30px 30px 0 30px; font: 400 22px / 24px "Outfit";}
.bloc-grid-info .item p                 { padding: 10px 30px 30px 30px;}


.bloc-info                  { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); display: block;  background: var(--mainColor1); color: #ffffff; font: 400 22px / 30px "Outfit"; padding: 60px; text-align: center; border-radius: var(--imgRadius);}
.bloc-info :last-child      { margin-bottom: 0;}
.bloc-info p a              { color: #ffffff;}
.bloc-info p a:hover        { border-bottom-color: #ffffff;}

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

.bloc-texte ul.ul_check    { margin: 40px 0;}

.bloc-grid .intro          { font-weight: 600; font-size: 22px; line-height: 42px;}

.item.center               { text-align: center;}

.bloc-grid .photo          { position: relative;}
.bloc-grid .photo .tag     { position: absolute; top: 20px; left: 20px; background:  var(--mainColor1); padding: 10px 20px; display: block; font-size: 12px; text-transform: uppercase; border-radius: 5px; color: #ffffff; font-weight: 600; z-index: 10;} 


@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 "Outfit";}
}
@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-info                         { grid-template-columns: 1fr;}
.bloc-grid:before                       { content: none;}
.bloc-grid-info .item img               { height: 50vw; object-fit: cover;}
}
@media (max-width:800px) {
.bloc-info                              { padding: 40px;}
.bloc-grid .intro                       { font-size: 20px; line-height: 38px;}
}
@media (max-width:600px) {
.bloc-grid .intro                       { font-size: 18px; line-height: 34px;}
}

/***** blog  *****/
.blog                         { width: 90vw; max-width: var(--maxWidthWrapperLarge); margin: var(--marginTB); display: grid; grid-template-columns: repeat(3, 1fr); gap
: 40px 40px;}
.blog .item                   { overflow: hidden; background: var(--bgColorLight); border-radius: var(--allImgBR);}
.blog .item .photo            { overflow: hidden; line-height: 0;}
.blog .item .photo img        { max-width: 100%; height: auto; object-fit: cover;  transition: all 300ms ease-in-out;}
.blog .item .photo .date      { width: 100px; height: 35px; text-align: center; font-size: 14px; line-height: 34px; border-radius: 0; background: #fff; position: absolute; right: 15px;    top: 15px; z-index: 10; border-radius: var(--linkRadius);}
.blog .item .sous_titre       { padding: 30px 30px 30px 30px; font: 600 16px / 24px "Raleway"; margin: 0;}

.blog .item .link_arrow       { width: 34px; height: 34px; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); background-position: -3px 50%;}



.bloc-text.dynamique img     { border-radius: var(--imgRadius); margin: 60px auto; max-width: 100%; height: auto; display: block; }
.bloc-text.dynamique h2, 		 
.bloc-text.dynamique h3,			 
.bloc-text.dynamique h4,
.bloc-text.dynamique h5,
.bloc-text.dynamique h6      { font: 600 25px / 32px "Raleway"; position: relative; margin-top: 40px; margin-bottom: 20px; color: var(--mainColor1); display: block;}

.bloc-text.dynamique p       { margin-bottom: 30px;}

.bloc-text.dynamique ul                       { margin-bottom: 40px; list-style-type: none;}
.bloc-text.dynamique ul li                    { position: relative; padding-left: 35px; line-height: 25px; margin-bottom: 12px;}
.bloc-text.dynamique ul li:before             { width: 23px; height: 23px; position: absolute; left: 0; top: 5px; background: url(../images/check.svg) 0 0 / contain no-repeat; content: "";}

@media (min-width:1201px) {
.blog .item:hover .photo img  { transform: scale(1.1);}   
.blog .item:hover a           { color: var(--mainColor1);}
}

@media (max-width:1200px) {
.blog                         { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:800px) {
.blog                         { grid-template-columns: 1fr; }
.blog .item .photo img        { height: 50vw;} 
}


.bloc-grid.full .photo img   { transition: all 300ms ease-in-out; }
@media (min-width:1201px) {
.bloc-grid.full .photo a:hover img   { transform: scale(1.1); }
}


/***** hide  *****/
.hide                               { display: none; border-radius: var(--imgRadius); width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: var(--marginTB); padding: 60px;}
.read_more 			   	            { cursor: pointer; color: var(--mainColor2);}
.read_more.link                     { color: #ffffff;}
.read_less                          { cursor: pointer; color: var(--mainColor2);}
.hide_readMore .anchor              { top: -120px; position: relative;}
.hide_readMore                      { margin-top: 25px; position: relative; background: var(--bgColorLight); padding: 50px; border-radius: var(--imgRadius);}
.hide_readMore a                    { color: var(--mainColor1);}
.hide_readMore :last-child          { margin-bottom: 0;}


.read_less.close            { position: absolute; top: -20px; right: -20px; width: 50px; height: 50px; background: #790008; cursor: pointer; z-index: 50; border-radius: 50%; opacity: 0;}
.read_less.close:before		{ width: 24px; height: 2px; background: #ffffff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";}
.read_less.close:after		{ width: 2px; height: 24px; background: #ffffff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";}

.fadeIn {
   opacity: 1;
   transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
   }

@media (min-width:1201px) {
.read_more:hover                    { color: var(--mainColor1);}
.read_less:hover                    { color: var(--mainColor1);}
.read_more.link:hover               { color: #ffffff;}
}