/* Page LISTING */
.blog 									{ position: relative;}
.blog .grid							    { display: grid; grid-template-columns:repeat(3,1fr); grid-gap: 40px 40px; position: relative; max-width: 1600px; width: 90vw; margin: 80px auto;}
.blog .item  							{ position: relative; overflow: hidden; font-size: 0; line-height: 0; background: #000000; border-radius: 10px}
.blog .item .sous_titre                 { line-height: 1.5; padding-right: 60px; font-size: 18px;}
.blog .item .sous_titre span            { display: block; font-size: 14px; margin-top: 10px;}
.blog .item a 							{ display: block;}
.blog .item a:after 					{ width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); z-index: 5; content: "";  }
.blog .item img 						{ max-width: 100%; height: auto; transition: all 400ms ease-in-out; opacity: .8;}
.blog .item .sous_titre				    { color: #fff; margin: 0; position: absolute; left: 30px; bottom: 25px; width: calc(100% - 60px); z-index: 10;}
.blog .item .titre_cap                  { display: block; font: 400 11px/30px "Open Sans"; letter-spacing: 1.7px; text-transform: uppercase; color: #fff;}
.blog .item .sous_titre:after 		    { content: ''; position: absolute; right: 0;  top: 50%;  transform: translate(0, -50%); width: 40px; height: 15px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40px' height='15px'><path fill-rule='evenodd'  fill='rgb(255, 255, 255)' d='M39.1000,7.108 C39.1000,6.701 39.800,6.295 39.400,6.194 L33.700,0.403 C33.300,-0.003 32.700,-0.003 32.300,0.403 C31.900,0.810 31.900,1.419 32.300,1.825 L36.500,6.092 L0.1000,6.092 C0.400,6.092 -0.000,6.499 -0.000,7.108 C-0.000,7.718 0.400,8.124 0.1000,8.124 L36.500,8.124 L32.300,12.391 C31.900,12.797 31.900,13.407 32.300,13.813 C32.700,14.219 33.300,14.219 33.700,13.813 L39.400,8.022 C39.700,7.921 39.1000,7.514 39.1000,7.108 Z'/></svg>");}

@media (min-width:1201px) {
.blog .item a:hover img 				{ filter: brightness(0.7);transform: scale(1.1);}
.blog .item a:hover .sous_titre:after 	{ right: 0; opacity: 1;}
}

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

@media (max-width:800px) {
.blog .grid							    { grid-template-columns:1fr; grid-gap: 30px 0;}
}

@media (max-width:400px) {
.blog .item .sous_titre                 { left: 15px; width: calc(100% - 30px);}
}



/***** blog *****/
.dynamique img                         { max-width: 100%; height: auto; margin: 40px auto; }

.dynamique h1,
.dynamique h2,
.dynamique h3,
.dynamique h4,
.dynamique h5,
.dynamique h6                           { font: 500 20px/30px "Open Sans"; position: relative; color: #156e63; margin-bottom: 15px; }

.bloc_texte.dynamique img               { margin-bottom: 40px;}

.dynamique ul                           { margin-bottom: 20px; padding: 5px 0 0 0; }
.dynamique ul li                        { padding: 5px 0 5px 30px; position: relative; line-height: 35px; background: url(../images/list.svg) no-repeat left top 15px; }

.dynamique .bloc_texte.steps            { padding-left: 140px;}
.dynamique .bloc_texte.steps .number    { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: #156e63; border-radius: 50%; text-align: center; line-height: 98px; font-size: 30px; color: #ffb941;}

.bloc-photo                             { display: grid; grid-template-columns:repeat(2,1fr); grid-gap: 40px; position: relative; max-width: 100%;  margin: 80px auto; }
.bloc-photo img                         { width: 100%; height: auto; border-radius: 10px; }

@media (max-width:1000px) {
.dynamique .bloc_texte.steps            { padding-left: 120px;}
.dynamique .bloc_texte.steps .number    { width: 80px; height: 80px; line-height: 78px; font-size: 20px;}
.bloc-photo                             { grid-gap: 20px;}
}

@media (max-width:800px) {
.dynamique h1,
.dynamique h2,
.dynamique h3,
.dynamique h4,
.dynamique h5,
.dynamique h6 {
font: 500 16px/24px "Open Sans";
}
.dynamique .bloc_texte.steps            { padding-left: 80px;}
.dynamique .bloc_texte.steps .number    { width: 60px; height: 60px; line-height: 58px; font-size: 20px;}
.bloc-photo                             { margin: 40px auto;}
}

@media (max-width:600px) {
.bloc-photo                             { grid-template-columns:1fr;}
.bloc-photo img:nth-child(2)            { display: none;}
}

@media (max-width:500px) {
.dynamique .bloc_texte.steps            { padding-left: 50px;}
.dynamique .bloc_texte.steps .number    { width: 40px; height: 40px; line-height: 38px; font-size: 14px;}
}


.grid_4                                { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 100px; margin: 60px auto;}
@media (max-width:1000px) {
.grid_4                                { grid-template-columns: 1fr; gap: 60px;}
}
@media (max-width:700px) {
.grid_4                                { gap: 20px;}
}


.bloc_grid.small_logo                  { grid-template-columns: 220px 1fr; }
.bloc_grid.small_logo img              { margin: 0;}
@media (max-width:1000px) {

}
@media (max-width:700px) {
.bloc_grid.small_logo                  { grid-template-columns: 1fr; }
.bloc_grid.small_logo img              { margin: 0 auto; max-width: 180px;}
}


.bloc_grid.small                       { margin: 30px auto; grid-template-columns: 400px 1fr; }

@media (max-width:1000px) {
.bloc_grid.small                       { grid-template-columns: 1fr; }

}
@media (max-width:700px) {

}



.cadre                                 { background-color: #156e63; padding: 40px; color: #fff; border-radius: 10px}
.cadre h3                              { color: #ffb941; }
@media (max-width:700px) {
.cadre                                 { padding: 20px; border-radius: 5px}
}