/*-- css:defaults --*/

/* Performance optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.quarto-title-meta-contents code {
  color: #003366; /* Couleur de texte en bleu foncé */
}


.listing-author code {
  color: #003366; /* Couleur bleu foncé */
}


.card-attribution.card-text-small.start {
  margin-top: 5px; /* Réduit la marge en haut à 5 pixels */
  margin-bottom: 5px; /* Réduit la marge en bas à 5 pixels */
}

.card-img-top {
  display: flex; /* Utilisation de flexbox pour aligner les éléments */
  justify-content: center; /* Centrer horizontalement */
  align-items: center; /* Centrer verticalement */
  height: 150px; /* Hauteur du cadre */
}

.card-img-top img {
  max-width: 100%; /* Assurer que l'image ne dépasse pas la largeur du cadre */
  max-height: 100%; /* Assurer que l'image ne dépasse pas la hauteur du cadre */
}

/* Customisation du back-to-top */
a#quarto-back-to-top:hover {
  background-color: #ffffff;
  color: black;
}

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

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


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

/* 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: rgb(247, 233, 206);
  text-underline-offset: 0.4em;
}

/* Ajout d'une plus grande marge pour la sidebar de marge du site */
#quarto-margin-sidebar {
  padding-top: 35%;
}
/* Transforme en majuscule mon nom et prénom */
.navbar-title {
  text-transform: uppercase;
  font-size: 1.5rem;
  transition: background-color 0.3s ease; /* Transition fluide pour l'effet */
  padding: 5px; /* Ajoute de l'espace autour du texte */
  border-radius: 5px; /* Ajoute des coins arrondis au conteneur */
}

.navbar-title:hover {
  background-color: #4a94d9; /* Couleur de fond bleu clair au survol */
}


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

.navbar {
  background-color: #06436e;
}

.quarto-title-banner{
  background-color: #0c2e42 ;
}

.btn-primary {
    color: #fff;
    background-color: #06436e;
    border-color: #06436e;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #06436e;
    border-color: #06436e;
}

.quarto-title-banner {
    margin-bottom: 1em;
    color: rgba(255,255,255,.7);
    background: #06436e;
}


.page-link {
      color: #06436e;
}


.page-link:hover {
    z-index: 2;
    color: #06436e;
    background-color: #06436e;
    border-color: #06436e;
}

a{
  color: #06436e;
}

b, strong {
    color: #06436e;
    font-weight: bolder;
}

div.quarto-post .listing-categories .listing-category {
    color: #06436e;
    border: solid 1px var(--bs-gray-400);
    font-size: .8em;
}


/* 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);
}

/* Project listing improvements */
.quarto-listing-category {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  margin: 0.25rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.quarto-listing-category:hover {
  background: #06436e;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(6, 67, 110, 0.2);
}

.quarto-listing-category.active {
  background: #06436e;
  color: white;
  border-color: #06436e;
}

/* Enhanced card styling */
.quarto-grid-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quarto-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Filter and sort UI */
.quarto-listing-filter {
  margin-bottom: 2rem;
}

.quarto-listing-sort {
  margin-bottom: 1rem;
}

/* 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;
  object-fit: cover;
  object-position: center;
}

/* Animation pour les statistiques */
.stat-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.8s ease-out;
}

.stat-box:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 24px rgba(6, 67, 110, 0.4) !important;
}

.stat-box:nth-child(1) {
  animation-delay: 0.1s;
}

.stat-box:nth-child(2) {
  animation-delay: 0.2s;
}

.stat-box:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Badges technologiques */
.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tech-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Couleurs spécifiques par technologie */
.badge-python {
  background: linear-gradient(135deg, #3776ab 0%, #ffd343 100%);
  color: white;
}

.badge-r {
  background: linear-gradient(135deg, #276dc3 0%, #5fa1d8 100%);
  color: white;
}

.badge-sql {
  background: linear-gradient(135deg, #f29111 0%, #f7b731 100%);
  color: white;
}

.badge-streamlit {
  background: linear-gradient(135deg, #ff4b4b 0%, #ff6b6b 100%);
  color: white;
}

.badge-docker {
  background: linear-gradient(135deg, #0db7ed 0%, #4dc3ed 100%);
  color: white;
}

.badge-ml {
  background: linear-gradient(135deg, #a97eff 0%, #c7a7ff 100%);
  color: white;
}

.badge-tableau {
  background: linear-gradient(135deg, #e97627 0%, #f19847 100%);
  color: white;
}

.badge-excel {
  background: linear-gradient(135deg, #217346 0%, #33a967 100%);
  color: white;
}

.badge-quarto {
  background: linear-gradient(135deg, #75aadb 0%, #95bfea 100%);
  color: white;
}

.badge-git {
  background: linear-gradient(135deg, #f05032 0%, #f56942 100%);
  color: white;
}

.badge-econometrie {
  background: linear-gradient(135deg, #06436e 0%, #0a5f99 100%);
  color: white;
}

.badge-datascience {
  background: linear-gradient(135deg, #72f1b8 0%, #92f5c8 100%);
  color: #06436e;
}

.badge-default {
  background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
  color: white;
}

/* Dark Mode Styles */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --border-color: #dee2e6;
  --navbar-bg: #06436e;
  --navbar-text: rgb(251, 225, 174);
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --border-color: #495057;
  --navbar-bg: #0a1929;
  --navbar-text: rgb(251, 225, 174);
}

[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .navbar {
  background-color: var(--navbar-bg) !important;
}

[data-theme="dark"] .card {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .quarto-title-banner {
  background-color: #0a1929 !important;
}

[data-theme="dark"] .timeline-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .stat-box {
  background: linear-gradient(135deg, #0a1929 0%, #1a3a52 100%) !important;
}

[data-theme="dark"] a {
  color: #5fa1d8;
}

[data-theme="dark"] a:hover {
  color: #75aadb;
}

[data-theme="dark"] .callout {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] code {
  background-color: var(--bg-secondary);
  color: #e83e8c;
}

[data-theme="dark"] pre {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .page-footer {
  background-color: var(--navbar-bg) !important;
}

/* Theme toggle button styling */
#theme-toggle {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--navbar-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

/* Smooth transition for theme changes */
body, .navbar, .card, .timeline-content, .stat-box, .quarto-title-banner {
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* 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;
    }
}