/* —————————— BASE —————————— */

@import "base/colors.css";
@import "base/root.css";

/* ———————————————————— */

/* —————————— COMPONENTS —————————— */

@import "components/buttons.css";
@import "components/text.css";
@import "components/navbar2.css";

/* ———————————————————— */
/* —————————— LAYOUTS —————————— */

@import "layouts/container.css";
@import "layouts/sections.css";
@import "layouts/sliders.css";

/* ———————————————————— */

/* —————————— OTHER —————————— */

@import "projects.css";

/* ———————————————————— */
/* ———————————————————— */

/* ———————————————————— */
/* ———————————————————— */

/* —————————— RESET —————————— */

body {
  background-color: rgba(var(--main-color));
  color: rgba(var(--text-color));
}

.light-mode {
  background-color: rgba(var(--main-color));
  color: rgba(var(--text-color));
}

.dark-mode {
  background-color: rgba(var(--main-color));
  color: rgba(var(--text-color));
}

.mb__n-15px {
  margin-bottom: -15px;
}

/* ———————————————————— transition screen ———————————————————— */

/* ———————————————————— */

/* —————————— LAYOUT / BASE —————————— */

.layout {
  display: grid;
  grid-template-columns: 325px 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 0.3s ease;
}

/* .layout {
  min-height: 100vh;
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
  transition: grid-template-columns 0.3s ease;
}
 */

.layout.collapsed {
  grid-template-columns: 125px 1fr;
}

/* ———————————————————— */

/* —————————— TRANSITION / PAGE CONTENT —————————— */

/* Élément de transition */
.transition {
  position: absolute;
  bottom: -100%; /* Commence en dehors du conteneur par le bas */
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 123, 255, 1) 50%,
    /* Remplace rgba(0,123,255,1) par ta couleur principale */
      rgba(0, 123, 255, 0) 100%
  );
  transform: translateY(100%);
  z-index: 900;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.75s ease;
  opacity: 1;
}
/* Quand la transition est activée, elle se positionne correctement */
.transition.active {
  transform: translateY(0);
}
/* Pour le fade out sur la page de destination */
.transition.fade-out {
  opacity: 0;
}

/* ———————————————————— */

/* —————————— SCROLLBAR —————————— */

.custom-scrollbar {
  position: fixed;
  right: 5px;
  top: 0;
  bottom: 0;
  width: auto;
  z-index: 1000;
  box-sizing: border-box;
  pointer-events: none;
}

.scrollbar-thumb {
  width: 5px;
  min-height: 10px;
  background-color: rgba(var(--text-color), 0.5);
  backdrop-filter: blur(20px);
  border-radius: 100px;
  position: absolute;
  right: 5px;
  transition: width 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  pointer-events: all;
}

.scrollbar-thumb:hover {
  width: 8px;
  background-color: rgba(var(--text-color));
}

.scrollbar-thumb:active {
  width: 8px;
  background-color: rgba(var(--text-color));
}

/* ———————————————————— */

/* —————————— NAVBAR —————————— */

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 300px;
  height: calc(100vh - 60px);
  /* background-color: rgba(var(--main-color)); */
  /* border-right: 1px solid rgba(var(--stroke-color)); */
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1000;
  padding-right: 20px;
  padding-bottom: 10px;
  border-radius: 30px;
  box-sizing: border-box;
  transition: width 0.3s ease;
  overflow-y: auto;
}

.sidebar.collapsed {
  width: 100px;
}

.sidebar__logo {
  padding: 20px;
  padding-right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-expanded {
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}

.logo-expanded img {
  width: 100%;
  height: auto;
}

.logo-expanded svg {
color: red;
}

.logo-expanded:hover {
  transform: scale(1.05);
}

.logo-expanded:active {
  transform: scale(0.95);
}

/* Logo carré (collapsed) */
.logo-collapsed {
  display: none; /* Caché par défaut */
  aspect-ratio: 1 / 1; /* Carré */
  border-radius: 15px; /* Coins arrondis comme demandé */
  overflow: hidden; /* Pour que les coins arrondis fonctionnent */
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
}

.logo-collapsed img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintient le ratio tout en couvrant le conteneur */
}

