@charset "utf-8";
/* CSS Document */
body,figure,img {
    margin: 0;
    padding: 0;
    font-size: 1vw;
    font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
    overflow-x: hidden;
    /* width: 100%; */
    /* height: auto; */
    scrollbar-width: 0px;
}
* {
  scrollbar-width: 0px;
	margin: 0px;
	padding: 0px;

}
html {
  scroll-behavior: smooth;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 0px;
}

a {
    text-decoration: none;
	color:#F63;
}


.center{text-align:center;}
.tnoir{
	color:#222;}
.torange{
	color: rgba(255,102,51,1);
}

div#outils {
    float: right;
    margin: 1vh 0.5vw;
    position:fixed;
    top: 0;
    right: 0;
    z-index: 100;
}
input#macol {
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    border: solid 2px;
}
a#btnmenu {
    position: fixed;
    display: block;
    top: 0;
    z-index: 100;
}
#btnmenu figure {
    padding: 1vh 0.5vw  0.5vh;
    text-align: center;
    /* width: 8vw; */
}
#btnmenu img {
    width: 7.7vw;
}
#btnmenu figcaption {font-style: italic;}

div#titregsm{display:none;}
menu#menuHaut {
    height: 14vh;
    top: 0;
    margin: 0;
    position: fixed;
    /*background-color: #fff;*/
    width: 100%;
    display: block;
    z-index: 80;
    border-bottom: solid 1px #ddd;
    box-shadow: 0px 4px 20px 1px #dddcdc;
}
#menuHaut ul {
    margin: 0vh 4vw 0 10vw;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-content: space-around;
    align-items: flex-start;
}

#menuHaut li {
    list-style-type: none;
    line-height: 4.5vh;
    font-size: 1.4vw;
    width:25%;
}

#menuHaut a {
    display:block;
    padding: 2vh 1vw;
    /* font-family: Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol; */
    /* text-transform: uppercase; */
    font-weight: 600;
}

#s1{
	background-image: url(../img/fond3.jpg);
	/* background: linear-gradient(to left, transparent 25%, #000 40%),url("../img/fond3.jpg"); */
	/* min-height: 51vh; */
	background-size: 60%;
	background-position-y: 50%;
	background-position-x: right;
	background-repeat: no-repeat;
	width: 100vw;
	background-color: #000;
}



#s1 img {
    width: 62vw;
    margin: 1vw 1vw 0 0;
    /* background: linear-gradient(to left, #3330 75%, #333 25%); */
    /* background: linear-gradient(to right, transparent, mistyrose),url("tonimage"); */
    /* filter: invert(1); */
}
section#sr0 {
    background-image: url(../img/fond0.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 55%;
    min-height: 70vh;
    clear: both;
    margin-top: 14vh;
    padding-top: 2vh;
}
section#logiciel {
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: center;
    background-size: 25%;
    min-height: 85vh;
    clear: both;
    margin-top: 14vh;
    padding-top: 2vh;
}

section#sr1 {
    background-image: url(../img/assistance-informatique-a-domicile.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 70%;
    min-height: 70vh;
    clear: both;
    margin-top: 14vh;
    padding-top: 4vh;
}
section#sr2 {
    background-image: url(../img/formations-logiciels-et-utilisation-des-ia.jpg);
    background-repeat: no-repeat;
    background-position-x: right;
    /* background-position-y: -11vh; */
    background-size: 78%;
    min-height: 70vh;
    clear: both;
    margin-top: 14vh;
    padding-top: 2vh;
}
section#sr3 {
    background-image: url(../img/developpement-applications-bureautiques.jpg);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: -20%;
    background-size: 70%;
    min-height: 70vh;
    clear: both;
    margin-top: 14vh;
    padding-top: 2vh;
}
section#sr4 {
    background-image: url(../img/developpement-de-sites-internet.jpg);
    background-repeat: no-repeat;
    background-position: top right;
     background-size: 70%; 
    min-height: 70vh;
    clear: both;
    margin-top: 14vh;
    padding-top: 2vh;
}

li.ssrub {
    font-size: 1.3vw;
    /* line-height: 5vh; */
    margin: 2vh 0;
    padding-left: 1vw;
    list-style-image:url(../img/puce.png);
}

ul {}

