:root {

  --q-purple: #924db0;

  --q-yellow: #ffba00;

  --q-dark: #00272b;

  --q-green: #77966d;

  --q-red: #f64740;

  --q-bg: #00171b;

  --q-text: #f4f7f8;

  --q-surface: #081f25;

  --q-elevated: #0f2830;

  --q-muted-text: #c0ccd0;

}


* { box-sizing: border-box; margin: 0; padding: 0; }


html { scroll-behavior: smooth; }


/* évite que la navbar sticky masque les ancres */

#top, #about, #portfolio, #team, #contact { scroll-margin-top: 90px; }


body {

  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--q-bg);

  color: var(--q-text);

  line-height: 1.6;

}


a { color: inherit; text-decoration: none; }


header.nav-bar {

  position: sticky;

  top: 0;

  z-index: 30;

  width: 100%;

  background: rgba(0, 39, 43, 0.97);

  backdrop-filter: blur(7px);

}


.nav-inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0.75rem 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


/* logo */

.logo {

  display: flex;

  align-items: center;

  gap: .6rem;

  font-family: "League Spartan", system-ui;

  font-weight: 600;

  letter-spacing: .08em;

}


.logo-mark {

  width: 34px;

  height: 34px;

  border-radius: 999px;

  background-image: url("/private/rsc/logo.webp");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}


.logo span:last-child {

  font-size: .7rem;

  text-transform: uppercase;

  opacity: 0.7;

}


/* nav desktop */

.nav-desktop { margin-left: auto; }


.nav-desktop ul {

  display: flex;

  list-style: none;

  gap: 1.7rem;

  font-size: .9rem;

  text-transform: uppercase;

  letter-spacing: .12em;

}


.nav-desktop ul li a {

  position: relative;

  padding-bottom: .2rem;

  opacity: .85;

  transition: color .2s ease, opacity .2s ease;

}


.nav-desktop ul li a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 2px;

  border-radius: 999px;

  background: var(--q-yellow);

  transition: width .2s ease;

}


.nav-desktop ul li a:hover { color: var(--q-yellow); opacity: 1; }

.nav-desktop ul li a:hover::after { width: 100%; }


/* nav mobile */

.nav-mobile { display: none; }


#menuToggle {

  position: relative;

  z-index: 2;

  user-select: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-end;

}


#menuToggle input {

  display: block;

  width: 36px;

  height: 32px;

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  cursor: pointer;

  opacity: 0;

  z-index: 3;

}


#menuToggle span {

  display: block;

  width: 26px;

  height: 2px;

  margin-bottom: 5px;

  background: #f5f5f5;

  border-radius: 3px;

  z-index: 2;

  transform-origin: 4px 0px;

  transition:

    transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

    opacity 0.55s ease;

}


#menuToggle span:first-child { transform-origin: 0% 0%; }

#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }


#menuToggle input:checked ~ span {

  opacity: 1;

  transform: rotate(45deg) translate(-2px, -1px);

  background: #f5f5f5;

}


#menuToggle input:checked ~ span:nth-last-child(3) {

  opacity: 0;

  transform: rotate(0deg) scale(0.2,0.2);

}


#menuToggle input:checked ~ span:nth-last-child(2) {

  transform: rotate(-45deg) translate(0, -1px);

}


#menu {

  position: absolute;

  top: 64px;

  right: 0;

  margin-top: .4rem;

  width: 260px;

  max-width: min(80vw, 320px);

  padding: 1.1rem 1.4rem 1.4rem;

  list-style: none;

  background: rgba(0, 39, 43, 0.98);

  border-radius: .9rem;

  box-shadow: 0 16px 40px rgba(0,0,0,.55);

  transform-origin: 100% 0;

  transform: translateY(-8px);

  opacity: 0;

  pointer-events: none;

  transition: opacity .25s ease-out, transform .25s ease-out;

}


#menu li {

  padding: .4rem 0;

  font-size: .9rem;

  text-transform: uppercase;

  letter-spacing: .14em;

}


#menuToggle input:checked ~ ul {

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}


/* INTRO VIDEO */

