/*
Theme Name:  ARBORENZIA
Author: Alban Monnier
Author URI: http://arborenzia.ch/
Description: Theme par ALBAN MONNIER ;
Text Domain: theme_AM
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*RESET*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;    
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*GLOBAL*/

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;}
.selected { background: #FF0000; color: #FFF;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
.clear {clear: both;}
p {margin: 0px;  }
a:hover { color: #b1b1b1;transition: 0.2s}
a { text-decoration: none ; color: #3d3d3d; text-transform:uppercase;font-weight:bold; }
*{box-sizing: border-box;}
ul {list-style: none;}

body{ font-family: "moniker", sans-serif;
font-weight: 700;
font-style: normal;
 font-size: 12px ; margin: 0px ; padding: 0px; background-color:white; color: #3d3d3d;opacity: 0}

body.effect {opacity: 1;transition:  0.6s;}

p {font-size: 0.86vw;
    color: #3d3d3d;
   
    font-weight: 100; }

.bold{font-weight: bold ;}


#part1 li {font-size: 1.4vw; line-height: 2.2vw; font-weight: 100;}
#menuPart3 {text-transform: uppercase;}

h1 {font-size: 4.93vw; text-transform: uppercase; font-weight:bold; }
h2 {font-size: 1.4vw; line-height: 2.3vw; font-weight: 100;}
h3 {font-size: 3em; text-transform: uppercase; font-weight:bold; line-height: 1.1em;color:#3d3d3d}

#main { padding-top:4.75vw }
 .br {display: none;}

/*WRAPER*/
#wraper {width: 95vw;margin: auto; }
#container1 { width:60%;  margin:auto; }
#container2{ width:40%; margin:auto;  }
#cargoContainer { width:100%; display:flex;margin:auto; }


/*HEADER RESPONCIVE*/

#containerLogoMenu {width: 100vw; margin: 0px;height: calc(100vw*0.05);display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 13; transition: 0.4s; }

#LogoMenuResponsive { background-image: url(../img/LogoMenuResponsive.svg);width: 2vw;height: calc(2vw*0.8);background-repeat: no-repeat;display: block;cursor: pointer;z-index: 15;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;}
#LogoMenuResponsive.petit { width: 2vw;height: calc(2vw*0.8)}
#LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 2vw;height: calc(2vw*0.8)}
#LogoMenuResponsive.open.petit {width: 2vw;height: calc(2vw*0.8)}

#containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 4.7vw; font-size: 4.93vw; width: 80%}
#headerResponcive { width:100%; height:100vh; background-color:#3d3d3d;position:fixed; z-index: 6;opacity: 1;  margin: auto; font-size: 3.66vw; color: white; display: flex; transition: 0.8s; margin-top: -100vh;}
#headerResponcive.ouvert { width:100%; height: 100vh; opacity: 1;display: flex;transition: 0.8s; margin-top: 0px;}
.ChoixMenuResponcive { color: white; display: flex;}

/*HEADER*/

#header {width: 95vw; margin: 0px;height: calc(95vw*0.05);background-color: white;display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 1}
#header.Ouvert { display: flex; transition: 0.2s; margin-top: 0px;z-index: 1}
#header.close { display:none}

.menu {font-size: 1.4vw;width:95vw }
#menus li {float: right; margin-left:4vw}
#menus li a {text-decoration: none;}
#logoTexte {font-size: 1.4vw;text-transform: uppercase;cursor: pointer;position: absolute;display: block;left: 2.5%}
#logoTexte.cache {display: none}

#logoHome {width: 20vw ; height: calc(20vw*1.2); background-image: url(../img/3log.svg); background-size: cover;background-position: center;margin: auto;background-position:center;display: flex;margin-top: 50px; margin-bottom: 50px}
#banHome2 { height: calc(80vw*0.15);  width: 100%; display: flex; margin-top: 2vw; margin-bottom: 5vw}
#bigimg2 {width: 80vw ; height: calc(80vw*0.2); background-image: url(../img/BanContact.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}
#logoArboAnim2 {display: none; background-image: url(../img/3log.svg);width: 22vw; height: calc(22vw*1.2);background-repeat: no-repeat;background-position: center; margin: auto;left: 36vw; top: 11vw}

#containerLetterAnim{ margin:auto; }
       .floating-letter {
            font-size: 12.5vw;
            font-weight: bold;
            display: inline-block;
            cursor: pointer;
            transition: color 0.3s ease; /* Transition de couleur */
        }

        .floating-letter:hover {
            color:#3d3d3d; /* Couleur au survol */ }


#logoInsta{background-image: url(../img/instaLog.svg) ; width: 1.5vw; height: calc(1.5vw*1); background-repeat: no-repeat;display: flex; margin-left: 4vw; cursor: pointer;}
#logoLinkedin{background-image: url(../img/link.svg) ; width: 1.5vw; height: calc(1.5vw*1); background-repeat: no-repeat;display: flex;margin-left: 0.5vw;cursor: pointer;}

/*PARTIE IMAGE */
#ArboEnTexte { font-size:10.5vw; text-transform:uppercase; }

#bigTitre { font-size:14.7vw ; margin: auto; width: 95%; text-align: center;overflow: hidden; margin-top: 5vw; margin-bottom: 5vw}
#part1 {width: 60%; margin-bottom:40px;margin-bottom:40px; margin:auto; }
#marginTop{  }
.listeSite {width: 100%; text-align: justify;}

.titreRubrique{ margin-top:3.5vw;}
.texte { font-size:1.4vw; line-height:2.2vw; font-weight:100;margin-top:1.5vw}
.listeService { margin-top:1.5vw }

#cargoFormation {display: block;}

/*FOOTER*/
#footer {margin: auto; text-align: center; width: 95vw ; text-transform: uppercase;color:#3d3d3d; /*margin-top: -3vw*/}
#containerFooter { margin:auto; }
#logoFooter {background-image: url(../img/3log.svg);width: 3vw; height: calc(3vw*1.2); margin: auto; background-repeat: no-repeat;background-position: center;}
#textFooter { display:flex;font-size: 1.2vw;font-weight: bold}
#yearDate{}
#copyright{margin-left: 0.1vw;margin-right: 0.1vw;}
footer p {font-weight: bold; font-size: 0.86vw}
footer a {font-size: 0.86vw}

  #containerNewFooter{width: 95vw; display: flex;text-align: left;margin-top: 6vw; margin-bottom: 2vw}
  #foot1 {width: 30.833vw; margin-right: 1.25vw; font-size: 1.4vw; display: flex; align-items: flex-end; }
   #foot2 {width: 30.833vw; margin-right: 1.25vw; font-size:0.86vw ; text-align: center; margin: auto;display: flex;}
    #foot3  {width: 30.833vw; font-size: 1.4vw; display: flex;justify-content: flex-end;align-items: flex-end; }
    #instaLinks { cursor:pointer; }

 #cargoContact2 {display: none;  }
  #cargoContact {display: block;  }




/* SITE RESPENSIVE /////////////////////////////////////////////////////////////// */
/*//////////////////////////////////////////////////////////////////////////////// */
/*//////////////////////////////////////////////////////////////////////////////// */


@media screen and (max-width: 1024px)
{
    nav { display: block; width: 100%;}

        #LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 3.5vw;height: calc(3.5vw*0.8);background-repeat: no-repeat;display: block;cursor: pointer;z-index: 16;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;}
      #LogoMenuResponsive { display:block; transition: 0.5s;margin: auto;width: 3.5vw;height: calc(3.5vw*0.8);}

      #containerLogoMenu {height: calc(100vw*0.1); }
      #ArboEnTexte { font-size:13.5vw; text-transform:uppercase; }

      .menu {display: none;transition: 0.5s;color: white;}
      #header {height: calc(95vw*0.1);}
      #logoTexte {font-size: 2.5vw;}
      p {font-size: 1.8vw;}
       #main {padding-top: 9.5vw;}

            #logoFooter {width: 5vw;height: calc(5vw*1.2);}
      footer p {font-weight: bold; font-size: 1.4vw}
      footer a {font-size: 1.4vw}
      #textFooter { font-size: 1.8vw;}
   
    h1 {font-size: 5.93vw; text-transform: uppercase; font-weight:bold; }

#titreRubrique{ margin-top:5.5vw;}
.listeService { margin-top:2vw }

      #part1 {width: 80%;}
      h1 {font-size: 5.93vw;}
      .texte {font-size: 2.26vw;line-height: 3.1vw;margin-top: 2vw;}
      h2 {font-size: 2.3vw;line-height: 3.2vw;}
      #part1 li {font-size: 2.3vw; line-height: 3.2vw; font-weight: 100;}
      #banHome2 { height: calc(88vw*0.2);  width: 100%;  margin-bottom:5vw;}
      #bigimg2 {width: 88vw ; height: calc(88vw*0.2); background-image: url(../img/BanContact.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}
      
      #logoInsta{display: none;}
      #logoLinkedin{display: none;}
            #containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 5.93vw; font-size: 5.7vw; width: 80%}

}


/* RESPENCIVe MOBIL //////////////////////// */

@media screen and (max-width: 500px)


{
      nav { display: block; width: 100%;}

      .br {display: block;}
      .titreRubrique{ margin-top:8.5vw;}


          #LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 6.5vw;height: calc(6.5vw*0.8);background-repeat: no-repeat;display: block;cursor: pointer;z-index: 16;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;right: 5w}
      #LogoMenuResponsive { display:block; transition: 0.5s;margin: auto;width: 6.5vw;height: calc(6.5vw*0.8);right: 5vw}

      #containerLogoMenu {height: calc(100vw*0.25); }

      #header {height: calc(95vw*0.25);padding: 3vw}
      .menu {font-size: 3vw;}
      #logoTexte {font-size: 5.5vw;padding: 3vw}
      
      p {font-size: 7.5vw;}

            #part1 {width: 90%;}
               #main {padding-top: 23vw;}

        footer p {font-weight: bold; font-size: 2.26vw}
      footer a {font-size: 2.26vw}
      #logoFooter {width: 10vw;height: calc(10vw*1.2);}

      h1 {font-size: 9.59vw}
      .texte {font-size: 4.1vw;line-height: 5.68vw;margin-top: 3vw;}
      h2 {font-size: 4.3vw;line-height: 8.2vw;}
      #italique {font-size: 2vw ; margin-top: 2vw}
      #contCartouche {height: 22vh;display: flex;}
      #titreRubrique {margin-top: 8.5vw;}
      #cargoContainer {display: block; }
      #cargoFormation {display: block;}
      #container1 { width:100%;  margin:auto; }
        #container2{ width:100%; margin:auto;  }
      .listeService { margin-top:3vw }
        #part1 li {font-size: 4.1vw; line-height: 5.8vw; font-weight: 100;}

        h1 {font-size: 9.59vw; text-transform: uppercase; font-weight:bold; }


        
        #logoArboAnim2 {display: block; width: 50vw; height: calc(50vw*1.2); left: 23vw; top: 0vw}
     
            
        .textFooter {font-size: 3vw;line-height: 3vw}

        #logoFooter {width: 10vw;height: calc(10vw*1.2);}
         
            #containerHeaderResponcive {line-height: 10vw;padding-left: 20px;margin: auto ; width: 100%}
      
             #listeSite {text-align: left;}
           #logoTexte {display: block; width: 40vw} 
            #cargoContact {display: none;  }
           #cargoContact2 {display: block;}

      #banHome2 { display: none;}
      #bigimg2 {width: 95vw ; height: calc(95vw*0.2); background-image: url(../img/BanContact.jpg); background-size: cover;background-position: center;margin: auto;background-position:center;}    
                          #containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 9.59vw; font-size: 9.7vw; width: 80%}

      
}