section#sr1 ul {
    width: 50%;
    background-color: #fff5;
    margin-left: 10vw;
    /* margin-top: 10vh; */
    float: left;
}
div.detail {
    color: #000;
    font-size: 2.5vh;
    line-height: 4vh;
    padding: 3vh;
    text-align: justify;
    background-color: #fff2;
    filter: none;
}

section#fond {
/*    min-height: 100vh;
*/    clear: both;
}
#fond img#carte3 {
    width: 100%;
}

section#ssrubs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

article.a_ssrub {
    width: 25%;
    min-width: 300px;
    margin: 2vw;
    padding: 1vw 1vw 3vh;
}
article.a_ssrub:hover {
	background-color:#fff;
	color:#000;
	border:solid 1px #666;
	border-radius:0px;
    
}

#ssrubs h2 {
    margin-bottom: 3vh;
    font-size: 1.3vw;
    font-weight: 600;
    text-align: center;
}
#ssrubs p {
    /* text-align: justify; */
    font-size: 1.1vw;
    line-height: 4vh;
}
article.a_ssrub p.magiq {
    text-align: center;
    line-height: 4vh;
    margin-bottom: -4vh;margin-top: 2vh;
    font-style: italic;
    /* padding-right: 2vw; */
    opacity: 0;
	position:relative;
	top:0;
}

article.a_ssrub:hover p.magiq {
    opacity: 1;
}
#btno{
    display: block;
    position: fixed;
    bottom: 2vh;
    right: 2vw;
	opacity: 0;
}
#btno:hover{
	opacity: 0.8;
}

svg#mapabs0 {
    padding: 3vh 0.5vw;
    margin: 0 4vw;
    width: 36vw;
    background-image: linear-gradient(to bottom right, #ffffff00, #ffffff50);
    border-top-left-radius: 50%;
    /*border-top-right-radius: 0;*/
    box-shadow: 0px 0 40px 0px #fff;
}
#mapabs0 path{
	stroke:#fff6;
	fill:#fff;
}
svg#mapabs {
    position: absolute;
    padding: 1vw 0.5vw;
    top: 0;
    right: 0;
    margin: 0;
    width: 20vw;
    background-image: linear-gradient(to bottom right, #ffffff00, #ffffff77);
    border-top-left-radius: 50%;
    border-top-right-radius: 0;
    z-index: 20;
}
#mapabs path{
	/* stroke:#0006; */
	/* fill:#fff; */
}



nav#navT {
    width: 100vw;
    /* padding: 1vh 0vw 1vh 1vw; */
    /* margin-top: 15vh; */
    /* column-count: 2; */
    /* column-gap: 0; */
    /* column-width: 9vw; */
    display: flex;
    justify-content: space-evenly;
}

nav#menuint {float: right;margin: 0vh 0vw 2vh 0;padding: 0 0 0 20vw;width: 28vw;position: absolute;top: 8vh;right: 0;display: flex;flex-wrap: wrap;justify-content: space-evenly;/* background-image: linear-gradient(to bottom right, #ffffff00, #ffffff55); */}

#navT a.vt {
    display: block;
    font-size: 1.3vw;
    /* line-height: 1.3vw; */
    padding-left:0;
    color: #fff;
}
#navT a:hover, #navT a.vtin{
    background-color: #fff6;
    display: block;
    font-size: 1.3vw;
    /* line-height: 1.3vw; */
    padding-left: 0;
}


#menuint a.off {
    opacity: 0.4;
}


#menuint a:hover {
    opacity: 1;
}

div#col1 {
    width: 20%;
    float: left;
    /* margin: 2vh; */
}

div#col2 {
    width: 20%;
    float: right;
    text-align: right;
    /* margin-left: 12vw; */
}
svg.svg1 {
    width: 10vw;
    float: left;
    padding: 1vh;
    margin-top: 2vh;
    border-radius: 50%;
}
#mapabs path#Selection {
    fill: #fff0;
}

div#bgi {
    background-image: linear-gradient(to bottom, #ffffff00, #ffffffff);
    height: 100vh;
}

nav#menuintabs {
    position: absolute;
    top: 14vh;
    text-align: center;
    /* margin: 0 0vw 2vw 1vw; */
    background-color: #fffa;
    display: flex;
    width: 90%;
    /* padding-right: 20%; */
    z-index: 10;
    justify-content: center;
}

#menuintabs img {
    width: 4vw;
}

