/***** top_page *****/
.page_content                       { margin-bottom: 120px;}
.top_page                           { padding: 235px 0 0;}
.top_page .chapo                    { margin-bottom: 0; margin-top: 10px;}

@media (max-width:1200px) { 
.top_page                           { padding: 150px 0 0;}
}
@media (max-width:1000px) { 
.page_content                       { margin-bottom: 80px;}
}
@media (max-width:700px) { 
.page_content                       { margin-bottom: 50px;}
}


/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding:0 0 40px;}
.breadcrumb a                       { color: var(--main-color);}
.breadcrumb a.active                { color: var(--second-color);}
.breadcrumb li 						{ display: inline-block; font: 400 12px/25px var(--font-main); letter-spacing: 0.4px; margin-right: 32px; position: relative;}
.breadcrumb li:last-child           { margin-right: 0;}
.breadcrumb li:not(:last-child):after { width: 1px; height: 10px; position: absolute; right: -20px; top: 8px; background: var(--main-color); content: ""; }

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color: var(--second-color);}
}
@media (max-width:1200px) { 
.breadcrumb							{ display: none;}
}

/***** page content *****/
.page_content 								{ position: relative;}
.page_content .ul_list a, 
.page_content ol a, 
.page_content p a							{ border-bottom: 1px solid transparent; padding-bottom: 2px; color: var(--second-color);}

@media (min-width:1201px) {
.page_content .ul_list a:hover,
.page_content ol a:hover,
.page_content p a:hover             { border-color: var(--second-color);}
}
@media (max-width:1000px) {
.page_content 								{ padding-bottom: 0;}
}


.bloc_texte                         { margin: 70px 0; position: relative;}
.photo                              { margin: 70px 0;}
.photo img                          { width: 100%; height: auto; object-fit: cover; min-height: 250px; display: block; border-radius: 30px;}
.bloc_texte p                       { margin-bottom: 15px;}

