:root {
    --main-color: hsl(0, 100%, 34%);
    --main-hover: hsl(0, 100%, 60%);
    --main-color-darker: hsl(0, 80%, 60%);
    --main-background: hsl(180, 0%, 5%); 
    --main-background-transparent: hsla(180, 0%, 5%, 0.9); 
    --main-transition-speed: 250ms;
}

/* Globals */
/* <editor-fold> */
::backdrop{
    background: var(--main-background-transparent);
}

html{
    font-size: 0.875rem;
    font-family: Arial, sans-serif;
    background: #222;
    color: white;
}

body {
    font-size: 1rem;
    line-height: 1.4;
    overflow: hidden;
}

*{
    position: relative;
    box-sizing: border-box;
}

a{
    color: var(--main-color);
    border-bottom: 1px dashed currentColor;
    text-decoration: none;
    padding-bottom: 0;
    transition: color 200ms linear;
}
a:hover{
    color: var(--main-hover);
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
/* </editor-fold> */


/* HEADER */
/* <editor-fold> */
header {
    position: sticky;
    top: 0;
    z-index: 999;
}
nav.main {
    background: var(--main-background);
    border-bottom: .4rem solid var(--main-color);
    display: flex;
}
nav.mobile{
    display: none;
}
nav.main a.toggler{
    display: none;
}
nav.main a{
    background: none;
    color: white;
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none; 
    padding: 0 1.4rem;
    line-height: 2.25rem;
    border: none;
    background: none;
}
nav.main a:hover{
    background: rgba(0,0,0,.5);
}
nav.main a .picto, nav.main a .fleche{
    display: none;
}
nav.main a.selected{
    background: var(--main-color);
    color: var(--main-background);
}
nav.main .others{
    display: none;
}
nav.main .logos {
    display: flex;
    flex: 1;
}
nav.main .logos .spacer{
    flex:1;
}
nav.main .logos a {
    display: flex;
    gap: 0.5rem;
    align-items: center
}
nav.main .logos svg{
    max-height: 1.75rem;
    width: auto;
}
@media screen and (max-width:1280px){
    nav.main .logos svg.typo{
        display: none;
    }
}

#logo {
    position: absolute;
    top: calc(2.25rem + 0.4rem - 1px);
    font-size: 0;
    border: none; background: none;
}
#logo img{
    max-width: 154px;
    height: auto;
}
#logo_mobile{
    display: none;
}
/* </editor-fold> */

/* FOOTER */ 
/* <editor-fold> */
footer{
    text-transform: uppercase;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: black;
    font-size: 10px;
    color: #7d7b7b;
    padding: .5rem 1rem;
    z-index:4;
    display: flex;
    justify-content: space-between;
}
footer a{
    color: #7d7b7b;
    text-decoration: none;
    border: none;
}
footer a::before{
    content: " • ";
    color: var(--main-color);
}
footer a:first-child::before{
    content : "";
}
footer a:hover{
    color: white;
}
/* </editor-fold> */

/* CONTENT */
#content {
    margin-top: 30px;
    margin-left: 180px;
    max-height: calc(100vh - 2.25rem - 0.4rem - 14px - 1rem - 30px);
}


/* Forms */
/* <editor-fold> */
input,
select,
textarea {
    color: #222;
}
button {
    border: none;
    background-color: var(--main-color);
    color: var(--main-background);
    cursor: pointer;
    padding: 10px;
    text-transform: uppercase;
}
button:hover{
    background-color: var(--main-hover);
}

