@font-face {
    font-family: 'Traverse';
    src:    url('../fonts/Traverse-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Burn';
    src:    url('../fonts/Burn-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Cass';
    src:    url('../fonts/Cass-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Dissonance';
    src:    url('../fonts/Dissonance-Regular.woff2') format('woff2');
}

@font-face {
    font-family: "Pampa";
    src:    url('../fonts/Pampa-Regular.woff2') format('woff2');
}

@font-face { 
  font-family: "Olympics";
  src: url("../fonts/Olympics-Regular.woff2") format('woff2');
}

@font-face {
    font-family: "Pneu";
    src: url('../fonts/Pneu-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
  font-family: "Marseille";
  src: url("../fonts/Marseille-Bold.woff2") format('woff2');
}

@font-face { 
  font-family: "Sophia";
  src: url("../fonts/Sophia-Regular.woff2") format('woff2');
}

@font-face { 
  font-family: "Sillage";
  src: url("../fonts/Sillage-Regular.woff2") format('woff2');
}

@font-face { 
  font-family: "Pierre";
  src: url("../fonts/Pierre-Regular.woff2") format('woff2');
}

@font-face { 
  font-family: "Mineralith";
  src: url("../fonts/Mineralith-Regular.woff2") format('woff2');
}

@font-face { 
  font-family: "Quintus";
  src: url("../fonts/Quintus-Regular.woff2") format('woff2');
}

@font-face { 
  font-family: "Pimpine";
  src: url("../fonts/Pimpine-Regular.woff2") format('woff2');
}

@font-face { 
  font-family: "Clic";
  src: url("../fonts/Clic-Bold.woff2") format('woff2');
}

@font-face { 
  font-family: "Praline";
  src: url("../fonts/Praline-Italic.woff2") format('woff2');
}

body{
	font-family: 'Arial';
	font-size: 0.85em;
	background-color: var(--bg-color);
    color: var(--text-color);
}

*::selection{
    background-color: black;
    color: white;
}

*::-moz-selection{
    background-color: black;
    color: white;
}

h1 {
	width: 25%;
    font-size: 1em;
}

h3.about{
	font-size: 1.7em;
	border-bottom: 1px solid black;
	padding-bottom: 8px;
}

div#container{
	padding: 10px;
	max-width: 100%;
}

div#header{
	width: 100%;
	display: flex;
}

div#school{
	width: 25%;
}

div#right{
	display: flex;
	width: 25%;
}

nav{
	width: 25%;
}

a.typefaces__page {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: -100px;
    background-image: linear-gradient(90deg, var(--bg-color) 0%, var(--text-color) 50%, var(--bg-color) 100%);
    animation: glowIn 30s linear infinite;
    text-decoration: none; /* Désactiver le soulignement par défaut */
}

@keyframes glowIn {
    from {
        background-position: -1000px;
    }
    to {
        background-position: 1000px;
    }
}

a.typefaces__page__white{
  	color: transparent;
  	background-clip: text;
  	background-position: -100px;
  	background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%);
  	animation: glowInWhite 30s linear infinite;
  	text-decoration: none; /* Désactiver le soulignement par défaut */
}

@keyframes glowInWhite {
  from {
    background-position: -1000px;
  }

  to {
    background-position: 1000px;
  }
}


.font-page:hover {
  text-decoration: underline;
}

span#place{
	width: 50%;
}

a#lang{
	width: 50%;
	text-align: right;
}

a{
	color: var(--text-color);
	text-decoration: none;
}

a:hover{
	color: #aaaa;
}

a.italic{
	font-style: italic;
}

div#work{
	display: flex;
	gap: 10px;
	width: 100%;
}

div#projects{
	width: 35%;
	margin-top: 8px;
}

div#about__section{
	width: 50%;
	margin-top: 15px;
}

#images {
    width: 64.5%; /* La div "images" occupe 100% de la largeur parent */
    display: none;
    grid-template-columns: 60% 40%; /* Colonne gauche 70% et colonne droite 30% */
    grid-template-rows: auto auto; /* 2 lignes pour gérer les images sur la colonne de droite */
    grid-gap: 10px; /* Espace entre les images */
    grid-row-gap: 3px; /* Espace entre les lignes (images de la colonne droite) */
    height: 94.5vh;
}

#images img:first-child {
    grid-column: 1 / span 1; /* La première image occupe la première colonne (gauche) */
    grid-row: 1 / span 2; /* La première image s'étend sur 2 lignes */
}