.logo-collapsed:hover {
  transform: scale(1.1);
}

.logo-collapsed:active {
  transform: scale(0.9);
}

/* Affichage des logos selon l'état */
.sidebar.collapsed .logo-expanded {
  display: none;
}

.sidebar.collapsed .logo-collapsed {
  display: block;
}

/* Section de navigation */
.sidebar__navigation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 25px;
}

/* Section des paramètres */
.sidebar__settings {
  padding: 20px 0;
  padding-right: 25px;
  padding-bottom: 0px;
}

/* Styles pour les conteneurs d'icônes (pour qu'ils conservent leur taille) */
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  min-width: 35px; /* Empêche la compression */
  min-height: 35px;
  border-radius: 50%;
  background-color: #ddd;
  margin-right: 10px;
  flex-shrink: 0; /* Empêche la compression */
  transition: margin 0.3s ease;
}

.sidebar.collapsed .icon-container {
  margin-right: 0;
}

.sidebar.collapsed .sidebar__navigation {
  padding-right: 20px;
}

.sidebar.collapsed .sidebar__settings {
  padding-right: 20px;
}

/* Les liens et boutons dans la sidebar */
.nav-link,
.sidebar-button {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin: 5px 15px;
  border-radius: 15px;
  text-decoration: none;
  color: rgba(var(--text-color), 0.7);
  transition: all 0.3s ease;
}

.button-text {
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease, max-width 0.3s ease;
}

.sidebar.collapsed .button-text {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  display: none;
}

.button-text {
  display: inline-block;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease;
}

/* En mode collapse, on réduit l'opacité et on annule l'espace */
.sidebar.collapsed .button-text {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
}

.sidebar.collapsed .button-text {
  display: none;
}

.sidebar.collapsed .icon-container {
  margin-right: 0px;
  height: 35px !important;
  width: 35px !important;
  min-width: 35px !important; /* Empêche la compression */
  min-height: 35px !important;
  flex-shrink: 0; /* Empêche la compression lors de l'utilisation de flexbox */
  box-sizing: content-box; /* Assure que padding et border ne réduisent pas la taille visible */
}

.sidebar.collapsed .sidebar-button {
  padding: 10px 0px;
  display: flex;
  justify-content: center;
}

.logo {
  color: rgba(var(--logo-color));
  height: auto;
}

.dark-mode .logo {
  color: rgba(var(--logo-color));
}

.logo svg {
  height: auto;
  width: 100%;
  box-sizing: border-box;
}

.logo-img {
  padding: 25px;
  padding-right: 0px;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.05);
}

.logo-img:active {
  transform: scale(0.95);
}

.nav {
  flex: 1;
}

.nav-link {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin: 15px 20px;
  width: 100%;
  box-sizing: border-box;
  color: rgba(var(--button_text-color), 0.5);
  text-decoration: none;
  padding: 15px 25px;
  border-radius: 20px;
  transition: all 0.3s ease;
  justify-content: flex-start;
  align-content: center;
  flex-direction: row;
}

.nav-link:hover {
  background-color: rgba(var(--navLink-hover));
  color: rgba(var(--button_text-hover));
  transform: scale(1.03);
}

.nav-link:active {
  transform: scale(0.97);
}

.nav-link.active {
  background-color: rgba(var(--button-color));
  color: rgba(var(--button_text-active));
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.nav-link.active:hover {
  background-color: rgba(var(--button-hover));
  color: rgba(var(--button_text-active));
}

.nav-link .icon {
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" -25, "opsz" 24;
  transition: font-variation-settings 0.3s ease;
  margin-right: 5px;
}

.nav-link.active .icon {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" -25, "opsz" 24;
}

.sidebar-button {
  margin: 10px 20px;
  margin-right: 0px;
  transition: 0.3s ease;
}

.theme-toggle {
  margin-top: 10px;
  display: flex !important; /* Force display */
  opacity: 1 !important; /* Ensure it's visible */
  visibility: visible !important; /* Ensure it's visible */
}

.theme-toggle .icon-container {
  background-color: rgba(var(--button-navbar-color));
  display: flex !important; /* Ensure icon container is visible */
}

.theme-toggle:hover .icon-container {
  background-color: rgba(var(--button-navbar-hover));
}

.theme-toggle:active .icon-container {
  background-color: rgba(var(--button-navbar-active));
}

.dark-mode .theme-toggle .icon-container {
  color: rgba(var(--white));
}

.light-mode .theme-toggle .icon-container {
  color: rgba(var(--black));
}

.sidebar-button__up {
  margin-bottom: 30px;
  transform: rotate(180deg);
}

.sidebar-footer {
  display: flex;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 0px 20px 20px;
}

.icon-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--button-secondary-color));
  color: rgba(var(--button-secondary_text-color));
  border: none;
  border-radius: 30px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-button:hover {
  background-color: rgba(var(--button-secondary-hover));
  color: rgba(var(--button-secondary_text-hover));
  transform: scale(1.05);
}

