/*
    CSS de la SAÉ 1.05 — Produire un site web.
    de Léo Lesimple
    AUCUNE FONT SIZE EN PX QUE DU REM OU EM

    Créé le : 15/11/2024 13:42.
    Terminé le : 25/12/2024 01:12.
*/


/* Le box-sizing en border-box pour que padding, etc soient pris en compte dans le width. */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Asap', sans-serif;
    background: #F0F0F0;
    color: #202124;
    width: 100%;
    height: 300vh;
    margin: 0;
    padding: 0;
    transition-delay: 0s;
    scroll-behavior: smooth;
}

body.safari {
    background: #cf4f4f !important;
    overflow: hidden !important;
}

body.safari main {
    background: transparent;
    overflow: hidden !important;
}

.full-height {
    height: 100vh !important;
}

/*
    Styles "par défaut" pour le aside et main
*/

main, aside {
    max-width: 100%;
    background-color: #F8F8F8;
    margin: auto;
    height: 100%;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transition: background-image 0.5s ease, filter 1s ease, opacity 1s ease !important;
    transition-delay: 0s;
    z-index: 10;
}

main {
    background-image: url("../img/gradients/143.jpg");
    background-size: cover;
    background-position: center;
}

main.scrolled {
    max-width: calc(100% - 40px);
    background-color: #fff;
    background-image: url("../img/gradients/143.jpg");
    background-size: cover;
    background-position: center;
    margin: auto;
    /*
    padding: 20px;
    */
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    border-radius: 20px;
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    filter: drop-shadow(0px 0px 15px rgba(50, 52, 55, 0.35));
}

main.asideVisible {
    z-index: -2;
    opacity: 0;
}

aside {
    z-index: 1;
    opacity: 0;
    transition: all 1s ease;
}

aside.asideVisible {
    z-index: 1000;
    overflow: scroll;
    opacity: 1;
}

/*
    Première section : la section d'accueil
*/

.welcomeSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
}

/*
    Sections "présentation de musique".
*/

.musicContainer {
    padding-bottom: 110px;
}

.musicSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 115vh;
    height: auto;
    position: relative;
    padding: 20px;
}

/* Style spécial pour la dernière section pour allonger le scroll plus bas. */
.radicalOptimismSection {
    margin-bottom: 20vh;
}


/*
    Styles pour les titres et paragraphes
    light -> si le fond est clair, on met le texte en foncé

    hugeTitle -> Nom de l'album ou de la musqiue

    centered -> Position centrée sous l'artwork
*/
h1.light, h2.light, h3.light, h4.light, h5.light, h6.light, p.light, a.light {
    color: #202124 !important;
}

h1.hugeTitle.centered {
    font-size: 11rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 96;
    line-height: 9rem;
    letter-spacing: 0;
    color: #D3D3D3;
    text-align: center;
}

h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 96;
    font-size: 5.5rem;
    line-height: 3.5rem;
    letter-spacing: 0;
    margin: 0;
    color: #202124;
    text-align: center;
    z-index: 99;
}

h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 200, "opsz" 96;
    font-size: 3rem;
    letter-spacing: 0;
    margin: 0;
    color: #202124;
    text-align: center;
    z-index: 99;
}

h2.hugeTitle.centered {
    font-size: 4rem;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 96;
    letter-spacing: 0;
    margin: 0;
    color: #D3D3D3;
    text-align: center;
}

/*
    Styles pour les couvertures d'albums (artwork)

    artWorkContainer -> Conteneur contenant la pochette d'album, l'audio player, le lien vers la plateforme.
        -> positionUp -> Désigne l'état où la pochette d'album est en haut de l'écran.
    artWork -> Image de la pochette d'album
    smallArtwork -> Image de la pochette d'album à l'état d'audio-player.
    badge -> Lien vers la plateforme de streaming (badge Apple Music)
    stepTwo -> Désigne l'état où la pochette d'album est en haut de l'écran, l'audio player, le lien vers la plateforme est visible, le texte aussi.
*/

.artWorkContainer {
    width: 450px;
    height: 450px;
    position: absolute;
    transition: all 2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
    aspect-ratio: 1/1;
    z-index: 100;
}

.artWorkContainer:not(.positionUp) > .badge, .artWorkContainer:not(.positionUp) .audio-player {
    opacity: 0 !important;
    transition-delay: 0s !important;
    transition: all 0s !important;
}

