Version: 1.0
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*****************************/
/* General *******************/
/*****************************/
@font-face {
    font-family: 'LigatureSymbols';
    src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot');
    src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),url('../fonts/LigatureSymbols/LigatureSymbols-2.11.woff') format('woff'),url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'),url('../fonts/LigatureSymbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype');font-weight: normal;font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    font-style:  normal;
    font-weight: 400;
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat';
    font-style:  normal;
    font-weight: 700;
    src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter/Inter-Bold.woff?v=3.19") format("woff");
}

:root {
/*  --main-color: #d1e4dd; */
    --bleuistex: #458CA5;
    --bleutresclair: #F6F9FA;
    --vertistex: #C4D733;
    --vertfonce:#a9bb1e;
    --blanccasse: #F0F0F0;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
    margin: 0;
    font-size: 62.5%;
    width: 100%;
}
body {
    font-family: 'Inter', sans serif;
    max-width: 1920px;
    min-height: 100vh;
    font-size: 1.6rem;
    line-height: 2.8rem;
    color: #4A4A4A;
    margin: 0 auto;
}
h1, h2, h3, h4, h5, h6, .h4 {
    margin-block-start: 0;
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-family: 'Montserrat', sans serif;
}
h1 {
    font-size: 3rem;
    line-height: 4rem;
    margin-bottom: 60px;
    font-weight: 700;
    color: var(--bleuistex);
}
h2 {
    font-size: 2.4rem;
    line-height: 3.2rem;
}
h3 {
   font-size: 2.2rem;
   line-height: 3rem;
   margin: 12px 0;
}
h4, .h4 {
    font-size: 2.0rem;
    line-height: 2.8rem;
    font-style: italic;
    margin: 12px 0;
}
.h4 {
    font-weight: bold;
}
h5 {
    font-size: 1.8rem;
    line-height: 2.6rem;
    font-style: italic;
}
h6 {
    margin-bottom: 20px;
    margin-top: 20px;    
    font-size: 1.7rem;
    line-height: 2.4rem;
    font-style: italic;
}
.m0, .wpcf7-form p {
    margin: 0!important;
}
.mt0 {
    margin-top: 0!important;
}
.mb30 {
    margin-bottom: 30px;
}
.mb80 {
    margin-bottom: 80px;
}
a {
    color: var(--bleuistex);
    cursor: pointer;
    text-decoration: none;
}
.cn-buttons-container a, .cn-buttons-container a:hover, .cn-buttons-container a:focus {
    color: #fff!important;
}
.voir, .nav-ancre a:hover, .nav-ancre a:focus, .nav-ancre a.ancre-selected, 
.nav-ancre a:active, .content a:not(.button), .prev, .next, .post-nav a, 
.aide-contact a {
    color: var(--bleuistex);
}
a:visited {

}
a:hover, a:focus {
}
a img {
    border: none;
}
p {
    margin-bottom: 1.5rem;
}
p a, li a {
    text-decoration: underline;
}
ul {
    margin-inline-start: 50px;
    margin-bottom: 10px;
}
/*
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
*/
.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
button:not(.search-submit),.button:not(.search-submit) {
    border:none;
    cursor: pointer;
    padding: 16px 30px;
    line-height: 18px;
    cursor: pointer;
}
.cta1,.content a.cta1,.content .button.cta1>a {
    color:#fff;
    background-color:var(--bleuistex);
}
.cta1:hover,.cta1:focus,.content .button.cta1 > a:hover,.content .button.cta1:hover > a,.content .button.cta1 > a:focus,.cta3:hover,.cta3:focus {
    background: linear-gradient(270deg,#51a7c5 0%,#458ca5 100%);
}
.button.cta3 {
    color:var(--bleuistex);
    background-color:transparent;
    border: 1px solid var(--bleuistex);
    padding: 15px 30px
}
.button.cta3:hover,.button.cta3:focus {
    color: #fff
}
input,textarea {
    border:1px solid #c9c9c9 
}
.flexrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.jcSb {
    justify-content: space-between;
}
.jcC {
    justify-content: center;
}
.flexcolumn {
    display: flex;
    flex-direction: column;
}
.fontInter {
    font-family: Inter, sans serif;
    font-size: 1.4rem;
    line-height: 1.7rem;
}
.fontMontserrat {
    font-family: Montserrat, sans serif;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 700;
}
.noshow {
    display: none;
}
/*****************************/
/* Layout  *******************/
/*****************************/
#h1Title {
    margin-top: 0;
    margin-bottom: 0;
}
.styleItalic {
    font-style: italic;
    color: #434148;
}
main {
    max-width: 1920px;
    min-height: 500px;
}

