@import url("variables.css");
@import url("navbar.css");
@import url("hero.css");
@import url("services.css");
@import url("pap.css");
@import url("apps.css");
@import url("faq.css");
@import url("form.css");
@import url("footer.css");

/* Responsive */
@media (max-width: 900px) {
  .section-grid {
    grid-template-columns: 1fr;
  }

  .vignettes {
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    /* margin-inline: 20px; */
    /* padding-left: 16px; */
    justify-content: center;
    align-content: center;
    align-items: space-between;
    justify-items: center;
    gap: 15px;

  }

  .hero-inner {
    padding: 0 10px;
  }

  nav ul {
    display: none;
  }

  /* simplify mobile nav for this demo */
}

@media (max-width: 520px) {
  .vignettes {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    justify-content: space-between;
    /* margin-left: 8px;*/
    margin-inline: 20px;
  }

  /* .hero-title{ font-size:clamp(28px, 10vw, 52px) }*/
  .form-row {
    flex-direction: column;
  }

  .right .vignettes {
    height: auto;
  }
}

/* LOGO */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.04;
  mix-blend-mode: soft-light;
  z-index: 9999;
}

/* Soft vignette behind everything */

/*
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(
circle,
rgba(0,0,0,0) 40%,
rgba(0,0,0,0.25) 100%
);
opacity: 0.4;
z-index: 9998;
}
*/
/* Fixed logo layer */
.background-logo-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 0;
}

/* LOGO */
.background-logo {
  width: 100vw;
  opacity: 0;
  transform: translateY(20px) scale(0.72);
  /* vertical parallax start */
  fill: currentColor;
  color: #ffffff;
  filter: drop-shadow(0 0 12px rgba(255, 150, 0, 0.25));
}

/* DEEP, CLEAN Glow */
.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48vw;
  /* bigger */
  height: 48vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(255, 130, 0, 0.28) 0%,
      rgba(255, 120, 0, 0.12) 35%,
      rgba(255, 120, 0, 0.06) 60%,
      rgba(0, 0, 0, 0) 90%);
  opacity: 0;
  filter: blur(130px);
  /* deeper diffusion */
}

/* service */
.service-detail {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.service-detail.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Desktop : le panneau de détail occupe la hauteur des vignettes et scrolle seul */
@media (min-width: 901px) {
  .services .section-grid {
    align-items: stretch;
  }

  .services .left {
    position: relative;
    min-height: 0;
  }

  /* hors-flux : la colonne gauche prend donc la hauteur des vignettes */
  .services #content-container {
    position: absolute;
    inset: 0;
  }

  .service-detail.active {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 14px;
    scrollbar-gutter: stable;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--orange) rgba(255, 255, 255, 0.05);
  }
}

/* Belle scrollbar orange (WebKit / Chromium) */
.service-detail.active::-webkit-scrollbar {
  width: 10px;
}

.service-detail.active::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  margin: 4px 0;
}

.service-detail.active::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: var(--orange);
  background-image: linear-gradient(180deg,
      #e2693c 0%,
      var(--orange) 50%,
      #ad3e1b 100%);
  box-shadow: 0 2px 6px rgba(214, 90, 49, 0.45);
}

.service-detail.active::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg,
      #f0793f 0%,
      #df6135 50%,
      #bd4620 100%);
}

.vignette {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3;
}

.vignette-logo {
  position: relative;
  z-index: 20;
}

.vignette-logo svg {
  height: 85px;
  width: 85px;
  z-index: 20;
  margin-top: 30px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  transition:
    transform 0.3s ease,
    filter 0.3s ease;

  @media (width < 520px) {
    height: 65px;
    width: 65px;
  }
}

.vignette:hover .vignette-logo svg {
  transform: scale(1.1);
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, 0.55));
}

/*
.vignette:hover {
    color: black;
}*/
.vignette:hover::after {
  opacity: 0.25;
}

.vignette::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: var(--orange);
  border-radius: 12px;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform-style: preserve-3d;
  transform: translateZ(10px);
}

/* Container principal */
#content-container {
  position: relative;
}

/* Chaque bloc de service */
.service-detail {
  /* vos styles pour chaque service */
}

/* Le service actuellement affiché */
.service-detail.active {
  /* vos styles pour le service actif */
}

/* Titres dans les services */
.service-detail h2 {
  /* style pour le titre principal */
}

.service-detail h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 30px 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-detail h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 90, 49, 0.55), transparent);
}