.customfile-filename,
.customfile-upload { 
    margin: 0;
    padding: 0;
}
.customfile-filename {
    width: 230px;
    padding: .4em .5em;
    border: 1px solid #A8A49D;
    border-radius: 2px 0 0 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.customfile-filename:focus { 
    outline: none;
}
.customfile-upload {
    background-color: #b01c1a;
    border: medium none;
    color: #ffffff;
    cursor: pointer;
    float: right;
    font-size: 10px;
    padding: 8px;
    text-transform: uppercase;
    margin-top : 1px;
}
.customfile-upload:hover {
    background: #fafafa;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    color: #b01c1a;
}
.customfile-upload::-moz-focus-inner { /* Fix firefox padding */
    padding: 0; border: 0 
}
form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
form .input-group{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
form .input-group label{
    min-width: 30%;
    max-width: 35%;
}
form label.mandatory::after{
    content: ' \2731';
    font-size: 0.8rem;
    color: var(--main-color);
}
form .input-group input, form .input-group textarea{
    background-color: #ffffff;
    border: none;
    flex: 1;
    min-height: 2rem;
}
form .input-group input:active, form .input-group textarea:active{
    outline: 2px solid var(--main-color);
}
/* </editor-fold> */

/* Background */
/* <editor-fold> */
#background{
    position: fixed;
    top: -1rem; left: -1rem; 
    right: -1rem; 
    bottom: -1rem;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#background img, #background video{
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
}
#background:after{
    content: "";
    background: url(/medias/design/pattern.svg) repeat;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#loading{
    background: no-repeat center url("/medias/design/ajax-loader.gif") ;
    height: 40px; width: 40px;
    position: fixed; left: 50%; top: 50%; z-index: 1000;
    margin: -25px 0 0 -25px;
    z-index:40;
}
/* </editor-fold> */


/* Page Index */
/* <editor-fold> */
#page-index .bubble{
    max-width: 440px;
    position: absolute;
    color: white;
    font-size: 2rem;
    font-weight: 100;
    text-transform: uppercase;
    background: var(--main-background);
    padding: 1rem;
    margin-left: 4rem;
    z-index: 100;
    font-weight: 100;
}
#page-index .bubble p{
    margin:0;
}
#page-index .bubble:before{
    content: "";
    position: absolute;
    left: -4rem;
    top: 0;
    width: 0px;
    height: 0px;
    border: 2rem solid var(--main-background);
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    
}
#page-index .bubble.alt{
    background: var(--main-color);
    color: white;
}
#page-index .bubble.alt:before{
    border-color: var(--main-color);
}

#page-index .sidebar{
    background: var(--main-background-transparent);
    position: fixed;
    right: 0;
    width: 262px;
    top: 0;
    bottom: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
}

#page-index .sidebar .item{
    padding: 0 2rem;
    text-align: center;
}
#page-index .sidebar .item img{
    max-width: 110px;
}
#page-index .sidebar p{
    text-align: left;
    width: 170px;
}
#page-index .sidebar div.goto a{
    text-align: center;
    display: block;
    padding: 0.2rem 0;
    background: var(--main-color);
    border: none;
    color: black;
}
#page-index .sidebar div.goto img{
    display: none;
}
#page-index .sidebar div.goto a:hover{
    background: white;
}
/* </editor-fold> */



/* Page 404 */
/* <editor-fold> */
div.e404{
    text-align: center;
    text-shadow: 0 0 5px black;
	padding: 0px 20px;
}
#content h1.e404{
    color: white;
    text-shadow: 1px 1px 5px black;
    opacity: .85;
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: 100;
    font-style: italic;
}

.error{
    background-color: white;
    border: 2px solid #CC0000;
    color: #CC0000;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    font-weight:bold;
}

.success{
    background-color: white;
    border: 2px solid #339966;
    color: #339966;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    font-weight:bold;
}
/* </editor-fold> */


/* Page Contact */
/* <editor-fold> */
#page-contact .panel{
    background: var(--main-background-transparent);
    max-width: 60rem;
    padding: 1rem;
    margin: 10rem auto 0;
}
#page-contact .panel .data{
    display: flex;
    gap: 1rem;
}
#page-contact form{
    flex: 1;
}
#page-contact .addresses{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#page-contact .addresses section{
    padding-left: 1rem;
    border-left: .25rem solid rgba(255,255,255,.6);
    flex: 1;
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}