/* besoin d'aide  */
.btnspe {
    position: fixed;
    bottom:25px;
    right:45px;
    z-index: 20;
    min-width: 161px;
}
.imgHelp {
    width:40px;
    height: 40px;
    padding: 11px;
    background-color:var(--vertistex);
    margin-left: -50px;
    margin-bottom:-14px;
    z-index: 21;
    position: relative
}
.cta2,.bAide,.content a.bAide:link {
    color: #fff;
    font-weight: 600;
    background-color: var(--vertfonce);
    padding: 16px 30px 15px;
    text-decoration: none;
}
.cta2:hover,.cta2:focus,a.button.bAide:hover,a.button.bAide:focus {
    background-image: linear-gradient(to left, var(--vertistex), var(--vertfonce));
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.4);
    padding: 0 0 17px ;
    display: none;
    z-index: 5;
}
#aide {
     /*grid-template-columns: repeat(2,1fr);
    width: 80vw; */
    width: 40vw;
    max-width: 910px;
    height: auto;
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:1001;
    background-color: #f3f3f3;
}
.aide-tit {
    padding-top: 20px
}
.aide-doc {
    grid-template-rows: 60px 50px auto
}
.aide-doc {
    background-color: #f3f3f3;
    margin:0 20px;
    display:flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px
}
.aide-contact {
    background-color: #fff;
    padding: 20px;
}
.aide-contact *,.wpcf7-form * {
    box-sizing: border-box;
    vertical-align: middle;
}
.aide-buttons {
    display: flex;
    gap: 12.5px;
    align-items: flex-start;
    flex-wrap: wrap
}
#aide .wpcf7-response-output {
    margin: 0
}
.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px
}
.wpcf7-text,.wpcf7-textarea,.comment-form-comment>textarea,.comment-form #email,.comment-form #url,.comment-form #author {
    width: 100%;
    padding:14px 12px;
}
.wpcf7-form input {
    height: 50px
}
.wpcf7-form input[type="submit"] {
    width: 120px;
}
.wpcf7-form>p:last-of-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}
.wpcf7-text:focus,.wpcf7-email:focus,.wpcf7-textarea:focus,
.comment-form-comment>textarea:focus,.comment-form #email:focus,
.comment-form #url:focus,.comment-form #email:focus,.comment-form #author:focus {
    border:1px solid var(--bleuistex);outline:var(--bleuistex) solid 2px
}
input::placeholder, textarea::placeholder,textarea {
    font-family: "Open Sans", sans-serif;
    font-size: .875rem;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-acceptance),.comment-form-comment>textarea {
    border: 1px solid #c9c9c9;
    display: inline-block;
    min-height: 50px;
}
#aide {
    display:none
}
#aide:target,#aide:target + #overlay {
    display:grid;opacity: 1;
}

/*****************************/
/* Header  *******************/
/*****************************/
header {
    background-color: var(--blanccasse);
    position: sticky;
    top: 0;
    z-index: 1000;
}
#nav-skip{
    background-color:#fff;
    display: flex;
}
.skip-links a {
    color: #000;
    position:absolute;
    left:-7000px;
    text-decoration: none
}
.skip-links a:focus {
    background-color:#fff;
    opacity:1;
    z-index:3300;
    width: 150px;
    left:0;
}
.skip-links > li {
    padding:.5rem
}
.zutile {
    max-width: 1190px;
    padding: 0 10px;
    margin: 0 auto;
}
.menuIstex {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.2rem;
    height: 34px;
    justify-content: space-between;
    text-transform: uppercase;
}
.accesIstex {
    background-color: rgba(69, 140, 165, 0.2);
    padding: 10px 30px;
}
.accesIstex img {
    margin-right: 5px;
}
.menuIstex .menu-haut {
    list-style: none;
    margin: 0;
 }