#images img:nth-child(2), #images img:nth-child(3) {
    grid-column: 2; /* Les deux autres images occupent la deuxième colonne (droite) */
    grid-row: auto; /* Chaque image occupe une ligne dans la colonne de droite */
}

img {
	margin-top: 8px;
    width: 100%; /* L'image prend toute la largeur de son conteneur */
    height: auto; /* Maintient le ratio d'aspect de l'image */
    display: block; /* Pour éviter les espaces indésirables sous les images */
}


/* Style pour le panneau */
.panel {
    display: none; /* Caché par défaut */
    width: fit-content;
}

div.article-wrapper{
	border-bottom: 1px solid black;
}

div.article-wrapper-soon{
	border-bottom: 1px solid #aaaa;
	color: #aaaa;
}

h3.home__events__title{
	width: 100%;
	display: flex;
	padding-bottom: 3px;
	padding-top: 3px;
}

h3.home__events__title:hover{
	cursor: pointer;
	color: #aaaa;
}

div.about{
	width: 100%;
	display: flex;
	line-height: 1.1em;
	font-size: 1.7em;
	padding-bottom: 3px;
	border-bottom: 1.3px solid black;
}

div.flex{
	display: flex;
}

div.description{
	width: 100%;
	display: flex;
}

p.text__1{
	width: 45%;
	margin-top: 10px;
	margin-bottom: 6px;
}

p.text__2{
	width: 50%;
	margin-top: 10px;
	margin-bottom: 6px;
	margin-left: 5%;
}

span.title{
	width: 50%;
}

span.categorie{
	width: 30%;
}

span.date{
	width: 20%;
	text-align: right;
}

div#links {
	position: fixed;
	bottom: 10px;
    width: 50%;
    display: flex;
}

div#links-left{
	width: 48%;
}

div#links-right{
	width: 50%;
}

.header__burger{
	display: none;
}

.header__responsive{
	display: none;
}

.img__responsive{
	display: none;
}

div.images__responsive{
	width: 100%;
	display: none;
}

div#vignettes{
	width: 50%;
	height: 94vh;
	overflow: hidden;
}

#images__web{
	object-fit: cover;
}

/* 
    __  _____________  _______   _____    ____  __  ____________  ____  _______________
   /  |/  / ____/ __ \/  _/   | / ___/   / __ \/ / / / ____/ __ \/ __ \/  _/ ____/ ___/
  / /|_/ / __/ / / / // // /| | \__ \   / / / / / / / __/ / /_/ / /_/ // // __/  \__ \ 
 / /  / / /___/ /_/ // // ___ |___/ /  / /_/ / /_/ / /___/ _, _/ _, _// // /___ ___/ / 
/_/  /_/_____/_____/___/_/  |_/____/   \___\_\____/_____/_/ |_/_/ |_/___/_____//____/

*/

div.grid{
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	height: 50%;
	gap: 8px;
	width: 50%;
}

section.column{
	margin-top: 8px;
	width: 49%;
	box-sizing: border-box;
	padding-bottom: 8px;
}

h6{
	font-size: 1.7em;
	padding-bottom: 6px;
	border-bottom: 1px solid black;
}

p.description{
	margin-top: 8px;
	width: 100%;
}

p.date{
	text-align: right;
	padding-right: 6px;
	width: 25%;
}

div.texte{
	display: flex;
}

div#contain{
	display: flex;
	width: 95vw;
}

/*

  ________  ______  _______________   _________________
 /_  __/\ \/ / __ \/ ____/ ____/   | / ____/ ____/ ___/
  / /    \  / /_/ / __/ / /_  / /| |/ /   / __/  \__ \ 
 / /     / / ____/ /___/ __/ / ___ / /___/ /___ ___/ / 
/_/     /_/_/   /_____/_/   /_/  |_\____/_____//____/

*/

*::selection{
    background: var(--text-color);
    color: var(--bg-color);
}

:root {
    --bg-color: white; /* Couleur de fond par défaut */
    --text-color: black; /* Couleur de texte par défaut */
}

textarea {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 99.9%;
    height: 150px;
    font-size: 100px;
    letter-spacing: 0px;
    line-height: 1.5;
    resize: none;
    border: none;
    overflow-y: hidden;
    outline: none;
    background: none;
    color: var(--text-color);
}