#menuintabs a {
    padding: 1.2vw;
    height: 5vw;
    width: 5vw;
    display: block;
    border-radius: 50%;
    /* margin-bottom: 3vh; */
    margin: 0 2vw 1vh 2vw;
}

#menuintabs figcaption {
    font-size: 0.7vw;
}

a.lum20.deg7 {}

#menuintabs a:hover {
    background-image: linear-gradient(to bottom right, #ffffff33, #ffffffaa);
}

section#s4cvs {
    /* display: flex; */
    padding: 2vh 0;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: center;
    /* width: 96%; */
}

#s4cvs h2 {
    text-align: center;
    margin: 0px 12vw 5vh;
    font-weight: normal;
    font-size: 2vw;
}
svg#mapabs0 path:hover, svg#mapabs0 path.in{
	fill:#fff6;
	background-image: linear-gradient(to bottom right, #ffffff00, #ffffff77);
}


h1 {
    text-align: center;
    font-size: 3vw;
    font-weight: 600;
    margin-bottom: 3vh;
    /* text-shadow: 0px 1px 1px #000000; */
    color: #fff;
}

article#intro {
    /* width: 40%; */
    /* float: left; */
    padding: 2vh 2vw 0vh;
    font-size: 1.3vw;
    line-height: 2vw;
    text-align: justify;
    /* background-color: #fff9; */
}
section#sr1 ul#ulintro {
    width: 90%;
    font-size: 1.3vw;
    /* float: right; */
    column-count: 2;
    margin-top: 4vh;
    margin-left: 5%;
    list-style-position: inside;
}
section#sr1 ul#ulintro li.ssrub {
    font-size: 1.3vw;
    line-height: 5vh;
    margin: 0;
    padding-left: 1vw;
    list-style-image:url(../img/puce.png);
}


#intro aside {
    width: 27%;
    float: left;
    /* background-color: #fffc; */
    /* height: 31vh; */
    margin-left: 3vw;
    padding: 1vh;
    border-radius: 2vw;
    margin-top: 4vh;
}

aside p {
    margin-bottom: 3vh;
    text-align: center;
    padding: 0vh;
}

p#tintro {
    margin: 0 0vw 0 34vw;
    background-color: #fff9;
    padding: 1vh;
    line-height: 4.5vh;
}

menu#menulog {
    display: flex;
    flex-wrap: wrap;
    width: 75%;
    margin-top: 5vh;
    margin-bottom: 4vh;
}

#menulog img {
    height: 7vh;
}

#menulog figure {
    text-align: center;
    width: 12vw;
    /* height: 10vh; */
    margin: 1vh;
    font-size: 2vh;
}

article.artlog {
    /* clear: both; */
    padding: 2vw;
    width: 40%;
    border-radius: 0;
}

section#seclog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.artlog figure {
    float: left;
    width: 10vw;
    min-height: 10vw;
    padding-top: 3vh;
    margin-right: 2vw;
}

.artlog h2 {
    margin-bottom: 1vh;
}
p.intro0 {
    width: 51%;
    padding: 2vh 8vw 2vh;
    font-size: 1.4vw;
    line-height: 4vh;
}
img#troll1 {
    position: fixed;
	cursor: url(../img/ga/viseur.png) 2 2, grab;
    top: 6vh;
    left: 0vw;
    width: 4vw;
    z-index: 100;
}

article.public {
    float: left;
    width: 45%;
    margin: 0 5vw;
}

h3 {
    margin-top: 2vh;
    font-size: 1vw;
    font-weight: 600;
}

article.progd {
    float: right;
    margin: 2vw;
    column-count: 2;
    /* column-width: 2vw; */
    width: 40%;
}

.public h2 {
    font-size: 1.3vw;
    padding: 1vh;
    margin-top: 4vh;
}

.public p.detail {
    line-height: 3vh;
    margin: 1vh;
}
.artlog p {
    margin-left: 10vw;
}

p#tintro2 {
    width: 46%;
    font-size: 1.3vw;
    margin: 2vw;
    line-height: 2.1vw;
    float: left;
}
p#tintro3 {
    font-size: 1.3vw;
    margin: 2vw;
    line-height: 2.1vw;
    text-align: left;
}
ul.sidevba {
    width: 35%;
    float: right;
    margin: 3vh 0 0;
    list-style-position: inside;
    background-color: #fffa;
}

figure#faccueil {
    width: 40%;
    text-align: center;
    clear: both;
}

#faccueil img {
    margin-bottom: -1vh;
}

