/* Style global */

@font-face {
    font-family: 'Faune';
    src:    url('woff/Faune-Display_Black.woff') format('woff'),
            url('woff2/Faune-Display_Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('woff/Faune-Display_Bold_Italic.woff') format('woff'),
            url('woff2/Faune-Display_Bold_Italic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Faune';
    src:    url('woff/Faune-Display_Thin.woff') format('woff'),
            url('woff2/Faune-Display_Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('woff/Faune-Text_Bold.woff') format('woff'),
            url('woff2/Faune-Text_Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('woff/Faune-Text_Italic.woff') format('woff'),
            url('woff2/Faune-Text_Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Faune';
    src:    url('woff/Faune-Text_Regular.woff') format('woff'),
            url('woff2/Faune-Text_Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


body {
    margin: 0;
    font-family: 'Faune', sans-serif; 
}

h1, h2, h3 {
    font-family: 'Faune', sans-serif; 
}

h1 {
    font-weight: 900;
}

h2 {
    font-weight: bold; 
}

h3 {
    font-style: normal; 
}



*{
    box-sizing: border-box;
}

#container{
    display: flex;
}

/* filtres */

#logo{
    width: 100%;
    transition: all 0.2s;
}

#logo:hover{
    transform: rotate(10deg);
}

aside{
    width: 23vw;
    height: 100vh;
    overflow-y: auto;
    padding: 1em;
}

.emoji-wrapper{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.5em;
    border-radius: 20px;
    padding: 0.5em;
    cursor: pointer;
    background-color: rgb(224, 224, 224);
    background-clip: padding-box; 
}

.emoji-wrapper::-webkit-scrollbar {
    display: none;
}

.emoji-wrapper span{
    font-size: 32pt;
        transition: transform 0.3s ease, background-color 0.3s ease;
    display: inline-block;
}

.emoji-wrapper span.selected {
    border-radius: 50%;
    transform: scale(1.3) rotate(10deg); /* Agrandissement et légère rotation */
}

.emoji-wrapper span.selected::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: radial-gradient(circle,         rgb(255, 238, 0) 0%, /* Jaune vif au centre */
    rgba(255, 238, 0, 0.8) 40%, /* Jaune un peu moins saturé */
    rgba(255, 238, 0, 0.2) 80%, /* Jaune très transparent */
    rgba(255, 238, 0, 0) 100% /* Complètement transparent */);
    z-index: -1;
    opacity: 50;
}

.emoji-wrapper span:hover {
    transform: scale(1.4);
}

form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.2em;
}

label{
    display: flex;
}

label span{
    background-color: rgb(0, 0, 0);
    border-radius: 200px;
    padding: 0.2em 0.75em;
    cursor: pointer;
    color: white;
}

label span:hover {
    transform: scale(1.1);
}

label input{
    display: none;
}

input:checked + span {
    background-color: rgb(45,71,151); 
    color: rgb(255, 251, 0);
    border: 1px solid transparent;
}

input[type="checkbox"]:checked + span::before {
    content: "× ";
}

/* grille d'images */

main{
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    background-color: rgb(0, 0, 0);
}

#image-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

figure{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

figcaption{
    color: rgb(120, 120, 120);
    font-size: 9pt;
}

img{
    width: 100%;
}

.verso img:last-of-type{
    display: block;
}

.verso img:first-of-type{
    display: none;
}

.recto img:first-of-type{
    display: block;
}

.recto img:last-of-type{
    display: none;
}