/* Paragraphes */
.service-detail p {
  line-height: 1.6;
}

/* Listes — même puce "diamant" que la section process */
.service-detail ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-detail li {
  position: relative;
  /* Deux colonnes : libellé (orange) puis description (blanc). Toutes les
     descriptions démarrent ainsi sur la même verticale, quelle que soit la
     longueur du libellé. La puce losange est positionnée en absolu pour
     ne pas occuper de colonne. */
  display: grid;
  grid-template-columns: fit-content(15rem) minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 4px;
  align-items: start;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.service-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--orange) 0%, #b8431f 100%);
  box-shadow:
    0 2px 8px rgba(214, 90, 49, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sur écran étroit (panneau pleine largeur < 560px), on empile libellé et
   description pour rester lisible. */
@media (width < 560px) {
  .service-detail li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

.service-detail li:hover::before {
  transform: rotate(135deg);
}

.service-detail strong {
  color: var(--orange);
  font-weight: 600;
}

/* Encart "Résultat" — le paragraphe de clôture de chaque service */
.service-detail[data-service]:not([data-service="default"]) p:last-of-type {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  background: linear-gradient(135deg,
      rgba(214, 90, 49, 0.14) 0%,
      rgba(214, 90, 49, 0.03) 100%);
  line-height: 1.55;
}

/* Cibler un service spécifique */
.service-detail[data-service="branding"] {
  /* styles uniquement pour Branding */
}

.service-detail[data-service="branding"] h2 {
  /* styles uniquement pour Branding */
  font-size: 5rem;
}

.service-detail[data-service="uiux"] {
  /* styles uniquement pour UI/UX */
}

.appel {
  color: #eeeeee;
  background-color: #d65a31;

  transition: all 0.3s;
}

.appel:hover {
  color: #d65a31;
  background-color: white;
}

/** ANIM VIGNETTE */

.cards {
  width: 100%;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.card {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card--expanded {
  cursor: default;
}

.card__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 5px;
  background: rgb(122, 102, 191);
  overflow: hidden;
}

.card:nth-child(2) .card__content {
  background: rgb(191, 102, 158);
}

.card:nth-child(3) .card__content {
  background: rgb(24, 149, 91);
}

.card--expanded .card__content {
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
}

.card__user-image {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  will-change: transform;
  transform-origin: 0 0;
}

.card--expanded .card__user-image {
  width: 100px;
  height: 100px;
}

.card__images {
  display: grid;
  gap: 10px;
  max-width: 800px;
  width: 100%;
  margin: 50px auto 0;
  transform-origin: 0 0;
  position: absolute;
  top: 100%;
}

.card--expanded .card__images {
  position: static;
}

.card__image {
  border-radius: 5px;
  width: 100%;
  aspect-ratio: 1;
}

.card__title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  transform-origin: 0 0;
  line-height: 1;
}

.card--expanded .card__title {
  font-size: 30px;
}

.card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 14px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.card--expanded .card__header {
  flex-direction: row;
}

.card__user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.card--expanded .card__user-info {
  align-items: flex-start;
  gap: 2px 0;
}

.card__user-links {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0 14px;
}

.card--expanded .card__user-links {
  position: static;
  opacity: 1;
  height: auto;
  margin-top: 5px;
  pointer-events: all;
}

.card__user-link {
  display: flex;
}

.card__user-link-icon {
  fill: currentColor;
  color: white;
  width: 20px;
}

.card__bio {
  opacity: 0;
  height: 0;
  transform-origin: 0 0;
}

.card--expanded .card__bio {
  max-width: 800px;
  margin: 20px auto 0;
  opacity: 1;
  height: auto;
}

.card__close {
  position: absolute;
  right: -40px;
  top: 20px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 44px;
  height: 44px;
  color: white;
  padding: 10px;
}

.card--expanded .card__close {
  transition: 0.3s all ease;
  transition-delay: 0.3s;
  opacity: 1;
  pointer-events: all;
  transform: translateX(-100%) translateX(-20px);
}

.card--animatable .card__user-image,
.card--animatable .card__title,
.card--animatable .card__subtitle,
.card--animatable .card__user-links,
.card--animatable .card__bio,
.card--animatable .card__images,
.card--animatable .card__content {
  transition: all 0.5s cubic-bezier(0, 0, 0.21, 1);
}

@media (min-width: 520px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .card__images {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .card__images {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}