.intro-video {

  position: relative;

  height: min(70vh, 520px);

  min-height: 260px;

  overflow: hidden;

  background: #000;

}


.intro-video-media {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: blur(2px);

}


.video-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.25);

  backdrop-filter: blur(3px);

}


.intro-video-overlay {

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at 20% 20%, rgba(0,0,0,.2), rgba(0,0,0,.85));

  display: flex;

  align-items: flex-end;

  padding-bottom: 3rem;

}


.intro-kicker {

  font-size: .85rem;

  text-transform: uppercase;

  letter-spacing: .18em;

  color: var(--q-yellow);

  margin-bottom: .8rem;

}


.intro-title {

  font-family: "League Spartan", system-ui;

  font-size: clamp(2.4rem, 4vw, 3.2rem);

  max-width: 32rem;

}


.container {

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 1.5rem;

}


section { padding: 4rem 0; }


/* HERO */

.hero {

  background: var(--q-dark);

  color: #f5f5f5;

  padding: 5rem 0 4rem;

}


.hero-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);

  gap: 3rem;

  align-items: center;

}


h1, h2, h3, h4 { font-family: "League Spartan", system-ui; }


h1 {

  font-size: clamp(2.6rem, 4vw, 3.5rem);

  margin-bottom: 1rem;

}


.hero-tag {

  font-size: .9rem;

  text-transform: uppercase;

  letter-spacing: .18em;

  color: var(--q-yellow);

  margin-bottom: .7rem;

}


.hero p {

  max-width: 32rem;

  margin-bottom: 1.8rem;

  opacity: .95;

}


.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }


.btn {

  border-radius: 999px;

  padding: .85rem 1.8rem;

  border: 1px solid transparent;

  font-size: .9rem;

  text-transform: uppercase;

  letter-spacing: .16em;

  font-weight: 500;

  cursor: pointer;

  background: none;

  transition: transform .18s ease-out, box-shadow .18s ease-out, background-position .25s ease-out, color .18s ease-out, opacity .18s ease-out;

}


.btn-primary {

  background: linear-gradient(135deg, var(--q-yellow), var(--q-purple));

  background-size: 140% 140%;

  background-position: 0% 50%;

  border: none;

  color: #111;

}


.btn-primary:hover {

  transform: translateY(-1px);

  box-shadow: 0 10px 28px rgba(0,0,0,.45);

  background-position: 100% 50%;

}


.btn-ghost {

  border-color: rgba(245,245,245,.4);

  color: #f5f5f5;

}


.btn-ghost:hover {

  background-color: rgba(255,255,255,.08);

  transform: translateY(-1px);

  box-shadow: 0 10px 25px rgba(0,0,0,.35);

}


.hero-pill {

  padding: .6rem .9rem;

  border-radius: 999px;

  background: rgba(0,0,0,.35);

  font-size: .75rem;

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  margin-bottom: 1rem;

}


.hero-pill .dot {

  width: .55rem;

  height: .55rem;

  border-radius: 999px;

  background: var(--q-green);

}


.hero-right {

  border-radius: 1.4rem;

  background: linear-gradient(135deg, var(--q-yellow), var(--q-purple), var(--q-red));

  min-height: 260px;

  display: flex;

  align-items: flex-end;

  padding: 1.4rem;

  position: relative;

  overflow: hidden;

}


.hero-right::before {

  content: "";

  position: absolute;

  inset: 16%;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.35);

  opacity: .4;

  transform: rotate(-8deg);

}


.hero-caption {

  position: relative;

  font-size: .8rem;

  max-width: 12rem;

  color: rgba(0,0,0,.85);

  font-weight: 500;

  margin-left: 1rem;

}


.hero-caption strong {

  display: block;

  text-transform: uppercase;

  font-size: .7rem;

  letter-spacing: .14em;

  margin-bottom: .1rem;

}


/* SECTIONS */

.section-heading { margin-bottom: 2.5rem; }


.section-kicker {

  font-size: .8rem;

  text-transform: uppercase;

  letter-spacing: .18em;

  color: var(--q-purple);

  margin-bottom: .4rem;

}


.section-heading h2 {

  font-size: clamp(2.1rem, 3vw, 2.7rem);

  margin-bottom: .3rem;

}