.artWork {
    width: 450px;
    height: 100%;
    object-fit: cover;
    border-radius: 90px;
    transition: all 2s ease-in-out !important;
    filter: drop-shadow(0px 0px 35px rgba(0, 0, 0, 0.35));
}

.smallArtwork {
    width: 150px !important;
    height: 150px !important;
    border-radius: 35px !important;
    position: absolute;
    top: 0;
    left: 0;
}

.smallArtwork img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 35px !important;
}

.musicSection:has(.stepTwo) .artWorkContainer {
    position: absolute !important;
    top: 50px !important;
    left: 50px !important;
}

.positionUp {
    width: 100%;
    position: sticky !important;
    top: 25px !important;
    left: 50px !important;
}

/*
    Styles pour l'animation du texte de l'artiste.
    artistName -> Nom de l'artiste (seule la classe ne permet pas de voir le texte, il faut ajouter artistAppear)
    artistAppear -> Désigne l'état où le texte de l'artiste est visible. (ajouter à artistName)

    albumText -> Texte d'explication du choix de l'album (seule la classe ne permet pas de voir le texte, il faut ajouter musicalTextAppear)
    musicalTextAppear -> Désigne l'état où le texte d'explication est visible. (ajouter à albumText)

    figure -> Conteneur pour une image et une légende
    figcaption -> Légende de l'image

    badge -> Lien vers la plateforme de streaming (badge Apple Music)
    badgeAppear -> Désigne l'état où le lien vers la plateforme est visible. (ajouter à badge)

*/

.artistName {
    transform: translate(0, 100px);
    opacity: 0;
    height: 0;
    transition: all 3s ease-in-out;
}

.artistAppear {
    opacity: 1 !important;
    height: auto;
    transform: translate(0, 0) !important;
}

.albumText {
    font-family: 'Asap', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: normal !important;
    color: #D3D3D3;
    text-align: left;
    margin-top: 35px;
    opacity: 0;
    height: 0;
    transform: translate(0, 100px);
    transition: all 3s ease-in-out;
    max-width: 800px;
    z-index: 99;
}

.musicalTextAppear {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    height: auto;
}

figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    padding: 0;
}

figcaption {
    font-family: 'Asap', sans-serif;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: normal !important;
    color: #D3D3D3;
    text-align: center;
    z-index: 99;
}

.badge {
    opacity: 0;
    height: 0;
    transform: translate(0, 50px);
    transition: all 1.5s ease-in-out;
    transition-delay: 2s;
}

.badgeAppear {
    opacity: 1 !important;
    height: auto;
    transform: translate(0, 0);
}

/* si le lien est un lien externe, on ajoute un icône */
.badgeAppear[target="_blank"]::after {
    content: url("../img/link-out.svg");
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

/* ⚠️ Inutilisé !!!! */
.music {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1.5s ease-in-out;
    transition-delay: 2.5s;
}

/* ⚠️ Inutilisé !!!! */
.musicAppear {
    opacity: 1 !important;
    transform: translate(0, 0);
}


/* Testeur de la width de la fenêtre minimale de la SAÉ */
@media (min-width: 1023px) and (max-width: 1025px) {
    body {
        background: #a1ee8c !important;
    }
}

/*
    Styles pour l'audio player

    audio-player -> Conteneur pour l'audio player
    playerAppear -> Désigne l'état où l'audio player est visible. (ajouter à audio-player)

    play-pause-btn -> Bouton play/pause
    play-pause-btn:hover -> Animation du bouton play/pause
    play-pause-btn::after -> Icône du bouton play/pause
    play-pause-btn.pause::after -> Icône du bouton play/pause en pause

    progress-circle -> Cercle de progression de la musique
*/
.audio-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 1s ease-in-out;
    transition-delay: 3s;
    z-index: 1000;
}

.audio-player.playerAppear {
    opacity: 1 !important;
}

#artwork {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
}

.play-pause-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgba(55, 53, 53, 0.6);
    color: #202124;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    transition: transform .9s ease;
}

.play-pause-btn:hover {
    transform: scale(1.1);
}

.play-pause-btn:hover::after {
    transform: scale(1.2);
}

.play-pause-btn::after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('../img/play_fill.svg');
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(1);
    transition: transform .5s ease, filter .9s ease;
}