.menuIstex ul li{
    background-color: #ffffff;
    padding: 11px 15px;
    border-right : 1px solid var(--blanccasse) ;
    font-weight: 300;
}
.menuIstex a {
    text-decoration: none;
    color: #434148;
}
.menuIstex ul li:hover a {
    color:  var(--second-color);;
}
.banner {
    height: 150px;
    background: #fff url(../img/fondistex.png) center center;
    background-size: cover;
    padding-top: 30px;   
    color: #ffffff;      
}
.banner H1 {
    color: #ffffff;
}
.banner img {
    margin-right: 10px;
}
.siteTitle {
    display: inline-block;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    line-height: 6rem;
    font-weight: 400;
}
.subTitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
}
.wsAlterSlogan {
    font-size: 2.8rem;
    line-height: 3.4rem;
    font-weight: 700;
    color: #4A4A4A;
    padding: 70px 20px 0px 0px;
}
/*****************************/
/* Breadcrumb   **************/
/*****************************/
.breadcrumb {
    display: block;
    height: 2rem;
    margin-bottom: 10px;
    margin-top: 20px;
}
.itemBC, .itemBCAccueil {
    display: inline-block;
    height: 20px;
    font-size: 1.4rem;
    float: left;
    line-height: 2rem;
    vertical-align: middle;
    padding-right: 5px;
    font-family: 'Inter', sans serif;
}
.itemBC::before {
    content: " > ";
}
/*****************************/
/* Footer  *******************/
/*****************************/
footer {
    width: 100%;
    height: 7px;
}