.icon-button:active {
  transform: scale(0.97);
}

.icon-button svg {
  width: 24px;
  height: 24px;
}

/* ———————————————————— */

/* —————————— MAIN CONTAINER —————————— */

.mask__main-container {
  position: sticky;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 30px;
  border-radius: 30px;
  height: calc(100vh - 60px);
  box-sizing: border-box;
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  /* Quand le music player est présent */
  .layout.has-music-player & {
    height: calc(
      100vh - 175px
    ); /* Ajuster la hauteur pour laisser de la place au player */
    margin-bottom: -30px;
  }

  /* Masquer la scrollbar tout en gardant la fonctionnalité */
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.container_music-player {
  grid-column: 2 / 3;
  grid-row: 2 / 3; /* Explicitement placé sur la deuxième ligne */
  margin: 0 30px 30px 30px;

  /* Apparence */
  background-color: rgba(var(--main-color));
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* État par défaut : caché */
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
}

/* Quand le music player est visible */
.layout.has-music-player .container_music-player {
  display: block;
  height: auto;
  opacity: 1;
}

.main-container {
  background-color: rgb(var(--main-container-color));
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
  border-radius: 30px;
}



/* ———————————————————— */

/* —————————— PROJECTS —————————— */

.project-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  flex: 1;
  gap: 30px;
  height: 750px;
  width: 100%;
  margin-top: 40px;
}

.project-info {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  padding: 25px;
  align-items: flex-end;
}

.project-info::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.badge {
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

.project-title-card {
  font-size: 32px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  margin-top: 5px;
  margin-bottom: 5px;
}

.main-project {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  grid-column: 1;
  grid-row: 1 / span 2;
  border-radius: 30px;
  box-shadow: 0px 5px 20px rgba(var(--black), 0.2);
}

.solo-item-card__journal-card {
  display: block;
  width: 100%;
  height: 350px;
  box-sizing: border-box;
  border-radius: 30px;
  box-shadow: 0px 5px 20px rgba(var(--black), 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.solo-item-card__journal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: inherit; /* pour reprendre exactement le même radius */
  pointer-events: none; /* pour ne pas bloquer les interactions sur la card */
}
.solo-item-card__journal-card:hover {
  transform: scale(1.02);
}
.solo-item-card__journal-card:active {
  transform: scale(0.98);
}
.solo-item-card__journal-card__info-badge {
  display: inline-block;
  color: rgba(255, 255, 255);
  opacity: 0.5;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
}
.solo-item-card__journal-card__info-title {
  font-size: 24px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  margin-top: 5px;
}

.main-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit; /* pour reprendre exactement le même radius */
  pointer-events: none; /* pour ne pas bloquer les interactions sur la card */
}

.project-image {
  position: relative; /* Revenons à relative au lieu de fixed */
  overflow: hidden;
  transition: 0.3s ease;
  visibility: visible; /* S'assurer que c'est visible */
  opacity: 1; /* S'assurer que c'est opaque */
}

.secondary-project {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  border-radius: 30px;
  box-shadow: 0px 5px 20px rgba(var(--black), 0.2);
}

.secondary-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit; /* pour reprendre exactement le même radius */
  pointer-events: none; /* pour ne pas bloquer les interactions sur la card */
}

