/***** top page *****/
.top_page                   { position: relative; padding-top: 100px;}
.top_page .titre            { font-size: 14px; color: #031C49; margin-bottom: 0; line-height: 20px;}
.top_page .titre_main       { font-size: clamp(24px, 3vw, 38px); line-height: 160%; color: var(--mainColor1);}

.wrapper.content            { z-index: 10;}
.chapo                      { margin-bottom: 0;}
.bg                         { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) calc(100% - 140px), rgba(236, 250, 255, 1) calc(100% - 140px), rgba(236, 250, 255, 1) 100%); }
.bg:after                   { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../images/wave-top.svg") 50% calc(100% - 140px) repeat-x; }
.wave                       { position: absolute;}
.wave img                   { width: 100vw; height: auto;} 

.sous_titre                 { color: var(--mainColor1);}

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

@media (max-width:700px) {
.top_page                   { padding-top: 100px;}
}

/***** breadcrumb *****/
.breadcrumb							            { margin:60px 0 60px 0; line-height: 0; position: relative; z-index: 10;}
.breadcrumb li 						            { display: inline-block; font-size: 12px; line-height: 20px; margin-right: 30px; letter-spacing: 0.6px; position: relative;}
.breadcrumb li a						        { color: var(--mainColor2);}
.breadcrumb li:after				            { width: 1px; height: 10px; position: absolute; right: -16px; top: 6px; background: var(--mainColor1); content: "";}
.breadcrumb li:last-child:after 	            { display: none;}
.breadcrumb li a.active 			            { color: var(--mainColor1);}
.breadcrumb li:last-child a 		            { color: var(--mainColor1);}

@media (min-width:1201px) {
.breadcrumb a:hover                             { color: var(--mainColor2);}
}

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

/***** bloc grid *****/
.bloc-grid                              { width: 90vw; max-width: var(--wrapperM); 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(--wrapperL); }
.bloc-grid.full .texte                  { padding-right: 100px; padding-left: 0;}
.bloc-grid.full .photo img              { width: 100%; height: auto; border-radius: var(--imgRadius);}
.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 .photo.col-2                 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0 40px;  }
.bloc-grid .photo.col-2 img             { width: 100%; height: auto; }

.bloc-info { width: 90vw; max-width: var(--wrapperS); margin: var(--marginTB); display: block; background: var(--mainColor3); color: #ffffff; font: 400 22px / 30px var(--fontBody); padding: 60px; text-align: center; letter-spacing: 3px; border-radius: var(--imgRadius);}
.bloc-info :last-child { margin-bottom: 0;}

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

@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-size: 18px;}
}
@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 contact *****/
.bloc-contact                           { width: 90vw; max-width: var(--wrapperS); text-align: center; margin: var(--marginTB); border-radius: var(--imgRadius); background: var(--mainColor3); color: #ffffff; padding: 40px;}
.bloc-contact a                         { margin: 0 5px;}
@media (max-width:600px) {
.bloc-contact a                         { margin: 5px;}
}