@font-face { font-family: "SourceCodePro"; src: url('../fonts/SourceCodePro-VariableFont.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Karla"; src: url('../fonts/Karla-VariableFont.woff2') format('woff2'); font-display: swap; }

html,body,div,h1,h2,h3,ul,li,p,input,button,figure, code, pre { margin:0; padding:0; border:0; box-shadow:none; outline:none; list-style-type:none } 
button,input { -webkit-appearance: none; -moz-appearance: none; appearance : none; background:none } 
body { -webkit-font-smoothing: antialiased; } 
figure { display:block } 
*,:after,:before { box-sizing:border-box } 

body{
    --bg-main : linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%));
    --bg-main2 : linear-gradient(to left, #434343 0%, black 100%);
    --color-font1 : #cccccc;
    --color-font2 : #b9bfe5;
    --color-highlight : #fff;
    --color-highlight-reversed : #000;
    --color-bluegrey : #5f7680;
    --color-bluegrey-h : #33596a;
    --color-border: #fff;
    --color-border1 : #555;
    --bg-title : rgba(255,255,255,0.1);
    --bg-block1 : rgba(35,35,35,0.4);
    --bg-block3 : linear-gradient(131deg,rgb(25 25 25 / 60%) 0%, rgb(105 105 105 / 10%) 80%);
    --bg-infobulle : #202020;
    --bg-infobulle-closer : #f5f5f5;
    --box-shadow : 0 0 6px 0 rgba(0,0,0,0.3);
    --font-main : "Karla";
    --font-regular : "SourceCodePro",Arial;
    --toggler-bg-color : #292731;    
    --toggler-shad : inset 1px -1px 2px 0px rgba(255,255,255,0.3);
}

body.lightMode{
    --bg-main : linear-gradient(to right, #d3cce3, #e9e4f0);
    --color-font1 : #333;
    --color-font1 : #333;
    --color-font2 : #687aea;
    --color-highlight : #000;
    --color-highlight-reversed : #fff;
    --color-bluegrey : #a3b2d4;
    --color-bluegrey-h : #b4c4ea;
    --color-border : #000;
    --color-border1 : #ddd;        
    --bg-title : rgba(255, 255, 255, 0.4);
    --bg-block1 : rgb(191 189 210 / 40%);
    --bg-block3 : linear-gradient(90deg, #e6e2f8, #f4f5ff);
    --bg-infobulle : #f5f5f5;
    --box-shadow : 0 0 6px 0 rgba(0,0,0,0.1);
    --toggler-bg-color : #fafafa;
    --toggler-shad : inset 1px 2px 4px -1px rgba(0,0,0,0.3);
}


[for="theme"]{ position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; height: 30px; line-height: 30px; padding: 0 5px; border-radius: 20px; background-color: var(--toggler-bg-color); box-shadow: var(--toggler-shad); font-size: 0; cursor: pointer; }
[for="theme"] span{ color: #ddd; }
[for="theme"] .circle{ position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-bluegrey); box-shadow: inset 0px -3px 4px 3px rgb(0 0 0 / 10%); transition: transform .5s; }
#theme:checked ~ main [for="theme"] .circle{ transform: translateX(100%); }
#theme:checked ~ main [for="theme"] span:nth-last-child(2){ color: #eec518; }

/* [for="theme"]{ position: absolute; top: 20px; right: 20px; display: block; width: 56px; height: 31px; font-size: 0; line-height: 0; cursor: pointer; background-color: var(--toggler-bg-color); box-shadow: var(--toggler-shad); border-radius: 50px; }
[for="theme"] .slider{ margin: 3px; transition: 0.3s; }
[for="theme"] .slider::before{ content: ""; display: block; width: 25px; height: 25px; border-radius: 50%; box-shadow: inset 8px -4px 0px 0px var(--color-highlight); transition: 0.3s; } */

#theme:checked ~ main [for="theme"] .slider::before{ transform: translateX(100%); box-shadow: none; background-color: var(--color-bluegrey); }

body::-webkit-scrollbar{ width: 10px; height: 10px }
body::-webkit-scrollbar-track{ background-color: var(--bg-block1); }
body::-webkit-scrollbar-thumb{ border-radius: 8px; background-color: var(--color-bluegrey); }

.scroll::-webkit-scrollbar{ width: 10px; }
.scroll::-webkit-scrollbar-track{ border-radius: 8px; background-color: rgba(255,255,255,0.1); }
.scroll::-webkit-scrollbar-thumb{ border-radius: 8px; background-color: rgba(255,255,255,0.3); }

body { display:flex; justify-content:center; min-height: 100vh; padding: 10px; background-attachment: fixed; background-image: var(--bg-main); font: 400 16px/22px var(--font-main); color: var(--color-font1); -webkit-font-smoothing:antialiased } 
/* body { background-image: linear-gradient(to right, #000 0%, #434343 30%, #434343 80%, #333 100% ); } */
/*
body { background-attachment: fixed; background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%)); }
*/

main { max-width: 1000px; margin: 50px 0 } 

h1 { font-size: 25px; line-height: 26px; color: var(--color-highlight); }
h2 { font-weight: normal; font-size: 16px;}
h3 { font: normal 16px/22px var(--font-main);}
p{ margin-bottom: 20px; }
a{ color: var(--color-highlight); text-underline-offset: 3px; transition: color 0.2s; }
a:hover{ color :var(--color-bluegrey) }
a[target="_blank"]:not(.nostyle)::after{ content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 0 0 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctitle%3Eexternal link%3C/title%3E%3Cpath fill='%23fff' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E"); vertical-align: text-top; }
strong{ color: var(--color-highlight) }
label[role="button"]{ cursor: pointer; }

.material-symbols-outlined{ vertical-align: middle; color: #fff; }
.arrowTR{ display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-style: solid; border-width: 2px 2px 0 0; border-color: var(--color-font1); transform: rotate(45deg); }
.closer{ position: relative; cursor: pointer; }
.closer::before, .closer::after{ position: absolute; top: 5px; left: 15px; content: ' '; height: 22px; width: 2px; background-color: var(--color-border1); transition: background-color .2s; }
.closer::before{ transform: rotate(45deg); }
.closer::after{ transform: rotate(-45deg); }
.closer:hover::before, .closer:hover::after{ background-color: var(--color-highlight); }

.infobulle{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; justify-content: center; align-items: center; padding: 10px; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(5px); z-index: 42; opacity: 0; animation: disappear 1s forwards; }
.infobulle.show{ display: flex; animation: appear 1s forwards; opacity: 1; }
.infobulle .w{ position: relative; width: clamp(200px, 100%, 500px); border-radius: 5px; background-color: var(--bg-infobulle); color: var(--color-font1); }
.infobulle .closer{ position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; padding: 16px; background-size: 23px 23px; border-left: 1px solid var(--color-border1); }
.infobulle .h{ min-height: 35px; padding: 5px 20px; border-bottom: 1px solid var(--color-border1); text-transform: uppercase; }
.infobulle .c{ padding: 20px; }
.infobulle.loader .c::before{ content: ""; display: block; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--color-border); border-color: var(--color-border) transparent var(--color-border) transparent; text-align: center; animation: loader 1.2s linear infinite; }
.infobulle h2{ color: var(--color-highlight) }

.wrapper{ display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } 

.bloc .tab { position: relative; padding: 5px 0 20px; text-transform: uppercase; font-family: var(--font-regular); font-weight: bold; color: var(--color-highlight) }
.bloc .tab h2{ margin: 0 0 0 -2px; padding: 5px 10px; border-radius: 5px; background: var(--bg-title) }
.bloc h3{ margin-bottom: 5px; color: var(--color-highlight) }

/* .intro{position: relative; }
.intro::Before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 100vh; height: 100%; background-image: linear-gradient(90deg, rgba(107, 132, 143,0.6), rgba(80,80,80,0.6)); z-index: -1; } */

.intro{ grid-column: span 2; display: flex; justify-content: space-between; flex: 0 0 100%; }
.intro .left, .intro .right{ flex: 0 0 calc(50% - 25px); width: calc(50% - 25px) }
.intro .nom{ display: flex; align-items: center; height: 60px; margin-bottom: 35px; padding: 0 10px; line-height: 32px; background-color: var(--bg-title); border-radius: 5px; }
.intro .nom > .i{ font-size: 40px; }
.intro h1{ display: inline; vertical-align: middle; margin-left: 10px; }
.intro ul li{ display: grid; grid-template-columns: 35px 1fr; gap: 0 15px; }
.intro ul li:not(:last-child){ margin-bottom: 15px; }
.intro ul li span{ grid-row: span 2; align-self: flex-start; height: 35px; border-radius: 50%; background-color: var(--color-bluegrey); text-align: center; line-height: 35px; }
.intro p{ text-align: center; font-size: 22px; }
.intro p:not(:last-child){ margin-bottom: 20px; }
.intro code { display: grid; grid-template-columns: auto auto auto; justify-content: center; padding: 0; font: normal 16px/22px var(--font-regular); }
.intro code .var{ font-weight: bold; color: var(--color-highlight) }
.intro code .string{ color: var(--color-font2) }
.intro code > .ponc{ padding: 0 5px; color: var(--color-font1) }
.intro code .spanC{ grid-column: span 3; }
.intro code > .var{ margin-left: 20px; }
.intro .right{ position: relative; padding: 20px; background-image: var(--bg-block3); border-radius: 5px;  box-shadow: var(--box-shadow); }
.intro .t{ padding-top: 2px; text-transform: uppercase; }

#skills { grid-row: span 3; }
#skills li{ position: relative; display: flex; flex: 0 1 calc(50% - 50px); margin-bottom: 10px; }
#skills li::before{ content: ""; flex: 0 0 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid var(--color-bluegrey); }
#skills li::after{ content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-bluegrey); }

#knowledges { grid-row: span 5; }
#knowledges h3::before { content: ".: "; font-family: Arial; }
#knowledges ul{ display: flex; flex-wrap: wrap; margin-bottom: 15px; }
#knowledges ul li{ margin-bottom: 5px; }
#knowledges li { margin-right: 5px; }
#knowledges .label{ position: relative; display: block; padding: 0 10px; border-radius: 5px; background-color: var(--color-bluegrey); text-decoration: none; color: var(--color-highlight); font: normal 14px/25px var(--font-regular); transition: background-color 0.2s; cursor: pointer; }
#knowledges .label:focus-visible{ outline: 2px solid var(--color-border); }
#knowledges .label:hover{ background-color: var(--color-bluegrey-h); }
#knowledges .languages li{ margin-right: 10px; }

.language{ display: block; width: 40px; height: 27px; border: 2px solid var(--border-color); }
.language{ width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
svg.sprite{ position: relative; left: -10px; width: 50px; height: 100%; }

#XP { position: relative; grid-row: span 4; scroll-margin-top: 30px; }
#XP > .w{ position: relative; }
#XP .content{ scroll-behavior: smooth; }
#XP .bloc{ padding-right: 20px; }
#XP .hider{ max-height: 0; overflow: hidden; transition: max-height 0.8s; }
#XP .hider .bloc:first-child{ padding-top: 20px; }
#XP .hider .bloc{ margin-bottom: 20px; }
#XP h3{ margin-bottom: 20px; }
#XP h3 span{ display: inline-flex; width: 100%; font-weight: normal; }
#XP h3 span::after{ content: ""; flex: 1 0 auto; border-bottom: 1px solid var(--color-border1); margin: 0 0 5px 10px; }
#XP ul{ margin: 0 20px; }
#XP ul li{ margin: 0 0 5px 0; padding: 5px 5px 5px 10px; border-radius: 0 5px 5px 0; border-left: 3px solid var(--color-bluegrey); background-color: var(--bg-block1); }
#XP .date{ color: var(--color-font2); font-weight: bold; }
#XP .mission{ display: block; color: var(--color-highlight) }

#XP label.more{ display: flex; justify-content: center; align-items: center; width: 100%; height: 30px; margin-top: 5px; font-size: 0; }
#XP label.more:hover{ cursor: pointer; }
#XP label.more::before{ content: ''; display: block; width: 15px; height: 15px; border-style: solid; border-width: 4px 4px 0 0; transform: rotateZ(135deg) rotateX(0deg) rotateY(0deg); transition: transform 1s; transition: opacity .2s, transform .5s; }
#XP label.more:hover::before{ opacity: 0.5; }

#open1:checked + .wrapper #XP .content{ max-height: 80dvh; overflow: auto; }
#open1:checked + .wrapper #XP .hider{ max-height: 2600px; overflow: visible; background-color: transparent; box-shadow: 0 -50px 25px -25px rgba(0,0,0,0) inset; border-radius: 0; color: inherit; }
#open1:checked + .wrapper #XP > .w{ background-image: linear-gradient(0deg, rgba(0,0,0,0.2), 8px, transparent, 40px, transparent); }
#open1:checked + .wrapper #XP label.more::before{ transform: rotateZ(135deg) rotateX(180deg) rotateY(180deg); }

.toHide{ position: absolute; }
#interests > .w{ position: relative; height: 540px; }
#interests picture{ position: relative; display: block; max-width: 475px; height: 100%; margin: 0 auto; z-index: 1; clip-path: url(#svgClip); overflow: hidden; }
#interests picture img{ object-fit: cover; position: absolute; left: 0; }

#interests ul{ position: absolute; top: 0; left: 50%; display: block; max-width: 475px; width: 100%; transform: translateX(-50%); z-index: 2; }
#interests li{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 100px; padding: 20px; border-radius: 10px; background-size: cover; color: var(--color-highlight); }
#interests li:not(:last-child){ margin-bottom: 10px; }
#interests p{ margin: 0; padding: 0 5px; font-weight: 600; background-color: var(--color-highlight-reversed); }
#interests p:first-child{ border-radius: 5px 5px 0 0; }
#interests p:last-child{ border-radius: 0 5px 5px 5px; }
#interests .pianist{ display: block; padding-right: 8px; line-height: 16px; font-size: 12px; font-style: italic; text-align: right; text-decoration: none; }

@keyframes disappear{ 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes appear{ 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes loader{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes flashes { from{ background-color: rgba(255,255,255,0.1); } to{ background-color: transparent; } }

@media (min-width: 768px) and (max-width: 1024px) {
    .intro .left, .intro .right { flex: 0 0 calc(50% - 10px); width: calc(50% - 10px); }
    .wrapper{ gap: 20px; }
    #XP ul{ margin: 0 }
}

@media (max-width: 769px){

    main{ margin: 0 }
    
    .wrapper{ display: block; max-width: 475px; }
    .wrapper > .bloc{ margin-bottom: 40px; }

    .intro{ flex-direction: column; align-items: center; }
    .intro .nom{ margin-bottom: 20px; }
    .intro code{ max-width: 365px; margin: 0 auto; font-size: 15px; }
    .intro .left, .intro .right{ width: 100%; margin-bottom: 20px; }
    .intro .right{ max-width: 365px; }
    .intro ul li:not(:last-child){ margin-bottom: 10px; }

    [for="theme"]{ top: 10px; right: 10px; }

    #XP ul{ margin: 0 10px; }
    #open1:checked + .wrapper #XP .hider{ max-height: 3000px; }

}