footer ul {
    list-style: none;
}
footer.site-footer::before {
    content:' ';
    display:block;
    height: 7px;
    width: 100%;
    background-image: linear-gradient(to right, var(--bleuistex) 0%, var(--vertistex) 100%);
    background-position:left top;
}
.footer3 {
    justify-content: space-between;
    margin-top: 40px;
}
.footer1 {
    justify-content: center;
    gap: 20px;
    margin-top: 30px;    
}
.site-footer {
    margin-top: 40px;
}
.site-footer a {
    color: var(--gris2);
    background-color: transparent;
    text-decoration: none;
}
.footer4 {
    text-align: center;
    padding: 30px;
}
.footer4 img {
    width: 120px;
    height: auto;
}
.fu {
    width: 150px;
    height: auto;
}
/*****************************/
/* Index  ********************/
/*****************************/
.backZone {

}
.backZoneBTC {
    background-color: var(--bleutresclair);
    position: relative;
    margin-top: 50px;
    z-index: 2;
}
.backZoneBTC:after {
    content:' ';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.07;
    background-image: url('../img/svgfond.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    width: 100%;
    height: 100%;
}
#indexContent1 {
    display: grid;
    grid-gap: 10%;
    grid-template-columns: minmax(58%, 670px) minmax(32%, 390px);
    z-index: 3;
    position: relative;
}
.webServices {
    padding: 100px 0;
}
.wsSlogan {
    font-size: 2.8rem;
    line-height: 3.4rem;
    font-weight: 700;
    color: #4A4A4A;
    padding: 0 20px 50px 0;  
}
.wsDisplay {
    gap: 10px;
    margin-top: 50px;   
}
.wsbox {
    width: 330px;
    height: 160px;
    background-color: var(--blanccasse);
    padding: 15px;
    position: relative;
}
.wsEntete img {
    margin-right: 10px;
}
.wsEntete span {
    font-family: Inter, sans-serif;
    font-size: 1.3rem;
    line-height: 1.6rem;    
}
.wsEntete span:not(:last-child)::after {
    content: '-';
    margin-right: 5px;
    margin-left: 5px;
}
.wsTitle, .wsTitleW {
    min-height: 2.0rem;
    line-height: 2.0rem;
    font-weight: 700;
    text-transform: uppercase;
}
.wsTitle {
    color: var(--bleuistex);
}
.wstitleW {
    color: #fff;
}
.wsTitle a {
    font-size: 1.6rem;
    color: var(--bleuistex);
}
.wsAbrev {
    min-height: 2.0rem;
    line-height: 2.0rem;
    font-weight: 700;
    color: var(--bleuistex);
}
.fleched {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 24px;
    height: 8px;
}
.voirPlus, .voirDoc {
    border-radius: 5px;
    padding: 15px 30px;
    height: 50px;
    margin: 0 auto;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    display: inline-block;    
}
.voirPlus {
    border: 1px solid var(--bleuistex);
    color: var(--bleuistex);
}
.voirDoc {
    border: 1px solid var(--blanccasse);
    color: var(--blanccasse);
}
.moreWSDisplay {
    margin-top: 30px;
    font-family: 'Inter';
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
}
.texteContent1 {
    background-color: var(--bleuistex);
    padding: 100px 30px 80px 30px;
    color: var(--blanccasse);
    min-width: 330px;
}
.hcTitle {
    font-family: Montserrat, sans serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 30px;
}
.hcText {
    font-family: Inter, sans serif;
    font-size: 14px;
    line-height: 20px;
}
.numberStroke {
    font-family: Montserrat, sans serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 61px;
    color:var(--bleuistex);
    -webkit-text-stroke: 1px var(--blanccasse);
    padding-right: 5px;
    padding-left: 5px;
}
.backZone2 {
    min-height: 370px;
}
.zone2Img, .zone2Text {
    width: 50%;
}
.zone2Img {
    background: #fff url(../img/imagehome.jpg) center center;
    background-size: cover;
}
.zone2Text {
    background-color: var(--bleuistex);
    padding: 80px 0;
    color: var(--blanccasse);
}
.backZone2 .zone2Text ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.backZone2 .zone2Text ul li {
    border-radius: 5px;
    padding: 15px 30px;
    height: 50px;
    margin: 0 auto;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    border: 1px solid var(--blanccasse);
    color: var(--blanccasse);
}
.backZone2 .zone2Text ul li a:hover {
    text-decoration: none;
}
.zutile2 a, .zutile2 a:visited, .banner .zutile a, .banner .zutile a:hover, .banner .zutile a:visited {
    color: var(--blanccasse);
    text-decoration: none;
}
.zutile2 a:hover {
    color: var(--blanccasse);
    text-decoration: underline;
}
.zutile2 {
    max-width: 595px;
    height: 100%;
    padding-left: 70px;
    padding-right: 10px;
}
/*****************************/
/* Web -services  ************/
/*****************************/
#serviceResults {
    margin-top: 80px;
}
.debResource {
    max-width: 49%;
    min-width: 400px;
    justify-content: space-between;
    align-items: center;
    height: 130px;
}
.couv {
    width: 70px;
    height: 117px;
    box-shadow: 5.2px 5.2px 5.2px rgba(0, 0, 0, 0.15);
}
.debText {
    height: 100%;
    padding: 10px;
    width: calc(100% - 88px );
    margin-left: 18px;
    justify-content: space-between;
}
.debDate {
    margin-bottom: 14px;
}
#activeFilters {
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: flex-start;
    gap: 20px;
}
.filtresopen {
    cursor: pointer;
}
.filtresclose {
    border-radius: 10px;
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #ececec;
    cursor: pointer;;
}
.activeFilter {
    color: var(--bleuistex);
    font-weight: bold;
}
.filtrecount {
    margin-left: 12px;
    font-size: 1.4rem;
    line-height: 3rem;
}
.filtrecount::before {
    display: inline-block;
    content: "";
    background: url(../img/sprite.svg) 0 0 no-repeat;
    height: 20px;
    width: 20px;
    background-position: 0 0;
    vertical-align: middle;
}
.filtrecount.activeFilter::before {
     background-position: -22px 0;
}
#contentResults {
    gap: 30px;
    align-items: flex-start;
} 
#filters {
    width: 320px;
    min-height: 200px;
    background-color: var(--blanccasse);
    border-radius: 5px;
    padding-bottom: 50px;
}
.filtreItem {
    margin-bottom: 35px;
}
.filtreTitle, .filtreTitleProp {
    width: 100%;
    font-size: 1.6rem;
    line-height: 3rem;
    font-weight: 700;
    height: 50px;
    text-transform: uppercase;
    color: var(--bleuistex);
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid #D3D3D3;
    position: relative;
}
.filtreTitleProp img {
    position: absolute;
    top: 22px;
    right: 20px;
}
.filtreGroup, .filtreGroupProp {
    width: 306px;
    margin: 0 auto;
    background-color: #fff;
    padding: 15px 15px;
}
.filtreGroupProp {
    display: none;
}
.filtreName {
    margin-left: 10px;
}
.switchName {
    margin-left: 10px;
    font-weight: 700;
}
#results {
    width: calc(100% - 350px);
    min-width: 380px;
    margin-bottom: 50px;
}
.moreResources {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #434148;
    text-align: center;
    display: none;
    margin: 0 auto;
    margin-top: 50px;
    cursor: pointer;
}
.serviceGroup {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 20px;
}
#contentWS, #contentUsages {
    gap: 20px;
    padding-bottom: 30px;
    justify-content: space-between;
}
.wsboxsearch {
    width: 370px;
    background-color: var(--bleutresclair);
    border: 1px solid var(--bleuistex);
    padding: 20px 20px 50px 20px;
    cursor: pointer;
}
.wsboxsearch a, .wpboxsearch a:visited, .wpboxsearch a:focus {
    color: #1D1D1D;
}
.wsboxsearch:hover {
    background-color: #f9fbeb;
    border: 1px solid var(--vertistex);
}
.flechehaut {
    border-bottom: none; 
}
.flechehaut img {
    transform: rotate(180deg);
}
.wstitle {
    min-height: 2.4rem;
 }