#page-contact .addresses .info{
    flex: 1;
}
#page-contact .addresses .logo img{
    max-width: 48px;
}
#page-contact .addresses h2{
    padding: 0;
    margin: 0;
}

#page-contact .addresses .networks a{
    border: none;
    background: none;
}
#page-contact .addresses .address p{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 0.8rem;
}
#page-contact .addresses .address p svg {
    max-height: 1rem;
    color: var(--main-color);
    display: none;
}
#page-contact .addresses .address a{
    display: inline-block;
    flex: 1;
    border: none;
    color: white;
}
/* </editor-fold> */


/* Page Présentation & Offres */
/* <editor-fold> */
#page-presentation .contenu{
    background: var(--main-background-transparent);
    max-width: 50vw;
    padding: 1rem;
    max-height: 50vh;
    overflow-y: auto;
}
#page-presentation .contenu article .title{
    display: none;
}
/* </editor-fold> */

/* Pastilles */
/* <editor-fold> */
.pastilles{
    margin-bottom:.5rem;
    height:115px;
    clear :both;
    display:flex;
    justify-content: flex-start;
}
.pastille{
    display: inline-flex;
    vertical-align: middle;
    margin-right: 0.5rem;
    position: relative;
    z-index: 1;
    align-items: flex-end;
    justify-content: right;
    padding: 0.25rem;
    line-height: 0.95;
    width: 115px;
    height: 115px;
    background: none;
    border: none;
    transition: color var(--main-transition-speed) linear;
}
.pastille::before{
    position: absolute;
    content: " ";
    background: var(--main-background-transparent);
    clip-path: polygon(50px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50px);
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transition: background var(--main-transition-speed) linear;
}
.pastille.on::before, .pastille:hover::before{
    background: var(--main-color);
}
.pastille.style-1{
    align-items: flex-start;
}
.pastille.style-1::before{
    transform: rotate(-90deg);
}
.pastille.style-2::before{
    transform: scaleX(-100%);
}
a.pastille{
    color: white;
    text-decoration: none;
}
a.pastille h2 {
    font-weight: normal;
    font-size:1.2rem;
    margin: 0;
    flex:1;
}
/* </editor-fold> */

/* Liens CTA */
/* <editor-fold> */
div.cta{
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    box-sizing: border-box;
}
div.cta a{
    display: inline-block;
    background: var(--main-color);
    color : white;
    text-decoration: none;
    padding: 1rem;
    border: none;
    max-width: 80%;
    transition: background 250ms linear;
}
div.cta a:hover{
    background: var(--main-hover);
}
/* </editor-fold> */

/* Page Team */
/* <editor-fold> */
#page-team #content {
    position: fixed;
    bottom: 119px;
    left: 0; right: 0;
    text-align: center;
    margin:0;
}
#page-team #content img{
    max-width: 672px;
    width: 100%;
    height: auto;
}
/* </editor-fold> */

/* Page Recrutement */
/* <editor-fold> */
#page-recrutement .panel{
    background: var(--main-background-transparent);
    padding: 1rem;
    max-width: 60vw;
    margin: 10rem auto 0;
}
#page-recrutement .data{
    display: flex;
    gap: 2rem;
}
#page-recrutement .data .speech, #page-recrutement .data form{
    flex: 1;
}
/* </editor-fold> */

/* Pages External */
#page-external .contenu{
    background: var(--main-background-transparent);
    max-width: 60rem;
    padding: 1rem;
    margin: 10rem auto 0;
}


/* Cards */
/* <editor-fold> */
.card-container{
    flex: 1;
/*    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    row-gap: 2rem;*/
    overflow: auto;
    
    display: grid;
    grid-template-columns: repeat(auto-fill, 235px);
    grid-auto-flow: row;
    gap: 4rem;
        
    
    width: calc(100vw - 180px);
    transition: all 0.25s linear;
}
.panel-displayed .card-container{
    
    width: calc(50vw - 180px);
    gap: 2rem;
}