.play-pause-btn.pause::after {
    background-image: url('../img/pause_fill.svg');
    margin-left: 7px;
}

#progress-circle {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(rgba(255, 255, 255, 0.17) 0deg, transparent 0deg);
    z-index: 2;
}

/*
    Styles du formulaire

    formSection -> Section pour le formulaire
    formDesc -> Texte de description du formulaire après le titre

    form -> Structure du formulaire
    inputGroup -> Groupe de champs de formulaire
    inputsSmall -> Groupe de champs de formulaire en ligne
    label -> Étiquettes des champs de formulaire
    input:not(input[type=file]), textarea, select -> Champs de formulaire
    input[type=file] -> Champ de formulaire pour les fichiers
    input[type=file]::-webkit-file-upload-button -> Bouton pour les fichiers
    input[type=number] -> Champ de formulaire pour les nombres
    errorInput -> Champ de formulaire en erreur
    error -> Message d'erreur
    textarea -> Champ de formulaire pour les textes
    button[type=submit] -> Bouton de soumission du formulaire

*/

.formSection {
    padding: 80px 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    background: #f8f8f8;
}

form {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

form > * {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.formDesc {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.25rem;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 96;
    letter-spacing: 0;
    line-height: .6 !important;
    margin: .6rem 0 0 0;
    color: #7A808D;
    text-align: left;
}

.formDesc span {
    color: #202124;
}

.formDesc span span {
    color: rgb(163, 21, 21);
    font-size: larger;
}

.inputGroup {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-bottom: 1rem;
}

.inputsSmall {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    flex-wrap: nowrap;
    align-content: flex-start;
}

label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 70;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
    color: #202124;
    text-align: left;
    margin-left: 9px;
}


.inputGroup label[for]:has(+ input[required])::after,
.inputGroup label[for]:has(+ textarea[required])::after,
.inputGroup label[for]:has(+ select[required])::after {
    content: " *";
    color: #a31515;
    font-weight: bold;
}


input:not(input[type=file]), textarea, select {
    font-family: 'Asap', sans-serif;
    font-size: 1rem;
    font-stretch: condensed;
    line-height: normal;
    color: #202124;
    background: #f8f8f8;
    border: 2px solid #B7BFCB;
    border-radius: 10px;
    padding: 15px 15px;
    width: 100%;
    max-width: 550px;
    transition: all 0.5s ease-in-out;
}

input:not(input[type=file]):hover, textarea:hover, select:hover {
    border: 2px solid #9f9f9f !important;
    outline: none;
}

input:not(input[type=file]):active, textarea:active, select:active {
    border: 2px solid #202124 !important;
    outline: none;
}

input:not(input[type=file]):focus, textarea:focus, select:focus {
    border: 2px solid #202124 !important;
    outline: none;
}

input[type=file] {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 70;
    font-size: 1rem;
    line-height: normal;
    color: #202124;
    width: 100%;
    max-width: 550px;
}

input[type=file]::-webkit-file-upload-button {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 70;
    font-size: 1.3rem;
    font-stretch: condensed;
    line-height: normal;
    color: #202124;
    background: #E5E5E5;
    border: none !important;
    border-radius: 10px;
    padding: 7px 15px;
    width: fit-content;
    transition: all 0.5s ease-in-out;
    max-width: 550px;
}

input[type=file]::-webkit-file-upload-button:hover {
    background: #B7BFCB;
}

input[type=number] {
    width: fit-content !important;
}

.errorInput {
    border: 2px solid #d83232 !important;
}

.error {
    color: #d83232;
    font-weight: 900;
    line-height: normal;
    margin: 0;
}

textarea {
    font-size: larger;
    max-height: 160px;
    height: 100%;
    max-width: 550px;
    width: 100%;
    color: #202124;
    resize: none;
}

button[type=submit] {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 70;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
    color: #202124;
    background: #E5E5E5;
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

button[type=submit]:hover {
    background: #B7BFCB;
}

button[type=submit]:after {
    content: '';
    display: inline-block;
    opacity: 0;
    width: 0;
    height: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 0;
    transform: translate(-8px, 0);
    transition: all .5s;
}

button[type=submit]:hover:after {
    opacity: 1;
    width: 1rem;
    height: 1rem;
    margin-left: 10px;
    transform: translate(0, 0);
}

/*
    Styles de la prévisualisation des entrées du formulaire

    preview -> Conteneur pour la prévisualisation
    ArtWorkPreview -> Prévisualisation de la pochette d'album
    ArtWorkPreview:hover -> Animation de la prévisualisation de la pochette d'album
    ArtWorkPreview:active -> Animation de la prévisualisation de la pochette d'album en appui
    textPreview -> Conteneur pour les textes
        -> h1 -> Titre de l'album
        -> h2 -> Nom de l'artiste + Année de sortie
    #explanationPreview -> Texte d'explication de l'album
    #linkPreview img -> Lien vers la plateforme de streaming
    .spotify:hover -> Animation du lien Spotify
    .deezer:hover -> Animation du lien Deezer
    .apple-music:hover -> Animation du lien Apple Music
*/

.preview {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 20px 0;
}

.ArtWorkPreview {
    width: 150px;
    height: 150px;
    border-radius: 35px;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    filter: drop-shadow(9px 9px 35px rgba(0, 0, 0, 0.35));
    -webkit-filter: drop-shadow(9px 9px 35px rgba(0, 0, 0, 0.35));
    transition: all .5s ease-in-out;
}

.ArtWorkPreview:hover {
    transform: scale(1.1);
    filter: drop-shadow(-12px -12px 45px rgba(0, 0, 0, 0.35));
    -webkit-filter: drop-shadow(-12px -12px 45px rgba(0, 0, 0, 0.35));
}

.ArtWorkPreview:active {
    transform: scale(0.8);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.35));
    -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.35));
}