.section-heading p { max-width: 34rem; color: var(--q-muted-text); }


/* ABOUT */

.about-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);

  gap: 3rem;

  align-items: flex-start;

}


.values {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.3rem;

}


.value-card {

  padding: 1.3rem 1.2rem;

  border-radius: 1.1rem;

  background: var(--q-surface);

  border: 1px solid rgba(255,255,255,.06);

}


.value-label {

  font-size: .75rem;

  text-transform: uppercase;

  letter-spacing: .18em;

  margin-bottom: .35rem;

  color: #666;

}


.value-card h3 { font-size: 1.1rem; margin-bottom: .2rem; }

.value-card p { font-size: .9rem; color: var(--q-muted-text); }


.value-card:nth-child(1) { border-top: 3px solid var(--q-yellow); }

.value-card:nth-child(2) { border-top: 3px solid var(--q-purple); }

.value-card:nth-child(3) { border-top: 3px solid var(--q-green); }

.value-card:nth-child(4) { border-top: 3px solid var(--q-red); }


/* PORTFOLIO */

.portfolio-showreel {

  margin-bottom: 3rem; /* Espacement ajouté */

}


.portfolio-grid,

.portfolio-showreel {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 1.4rem;

}


/* Thumbnails unifiés */

.thumb,

.thumb-showreel {

  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: 1.1rem;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

  padding: 1rem;

  cursor: pointer;

  background: #111;

  background-size: cover;        /* Important: remplit le cadre */

  background-position: center;   /* Important: centre l'image */

  background-repeat: no-repeat;

  border: 0;

  appearance: none;

  -webkit-appearance: none;

  font: inherit;

  color: inherit;

  text-align: left;

}


/* Overlay couleur */

.thumb::before,

.thumb-showreel::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, var(--q-purple), var(--q-yellow), var(--q-red));

  opacity: .15;

  z-index: 1;

  transition: opacity 0.3s ease;

}


/* Overlay noir pour texte */

.thumb::after,

.thumb-showreel::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);

  z-index: 2;

}


.thumb:hover::before,

.thumb-showreel:hover::before {

  opacity: .3;

}


.thumb span,

.thumb-showreel span {

  position: relative;

  z-index: 3;

  color: #fff;

  font-size: .95rem;

  font-weight: 600;

  text-shadow: 0 2px 10px rgba(0,0,0,0.5);

}


.thumb.no-thumbnail,

.thumb-showreel.no-thumbnail {

  opacity: .55;

  cursor: default;

}


/* CLIENTS */

#clients {

  width: 100%;

  background: #000;

  padding: 2.5rem 0;

  overflow: hidden;

}


.clients-wrapper{

  width: 100%;

  overflow: hidden;

  position: relative;

}


.clients-track{

  display: inline-flex;

  align-items: center;

  gap: 4rem;

  white-space: nowrap;

  will-change: transform;

  transform: translate3d(0,0,0);

}


.clients-track.is-centered{

  justify-content: center;

  width: 100%;

  transform: translate3d(0,0,0) !important;

}


.clients-track a{

  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;

}


.clients-track img{

  height: 40px;

  width: auto;

  flex: 0 0 auto;

  opacity: 0.75;

  filter: brightness(0.9);

  transition: opacity .2s ease, transform .2s ease;

  display: block;

}


.clients-track img:hover { opacity: 1; transform: scale(1.08); }


/* TEAM */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.4rem;
}

.team-card {
  border-radius: 1.1rem;
  padding: 1.3rem;
  background: var(--q-surface);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Léger soulèvement de la carte au survol */
.team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.15);
}

/* Le conteneur qui garde le format carré et cache ce qui déborde */
.team-photo-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 0.8rem;
  margin-bottom: 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Style commun aux deux photos (elles se superposent exactement) */
.team-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: block;
}

/* La photo fun est invisible par défaut */
.team-photo-fun {
  opacity: 0;
  transform: scale(1.05); /* Elle commence légèrement zoomée */
}

/* Animations au survol de la carte ! */
.team-card:hover .team-photo-serious {
  opacity: 0; /* Cache la photo sérieuse */
}