.card{
    display: flex;
    flex-direction: column;
    width: 235px;
}
.card-header{
    flex: 0 0 119px;
    height: 119px;
    position: relative;
    clip-path: polygon(50px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50px);

    /* transform nécessaire pour couper le coin du côté droit. 
    Nécessite du coup de renverser l'image aussi (cf. card-image) */
    transform: rotateY(180deg);
}
.card-image {
    position: absolute;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-position: center center;
    background-size: cover;
    transform: rotateY(180deg);
}

.card-content{
    flex: 1;
}

.card-content, .card-footer{
    background: var(--main-background-transparent);
    padding: 0.5rem 1rem;
}
.card-content h2{
    margin-top: 0;
}
.card-content p{
    font-size: 0.85rem;
}

.card-footer {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 1rem;
}
.card-footer > *{
    flex: 1;
    align-content: center;
}
.card-footer a.read{
    background: var(--main-color);
    text-decoration: none;
    display: inline-block;
    min-width: 100px;
    text-align: center;
    padding: 0.5rem;
    color: white;
    border: none;
}
.card-footer a.read:hover{
    background: var(--main-hover);
}
.card-footer a.share{
    display:flex;
    justify-content: end;
    border: none;
}

.paginator-container {
    position: fixed;
    bottom: calc(14px + 1rem);
    left: 0; right: 0;
    display: flex;
    transition: right 0.25s linear;
}
.panel-displayed .paginator-container{
    right: 50vw;
}


.paginator-spacer {
    flex: 1;
}
.paginator {
    clip-path: polygon(1rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 1rem);
    padding: 0.25rem 1rem;
    background: rgba(0,0,0,.95);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.paginator-link {
    flex: 1;
    text-align: center;
    margin: 0;
    text-decoration: none;
    border: none;
}
.paginator-link.current{
    text-decoration: underline;
}
.paginator-previous, .paginator-next{
    margin: 0;
    font-size: 0;
    border: none;
    color: var(--main-color);
}
/* </editor-fold> */

/* Reading long data */
/* <editor-fold> */
.reading-container{
    z-index: 999;
    position: fixed;
    left: 100vw;
    width: 50vw;
    top: calc(2.25rem + 0.4rem);
    bottom: calc(14px + 1rem);
    background: rgba(0,0,0,.95);
    /* changed to flex when displayed */
    display: flex; 
    flex-direction: column;
    transition: left 0.25s linear;
}
.panel-displayed .reading-container{
    left: 50vw;
}
.reading-panel{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.reading-panel.hidden{
    display: none;
}
.reading-header{
    height: 250px;
    position: relative;
    clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100px);

    /* transform nécessaire pour couper le coin bas droit. 
    Nécessite du coup de renverser l'image aussi (cf. reading-image) */
    transform: rotateY(180deg) rotateX(180deg);
}
.reading-image{
    position: absolute;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-position: center center;
    background-size: cover;
    transform: rotateY(180deg) rotateX(180deg);
}
.reading-buttons{
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}
.reading-buttons a{
    flex: 0;
    border: none;
}
.reading-content{
    flex-grow: 1;
    overflow: auto;
    height: 1px;
    padding: 0 6rem;
}
/* </editor-fold> */

/* Actualite page */
/* <editor-fold> */
#page-actualites .actualites-header{
    display: none;
}
#page-actualites #content{
    display: flex;
    flex-direction: column;
}
/* </editor-fold> */


/* Realisations page */
/* <editor-fold> */
#page-realisations .realisations-header{
    display: none;
}
#page-realisations #content{
    display: flex;
    flex-direction: column;
}

.realisations-categories{
    text-transform: uppercase;
}
/* </editor-fold> */


/* Popups */
/* <editor-fold> */
#credits, #legal{ 
    background: none;
    color: white;
    border: none;
    max-width: 70vw;
    padding: 1rem;
    max-height: 70vh;
    gap: 1rem;
}
#credits[open], #legal[open]{
    display: flex;
}