textarea:hover{
    background-color: var(--text-color);
    color: var(--bg-color);
}

.font{
    width: 100%;
}

.font:nth-of-type(6):hover textarea {
    transition: all ease-out 2s;
    animation-duration: 1s;
    animation-name: pneu-anim;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: font-variation-settings 0.2s ease;
}

@keyframes mineralith-anim {
  from {
    font-variation-settings: "wdth" 100;
  }
  to {
    font-variation-settings: "wdth" 500;
  }
}

.font:nth-of-type(11):hover textarea {
    transition: all ease-out 2s;
    letter-spacing: 10px;
    animation-duration: 1s;
    animation-name: pneu-anim;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: font-variation-settings 0.2s ease;
}

@keyframes pneu-anim {
  from {
    font-variation-settings: "wdth" 100;
  }
  to {
    font-variation-settings: "wdth" 750;
  }
}

.controls {
    display: block;
    width: auto;
    padding-right: 15px;
    height: auto;
    line-height: 18px;
    color: var(--text-color);
}

.control {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.control-menu{
    color: var(--text-color);
    line-height: 18px;
}

label {
    font-size: 14px;
    min-width: 60px;
}
input[type="range"] {
    width: 100px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 2px;
    border-radius: 5px;
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    background: var(--text-color);
    height: 1px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    background: var(--text-color);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px;
}

.value {
    font-size: 12px;
    min-width: 40px;
}

div.specs{
    margin-right: 15px;
    width: 10%;
    border-right: 1px solid var(--text-color);
    padding-right: 15px;
}

div.download{
    text-align: right;
    float: right;
    width: 10%;
    margin-left: 35%;
}

div.control-menu{
    border-top: 1px solid var(--text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    width: 100%;
}
p{
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}

.download__btn{
    font-size: 14px;
    color: var(--text-color);
    text-decoration: none;
}

.download__btn:hover{
    color: var(--text-color);
    text-decoration: underline;
}

/*
  __________  ____  __   _____
 /_  __/ __ \/ __ \/ /  / ___/
  / / / / / / / / / /   \__ \ 
 / / / /_/ / /_/ / /______/ / 
/_/  \____/\____/_____/____/

*/

.tester{
    width: 25%;
}

.tester{
    border-left: 1px solid var(--text-color);
    width: 25%;
    padding-left: 15px;
    outline: none;
}

#switch input {
    margin-top: -10px;
    padding: 0px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    background-color: var(--bg-color);
}

/* Appliquer à tous les inputs de type color */
.color input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    width: 15px;
    height: 15px;
    cursor: pointer;
    padding: 0;
    background: none;
}

/* Styles spécifiques pour Chrome, Edge et Safari */
.color input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color input[type="color"]::-webkit-color-swatch {
    border-radius: 50%;
    border: 1px solid var(--text-color);
}

/* Styles spécifiques pour Firefox */
.color input[type="color"]::-moz-color-swatch {
    border-radius: 50%;
    border: 1px solid var(--text-color);
}


/* 
    __  _____________  _______   _____    ____  __  ____________  ____  _______________
   /  |/  / ____/ __ \/  _/   | / ___/   / __ \/ / / / ____/ __ \/ __ \/  _/ ____/ ___/
  / /|_/ / __/ / / / // // /| | \__ \   / / / / / / / __/ / /_/ / /_/ // // __/  \__ \ 
 / /  / / /___/ /_/ // // ___ |___/ /  / /_/ / /_/ / /___/ _, _/ _, _// // /___ ___/ / 
/_/  /_/_____/_____/___/_/  |_/____/   \___\_\____/_____/_/ |_/_/ |_/___/_____//____/

*/

@media screen and (max-width: 1920px){

	#images {
    	width: 65%; /* La div "images" occupe 100% de la largeur parent */
    	display: grid;
    	grid-template-columns: 60.5% 39.5%; /* Colonne gauche 70% et colonne droite 30% */
    	grid-template-rows: auto auto; /* 2 lignes pour gérer les images sur la colonne de droite */
    	grid-gap: 10px; /* Espace entre les images */
    	grid-row-gap: 3px; /* Espace entre les lignes (images de la colonne droite) */
    	overflow: hidden;
    	height: 94.5vh;
	}
}