.secondary-project .project-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.secondary-project .project-date {
  font-size: 14px;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease;
  z-index: -2;
}

.secondary-project:hover {
  transform: scale(1.02);
}

.secondary-project:active {
  transform: scale(0.98);
}

.main-project:hover {
  transform: scale(1.01);
}

.main-project:active {
  transform: scale(0.99);
}

.separator {
  height: 1px;
  border-radius: 100px;
  background-color: rgba(var(--stroke-color));
}

.separator-straight {
  height: 1px;
  margin-right: -50px;
  border-radius: 100px;
  background-color: rgba(var(--stroke-color));
}

.secondary-project-1 {
  grid-column: 2;
  grid-row: 1;
}

.secondary-project-2 {
  grid-column: 2;
  grid-row: 2;
}

/* ———————————————————— */

/* —————————— FOOTER —————————— */

.stroke-line {
  height: 1px;
  border-radius: 100px;
  background-color: rgba(var(--stroke-color));
}

.footer_stroke-line {
  height: 1px;
  border-radius: 100px;
  background-color: rgba(var(--stroke-color));
  width: calc(100% - 80px);
  margin: 0 40px;
}

.footer-content {
  display: grid;
  grid-template-columns: auto 200px 1fr; /* Change 'auto' pour que la première colonne s'adapte */
  gap: 100px;
  min-height: 200px;
  padding: 40px 0px 40px 0px;
}

/* .footer-logo {
  width: 200px; 
  height: 200px; 
  box-sizing: border-box;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain; 
  transition: 0.3s ease;
}

.footer-logo img:hover {
  transform: scale(1.03);
} */

.footer-sitemap {
  display: flex;
  flex-direction: column;
  height: 200px; /* Même hauteur que le logo */
}

.footer-title {
  color: rgba(var(--text-color));
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 25px;
  font-style: italic;
  opacity: 0.5;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-link {
  display: inline-block;
  padding: 10px 25px;
  border-radius: 100px;
  letter-spacing: -0.5px;
  background-color: rgb(34, 34, 34);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s ease;
  width: fit-content;
}

.footer-link:hover {
  color: white;
  transform: scale(1.05);
  opacity: 1;
}

.footer-link.active {
  background-color: white;
  color: black;
}

.footer-contact {
  display: flex;
  height: 100%;
  align-items: stretch;
}

.reset-a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(var(--text-color));
  font-size: 14px;
  font-weight: 500;
  padding: 40px 40px;
}

.blink {
  animation: blink 1s infinite;
  display: inline-block;
  width: 4px;
  text-align: center;
}

/* ———————————————————— */

/* —————————— FOOTER INFOS —————————— */

/* Container global du footer */
.footer-infos__more-infos {
  max-width: 1300px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 20px;
  margin-top: 100px;
}

.right__more-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.right__more-info__second {
  margin-left: 5px;
  font-size: 12px;
}

/* Séparateur horizontal */
.footer__separator {
  width: 100%;
  height: 1px;
  background-color: rgba(var(--stroke-color), 0.5);
  /* Marge pour espacer le trait du texte */
  margin: 20px 0;
}

/* Conteneur du texte au milieu */
.more-infos {
  /* On peut ajuster la largeur maximale pour ne pas s'étirer sur tout l'écran */
  max-width: 1200px;
  width: 100%;
  /* Distribution du contenu : un span à gauche, un span à droite */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Ajustez la taille de la police si besoin */
  font-size: 12px;
  /* Marge verticale entre le trait du haut et du bas */
  margin: 10px 0;
}

/* Style du lien vers le site de Hadrien Verrecchia */
.more-infos a {
  color: rgba(var(--white));
  text-decoration: none;
}

.more-infos a:hover {
  color: rgba(var(--white));
}

/* ———————————————————— */

/* —————————— HERO —————————— */

.hero-section {
  width: auto;
  height: 85vh;
  overflow: hidden;
  margin: -50px -50px 0px -50px;
  position: relative;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
  z-index: 0;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content__informations-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 50px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 20px;
}

.hero-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
}

.hero-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(35, 35, 35) 0%,
    rgba(35, 35, 35, 0) 100%
  );
  z-index: -1;
}