#credits .body, #legal .body{
    background: black;
    flex: 1;
    overflow: auto;
    padding: 1rem
}

#credits .body{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
#credits .body article{
    max-width: 160px;
}

#credits .body article img {
    max-width: 160px;
    height: auto;
    filter: grayscale(100%);
    opacity:0.8;
    transition: all ease  0.3s;
}
#credits .body article img:hover {
    opacity:1;
    filter: grayscale(0%);
}
#credits .body article p{
    margin: 0.5rem 0;
}

#sharer-container{
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 999999;
    visibility:hidden;
}
#sharer-container.show{
    visibility: visible;
}

#sharer{
    position: fixed;
    top: 0;
    left: 0;
    background: var(--main-color);
    color: var(--main-background);
    padding: 1rem;
    box-shadow: 0 0 10px black;
    width: 300px;
}
#sharer h6{
    font-size: 1rem;
    margin: 0;
    border-bottom: 1px solid var(--main-background);
    margin-bottom: 1rem;
}
.sharer-icons{
    display: flex;
}
.sharer-icons a{
    flex: 1;
    color: var(--main-background);
    border: none;
    text-align: center;
}
.sharer-url{
    display: flex;
}
.sharer-url input{
    flex: 1;
}
/* </editor-fold> */


/* Code syntax highlight */
/* <editor-fold> */
pre, code{
    font-family: "Cascadia Mono", Consolas, monospace;
    background: hsl(0, 8%, 10%);
}
code{
    display: inline-block;
    padding: 0.1rem;
    color: #ffd6d0;
    border-radius: 0.1rem;
}
pre > code{
    outline: none;
    color: white;
}
pre{    
    padding: 0.5rem;
    tab-size: 4;
    border-left: 0.8rem solid hsl(0, 100%, 9%);
    overflow: auto;    
    scrollbar-color: hsla(0, 100%, 34%, 0.5) hsla(0, 100%, 90%, 0.25);
}
.code-WLangage-background-multiline-string{
    background-color: #cf92d91f;
}
.code-WLangage-background-multiline-string .code-WLangage-string{
    white-space: nowrap;
}

.code-WLangage-error{ 
    color:#ff0000; 
}
.code-WLangage-space{ 
    color:#000000; 
}
.code-WLangage-symbol{ 
    color:#fff; 
}
.code-WLangage-comment{ 
    color:#808080;     
    font-style:italic;
}
.code-WLangage-numeric{ 
    color:#ba68c8; 
}
.code-WLangage-string{ 
    color:#ba68c8; 
}
.code-WLangage-keyword{ 
    color:#ff8000; 
}
.code-WLangage-unknown-identifier{ 
    color:#4caf50; 
}
.code-WLangage-constant{ 
    color:#b1c33a;
    font-style:italic; 
}
.code-WLangage-variable{ 
    color:#5c6bc0; 
}
.code-WLangage-function{ 
    color:#91b5fe; 
}
.code-WLangage-type{ 
    color:#9575cd; 
}
.code-WLangage-class{
    color:#009180;
}
.code-WLangage-user-local-variable{
    color:#4caf50;
}
.code-WLangage-member{
    color:#009180;
}
.code-WLangage-user-constant{
    color:#bab819;
    font-style:italic;
}
.code-WLangage-property{
    color:#8fdf84;
}
.code-WLangage-label{
    color:#009180;
}
.code-WLangage-user-property{
    color:#009180;
}
.code-WLangage-named-parameters{
    color:#808080;
}
.code-WLangage-internal-procedure{
    color:#008080;
}
.code-WLangage-inactive{
    color:#808080;
}
.code-WLangage-translation-informations{
    color:#d8d8d8;
    background-color:#ffffff;
}
.code-WLangage-user-color{
    color:#000000;
    background-color:#dec0ad;
}
/* </editor-fold> */