div[class^='bande_'] {padding:1em 0.5em;}
div[class^='bande_'] h2 {transform:rotate(-90deg); transform-origin:top left; position:absolute; width:300px; top:300px; left:0; display:inline-block; text-align:right;}

.border_violet {border:1px solid #4f4778;}
.bande_violet {color:#fff; background-color:#4f4778; margin:0 auto;}
.bande_violet h2 {color:#a0eade;}
.bande_vertclair {color:#1d263b; background-color:#a0eade; margin:0 auto;}
.bande_vertclair h2 {color:#4f4778;}

article > div > section {position:relative; max-width:1000px; margin:0 auto; text-align:left;}

sup a {text-decoration:none;}

img.degrade-txt {width:100%; height:135px; position:absolute; bottom:0; left:0;}
.fleche-b-deployer-bas, .fleche-b-deployer-haut {text-decoration:none; bottom:0; left:50%; margin:0 0 0 -21px; cursor:pointer; display:block; width:43px; height:43px;}
.fleche-b-deployer-bas {position:absolute; background:url('../img/icons/fleches-b.png') 0 -138px scroll transparent;}
.fleche-b-deployer-haut {position:relative;  background:url('../img/icons/fleches-b.png') 0 -94px scroll transparent;}
.fleche-v-deployer-bas {text-decoration:none; position:absolute; bottom:0; left:50%; margin:0 0 0 -21px; cursor:pointer; display:block; width:43px; height:43px; background:url('../img/icons/fleches-v.png') 0 41px scroll transparent;}

table {margin-bottom:1em; font-size:0.9em; width:100%; border-collapse:collapse; border-spacing:0;}
table th {background-color:#317b6f; color:#fff; padding:0.5em;}
table td.th2 {background-color:#a0eade; color:#317b6f; padding:0.5em;}
table td {padding:0.25em; border-bottom:1px solid #317b6f; vertical-align:top; text-align:center;}
table td h5 {display:none;}
table.responsive label {font-weight:bold; color:#317b6f; display:none;}

#societe p {margin:0 0 0 5em; padding:0; overflow:hidden; height:15em;}

#services div[class^='bloc_'] {text-align:center; margin-top:2em; position:relative; display:inline-block; vertical-align:top; width:31% !important; height:15em; overflow:hidden;}
#services > div > h3 {color:#00a650; margin-bottom:1em;}
#services > div > h3 a {color:#00a650; text-decoration:none;}
#services div[class^='bloc_'] > p {margin:0; padding:0; overflow:hidden; height:9em;}
#services > div.bloc_centre {margin:2em 2.5% 2em !important;}

#service {text-align:left;}
article#content #service p {font-size:0.9em;}
article#content #service p, #service li, #service th, #service td {text-align:justify;}
#service > a.retour {clear:both;}
#service > a:first-child {float:right !important;}
#service h1 {color:#00a650; font-size:2em; margin:0 0 1em 0;}
#service h3 {color:#317b6f; font-style:italic;margin:-1em 0 1em 0;}
div[class^="bande_"] #service > h2 {margin-top:1em; display:block; transform:none; color:#4f4778; font-size:1.5em; position:relative; width:auto; text-align:left; top:auto; left:auto;}
#service a {color:#00a650;}
#service > ul {margin:1em 2em; font-size:0.9em;}
#service ul li {padding:0 0 0.25em 1em; list-style:none url('../img/icons/puce.png') outside;}
#service ul li ul {margin:1em 0 0 1em;}
#service ul li li {list-style:none url('../img/icons/puce2.png') outside;}
#service ul li li li {list-style:none url('../img/icons/puce.png') outside;}
#service img[class^=infographie_] {margin:1em 0; vertical-align:top;}
#service img.infographie_100 {width:100%;}
#service img.infographie_50 {width:49%;}
#service img.infographie_25 {width:24%;}
#service hr {clear:both; margin-top:2em; border:0;}


table.tab_curseur, table.tab_curseur thead, table.tab_curseur tbody, table.tab_curseur tr
{display:block; width:100%; position:relative;}
table.tab_curseur tr th, table.tab_curseur tr td
{display:inline-block; height:1em; position:relative;}
table.tab_curseur tr td:not(first-child)
{position:absolute; border:0; top:0; right:0;}
table.tab_curseur tr td:first-child
{position:relative; border:0;}

table.tab_curseur tr:first-child {text-align:right;}
table.tab_curseur tr th {text-align:center !important; border-left:5px solid #fff;}
table.tab_curseur tr th:not(:first-child) {background:url('../img/bg/bg_th_reflets.png') repeat-x top left #1d263b; text-transform:uppercase;}
table.tab_curseur tr:first-child, table.tab_curseur tr th:first-child {background-color:transparent !important; background-image:none !important; border:0 !important;}

table.tab_curseur tr th:first-child {width:calc(37% - 2em);}
table.tab_curseur tr td:first-child {width:35.5%;}
table.tab_curseur tr th:not(first-child) {width:calc(12% - 1em);}
table.tab_curseur tr td:not(first-child) {width:calc(12% + 5px - 1em);}
table.tab_curseur tr th, table.tab_curseur tr td {padding:0.5em; font-size:1.3em;}

table.tab_curseur tr {height:3em; border-top:10px solid #fff; background:url('../img/bg/bg_curseur_glissiere.png') 96% center no-repeat; background-size:60% 2px;}
table.tab_curseur tr:nth-child(even) {background-color:#cac7d6; border-bottom:1px solid #afabc1;}
table.tab_curseur tr:nth-child(odd)  {background-color:#dcdae4; border-bottom:1px solid #cac7d6;}
table.tab_curseur tr td:first-child {background-image:none;}
table.tab_curseur tr td:first-child a {color:#4f4778 !important; text-decoration:none;}
table.tab_curseur tr td.check {background:url('../img/icons/curseur.png') center center no-repeat;}

/* tableau page SOCIETE */
.societe table.tab_curseur tr td:nth-child(2) {right:50%; animation:curseur-col6-2 4s ease 1;}
.societe table.tab_curseur tr td:nth-child(3) {right:38%; animation:curseur-col6-3 4s ease 1;}
.societe table.tab_curseur tr td:nth-child(4) {right:25%; animation:curseur-col6-4 4s ease 1;}
.societe table.tab_curseur tr td:nth-child(5) {right:13%; animation:curseur-col6-5 3s ease 1;}
.societe table.tab_curseur tr td:nth-child(6) {right:0%; animation:curseur-col6-6 3s ease 1;}
.societe table.tab_curseur tr th:nth-child(2) {background-color:#305da1;}
.societe table.tab_curseur tr th:nth-child(3) {background-color:#803ea1;}
.societe table.tab_curseur tr th:nth-child(4) {background-color:#dbc705;}
.societe table.tab_curseur tr th:nth-child(5) {background-color:#e4222a;}
.societe table.tab_curseur tr th:nth-child(6) {background-color:#15a04a;}

/* pages OFFRES */
section.offre table.tab_curseur tr th {padding:0.7em 0.5em; font-size:1.1em;}
section.offre table.tab_curseur tr td:first-child {font-size:1em;}

/* tableau offre Active Directory Remediation */
.active-directory-remediation table.tab_curseur tr td:first-child {width:35.5%; text-align:left !important;}
.active-directory-remediation table.tab_curseur tr th:not(first-child) {width:calc(15% - 1em);}
.active-directory-remediation table.tab_curseur tr td:not(first-child) {width:calc(15% + 5px - 1em);}

.active-directory-remediation table.tab_curseur tr td:nth-child(2) {right:47%; animation:curseur-col5-2 4s ease 1;}
.active-directory-remediation table.tab_curseur tr td:nth-child(3) {right:31%; animation:curseur-col5-3 4s ease 1;}
.active-directory-remediation table.tab_curseur tr td:nth-child(4) {right:15%; animation:curseur-col5-4 4s ease 1;}
.active-directory-remediation table.tab_curseur tr td:nth-child(5) {right:0%; animation:curseur-col5-5 3s ease 1;}



#contact {min-height:150px;}
#contact p {margin:0 0 2em 5em;}
#contact form {position:relative; margin-left:5em;}
#contact form > div {display:inline-block; vertical-align:top; margin-right:5%; text-align:left;}
#contact form > div.coords {width:35%;}
#contact form > div.msg {width:50%;}
#contact input {display:inline-block; height:30px; margin-bottom:1em;}
#contact input::placeholder {color:#fff;}
#contact input, #contact textarea {width:100%; font:normal 1.2em/1.2em agency,arial,sans-serif; color:#4f4778; background-color:transparent; border-width:0 0 3px 0; border-style:solid; border-color:#4f4778;}
#contact input:nth-child(3), #contact input:nth-child(4) {width:45%;}
#contact input:nth-child(4) {float:right;}

#contact input.inset {display:inline-block; width:4em; border:2px inset #fff; margin-left:1em; background-color:#fff;}
#contact label input {display:inline; width:auto; height:auto; margin:0; padding:0 0.5em 0 0; border:0;}
#contact textarea {margin-bottom:0; border-width:0 0 3px 3px; height:190px;}
#contact input[name=btn_envoi] {cursor:pointer; position:absolute; top:219px; right:30px; width:216px; height:30px; border:0; color:#fff; text-transform:uppercase; background-color:#4f4778; transform:rotate(90deg); transform-origin:bottom right;}

#contact label.check {display:block; font-size:0.75em; margin-bottom:3em;}
#contact label a {color:#1d263b; text-decoration:underline;}