#moreServices {
    width: 200px;
}
/*****************************/
/* Recherche web Service  ****/
/*****************************/
.searchresp {
    justify-content: flex-start;
    align-items: center;
    gap: 50px;
    width: 100%;
    margin-bottom: 20px;
}
.serviceImg {
    width: 200px;
    height: 126px;
    line-height: 126px;
    font-size: 4rem;
    color: var(--bleuistex);
    text-align: center;
}
.titleresp {
    max-width: calc(100% - 363px);
}
.search-field {
    border: none;
    cursor: pointer;
    height: 20px;
    width: 150px;
    padding-left: 3px;
}
.search-submit {
    cursor: pointer;
    border: 0;
    background-color: #fff;
    flex-shrink: 0;
    padding: 0;
}
#searchFormRessources {
    min-width: 400px;
    height: 65px;
    border: 1px solid var(--bleuistex);
    border-radius: 5px;
    margin: 0 auto; 
    background-color: #fff;   
    position: relative;
}
.formSmall {
    width: 80%;
}
.formLarge {
    width: 100%;
}
.inputSearch {
    height: 100%;
    width: calc(100% - 50px); 
    border: none;
    border-radius: 5px;
    padding-left: 20px;
    font-size: 1.4rem;
    position: relative;
}
.placeholder {
    position: absolute;
    pointer-events: none;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    color: #7B7B7B;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    font-weight: 700;
    opacity: 0;
}
.placeholder span {
  color: var(--bleuistex);
}
#searchFormRessources input[value=""] + .placeholder {
   opacity:  .7; 
}
#searchFormRessources input:focus-visible + .placeholder {
  opacity:  0;
}
#searchFormRessources input:focus-visible {
    outline: none;
}
#searchFormRessources button {
    height: 65px;
    width: 142px;
    border: none;
    border-radius: 0 5px 5px 0;
    background-color: var(--bleuistex);
    color: var(--blanccasse);
    position: absolute;
    top: 0;
    right: 0;
    text-transform: uppercase;
}
.noresponse {
    padding-top: 50px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;    
}
/*****************************/
/* Web Service  **************/
/*****************************/
.message {
    background-color: #e3f2fd;
    border-left: 8px solid var(--bleuistex);
    max-width: 100%;
    padding: 10px 50px 10px 50px;
    color: var(--bleuistex);
    font-size: 1.5rem;
    line-height: 2.4rem;
    background-image: url('../img/iconI.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 10px 10px;
    margin-bottom: 30px;
    display: inline-block;
}
.message p {
    margin-bottom: 0;
}
.wsMenu {
    width: 100%;
    border-bottom: 1px solid var(--bleuistex);
    margin-bottom: 50px;
}
.menuItem {
    min-width: 200px;
    text-align: center;
    padding: 5px 10px 15px 10px;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 400;
}
.menuActive {
    font-weight: bold;
    border-bottom: 8px solid var(--bleuistex);
}
.wsHeader {
    gap: 40px;
    margin-bottom: 50px;
    margin-top: 50px;
}
.wsContentSmall, .wsThumb {
    width: calc(50% - 20px);
    min-width: 400px;
}
.wsThumb {
    justify-content: center;
}
.wsThumb img {
    height: auto;
    max-width: 100%;
    align-self: center;
}
.wsContentSmall, .wsUrl {
    padding: 20px;
}
.compTitle {
    font-weight: 700;
    color: var(--bleuistex);
}
.wsBoxTitle {
    font-size: 2rem;
    line-height: 2.4rem;
    margin-bottom: 20px;
}
.textUrl {
    padding-right: 50px;
    position: relative;
}
#textToCopy {
    color: #fff;
    text-decoration: underline;
}
.urlclipbutton {
    height: 63px;
    width: auto;
    content: url('../img/picto_copier_collerX2.png');
    cursor: pointer;
}
.urlexterne {
    display: block;
    width: 63px;
    content: url('../img/externe.png');
    cursor: pointer;
}
.wsContentFull {
    width: 100%;
    box-shadow: 10px 10px 20px rgb(133 133 133), -2px 0px 2px -2px rgb(236 236 236);
    padding: 20px;
}
.wsCode {
    gap: 40px;
    margin-bottom: 80px;
}
.wsCodeTitle {
    font-size: 2rem;
    line-height: 2.4rem;    
}
.wsExemple {
    width: 100%;
    min-width: 400px;
    box-shadow: 10px 10px 20px rgb(133 133 133), -2px 0px 2px -2px rgb(236 236 236);
    padding: 30px 12% 30px 12%;
}
.wsExempleTitle {
    color: var(--bleuistex);
    font-weight: 700;
}
.wsEntete {
    align-items: center;
    margin-bottom: 10px;
}
.wsResult p {
    margin-bottom: 0;
}
.wsLinks {
    gap: 20px;
}
.wsLink, .wsLink2 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    min-width: 210px;
    min-height: 106px;
    box-shadow: 0px 10px 12px #00000066;
    align-items: center;
    background-color: var(--bleuistex);
    color: #fff;
    padding: 10px 20px 6px 20px;
    position: relative;
    margin-bottom: 20px;
}
.wsLink2 {
    height: 60px;
}
.wsLink img {
    height: 63px;
    width: auto;
}
.wsLink a {
    font-weight: 700;   
}
.wslien {
    gap: 80px;  
}
.wsLodex {
    max-width: calc(100% - 80px);
    gap: 10px;
}
.wsText {
    font-weight: 400;
}
.proprieteEntete {
    align-items: center;
    cursor: pointer;
    padding-right: 10px;
}
.proprieteFiltres {
    display: none;
}
.variantes {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}
.wstitleItal {
    font-style: italic;
    min-height: 2.0rem;
    line-height: 2.0rem;
}
/*****************************/
/* Responsive  ***************/
/*****************************/
@media screen and (max-width: 1192px) {
    #indexContent1 {
        grid-gap: 30px;
        grid-template-columns: minmax(calc(66% - 15px), 670px) minmax(calc(34% - 15px), 390px);        
    }
}
@media screen and (max-width: 1074px) {
    .wsbox {
        min-width: 330px;
        width: 100%;
    }
}
@media screen and (max-width: 1021px) {
    #indexContent1 {
        grid-template-columns: minmax(calc(100% - 360px), 670px) minmax(330px, 390px);        
    }
}
@media screen and (max-width: 728px) {
    #indexContent1 {
        display: block;
    }
    .backZone2 {
        display: block;
    }
    .zone2Img, .zone2Text {
        width: 100%;
    }
    .zutile2 {
        padding-left: 10px;
    }
    .zone2Img {
        min-height: 370px;
    }
}
@media screen and (max-width: 1156px) {
    .wsboxsearch {
        width: 100%;
        min-width: 370px;
    }
}
@media screen and (max-width: 766px) {
    #contentResults {
        justify-content: center;
    }
    #results {
        width: 100%;
    }
}
@media screen and (max-width: 646px) {
    .placeholder {
        display: none;
    }
 }
@media screen and (max-width: 576px) {
    .menuIstex {
        height: 68px;
    }
}
@media screen and (max-width: 530px) {
    .siteTitle {
        font-size: 30px;
    }
    .subTitle {
        display: none;
    }
 }
 @media screen and (max-width: 476px) {
    .wsLinks {
        justify-content: center;
    }
 }