.hero-info {
  display: grid;
  gap: 25px;
  max-width: 700px;
}

.hero_project-logo {
  position: relative;
  max-width: 300px;
  height: auto;
  z-index: 20;
}

.project-description {
  color: rgba(var(--white));
  font-size: 18px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-buttons {
  display: grid;
  grid-template-columns: auto auto;
  gap: 15px;
  width: fit-content;
}

.hero-controls {
  display: flex;
  gap: 15px;
}

/* ———————————————————— */

/* —————————— CAROUSEL —————————— */

.card-item {
  display: inline-block;
  width: auto;
  padding: 20px 0px;
  vertical-align: top;
  transition: all 0.3s ease;
}

.gallery {
  position: relative;
  margin-bottom: 30px;
}

.scroll-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.card-set {
  display: flex;
  gap: 30px;
  width: max-content;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.3s ease-in-out;
}

.gallery-item_card {
  display: block;
  width: 500px;
  height: 300px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0px 5px 20px rgba(var(--black), 0.3);
}

.gallery-item_card__music-card {
  width: 350px;
  height: 350px;
  aspect-ratio: 1 / 1;
}

.gallery-item_card__book-card {
  width: 300px;
  height: 450px;
  aspect-ratio: 1 / 16;
}

.gallery-item_card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit; /* pour reprendre exactement le même radius */
  pointer-events: none; /* pour ne pas bloquer les interactions sur la card */
}

.gallery-item_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.card-item:hover {
  transform: scale(1.02);
}

.card-item:active {
  transform: scale(0.98);
}

/* ———————————————————— */

/* —————————— CAROUSEL —————————— */

.carousel-infos {
  margin-left: 3px;
}

.project-title {
  font-size: 20px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: rgba(var(--text-color));
  margin-top: 10px;
}

.project-subtitle {
  font-size: 16px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: rgba(var(--text-color), 0.5);
  margin-left: 1px;
}

.carousel-infos_indicator {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 800;
  font-style: italic;
  font-family: "Inter", sans-serif;
  color: rgba(var(--text-color), 0.5);
  margin-left: 10px;
  text-transform: uppercase;
}

/* ———————————————————— */

/* —————————— CAROUSEL CARD LARGE—————————— */

.site-container {
  margin: 50px auto;
  box-sizing: border-box;
}

.slider {
  width: 100%;
  position: relative;
}

.slider-wrapper {
  display: flex;
  gap: 30px;
  transition: transform 0.6s ease-out;
  pointer-events: none;
}

.slider-wrapper * {
  pointer-events: auto;
}

.slider-slide {
  /*   flex: 0 0 calc(100% - 20px); */
  flex: 0 0 100%;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 30px;
  aspect-ratio: 16 / 7;
  display: flex;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0px 5px 20px rgba(var(--black), 0.2);
}

.slider-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit; /* pour reprendre exactement le même radius */
  pointer-events: none; /* pour ne pas bloquer les interactions sur la card */
  z-index: 5;
}

.slider-slide:hover {
  transform: scale(1.01);
}

.slider-slide:active {
  transform: scale(0.99);
}

/* Slide Content */
.slide-content {
  width: 100%;
  height: 100%;
}

.slide-content img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  box-sizing: border-box;
}

.slider-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

/* Controls and Pagination */
.slider-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.showcase-shelf__infos {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  padding: 30px;
  z-index: 1;
  align-items: center;
  justify-content: center;
  color: rgba(var(--white));
  font-size: 18px;
  font-weight: 600;
}

.showcase-shelf__infos::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 0px 0px 30px 30px;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————
  FOOTER
————————————————————————————————————————————————————————————————————————————————————————————— */

/* ———————————————————— CONTAINER FOOTER ———————————————————— */

/* .footer-container {
  background-color: rgba(var(--main-color));
  height: 250px;
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  padding: 50px;
  margin: 35px;
  margin-top: 0px;
  box-sizing: border-box;
  position: relative;
  border-radius: 30px;
} */

.cont-footer {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
  z-index: 1;
  padding-top: 100px;
}