.textPreview {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

.textPreview h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 85, "wght" 600, "opsz" 96;
    font-size: 2.5rem !important;
    font-weight: 600;
    line-height: 1;
    color: #202124;
    text-align: left;
}

.textPreview h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 85, "wght" 300, "opsz" 65;
    font-size: 1.75rem;
    line-height: 1;
    color: #202124;
    text-align: left;
}

#explanationPreview {
    width: 100%;
    margin: 0;
}

#linkPreview img {
    transition: all 0.5s ease-in-out;
}

#linkPreview:hover img {
    transform: scale(1.2);
    /*    filter: drop-shadow(0px 0px 35px rgba(0, 0, 0, 0.35));
        -webkit-filter: drop-shadow(0px 0px 35px rgba(0, 0, 0, 0.35));*/
}

.spotify:hover {
    filter: drop-shadow(0px 0px 15px rgba(29, 185, 84, .6));
    -webkit-filter: drop-shadow(0px 0px 15px rgba(29, 185, 84, .6));
}

.deezer:hover {
    filter: drop-shadow(0px 0px 15px rgba(146, 60, 238, .6));
    -webkit-filter: drop-shadow(0px 0px 15px rgba(146, 60, 238, .6));
}

.apple-music:hover {
    filter: drop-shadow(0px 0px 15px rgba(255, 59, 48, .6));
    -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 59, 48, .6));
}

/*
    Styles pour la barre de navigation post albums

    toolbar -> Barre de navigation (en bas de l'écran, cachée par défaut)
    toolbar.visible -> Barre de navigation visible (ajouter à toolbar)
    a, button, .toolbarButton -> Différents boutons possibles de la barre de navigation
    .toolbarButton.arrowLeft:before -> Icône de flèche gauche
    .toolbarButton.arrowUp:before -> Icône de flèche haut (pour remonter en haut de la page)
*/

nav {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(229, 229, 229, 0.36);
    border : 2px solid #f8f8f8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    position: sticky;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    z-index: 1000;
    transition: all 1.5s ease-in-out;
}

nav h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 85, "wght" 600, "opsz" 96;
    font-size: 1.85rem;
    font-weight: 600;
    line-height: normal;
    margin: 0 !important;
    color: #202124;
}

.toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(200px);
    z-index: 1000;
    background-color: rgba(239, 239, 239, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: drop-shadow(0px 0px 35px rgba(255, 255, 255, 0.35));
    -webkit-filter: drop-shadow(0px 0px 35px rgba(255, 255, 255, 0.35));
    border: 2px solid #f8f8f8;
    border-bottom: none;
    border-radius: 30px 30px 0 0;
    transition: all 1.5s ease-in-out;
}

.toolbar.visible {
    transform: translateX(-50%) translateY(0);
}

.toolbar a, .toolbar button, .toolbarButton {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 85, "wght" 600, "opsz" 96;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
    color: #202124;
    background: #E5E5E5;
    padding: 10px 20px;
    border: none;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}