#intro aside.deco {
    clear: both;
    text-align: center;
    margin-top: 6vh;
    margin-bottom: -2vh;
}

aside.book {
    float: right;
    width: 24%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    height: 67vh;
    align-content: flex-start;
}

aside.book figure {
    width: 40%;
}

.book img {
    width: 100%;
}

.book figcaption {
    font-size: 0.9vw;
    text-align: center;
    margin-bottom: 2vh;
    margin-top: -1vh;
}
footer section#haut {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    font-size: 1.2vw;
}
footer section.sh1 {
    width: 70vw;
    margin-bottom: 3vh;
    column-count: 4;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
footer .sh2 figure {
  border-radius: 50%;
  /* border: solid; */
  overflow:hidden;
  /* height: 6vh; */
  background-color:#fff;
  box-shadow: 0px 0 20px 0px #fff;
  height: 70px;
  width: 70px;
}
footer .sh2 figure img{
	height: 113%;
	margin: 0px 7px;
	/* width: 100%; */
	}


footer h3 {
    font-size: 1.4vw;
    /* line-height: 3vw; */
}

footer p {
    padding: 2vh 0 0;
}


aside.deco.flexdeco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

figure.logolog {
    width: 3vw;
    height: auto;
    margin: 1vh;
    /* vertical-align: middle; */
}

#fville1 img {
    width: 100%;
}

.logolog img {
    width: 100%;
}

figure#fville1 {
    width: 16vw;
    margin-left: 20%;
}

fville1 img {
    width: 100%;
}

.artlog img {
    width: 100%;
    margin-right: 0vw;
}

.deco #fville img {
    width: 100%;
}
figure#fville {
    width: 20vw;
    margin: auto;
}


img.mino {width:5vw;height:5vw;}

#divintro {
    margin-left: 40vw;
}

#divintro h2 {
    font-size: 1.5vw;
    margin: 4vh 0 2vh;
    text-align: left;
}

.grolog img {
    width: 10vw;
}




@media all and (max-width: 600px) {
	 /* entre 0 et 600 */
div#outils {
display:none;
}
img#troll1 {
display:none;
}

a#btnmenu {
    position: static;
    display: block;
    top: 0;
    z-index: 100;
}
#btnmenu figure {
    padding: 1vh 0.5vw  0.5vh;
    text-align: center;
    /* width: 8vw; */
    width: 40%;
    float: left; 
}
#btnmenu img {
    width: 100%;
}
#btnmenu figcaption {
display:none;	
	}
div#titregsm{display:block;}
#titregsm h1{
	font-size:5vw;
	margin-top: 2vh;
	margin-bottom: 2vh;
}

#titregsm p{
	font-size:4vw;
	text-align: center;
}
menu#menuHaut {
    height:auto;
    margin: 0;
    position: static;
    /*background-color: #fff;*/
    width: 100%;
    display: block;
    border-bottom: solid 1px #ddd;
    box-shadow: 0px 4px 20px 1px #dddcdc;
    margin-top: 2vh;
}
#menuHaut ul {
    display: block;
	margin: 0;
}

#menuHaut li {
    list-style-type: none;
    /*! line-height: 4.5vh; */
    /*! font-size: 3vw; */
    width:100%;
    padding: 0px;
}

#menuHaut a {
    display:block;
    /*! padding: 2vh 1vw; */
    /* font-family: Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol; */
    /* text-transform: uppercase; */
    font-weight: 600;
    font-size: 5vw;
    padding: 0;
}
section#sr0 {
  background-image: url(../img/fond0.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 107%;
  min-height: 37vh;
  clear: both;
  margin-top: 0vh;
  padding-top: 29vh;
}
p.intro0 {
  width: 98%;
  padding: 1vh 3vw 1vh;
  font-size: 3.2vw;
  /* line-height: 2vh; */
}

#fond img#carte3 {
  width: 150%;
  margin-left: -11vw;
}
section#ssrubs {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
}
section#s4cvs {
  display:none;
}

