/* ==========================================
   CONFIGURATION DU CARROUSEL
========================================== */

.sc {
  --sc-bg: #000;
  --sc-fg: #fff;
  --sc-mute: rgba(255, 255, 255, .55);
  --sc-line: rgba(255, 255, 255, .18);

  --sc-accent: #0100f4;
  --sc-accent-soft: #0100f4;

  --sc-font: "Montserrat", system-ui, sans-serif;

  --sc-w: clamp(230px, 70vw, 400px);
  --sc-gap: clamp(14px, 2.4vw, 32px);
  --sc-radius: clamp(10px, 1.4vw, 18px);

  --sc-tilt: 9deg;
  --sc-shrink: .09;
  --sc-fade: .4;
  --sc-parallax: 9%;

  --sc-ease: cubic-bezier(.77, 0, .18, 1);
}


#sc-portfolio{
    margin-top: -3em;
}
@media (min-width: 720px) {
  .sc {
    --sc-w: clamp(280px, 30vw, 430px);
  }
}

/* Variante claire facultative */

.sc[data-sc-theme="light"] {
  --sc-bg: #f2f2ee;
  --sc-fg: #000;
  --sc-mute: rgba(0, 0, 0, .55);
  --sc-line: rgba(0, 0, 0, .18);
  --sc-accent-soft: #0100f4;
}


/* ==========================================
   SECTION PRINCIPALE
========================================== */

.sc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  box-sizing: border-box;

  padding:
    clamp(40px, 8vw, 96px)
    0
    clamp(28px, 5vw, 56px);

  background: var(--sc-bg);
  color: var(--sc-fg);
  font-family: var(--sc-font);
}

.sc *,
.sc *::before,
.sc *::after {
  box-sizing: border-box;
}

.sc-head,
.sc-foot {
  padding-inline: clamp(18px, 5vw, 64px);
}


/* ==========================================
   PETIT TEXTE EN HAUT
========================================== */

.sc-eyebrow {
  margin: 0 0 1em;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-mute);
}

.sc-eyebrow::before {
  content: "";
  display: inline-block;

  width: .6em;
  height: .6em;

  margin-right: .8em;

  border-radius: 50%;
  background: var(--sc-accent);
}


/* ==========================================
   TITRE PRINCIPAL
========================================== */

