*{ 
    -moz-box-sizing: border-box; box-sizing: border-box; 
    scrollbar-color: rgba(217, 217, 217, .3) transparent; scrollbar-width: thin; 
}
:-moz-window-inactive {
    scrollbar-color: rgba(217, 217, 217, .15) transparent;
}
html,body{ 
	margin:0; padding:0; color: var(--main-text); background-color: var(--main-back); overflow: hidden;
}
site{
    display: flex; flex: none; flex-direction: column; align-items: stretch; width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: auto;
    font-size: 0.733vw; font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
span,cell{ display: inline-block; }
menu{ padding: 0; margin: 0; }
icon{ display: inline-block; background: no-repeat center center; background-size: contain; }
dt{ display: inline; }

.cta{ 
    text-decoration: none; display: inline-flex; flex: none; align-items: center; 
    padding: 0.12em 0.5em; font-weight: 500;
    color: var(--main-color); border: 3px solid var(--main-color); border-radius: 1.5em;
}
.cta lab{ display: inline-block; flex: 1; }
.cta.white{ color: var(--reverse-text); border: 3px solid var(--reverse-text); }

/*------------  HEADER ------------------*/
header{ 
    display:flex; flex: none; align-items: center; justify-content: space-between;  position: fixed; 
    width: 100%; height: 6em; padding: 1em 3em; z-index: 20; /*transition: margin-top 0.25s;*/ 
    background: var(--main-back); color: var(--main-text); font-family: 'Corbert ExtraBold Wide', sans-serif;
}
header #titre{
    display:flex; flex: none; align-items: center; font-size: 2em; font-weight: bold; text-decoration: none; color: var(--main-text);
}
header #titre img{ height: 2em; margin-right: 0.25em; }
header .mainTitle, header a{ text-decoration: none; font-size: 2.5em; font-weight: 800; color: var(--main-color); }

header.floated{}

menu{ 
    display: inline-flex; flex: none; flex-direction: column; align-items: stretch; justify-content: space-between; 
    width: 22vw; height: 100vh;
    position: fixed; top: 0; right: -22vw; z-index: 50;
    background: var(--sec-color);
    transition: right 0.25s ease;
}
menu .uppermenu{ display: flex; flex: none; flex-direction: column; align-items: stretch; }
menu .menuHead{ display: flex; flex: none; align-items: center; justify-content: flex-end; padding: 0.5em; margin-bottom: 1em; }
menu .menuHead a{ text-decoration: none; }
menu .menuHead a img{ display: inline-flex; flex: none; height: 4em; aspect-ratio: 1/1; }
menu .menuHead #socialBar a{ margin-right: 0.33em; }
menu .liens{
    display: flex; flex: none; flex-direction: column; align-items: stretch;
}
menu .liens a{
    text-decoration: none; margin: 0.25em 1em; text-align: center; font-size: 2em; font-weight: bold;
    color: var(--main-text);
}
menu .lien a.in{ text-decoration: underline; color: var(--main-color); }

menu .mmfoot{ display: flex; flex: none; flex-direction: column; align-items: stretch; padding: 1em; color: var(--second-text); }
menu .urlsocial{ display: flex; flex: none; align-items: center; justify-content: space-between; padding-bottom: 0.5em; }
menu .urlsocial .email a{ text-decoration: none; font-size: 1.66em; font-weight: bold; color: var(--second-text); }

menu .mmfoot #socialBar a{ margin-left: 0.33em; }

menu #orpiaLinks{ display: flex; flex: none; align-items: center; justify-content: space-between; padding-top: 1em; border-top: 2px solid var(--second-text); margin-bottom: 1em; }
menu #orpiaLinks a{ width: 33%; }
menu #orpiaLinks a img{ display: flex; flex: none; width: 100%; }

menu.show{ right: 0; }

/*--------------------------------------*/

mainct{ display: flex; flex: none; flex-direction: column; padding-top: 6em; min-height: 93vh; }

/*------------  FOOTER ------------------*/
footer{ display: flex; flex: none; align-items: stretch; }
footer .leftfoot{
    display: flex; flex: none; flex-direction: column;
    width: 33%;  padding: 4em;
}
footer .leftfoot .logo{ width: 16em; }
footer .leftfoot .logo img{ width: 100%; }
footer .leftfoot nav{ display: flex; flex: none; flex-direction: column; font-size: 2.25em; margin-top: 1em; }
footer .leftfoot nav a{ text-decoration: none; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: var(--main-text); }
footer .leftfoot nav a:before{ content: '\203A'; display: inline-block; margin-right: 0.5em; }

footer .rightfoot{ flex: 1; padding: 4em; }
footer .rightfoot .email a{ display: inline-block; text-decoration: none; padding: 0.75em 0; font-size: 2em; font-weight: 500; color: var(--second-text); }

footer .rightfoot .square{ display: flex; flex: none; flex-wrap: wrap; align-items: center; font-size: 1.5em; }
footer .rightfoot .square > *{ width: 50%; padding: 0.5em; }
footer .rightfoot .square h3{ margin: 0; }
footer .rightfoot nav{ display: flex; flex: none; flex-direction: column;}
footer .rightfoot nav a{ text-decoration: none; font-weight: 500; color: var(--main-text); margin-bottom: 0.2em; }
footer .rightfoot .nfo{ font-size: 0.75em; }
/*-------- tools ---------*/

#socialBar, #socialBar a{
    display: inline-flex; flex: none; align-items: center; justify-content: center;
}
#socialBar a{ 
    width: 3em; aspect-ratio: 1/1; margin: 0.66em 0; font-weight: bold; text-decoration: none;; font-family: Arial, Helvetica, sans-serif; 
    color: var(--second-text); border: 3px solid var(--second-text); border-radius: 100%;
}
#socialBar a img{ width: 50%; }
#socialBar a.in{ background: var(--second-text); color: var(--reverse-text); }

.lgbarFloat{ position: fixed; left: 1em; z-index: 25; bottom: 0.5vh; }
.lgbarFloat #socialBar a{ font-size: 1.5em; margin-right: 0.33em; background: var(--reverse-text); }
.lgbarFloat #socialBar a.in{ background: var(--second-text); }

#orpiaLinks{
    display: inline-flex; flex: none; align-items: center; justify-content: center;
}
#orpiaLinks a{ width: 4em; }
#orpiaLinks a img{ width: 100%; }
/*--------------------------------------*/