.button-container {
  max-width: 1300px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.button-container .button {
  cursor: alias;
}

.cont-footer-topradius {
  border-radius: 0px 0px 20px 20px;
  background-color: rgba(var(--white));
  box-shadow: 0px 25px 20px rgba(var(--black), 0.5);
  height: 50px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.footer-logo {
  width: 100%;
  margin: 0px;
  margin-top: 50px;
  height: auto;
  display: flex;
  z-index: 1;
  justify-content: center;
  box-sizing: border-box;
  color: rgba(var(--white));
}

.footer-logo svg {
  color: rgba(var(--white));
}

.footer-logo img {
  width: 100%;
  z-index: 1;
}

/* ———————————————————— CONTAINER CONTACT ———————————————————— */

.cont-contact {
  position: relative;
  border-radius: 20px;
  max-width: 1200px;
  width: 100%;
  max-height: 450px;
  height: 100%;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: "Inter", sans-serif;
  cursor: alias;
}

.cont-contact img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease;
  background-position: center;
}

.cont-contact:hover img {
  transform: scale(1.02);
}

/* ———————————————————— CONTACT TEXT ———————————————————— */

.cont-contact-p {
  z-index: 2;
  font-weight: 500;
  font-size: 20px;
}

.cont-contact-p2 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 30px;
}