article.artlog {
  clear: both;
  padding: 2vw;
  width: 100%;
  border-radius: 0;
}
.artlog figure {
  float: left;
  width: 20vw;
  padding-top: 4vh;
  margin-right: 3vw;
  min-height: 13vh;
}
.artlog h2 {
  margin-bottom: 1vh;
  font-size:4vw;
  text-align:center;
}
.artlog p {
  margin-left: 10vw;
  font-size:3vw;
}
footer section#haut {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    font-size: 2vw;
}
footer section.sh1 {
    /*! width: 70vw; */
    /*! margin-bottom: 3vh; */
    column-count: 4;
    /* display: flex; */
    /* flex-wrap: wrap; */
    height: 8vh;
}
footer .sh2 figure {
  border-radius: 50%;
  /* border: solid; */
  overflow:hidden;
  /* height: 6vh; */
  background-color:#fff;
  box-shadow: 0px 0 20px 0px #fff;
  height: 50px;
  width: 50px;
}
footer .sh2 figure img{
	height: 113%;
	margin: 0px 7px;
	/* width: 100%; */
	}
footer h3 {
    font-size: 2.6vw;
    /*! line-height: 3vw; */
    margin: 5px;
}
footer p {
    padding: 2vh 0 0;
	
}
img.mino {
  width: 10vw;
  height: 10vw;
  display: none;
}
/*/////////////////////////////*/

section#sr1 {
    background-image: url(../img/assistance-informatique-a-domicile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 70%;
    clear: both;
    margin-top: 3vh;
    padding-top: 18vh;
}
section#sr2 {
    background-image: url(../img/formations-logiciels-et-utilisation-des-ia.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0;
    background-size: 78%;
    min-height: 70vh;
    clear: both;
    margin-top: 1vh;
    padding-top: 2vh;
}
section#sr3 {
    background-image: url(../img/developpement-applications-bureautiques.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0;
    background-size: 100%;
    min-height: 70vh;
    clear: both;
    margin-top: 0vh;
    padding-top: 14vh;
}
section#sr4 {
    background-image: url(../img/developpement-de-sites-internet.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    min-height: 70vh;
    clear: both;
    margin-top: 4px;
    padding-top: 28vh;
}
h1 {
    text-align: center;
    font-size: 5vw;
    font-weight: 600;
    margin-bottom: 3vh;
    /* text-shadow: 0px 1px 1px #000000; */
    color: #fff;
}
section#sr1 ul {
    width: 100%;
    background-color: #fff5;
    margin-left: 0;
    /* margin-top: 10vh; */
    float: none;
}
li.ssrub {
    font-size: 3vw;
    /* line-height: 5vh; */
    margin: 2vh 0;
    padding-left: 0vw;
    list-style-image: none;
    list-style-type: circle;
    list-style-position: inside;
}

div.detail {
    color: #000;
    font-size: 1.5vh;
    line-height: 3vh;
    padding: 1vh;
    text-align: justify;
    background-color: #fff2;
    filter: none;
}
menu#menulog {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5vh;
    margin-bottom: 4vh;
    justify-content: center;
    align-items: flex-start;
}
#menulog img {
    height: 7vh;
}

#menulog figure {
    text-align: center;
    width: 21vw;
    /* height: 10vh; */
    margin: 1vh;
}
p#tintro2 {
    width: 96%;
    font-size: 3.3vw;
    margin: 2vw;
    line-height: normal;
    float: none;
}
p#tintro3 {
    font-size: 3vw;
    margin: 2vw;
    line-height: 4.1vw;
    text-align: left;
}
ul.sidevba {
    width: 100%;
    float: none;
    margin: 3vh 0 0;
    list-style-position: inside;
    background-color: #fffa;
}
#vbaccueil img {
    width: 100%;
}
aside.book {
    float: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    height: auto;
    align-content: flex-start;
}

section#logiciel {
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: top;
    background-size: 50%;
    min-height: 85vh;
    clear: both;
    margin-top: 1vh;
    padding-top: 23vh;
}
article.public {
    float: none;
    width: 95%;
    margin: 0 5vw;
}
.public h2 {
    font-size: 3.3vw;
    padding: 1vh;
    margin-top: 2vh;
}
.public p.detail {
    line-height: normal;
    margin: 1vh;
    font-size: 3vw;
}
p.resume {
    font-size: 3vw;
    padding: 3vw;
}
article.progd {
    float: none;
    margin: 2vw;
    column-count: 2;
    /* column-width: 2vw; */
    width: 100%;
}
article.progd h3 {
    margin-top: 2vh;
    font-size: 2.8vw;
    font-weight: 600;
}

article.progd h3:first-child{
    margin-top: 0vh;
	
}

.progd p {
    font-size: 2.5vw;
}
}