*{ 
    -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-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; }

h1, h2, h3, p {
    margin: 0;
}

.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); }
.cta.white:hover {
    color:#222222;
    background:var(--reverse-text);
    transition:0.2s ease;
}

.heavy-texts, .big-texts {
    font-weight: 500;
    letter-spacing: -0.02em;
}

.large-texts, .medium-texts {
    font-weight: normal;
}

.bold-text { font-weight: 500; }

.flex-col {
    display: flex; flex-direction: column;
}

.hover-scale { transition:0.2s ease; }
.hover-scale:hover { transform:scale(1.2); transition:0.2s ease; }


/*------------  HEADER ------------------*/
header { 
    display:flex; flex: none; align-items: center; justify-content: space-between;  position: fixed; 
    width: 100%; /*height: 6em;*/ padding: 1.5em 3em 1em; 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.button-menu {
    text-decoration: none;
    font-size: 3.5em; /*font-weight: 800; letter-spacing: -0.05em;*/
    color: var(--main-color);
    padding-bottom: .2em;
}

.button-menu:hover { text-decoration:underline; }
.email a { text-decoration:none; }
.email a:hover { text-decoration:underline; text-decoration-thickness: 3px;}

menu { 
    display: inline-flex; flex: none; flex-direction: column; align-items: stretch; justify-content: space-between; 
    width: 30vw; height: 100vh;
    position: fixed; top: 0; right: -30vw; z-index: 50;
    background: var(--sec-color);
    transition: right 0.25s ease;
}

menu .uppermenu { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 2em; }
menu .menuHead {
    display: flex; flex: none; align-items: center; justify-content: flex-end;
    padding: 1.5em;
}
menu .menuHead a { text-decoration: none; }
menu .menuHead a img { display: inline-flex; flex: none; height: 6em; aspect-ratio: 1/1; }
menu .menuHead a img:hover { transform: rotate(90deg); transition:0.2s ease; }
menu .menuHead #socialBar a { margin-right: 0.33em; }
menu .liens {
    display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 0.5em;
}
menu .liens a {
    text-align: center; text-decoration: none;
    color: var(--main-text); font-weight: bold; letter-spacing: -0.02em;
}
menu .liens a:hover {
    text-decoration: underline; text-decoration-thickness: 3px;
}
menu .liens a.active-menu-item { text-decoration: underline; color: var(--main-color); text-decoration-thickness: 3px; }

menu .mmfoot { display: flex; flex: none; flex-direction: column; align-items: stretch; padding: 1em 3em; 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 {
    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: end;
    padding-top: 1em; margin-bottom: 1em;
    border-top: 3px solid var(--second-text);  }
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: 8em; min-height: 93vh; }

/*------------  FOOTER ------------------*/
footer { display: flex; flex: none; align-items: stretch; }
footer .leftfoot a:hover, footer .rightfoot a:hover { text-decoration:underline; }
footer .topleftfoot {
    display: flex; flex-direction: row; gap: 4em; 
}
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.orpia-link { text-decoration: none; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: var(--main-text); }
footer .leftfoot nav a.orpia-link:before { content: '\203A'; display: inline-block; margin-right: 0.5em; }
footer .leftfoot #socialBar a { width: 4em;}

footer .rightfoot { flex: 1; padding: 4em; }
footer .rightfoot .email a { display: inline-block; padding: 0.75em 0; font-size: 1.75em; 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 ---------*/

.language-selection, #socialbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.33em;
}

.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row; 
    aspect-ratio: 1/1;
    margin: 0.66em 0;
    font-weight: bold;
    text-decoration: none; 
    border-radius: 100%;
    border: 3px solid;
}

#socialBar a {
    width: 3em;
    border-color: var(--second-text);
    color: var(--reverse-text);
}
#socialBar .link-button img { width: 50%; }

.lgbarFloat { position: fixed; left: 1em; z-index: 25; bottom: 0.5vh; }

.language-selection a {
    font-family: 'Corbert ExtraBold Wide', sans-serif;
    padding: 0.15em;
    background: var(--reverse-text);
    border-color: var(--main-color);
    color: var(--main-color);
    transition:0.2s ease;
}

.language-selection a:hover {
    font-family: 'Corbert ExtraBold Wide', sans-serif;
    padding: 0.15em;
    background: var(--main-color);
    color: var(--reverse-text);
    transform:scale(0.8);
    transition:0.2s ease;
}

.language-selection a.in {
    background: var(--main-color);
    color: var(--reverse-text);
}
.language-selection a.in:hover {
    background: var(--reverse-text);
    color: var(--main-color);
}