.cont-contact-text {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* ———————————————————— CONTAINER FOOTER LINK ———————————————————— */

.cont-footer-link {
  margin-top: 100px;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cont-fl-title {
  font-family: "Inter", sans-serif;
  color: rgba(var(--white-soft), 0.7);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 10px;
}

.cont-fl-link {
  font-family: "Inter", sans-serif;
  color: rgba(var(--white));
  font-weight: 500;
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
}

.cont-bot-foot {
  height: auto;
  width: 1200px;
  margin: auto;
  margin-bottom: 100px;
  display: flex;
  flex-direction: row; /* Flex direction to column */
  justify-content: space-between;
  font-family: "Inter", sans-serif;
  color: rgba(var(--white));
  font-weight: 500;
  font-size: 12px;
}

.bf-cont {
  display: flex;
  justify-content: flex-end;
}

.bf-cont-link {
  font-family: "Inter", sans-serif;
  color: rgba(var(--white));
  text-decoration: none;
}

/* ——————————————————————————————————————————————————————————————————————————————————————————————
  TRANSITION
————————————————————————————————————————————————————————————————————————————————————————————— */

/* ———————————————————— transition ———————————————————— */

.main-container__project-page {
  display: flex;
  width: 100%;
  position: relative;
}

.project-content {
  width: 100%;
}

.side-index {
  position: sticky;
  top: 50px;
  height: fit-content;
  width: calc((100% - 1100px) / 2 - 50px);
  align-self: flex-start; /* Important pour que sticky fonctionne correctement */
  margin-top: 50px;
}

.side-index__inner {
  background-color: rgba(0, 0, 0);
  border-radius: 30px;
  padding: 50px;
  width: 100%;
}

.side-index__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.side-index__header h2 {
  font-size: 20px;
  font-weight: 900;
  font-family: "Inter", sans-serif;
  color: white;
}

.side-index__progress {
  font-size: 20px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.25);
}

.side-index__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-index__group {
  margin-bottom: 2rem;
}

.side-index__part-text {
  color: rgba(255, 255, 255, 0.5);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  display: block;
  transition: opacity 0.3s ease;
}

.side-index__group.active .side-index__part-text {
  opacity: 1;
  color: #fff;
}

.side-index__item {
  position: relative;
  margin: 0.75rem 0;
  padding-left: 20px; /* Espace pour la ligne */
  cursor: pointer;
  display: flex;
  align-items: center;
}

.side-index__item-line {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  width: 0; /* Commence à 0 */
  background-color: #fff;
  transition: width 0.3s ease;
}

.side-index__item.active .side-index__item-line {
  width: 15px; /* Largeur finale de la ligne */
}

.side-index__item-text {
  color: rgba(255, 255, 255, 0.5);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.side-index__item.active .side-index__item-text {
  color: #fff;
}

/* Media queries pour la responsivité */
@media (max-width: 1400px) {
  .side-index {
    display: none; /* Cache l'index sur les petits écrans */
  }
}

/* ———————————————————— */

.mb-xxl {
  margin-bottom: 25px;
}

/* ———————————————————— */
/* Container global : on crée deux colonnes : image (gauche) et contenu (droite) */
.journal-header {
  font-family: "Inter", sans-serif;
  display: flex;
  width: 100%;
  height: auto;
  color: #fff; /* Couleur du texte en blanc */
  overflow: hidden;
  font-family: sans-serif; /* Exemple de police, à adapter */
  margin-bottom: 50px;
}

/* Colonne de gauche : l'image */
.journal-header__image {
  position: relative;
  width: 600px; /* 60% pour l'image, 40% pour le texte */
  overflow: hidden;
  border-radius: 10px;
}

.journal-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'image remplit tout l'espace sans se déformer */
}

/* Colonne de droite : le contenu textuel */
.journal-header__content {
  position: relative;
  width: auto;
  padding: 25px;
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Meta top : type d'article et date */
.journal-header__meta-top {
  display: flex;
  margin-bottom: 25px;
  flex-direction: column;
  gap: 5px;
}

.article-type {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  color: rgba(var(--white-soft));
  opacity: 0.75;
  font-weight: 700;
  text-transform: uppercase;
}

.article-date {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: rgba(var(--white-soft));
  opacity: 0.5;
  font-weight: 700;
  text-transform: uppercase;
}

/* Titre principal */
.article-title {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 25px 0;
  text-transform: uppercase;
}

/* Court résumé */
.article-excerpt {
  font-family: "Inter", sans-serif;
  max-width: 700px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Navigation controls for carousels */
.global__slider-controls {
  display: flex; /* Toujours visible par défaut */
  gap: 20px;
  justify-content: center;
  margin-top: 15px;
  position: relative;
  z-index: 10; /* Assurez-vous que les contrôles sont au-dessus du contenu */
}

.global__slider-controls__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #3d3d3d;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}

.global__slider-controls__button:hover {
  background-color: #3d3d3d;
}

.global__slider-controls__button:active {
  transform: scale(0.95);
  background-color: #252525;
}

.global__slider-controls__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.global__slider-controls__button svg {
  width: 20px;
  height: 20px;
  color: rgba(var(--white));
}

.site-footer {
  background-color: rgba(var(--main-container-color));
  padding-top: 0;
  position: relative;
  margin-top: 30px;
  color: rgba(var(--text-color));
  border-radius: 30px;
}

.footer-wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.footer-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-main {
  padding: 20px 40px 0;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 50px;
  min-height: 200px;
  padding: 40px 0px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  display: block;
  width: 120px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.05);
}

.footer-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(var(--text-color), 0.6);
  max-width: 200px;
}

.footer-links-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.footer-sitemap {
  display: flex;
  flex-direction: column;
}

.footer-title {
  color: rgba(var(--text-color), 0.7);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  display: inline-block;
  color: rgba(var(--text-color), 0.9);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: 0.2s ease;
  position: relative;
  padding: 4px 0;
  width: fit-content;
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgba(var(--primary-color));
  transition: width 0.3s ease;
}

.footer-link:hover {
  color: rgba(var(--text-color), 1);
}

.footer-link:hover::after {
  width: 100%;
}

.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(var(--text-color), 0.9);
  transition: 0.3s ease;
}

.social-icon:hover {
  background-color: rgba(var(--primary-color), 1);
  color: #fff;
  transform: translateY(-3px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-copyright {
  color: rgba(var(--text-color), 0.6);
}

.footer-author-link {
  color: rgba(var(--primary-color));
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-author-link:hover {
  color: rgba(var(--text-color));
}

.footer-location {
  display: flex;
  align-items: center;
  color: rgba(var(--text-color), 0.6);
}

.footer-time {
  font-weight: 700;
  color: rgba(var(--text-color), 0.9);
}

.blink {
  animation: blink 1s infinite;
  display: inline-block;
  width: 4px;
  text-align: center;
  margin: 0 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-logo-container {
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .footer-tagline {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-links-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-contact {
    align-items: center;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}