/* css styles */

/* Change la couleur du texte mis en surbrillance de bleu vers vert retro */
::selection {
    background: #72f1b8;
}

/* Retire l'underline sous "Gérer les cookies" */
a#open_preferences_center {
    text-decoration: none;
}

/* On hover, change la couleur vers le vert retro */
a#open_preferences_center:hover {
    color: #72f1b8;
}

/* Changement de la couleur du bouton Accept cookies */
button.cc-nb-okagree {
    background-color: #241b2f !important;
}

/* Changement de la couleur du boutons Reject cookies */
button.cc-nb-reject {
    background-color: #241b2f !important;
}

/* Changement de la couleur du boutons Save Changes cookies */
button.cc-cp-foot-save {
    background-color: #241b2f !important;
}

button.cc-nb-changep:hover {
    filter: brightness(85%);
}

button.cc-nb-reject:hover {
    filter: brightness(85%);
    color: #72f1b8;
}

button.cc-nb-okagree:hover {
    filter: brightness(85%);
    color: #72f1b8;
}

button.cc-pc-head-close:focus {
    border-color: #72f1b8 !important;
}

/* Réduction du padding pour la boite de dialogue des cookies et changement de la font family */
.termsfeed-com---nb .cc-nb-main-container {
    padding: 1rem;
    font-family: 'Montserrat';
}

/* Changement de la font family pour la boite de dialogue des cookies */
div.cc-pc-container {
    font-family: 'Montserrat';
}

/* Modification de la border-radius pour les code blocks */
code {
    border-radius: 0.25em;
}

/* Transforme en majuscule mon nom et prénom */
span.navbar-title {
    text-transform: uppercase;
    font-size: 1.75rem;
}

/* Chaque lettre de mon nom prenom change de couleur quand on hover dessus */
.navbar-title span:hover {
    color: #ffdb00;
}

/* Transforme en majuscule le texte des menus de navigation */
span.menu-text {
    text-transform: uppercase;
}

/* Couleur flashy pour mes expériences pro. sur la page d'accueil */
span.shiny-color {
    color: #ff8b39;
    transition: text-shadow 0.3s ease;
    display: inline;
}

/* Couleur de Snowflake */
span.snowflake-color {
    color: #a2d7f2;
}

/* Ce span est par défaut non visible, et devient visible sur les téléphones */
span.toggle-invisibility {
    display: none;
}

/* Ce span est par défaut inline mais devient block grâce à une media query */
span.education-dates {
    display: inline;
}

/* Ce span permet de faire en sorte que les lieux de mes études soient automatiquement mis à la ligne */
span.education-location {
    display: block;
}

/* Quand l'utilisateur hover, petit effet de surbrillance */
span.shiny-color:hover {
    text-shadow: 0 0 10px #ff8b39b6;
}

.navbar-toggler:focus {
    display: inline-block;
    padding: 1%;
    border-radius: 75%;
}

a {
    position: relative;
    /* Nécessaire pour positionner le ::after correctement */
}

a.footnote-back {
    text-decoration: none;
}

a.about-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.2em;
    background-color: #ff8b39;
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: left;
}

a:hover::after {
    transform: scaleX(1);
}

/* Gère le soulignement du texte des menus de navigation (1) */
a.nav-link {
    text-decoration: underline 0.15em rgba(0, 0, 0, 0);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 300ms, text-underline-offset 300ms;
}

/* Gère le soulignement du texte des menus de navigation (2) */
a.nav-link:hover {
    text-decoration-color: #2fe8f0;
    text-underline-offset: 0.4em;
}

/* Ajout d'une plus grande marge pour la sidebar de marge du site */
#quarto-margin-sidebar {
    padding-top: 35%;
}

/* Customisation du back-to-top on hover */
a#quarto-back-to-top:hover {
    background-color: #241b2f;
    color: white;
}

/* Retire le border radius ignoble du bouton back-to-top */
a#quarto-back-to-top {
    border-radius: 0em;
}

/* Ajout d'une plus grande marge entre le titre des projets et les catégories */
.quarto-grid-item .card-title {
    margin-bottom: 0.5em;
}

