/* HABILLAGE */
section .habillage .information																					{position:relative; padding:180px 80px 40px; width:calc(100% - 160px); min-height:calc(100vh - 260px);}
section .habillage .information h1																				{position:initial; left:initial; top:initial; max-width:100%; font-size:40px; line-height:50px; max-width:1000px; padding:0 0 10px;}
section .habillage .information p																				{color:#FFF; font-size:30px; line-height:36px; max-width:1000px;}
section .habillage .information .point_fort																		{position:absolute; bottom:40px; left:80px; max-width:1400px;}
section .habillage .information .point_fort .fleche																{position:relative; font-size:20px; line-height:24px; color:#FFF; padding:20px 0 0px 30px;}
section .habillage .information .point_fort .fleche::before														{content:'▶'; position:absolute; left:0; top:22px;}
section .habillage .information .point_fort .gauche, section .habillage .information .point_fort .droite		{float:left; width:calc(50% - 10px); padding-right:10px;}
section .habillage .information .point_fort .droite																{padding-right:0px; padding-left:10px;}
section .habillage .triangle																					{position:absolute; bottom:0px; right:0px; width:180px; height:180px; padding:130px 50px 90px 170px; background:#5CA747; clip-path:polygon(0 40%, 100% 0, 100% 100%, 60% 100%); -webki-clip-path:polygon(0 40%, 100% 0, 100% 100%, 60% 100%);}
section .habillage .triangle svg, section .habillage .triangle svg rect,
section .habillage .triangle svg g, section .habillage .triangle svg g path										{fill:#000 !important;}
section .habillage .triangle svg .couleur																		{fill:#FFF !important;}
@media all and (max-width: 1750px) {
	section .habillage .information .point_fort																	{max-width:1000px;}
}
@media all and (max-width: 1700px) {
	section .habillage .information																				{padding:140px 20px 40px; width:calc(100% - 40px); min-height:calc(100vh - 220px);}
	section .habillage .information .point_fort																	{left:20px;}
	section .habillage .information .point_fort .fleche															{padding:10px 0 0 30px;}
	section .habillage .information .point_fort .fleche::before													{top:12px;}
}
@media all and (max-width: 1500px) {
	section .habillage .information .point_fort .gauche, section .habillage .information .point_fort .droite	{float:none; width:100%; padding-right:0px; padding-left:10px;}
}
@media all and (max-width: 1250px) {
	section .habillage .information																				{padding:130px 40px 40px; width:calc(100% - 80px); min-height:calc(100vh - 210px);}
	section .habillage .information .point_fort																	{left:40px; max-width:calc(100% - 300px);}
	section .habillage .triangle																				{width:100px; height:100px; padding:80px 40px 60px 120px;}
	section .habillage .triangle svg																			{width:100px; height:100px;}
}
@media all and (max-width: 900px) {
	section .habillage .information																				{padding:110px 20px 20px; width:calc(100% - 40px); min-height:calc(100vh - 170px);}
	section .habillage .information h1																			{font-size:30px; line-height:36px;}
	section .habillage .information p																			{font-size:22px; line-height:26px;}
	section .habillage .information .point_fort																	{position:initial; padding-top:20px; max-width:calc(100% - 190px);}
	section .habillage .information .point_fort .fleche															{font-size:20px; line-height:26px; padding-top:5px;}
	section .habillage .information .point_fort .fleche::before													{top:7px;}
	section .habillage .triangle																				{width:60px; height:60px; padding:60px 20px 40px 90px;}
	section .habillage .triangle svg																			{width:60px; height:60px;}
}
@media all and (max-width: 600px) {
	section .habillage .information h1																			{font-size:26px; line-height:30px;}
	section .habillage .information p																			{font-size:18px; line-height:20px;}
	section .habillage .information .point_fort .fleche															{font-size:16px; line-height:20px; padding-left:25px;}
}
@media all and (max-width: 450px) {
	section .habillage .information																				{padding:74px 20px 20px; min-height:calc(100vh - 134px);}
}

/* DESCRIPTIF */
section .descriptif																								{padding:80px;}
section .descriptif.gris																						{background:#e8eaea;}
section .descriptif .visuel																						{float:right; width:700px;}
section .descriptif .visuel img																					{width:100%; height:auto; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
section .descriptif .information																				{float:left; width:calc(100% - 780px);}
section .descriptif .information h4																				{font-size:50px; line-height:60px; font-weight:bold; padding:120px 0 20px;}
section .descriptif .information h3, section .descriptif .information .pied										{font-size:24px; line-height:32px; font-weight:bold; color:#5CA747; padding:0 0 20px;}
section .descriptif .information .pied																			{padding:20px 0 0;}
section .descriptif .information p, section .descriptif .information ul li										{font-size:24px; line-height:32px; padding:0 0 20px;}
section .descriptif .information ul li span																		{font-size:24px; line-height:32px; color:#1D1D1B !important;}
section .descriptif .information ul																				{margin:0 0 0 30px;}
section .descriptif .information ul li																			{color:#5CA747; padding:0 0 10px;}
section .descriptif.complement:not(.no_complement) .visuel														{float:left;}
section .descriptif.complement:not(.no_complement) .information													{float:right;}
section .descriptif.sirh .visuel																				{width:960px;}
section .descriptif.sirh .information																			{width:calc(100% - 1000px);}
section .descriptif.sirh .information h4																		{font-size:40px; line-height:50px; padding:0 0 20px;}
section .descriptif.sirh .information h3, section .descriptif.sirh .information .pied,
section .descriptif.sirh .information p, section .descriptif.sirh .information ul li,
section .descriptif.sirh .information ul li span																{font-size:20px; line-height:26px;}
section .descriptif.sirh .information .pied																		{padding:20px 0; font-weight:normal; color:#1D1D1B !important;}
@media all and (max-width: 1700px) {
	section .descriptif .visuel																					{width:600px;}
	section .descriptif .information																			{width:calc(100% - 680px);}
	section .descriptif .information h4																			{font-size:40px; line-height:50px; padding:0 0 20px;}
	section .descriptif .information p, section .descriptif .information h3,
	section .descriptif .information ul li, section .descriptif .information ul li span,
	section .descriptif .information .pied																		{font-size:20px; line-height:26px;}
	section .descriptif.sirh .visuel																			{width:760px;}
	section .descriptif.sirh .information																		{width:calc(100% - 800px);}
}
@media all and (max-width: 1600px) {
	section .descriptif .visuel																					{width:500px;}
	section .descriptif .information																			{width:calc(100% - 580px);}
	section .descriptif.sirh .visuel																			{float:none; width:100%; max-width:800px; margin:0 auto 20px;}
	section .descriptif.sirh .information																		{float:none; width:100%;}
}
@media all and (max-width: 1400px) {
	section .descriptif																							{padding:40px;}
	section .descriptif .visuel																					{width:400px;}
	section .descriptif .information																			{width:calc(100% - 440px);}
	section .descriptif .information h4																			{font-size:40px; line-height:50px;}
	section .descriptif .information p, section .descriptif .information h3,
	section .descriptif .information .pied, section .descriptif .information ul li,
	section .descriptif .information ul li span, section .descriptif .information .boutons a					{font-size:20px; line-height:28px;}
}
@media all and (max-width: 1000px) {
	section .descriptif																							{padding:40px 20px;}
	section .descriptif .visuel																					{float:none; width:100%; max-width:400px; margin:0 auto 20px;}
	section .descriptif .information																			{float:none; width:100%;}
	section .descriptif.complement:not(.no_complement) .visuel,
	section .descriptif.complement:not(.no_complement) .information												{float:none;}
}

/* NOS ATOUTS */
section .atouts																									{background:#e8eaea; padding:80px;}
section .atouts.blanc																							{background:#FFF;}
section .atouts .gauche																							{float:left; width:40%; color:#000;}
section .atouts .gauche h4																						{font-size:50px; line-height:60px; padding:40px 0 20px;}
section .atouts.light .gauche h4																				{padding:0 0 20px;}
section .atouts .gauche p, section .atouts .gauche p strong														{font-size:24px; line-height:32px;}
section .atouts .details																						{float:right; width:calc(60% - 80px);}
section .atouts .details .atout																					{float:left; width:calc(50% - 40px); margin:0;}
section .atouts .details .atout0																				{clear:both;}
section .atouts .details .atout:nth-child(2n)																	{margin-left:80px;}
section .atouts .details .atout:nth-child(n+3)																	{margin-top:80px;}
section .atouts .details .atout h6																				{font-size:30px; line-height:30px; font-weight:bold; border-bottom:3px solid #5CA747; padding:0 0 20px; margin:0 0 20px;}
section .atouts .details .atout p																				{font-size:20px; line-height:24px;}
@media all and (max-width: 1600px) {
	section .atouts .gauche																						{width:calc(35% - 80px);}
	section .atouts .gauche h4																					{font-size:40px; line-height:50px; padding-top:0;}
	section .atouts .gauche p, section .atouts .gauche p strong													{font-size:20px; line-height:24px;}
	section .atouts .details																					{width:65%;}
}
@media all and (max-width: 1200px) {
	section .atouts .gauche																						{float:none; width:100%; padding:0 0 80px;}
	section .atouts .details																					{float:none; width:100%;}
}
@media all and (max-width: 1000px) {
	section .atouts																								{padding:40px 20px;}
	section .atouts .gauche																						{padding:0;}
	section .atouts .details .atout:nth-child(2n)																{margin-left:0;}
	section .atouts .details .atout:nth-child(n+3)																{margin-top:0;}
	section .atouts .details .atout																				{float:none; width:100%; margin:40px 0 0 !important;}
}

/* CHACUN SON ROLE */
section .roles																									{background:#5CA747; padding:80px;}
section .roles.blanc																							{background:#FFF;}
section .roles .gauche																							{float:left; width:25%; color:#000;}
section .roles .gauche h4																						{font-size:50px; line-height:60px; padding:180px 0 20px;}
section .roles .details																							{float:right; width:70%;}
section .roles .details .role																					{float:left; width:calc(((100% - 40px) / 3) - 40px); min-height:400px; background:#e8eaea; padding:20px; margin:0 0 0 20px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; display:flex; flex-direction:column; justify-content:space-between;}
section .roles .details .role:first-child																		{margin:0;}
section .roles .details .role .titre																			{font-size:40px; line-height:40px; font-weight:bold; color:#5CA747;}
section .roles .details .role ul																				{margin:0 0 0 20px;}
section .roles .details .role ul li																				{padding:10px 0 0; font-size:20px; line-height:24px; font-weight:bold;}
@media all and (max-width: 1600px) {
	section .roles .gauche																						{float:none; width:100%; padding:0 0 40px;}
	section .roles .gauche h4																					{padding-top:0;}
	section .roles .details																						{float:none; width:100%;}
}
@media all and (max-width: 1200px) {
	section .roles																								{padding:40px;}
	section .roles .gauche																						{padding:0 0 20px;}
}
@media all and (max-width: 1000px) {
	section .roles																								{padding:40px 20px;}
	section .roles .details .role																				{width:calc(100% - 40px); min-height:200px; margin:20px 0 0;}
	section .roles .details .role .titre																		{padding:0 0 10px;}
}

/* AUTRE SOLUTION */
section .solution_autre																							{padding:0 80px 80px;}
section .solution_autre.temoignage_solution0																	{padding-top:80px;}
section .solution_autre .colonne1																				{float:left; width:20%; margin:0 80px 0 0; color:#000;}
section .solution_autre .colonne1 .titre																		{font-size:50px; line-height:50px; padding:100px 0 0; font-weight:bold;}
section .solution_autre .colonne1 .titre.titre_simple															{padding:150px 0 0;}
section .solution_autre .colonne2																				{float:left; width:calc(80% - 200px); height:440px; overflow:hidden;}
section .solution_autre .colonne2 .solutions																	{}
section .solution_autre .colonne2 .solutions .solution															{position:relative; float:left; width:300px; height:400px; background:#e8eaea; padding:20px; margin:0 0 0 20px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; animation:margin .5s;}
section .solution_autre .colonne2 .solutions .solution:first-child												{margin:0;}
section .solution_autre .colonne2 .solutions .solution .picto													{width:80px; height:80px; padding:0 0 20px;}
section .solution_autre .colonne2 .solutions .solution .picto svg,
section .solution_autre .colonne2 .solutions .solution .picto svg rect,
section .solution_autre .colonne2 .solutions .solution .picto svg g,
section .solution_autre .colonne2 .solutions .solution .picto svg g path										{fill:#000 !important;}
section .solution_autre .colonne2 .solutions .solution .picto svg .couleur										{fill:#5CA747 !important;}
section .solution_autre .colonne2 .solutions .solution .titre													{font-size:26px; line-height:30px; font-weight:bold; padding:0 0 20px;}
section .solution_autre .colonne2 .solutions .solution p														{font-size:20px; line-height:24px;}
section .solution_autre .colonne2 .solutions .solution .boutons													{position:absolute; bottom:30px; left:20px;}
section .solution_autre .colonne3																				{float:right; width:80px; text-align:right; padding:140px 0 0;}
section .solution_autre .colonne3 svg, section .solution_autre .colonne3 svg rect,
section .solution_autre .colonne3 svg g, section .solution_autre .colonne3 svg g path							{fill:#5CA747 !important;}
@media all and (max-width: 1600px) {
	section .solution_autre .colonne1																			{float:none; width:100%; margin:0;}
	section .solution_autre .colonne1 .titre																	{font-size:40px; line-height:40px;}
	section .solution_autre .colonne1 .titre, section .solution_autre .colonne1 .titre.titre_simple				{padding:0 0 20px;}
	section .solution_autre .colonne2																			{width:calc(100% - 120px);}
}
@media all and (max-width: 1200px) {
	section .solution_autre																						{padding:40px;}
}
@media all and (max-width: 1000px) {
	section .solution_autre																						{padding:40px 20px;}
}

/* TEMOIGNAGES */
section .temoignages .temoignage0																				{margin-top:0;}
@media all and (max-width: 1400px) {
	section .temoignages																						{margin-top:40px;}
}
@media all and (max-width: 1000px) {
	section .temoignages																						{margin-top:20px;}
}