.bloc_texte.info    { border-radius: 10px; color: #ffffff; background: #96ac99; padding: 40px; max-width: 1024px; margin: 0 auto; font-weight: 600; text-align: center;}
.bloc_texte.info .sous_titre { color: #ffffff; font-weight: 700;}
.bloc_texte.info :last-child { margin-bottom: 0;}

.bloc_texte .ul_cadre    { max-width: 1024px; margin: 0 auto; }
.bloc_texte .ul_cadre li { border-left:10px solid #96ac99; padding-left: 30px; margin: 50px 0;}

@media (max-width:1000px) {
.bloc_texte                         { margin: 40px 0; position: relative;}
}
@media (max-width:700px) {
.photo                              { margin: 40px 0;}
.bloc_texte                         { margin: 50px 0;}
.photo img                          { border-radius: 10px;}
}


/***** blockquote *****/
.blockquote                         { text-align: center; border-radius: 10px; background: var(--beige); padding: 100px 90px 80px;position: relative; margin: 100px 0;}
.blockquote .experience             { position: absolute; top: -75px; left: 0; right: 0; margin: auto;}

@media (max-width:1000px) {
.blockquote                         { padding: 100px 30px 40px; margin: 100px 0 70px;}
}
@media (max-width:700px) {
.blockquote                         { padding: 60px 20px 40px; margin-bottom: 40px;}
.blockquote .experience             { width: 80px; height: auto; top: -40px;}
}


/***** documents *****/
.documents                          { margin: 100px 0 0; padding: 0;}

@media (max-width:1000px) {
.documents                          { margin: 80px 0;}
}
@media (max-width:700px) {
.documents                          { margin: 50px 0;}
}

/***** page blog *****/
.grid-bloc          { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 40px; margin: 100px auto; }
.grid-bloc .item    { position: relative; max-width: 100%; height: auto; border-radius: 5px; border: 1px solid #96ac99; padding: 40px;}
.grid-bloc .item .statut  { padding: 5px 10px; border-radius: 5px; color: #ffffff; font-size: 10px; font-weight: 600; text-transform: uppercase; background: #96ac99; width: max-content; margin-bottom: 20px;}
.grid-bloc .item a  { margin-top: 40px;}

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

@media (max-width:800px) {
    .grid-bloc .item    { padding: 20px; }
    .grid-bloc          { grid-template-columns: 1fr; gap: 30px 0; margin: 60px auto; }
}


/***** page marques *****/

.bloc-marques           { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 40px; margin: 100px auto;}
.bloc-marques .item img { max-width: 100%; height: auto; border-radius: 5px; border: 1px solid #96ac99;}

@media (max-width:1280px) {
.bloc-marques           { grid-template-columns: repeat(5, 1fr); gap: 30px 30px; margin: 80px auto;}
}

@media (max-width:1000px) {
.bloc-marques           { gap: 20px 20px; margin: 60px auto;}
}

@media (max-width:800px) {
.bloc-marques           { grid-template-columns: repeat(4, 1fr);}
}

@media (max-width:600px) {
.bloc-marques           { grid-template-columns: repeat(3, 1fr);}
}

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

/***** catalogues *****/
.catalogues                         { display: grid; grid-template-columns: repeat(5, 1fr); gap: 60px 35px; margin: 100px 0 80px;}
.catalogues .item                   { position: relative; display: block; border-radius: 10px; border: 1px solid var(--grey); overflow: hidden; text-align: center;}
.catalogues img                     { width: 100%; height: auto; display: block;}
.catalogues .item>span              { display: grid; align-items: center; justify-content: center; height: 95px; background: var(--beige); font-size: 14px; line-height: 24px; padding: 10px 20px;}

.grid-catalogue					{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:20px;}
.grid-catalogue span				{ display:block; font-size:0; line-height:0; text-align:center; border-radius: 10px; overflow: hidden;}
.grid-catalogue span *				{ transition:all 400ms ease-in-out;}
.grid-catalogue span:before			{ width:100%; height:100%; background:#96ac99; position:absolute; left:0; top:0; opacity:0; content:""; border-radius: 10px;}
.grid-catalogue img				{ width:100%; height:auto;}
.grid-catalogue h3				{ width:100%; padding:0 30px; position:absolute; left:0; bottom:30px; font-size:16px; line-height:24px; font-weight:400; color:#fff;}
.grid-catalogue p				{ width:100%; padding:30px; position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); font-size:16px; line-height:26px; color:#fff; opacity:0;}


@media (min-width:1201px) {
.grid-catalogue span:hover:before	{ opacity:1;}
.grid-catalogue span:hover h3		{ opacity:0;}
.grid-catalogue span:hover p		{ opacity:1; top:50%;}
.grid-catalogue .animate.mask_bottom { position: relative;}
.catalogues .item::before           { content: ""; display: block; position: absolute; inset: -1px; background: url(../images/icone_download.svg) center no-repeat rgba(150, 172, 153, 0.8); opacity: 0;}
.catalogues .item:hover             { border-color: transparent;}
.catalogues .item:hover::before     { opacity: 1;}
}
@media (max-width:1280px) {
.catalogues                         { grid-template-columns: repeat(4, 1fr); gap: 40px 20px;}
.grid-catalogue					    { grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:1000px) {
.catalogues                         { grid-template-columns: repeat(3, 1fr);}
}
@media (max-width:700px) {
.catalogues                         { grid-template-columns: repeat(2, 1fr); gap: 30px 10px; margin-top: 40px;}
.grid-catalogue					    { grid-template-columns:1fr 1fr;}
}
@media (max-width:480px) {
.catalogues                         { grid-template-columns: 1fr; gap: 20px;}
.grid-catalogue					    { grid-template-columns:1fr;}
}



/***** moving galerie *****/
.moving_galerie 				    { width: auto; position: relative; text-align: center; margin: 100px 0 120px; overflow: hidden;}
.moving_galerie .row 			    { width: auto; display: flex; align-items: center; gap: 20px;}
.moving_galerie .row .item 		    { width: auto; display: flex; align-items: center; animation: scroll_gallery 80s linear infinite; gap: 20px;}
.moving_galerie .row .item img 	    { width: auto; height: 400px; display: block; margin: 0 auto; transition: all 300ms ease-in-out; border-radius: 40px;}

@keyframes scroll_gallery {
0%								    { transform: translate(0, 0);}
100% 							    { transform: translate(-100%, 0); }
}
@media (max-width:1000px) {
.moving_galerie                     { margin: 80px 0;}
}
@media (max-width:700px) {
.moving_galerie 				    { margin: 50px 0;}
.moving_galerie .row                { gap: 10px;}
.moving_galerie .row .item          { gap: 10px;}
.moving_galerie .row .item img      { width: 240px; object-fit: cover; height: 320px; border-radius: 20px;}
}