.sc-title {
  margin: 0 0 clamp(24px, 5vw, 56px);

  font-family: var(--sc-font);
  font-size: clamp(2.4rem, 8.5vw, 7rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.04em;
}

.sc-title em {
  font-style: normal;
  color: var(--sc-accent-soft);
}


/* ==========================================
   ZONE DU CARROUSEL
========================================== */

.sc-viewport {
  position: relative;

  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;

  cursor: grab;
  outline-offset: 0px;
}

.sc-viewport.is-drag {
  cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {
  .sc-viewport {
    cursor: none;
  }
}


/* PISTE CONTENANT LES CARTES */

.sc-track {
  position: relative;

  display: flex;
  gap: var(--sc-gap);

  width: max-content;
  margin: 0;
  padding: 0;

  list-style: none;
  will-change: transform;
}


/* ==========================================
   CARTES ET INCLINAISON 3D
========================================== */

.sc-card {
  flex: 0 0 var(--sc-w);
  will-change: transform;

  transform:
    perspective(1100px)
    rotateY(
      calc(var(--d, 0) * var(--sc-tilt) * -1)
    )
    scale(
      calc(1 - var(--a, 0) * var(--sc-shrink))
    );

  opacity: calc(1 - var(--a, 0) * var(--sc-fade));
}

.sc-link {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

.sc-link:hover {
  color: inherit;
}


/* ==========================================
   IMAGES DES PROJETS
========================================== */

.sc-media {
  position: relative;
  aspect-ratio: 4/5;

  overflow: hidden;
  border-radius: var(--sc-radius);

  background: #000;
}

/* L'image déborde légèrement pour l'effet parallaxe */

.sc-media img {
  position: absolute;
  top: 0;
  left: -10%;

  width: 110%;
  height: 110%;

  object-fit: cover;

  transform: translate3d(
    calc(var(--d, 0) * var(--sc-parallax) * -1),
    0,
    0
  );

  transition: scale .9s var(--sc-ease);
}

/* Zoom au survol */

.sc-card:hover .sc-media img {
  scale: 1.06;
}

/* Léger effet de grain */

.sc-media::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .4;

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}


/* ==========================================
   INFORMATIONS SOUS CHAQUE CARTE
========================================== */

.sc-meta {
  display: grid;

  grid-template-columns: auto 1fr;
  gap: .25em .9em;

  align-items: baseline;

  margin-top: clamp(10px, 1.4vw, 18px);
}

/* Numéro */

.sc-num {
  grid-row: span 2;

  font-size: .75rem;
  font-weight: 700;

  color: var(--sc-accent-soft);
  font-variant-numeric: tabular-nums;
}

/* Nom du projet */

.sc-name {
  margin: 0;

  font-family: var(--sc-font);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Catégorie et année */

.sc-cat {
  margin: 0;

  font-size: .8rem;
  color: var(--sc-mute);
}


/* ==========================================
   PIED DU CARROUSEL
========================================== */

.sc-foot {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;

  gap: 16px 24px;

  margin-top: clamp(22px, 4vw, 48px);
}


/* ==========================================
   GRAND TITRE QUI CHANGE DE PROJET
========================================== */

.sc-now {
  height: 1.1em;
  overflow: hidden;

  font-family: var(--sc-font);
  font-size: clamp(2rem, 6.5vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.sc-now-list {
  margin: 0;
  padding: 0;

  list-style: none;

  transition: transform .9s var(--sc-ease);

  transform: translateY(
    calc(var(--sc-i, 0) * -1.1em)
  );
}

.sc-now-list li {
  height: 1.1em;
  white-space: nowrap;
}


/* ==========================================
   COMPTEUR ET FLÈCHES
========================================== */

.sc-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-count {
  min-width: 4.5em;
  margin-right: 6px;

  text-align: right;
  font-size: .85rem;

  color: var(--sc-mute);
  font-variant-numeric: tabular-nums;
}

.sc-count b {
  color: var(--sc-fg);
  font-weight: 700;
}


/* Boutons circulaires */

.sc-btn {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;
  padding: 0;

  border: 1px solid var(--sc-line);
  border-radius: 50%;

  background: transparent;
  color: inherit;

  cursor: pointer;

  transition:
    background .3s,
    color .3s,
    border-color .3s;
}

.sc-btn:hover {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  color: #fff;
}

.sc-btn:focus-visible,
.sc-viewport:focus-visible {
  outline: 10px solid var(--sc-accent-soft);
}


/* ==========================================
   BARRE DE PROGRESSION
========================================== */

.sc-progress {
  grid-column: 1 / -1;

  height: 2px;
  overflow: hidden;

  background: var(--sc-line);
}

.sc-progress i {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--sc-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}


/* ==========================================
   CURSEUR PERSONNALISÉ
========================================== */

.sc-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;

  pointer-events: none;
}

.sc-cursor span {
  position: absolute;

  display: grid;
  place-items: center;

  width: 84px;
  height: 84px;

  translate: -50% -50%;
  scale: 0;

  border-radius: 50%;

  background: var(--sc-accent);
  color: #fff;

  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;

  transition: scale .4s var(--sc-ease);
}

.sc-cursor.is-on span {
  scale: 1;
}

.sc-cursor.is-down span {
  scale: .78;
}

/* Pas de curseur personnalisé sur les écrans tactiles */

@media (hover: none), (pointer: coarse) {
  .sc-cursor {
    display: none;
  }
}


/* ==========================================
   ANIMATIONS D'APPARITION
========================================== */

.sc.sc-js .sc-head {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity 1s ease,
    transform 1s var(--sc-ease);
}

.sc.sc-js .sc-media {
  clip-path: inset(100% 0 0 0);

  transition:
    clip-path 1.2s var(--sc-ease)
    calc(var(--n, 0) * 90ms);
}

.sc.sc-js .sc-meta {
  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity .8s ease calc(.5s + var(--n, 0) * 90ms),
    transform .8s var(--sc-ease) calc(.5s + var(--n, 0) * 90ms);
}

.sc.sc-js.is-in .sc-head {
  opacity: 1;
  transform: none;
}

.sc.sc-js.is-in .sc-media {
  clip-path: inset(0 0 0 0);
}

.sc.sc-js.is-in .sc-meta {
  opacity: 1;
  transform: none;
}


/* ==========================================
   3 CARTES VISIBLES
========================================== */

/* Téléphones et petits écrans */

.sc {
  --sc-w: clamp(155px, 52vw, 310px);
  --sc-gap: clamp(12px, 2.4vw, 24px);
}

/* Ordinateurs et tablettes */

@media (min-width: 720px) {
  .sc {
    --sc-w: clamp(240px, 27vw, 380px);
    --sc-gap: clamp(18px, 2.4vw, 32px);
  }
}


/* ==========================================
   FENÊTRE IMAGE AGRANDIE
========================================== */

.sc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 60px 24px 24px;

  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.sc-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Image agrandie */

.sc-lightbox-image {
  display: block;

  max-width: min(100%, 1200px);
  max-height: 85vh;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 8px;

  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);

  transform: scale(0.96);
  transition: transform 0.3s ease;

  user-select: none;
  -webkit-user-drag: none;
}

.sc-lightbox.is-open .sc-lightbox-image {
  transform: scale(1);
}

/* Bouton croix */

.sc-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;

  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.sc-lightbox-close:hover {
  background: #0100f4;
  border-color: #0100f4;
  color: #fff;
  transform: rotate(90deg);
}

.sc-lightbox-close:focus-visible {
  outline: 2px solid #6d6dff;
  outline-offset: 4px;
}

/* Petit écran */




/* ==========================================
   RESPONSIVE MOBILE
========================================== */



@media (max-width: 560px) {
  .sc-lightbox {
    padding: 60px 12px 20px;
  }

  .sc-lightbox-image {
    max-width: 100%;
    max-height: 82vh;
  }

  .sc-lightbox-close {
    top: 12px;
    right: 12px;

    width: 42px;
    height: 42px;
  }

   .sc-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-ctrl {
    justify-content: space-between;
  }

}

/* Désactive les animations si nécessaire */


@media (prefers-reduced-motion: reduce) {
  .sc-lightbox,
  .sc-lightbox-image,
  .sc-lightbox-close {
    transition: none !important;
  }

   .sc * {
    transition: none !important;
  }

}