.team-card:hover .team-photo-fun {
  opacity: 1; /* Affiche la photo fun */
  transform: scale(1); /* Remet la photo fun à sa taille normale (effet dé-zoom) */
}

.team-card h3 { margin-bottom: .15rem; }
.team-role { font-size: .85rem; color: var(--q-muted-text); margin-bottom: .5rem; }


/* CONTACT */

#contact {

  background: rgba(0, 39, 43, 0.97);

  padding-bottom: 6rem;

}


.contact-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);

  gap: 2.8rem;

  align-items: flex-start;

}


#contact, #contact .contact-layout { overflow: visible; }


.fillout-embed {

  width: 100%;

  min-height: 800px;

  overflow: visible;

  border-radius: 1rem;

}


@media (max-width: 900px) {

  .fillout-embed { min-height: 1050px; }

}


@media (max-width: 600px) {

  .fillout-embed { min-height: 1200px; }

}


.contact-info p {

  font-size: .9rem;

  color: var(--q-muted-text);

  margin-bottom: .8rem;

}


.contact-info ul { list-style: none; font-size: .9rem; }

.contact-info a { text-decoration: underline; text-underline-offset: 3px; }


/* BARRE COULEURS */

.color-bar {

  height: 6px;

  background: linear-gradient(

    90deg,

    var(--q-purple) 0 20%,

    var(--q-yellow) 20% 40%,

    var(--q-dark) 40% 60%,

    var(--q-green) 60% 80%,

    var(--q-red) 80% 100%

  );

}


/* FOOTER */

footer {

  padding: 1.5rem 0 2.5rem;

  background: #111;

  color: #f0f0f0;

  font-size: .8rem;

}


.footer-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

}


.footer-links { display: flex; gap: 1rem; }

.footer-links a {

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;

}

/* ✅ MODAL VIDEO (popup) */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex; /* Géré par grid parent dans ma réponse précédente, mais flex est correct si .video-modal-content est block */
  align-items: center; 
  justify-content: center; 
  z-index: 10000;
  padding: 1rem;
  backdrop-filter: blur(5px);
}

.video-modal-content {
  position: relative;
  width: 100%;
  max-width: 900px;
  display: block; /* S'assurer qu'il n'est pas flex */
  margin: 0 auto;
  overflow: visible; /* Important pour la description qui déroule */
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Ratio 16:9 forcé */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 50px rgba(0,0,0,0.8);
}

.video-container iframe {
  /* LE FIX ABSOLU EST ICI : Forcez l'étirement */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* Bouton fermer (repositionné pour être propre) */
.video-modal-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 35px;
  height: 35px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}

.video-modal-close:hover {
  background: var(--q-red);
}

/* ✅ ZONE ACTIONS & DESCRIPTION */
.video-actions {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.btn-more {
  background: rgba(0,0,0,0.6); 
  backdrop-filter: blur(5px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.6rem 1.5rem;
  border-radius: 2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 0.9rem;
}

.btn-more:hover, .btn-more.active {
  background: var(--q-yellow);
  border-color: var(--q-yellow);
  color: #000;
}

.video-description {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-height: 0;
  opacity: 0;
  transition: all 0.4s ease;
}

.video-description.is-visible {
  max-height: 500px; /* Ajuste selon tes textes */
  opacity: 1;
  margin-top: 1rem;
}

.video-description p {
  padding: 1.5rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ddd;
}


/* RESPONSIVE GLOBAL */

@media (max-width: 800px) {

  .hero-grid, .about-grid, .contact-layout { grid-template-columns: 1fr; }

  .contact-layout { gap: 2rem; }

}


@media (max-width: 768px) {

  .nav-desktop { display: none; }

  .nav-mobile { display: flex; align-items: center; margin-left: auto; }

  .nav-inner { padding: .7rem 1rem; }

}


@media (max-width: 700px) {

  section { padding: 3rem 0; }

  .container { padding: 0 1.25rem; }

  .portfolio-grid { grid-template-columns: 1fr; }

  .clients-track img { height: 30px; }

}


@media (max-width: 900px) {

  .hero { padding: 3.5rem 0 3rem; }

  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }

}