.toolbarButton.arrowLeft:before {
    content: url("../img/arrow-left-solid.svg");
    margin-top: 10px;
    width: 20px;
    height: 20px;
}

.toolbarButton.arrowUp:before {
    content: url("../img/arrow-up-solid.svg");
    margin-top: 10px;
    width: 20px;
    height: 20px;
}


.toolbar a:hover, .toolbar button:hover, .toolbarButton:hover {
    background: #B7BFCB;
}

.alert {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 85, "wght" 400, "opsz" 96;
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    color: #8f1f1f;
    background: #eac8c8;
    border-radius: 10px;
    border: 1px solid #8f1f1f;
    padding: 10px 20px;
    transition: all 0.5s ease-in-out;
}

/*
    Styles pour les droits d'auteur

    rightsContainer -> Conteneur pour les droits d'auteur
    pre -> Texte des droits d'auteur
    alert -> Message d'alerte
    rights -> Conteneur pour les droits
        -> h2 -> Titre de l'album
    legalDesc -> Description du projet
    creditText -> Texte des crédits (limité à 4 lignes)
    creditText.expanded -> Texte des crédits en entier (ajouter à .creditText)
    toggleContent -> Bouton pour afficher les crédits en entier
    toggleContent:hover -> Animation du bouton pour afficher les crédits en entier
*/

.rightsContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    align-content: flex-start;
    width: 100%;
    overflow: scroll;
}

pre {
    font-family: 'Asap', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    color: #202124;
    border-radius: 10px;
    padding: 15px 15px;
}

.rights {
    margin: 20px 0;
}

.rights > h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-variation-settings: "wdth" 75, "wght" 600, "opsz" 96;
    font-size: 3rem;
    font-weight: 600;
    line-height: normal;
    color: #202124;
}

.legalDesc {
    font-family: 'Asap', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    color: #202124;
    margin: 0;
}

.creditText {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limite à 4 lignes */
    -webkit-box-orient: vertical;
    max-height: 6em; /* Hauteur pour limiter l'affichage */
    transition: max-height 0.3s ease;
}

.creditText.expanded {
    max-height: none;
    -webkit-line-clamp: unset;
}

.toggleContent {
    background: none;
    border: none;
    color: #007BFF;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 5px;
}

.toggleContent:hover {
    text-decoration: underline;
}

/*
    Styles pour le mode sombre
    Mode sombre sommaire activé lorsque le thème de l'OS est en mode sombre, surtout pour le développement principalement de nuit.

   Changement des couleurs pour du foncé en fond et du clair en texte, les couleurs sont alors passées en pastel et les champs de formulaire sont inversés (fond foncé, texte/bordure clair).
*/

@media (prefers-color-scheme: dark) {
    body {
        background: #202124 !important;
    }

    main {
        /*
        background-image: none !important;
        */
        background-color: #55575e !important;
    }

    .formSection {
        background: #202124;
        color: #f8f8f8;
    }

    .formSection > * {
        color: #f8f8f8;
    }

    label {
        color: #f8f8f8;
    }


    .inputGroup label[for]:has(+ input[required])::after, .inputGroup label[for]:has(+ textarea[required])::after, .inputGroup label[for]:has(+ select[required])::after {
        color: #e17676;
    }

    .disclaimerStar {
        color: #f8f8f8 !important;
    }

    .disclaimerStar span {
        color: #e17676 !important;
    }

    input, textarea, select {
        background: #202124 !important;
        color: #f8f8f8 !important;
        border-color: #9c9c9c;
    }

    input:not(input[type=file]):hover, textarea:hover, select:hover {
        border: 2px solid #aeaeae !important;
    }

    input:not(input[type=file]):active, textarea:active, select:active {
        border: 2px solid #f8f8f8 !important;
    }

    input:not(input[type=file]):focus, textarea:focus, select:focus {
        border: 2px solid #f8f8f8 !important;
        filter: drop-shadow(0px 0px 35px rgba(255, 255, 255, 0.5));
        -webkit-filter: drop-shadow(0px 0px 35px rgba(255, 255, 255, 0.5));
    }

    .textPreview h1, .textPreview h2, .textPreview p {
        color: #f8f8f8;
    }

    #explanationPreview {
        color: #f8f8f8;
    }
}