@media screen and (max-width: 768px){

	h1{
		width: 75%;
		margin-left: 25%;
	}

	div#header{
		display: block;
	}

	div#work{
		display: flex;
		gap: 10px;
		width: 100%;
		height: 80vh;
		overflow: scroll;
	}

	div#projects{
		width: 100%;
		margin-top: 8px;
	}

	.header__burger {
	    display: block;
	    position: fixed; /* Fixe l'icône en haut à droite */
	    top: 12px; /* Espace du haut */
	    right: 12px; /* Espace de droite */
	    z-index: 1000; /* Au-dessus des autres éléments */
	    cursor: pointer; /* Curseur de type "pointer" */
	}

	.burger-icon, .close-icon {
	    position: absolute; /* Superposition des icônes */
	    top: 0;
	    right: 0;
	}

	/* Icône de la croix (masquée par défaut) */
	.close-icon {
	    display: none;
	    background-color: white;
	}

	/* Quand le menu est ouvert, afficher la croix et cacher le burger */
	.menu-open .burger-icon {
	    display: none;
	}

	.menu-open .close-icon {
	    display: block;
	}

    nav.header__responsive{
    	display: none;
    	position: absolute;
    	top: 0px;
    	font-size: 2em;
    	line-height: 1.1em;
    	background-color: white;
    	width: 96vw;
    	height: 96vh;
    	z-index: 100;
    	margin-top: 8px;
    }

    nav{
    	display: none;
    }

    a#lang{
    	display: block;
    }

    div#school{
    	margin-top: 15px;
    	width: 60%;
    }

    div#right{
    	margin-top: 15px;
    	display: flex;
    	margin-left: 50%;
    	width: 50%;
    }

    span#place{
    	width: 55%;
    }

    div#images{
    	display: none;
    }

    div.article-wrapper{
    	width: 100%;
    }

	div#links {
	    width: 100%;
	    display: flex;
	}

    div#links-left{
    	width: 46%;
    }

    div#links-right{
    	width: 50%;
    	text-align: right;
    }

    div.images__responsive{
    	display: block;
    	margin-bottom: 15px;
    	align-items: flex-start;
    }

    span.categorie{
    	width: 35%;
    }

    span.title{
    	width: 50%;
    }

    span.date{
    	width: 15%;
    }

    div.flex{
    	display: block;
    }

    div#about__section{
    	width: 100%;
    }

    div.about{
    	width: 100%;
    }

    div.grid{
    	height: 80vh;
    	overflow: scroll;
		width: 100%;
	}

	div#links{
		z-index: 1000;
	}

    section.column{
    	width: 100%;
	}

	div#vignettes{
		display: none;
	}

	#images__web{
		display: none;
	}

    div.font{
        width: 100%;
    }

    div.download{
        display: none;
        margin-left: 0px;
    }

    div.specs {
        margin-right: 0;
        width: 40%;
        padding-right: 0;
        line-height: 20px;
    }

    div.control-menu{
        border-top: 1px solid var(--text-color);
        line-height: 18px;
        width: 100%;
        display: flex;
    }

    div.controls{
        height: fit-content;
        width: 55%;
        gap: 0px;
        padding: 0px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .control{
        width: 100%;
        gap: 0px;
        padding: 0px;
        line-height: 20px;
    }

    span.value{
        padding-left: 10px;
    }

    div.tester{
        padding-left: 10px;
        padding-top: 3px;
        width: 5%;
    }
}

/*
    __  _____________  _______   _____    ____  ____  _____   ________
   /  |/  / ____/ __ \/  _/   | / ___/   / __ \/ __ \/  _/ | / /_  __/
  / /|_/ / __/ / / / // // /| | \__ \   / /_/ / /_/ // //  |/ / / /   
 / /  / / /___/ /_/ // // ___ |___/ /  / ____/ _, _// // /|  / / /    
/_/  /_/_____/_____/___/_/  |_/____/  /_/   /_/ |_/___/_/ |_/ /_/

*/

/* Styles pour l'impression */
@media print {

  /* Mode paysage */
  @page {
    size: landscape; /* Définit le mode paysage */
    margin: 2cm; /* Ajuster les marges de la page */
  }

  .article-wrapper {
  	margin-top: 0.2cm;
    page-break-after: always; /* Ajoute un saut de page après chaque .article-wrapper */
  }

  img{
  }

  div.panel{
  	display: block;
  }

  h3{
  	display: grid;
  }

  div#links{
  	display: none;
  }

  /* Forcer les autres sauts de page si nécessaire */
  .page-break {
    page-break-before: always;
  }
}