div#print_version.cell-output.cell-output-display.cell-output-markdown p {
    background-color: #72f1b8;
    color: #064126;
    padding: 10px;
    font-size: small;
    border-radius: 50px;
    display: inline-block;
    margin: 0;
}

div#print_date.cell-output.cell-output-display.cell-output-markdown p {
    background-color: #ff8b39;
    color: #4c0037;
    padding: 10px;
    font-size: small;
    border-radius: 50px;
    display: inline-block;
    margin: 0;
}

div.website-infos {
    display: flex;
    gap: 10px;
}

/* Gère le comportement on hover des listings de langages et technos */
.listing-category:hover {
    background-color: #72f1b8;
    border-color: #72f1b8 !important;
    color: white !important;
}

/* Gère le comportement on hover des listings de langages et technos */
.quarto-category:hover {
    background-color: #72f1b8;
    border-color: #72f1b8 !important;
    color: white !important;
    opacity: 0.8 !important;
}

/* Ajoute de la marge en haut du footer central (copyright) */
.nav-footer-center {
    margin-top: 1em;
}

/* Permet de styliser la div wine-scraping-intro ;) */
.wine-scraping-intro {
    background-color: black;
    text-align: justify;
    text-justify: distribute;
    padding-top: 4em;
    padding-bottom: 3em;
    padding-left: 2em;
    padding-right: 2em;
    color: #ffdb00;
    border-radius: 10px;
}

/* Gère l'animation de la main */
.wave {
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}

/* Change mon image de côté et ajoute une bordure et effet de transparence */
.about-image.round {
    transform: scaleX(-1);
    box-shadow: 0 5px 15px 0px;
    border: 5px solid transparent;
}

/* Permet de gérer un léger effet de zoom sur les images des projets */
.card-img-top {
    transition: transform 0.25s ease-in-out;
}

/* Permet de gérer un léger effet de zoom sur les images des projets */
.card-img-top:hover {
    transform: scale(1.05);
}

/* Gère l'animation du chevron */
.chevron-styling {
    text-align: center;
    animation: chevron-animation 2s ease-in-out infinite;
}

/* Génère une bordure dans les présentations revealjs embed avec ifame */
.slide-deck {
    border: 3px solid #dee2e6;
    width: 100%;
    height: 475px;
}

/* Définition des keyframes */
@keyframes wave-animation {
    0% {
        transform: rotate(0.0deg)
    }

    10% {
        transform: rotate(14.0deg)
    }

    20% {
        transform: rotate(-8.0deg)
    }

    30% {
        transform: rotate(14.0deg)
    }

    40% {
        transform: rotate(-4.0deg)
    }

    50% {
        transform: rotate(10.0deg)
    }

    60% {
        transform: rotate(0.0deg)
    }

    100% {
        transform: rotate(0.0deg)
    }
}

@keyframes chevron-animation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.75em);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---- MEDIA QUERIES ---- */

/* Ajoute de la margin-top à ma tronche quand le contenu est visualisé sur un écran de - de 1000px */
@media only screen and (max-width: 992px) {
    img.about-image.round {
        margin-top: 2.5em;
    }
}

/* Change la hauteur de la classe slide-deck (pour visualiser les presentations reveal.js) sur téléphone */
@media only screen and (max-width: 600px) {
    .slide-deck {
        height: 400px;
    }
}

/* Change l'affichage de la timeline sur téléphone */
@media only screen and (max-width: 600px) {
    .timeline-description {
        font-size: 0.8em;
    }

    .timeline-description p a.btn.btn-outline-primary.center {
        font-size: 0.95em;
        padding: 3%;
    }

    .timeline-description p {
        margin-bottom: 0.6rem;
    }
}

/* Overwrite une media query bootstrap pour mon footer */
@media (max-width: 767.98px) {
    .nav-footer-center {
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

/* Réduit la taille de la police de mon nom et prénom quand écran < 650px */
/* Permet de gérer la responsiveness des expériences pros quand l'écran est < 650px */
/* Même chose pour la partie Education */
@media (max-width: 650px) {
    span.navbar-title {
        font-size: 1.15rem;
    }

    span.toggle-invisibility {
        display: inline;
    }

    span.shiny-color {
        display: block;
    }

    span.education-dates {
        display: block;
    }

    span.company {
        display: block;
    }
}