/* JISWEBSITE 1.3.0 — Présentations de projets. */
.case-page h1 {
  font-size: clamp(50px, 9vw, 124px);
  line-height: 1;
  letter-spacing: -0.06em;
  margin-bottom: 35px;
}
.case-page h2 {
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.case-page h3 {
  font-size: 22px;
  line-height: 1.25;
}
.case-hero {
  padding: 28px 0 0;
  background: radial-gradient(ellipse at 85% 10%, #72148025, transparent 60%);
}
.case-breadcrumb {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #aeb3c2;
  margin-bottom: 55px;
}
.case-intro,
.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: start;
}
.case-intro p {
  color: #bdc2d2;
  font-size: 18px;
  margin-bottom: 26px;
}
.case-showcase {
  margin-top: 48px !important;
  border: 1px solid #bd57da55;
  border-radius: 16px;
  overflow: hidden;
  background: #10121e;
}
.case-browser-bar {
  display: flex;
  justify-content: space-between;
  padding: 14px 22px;
  font-size: 11px;
  color: #aeb3c2;
}
.case-showcase img {
  width: 100%;
  height: auto;
}
.case-showcase figcaption {
  padding: 16px 22px;
  font-size: 12px;
  color: #aeb3c2;
}
.case-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 32px 0;
}
.case-facts dt {
  color: #ad85be;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.case-facts dd {
  margin: 0;
  font-size: 15px;
}
.case-section {
  padding: 75px 0;
  border-top: 1px solid #ffffff17;
}
.case-prose {
  font-size: 17px;
  color: #bfc3d1;
  line-height: 1.8;
}
.case-prose p + p,
.case-prose + .case-prose {
  margin-top: 20px;
}
.case-prose .jis-btn {
  margin-top: 26px;
}
.case-network {
  background: linear-gradient(130deg, #141020, #090c15);
}
.case-network-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 40px;
}
.case-diagram {
  padding: 28px;
  border: 1px solid #bc56db55;
  border-radius: 14px;
  background: #0c0e18;
}
.case-node-main {
  padding: 20px;
  background: var(--jis-gradient);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.case-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 30px;
  position: relative;
}
.case-branches::before {
  content: '';
  position: absolute;
  height: 30px;
  width: 1px;
  background: #ae57d4;
  top: 0;
  left: 50%;
}
/* Only the outer branch is a card; nested spans are plain labels. */
.case-branches > span {
  padding: 16px 10px;
  border: 1px solid #b55ace44;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  background: #171321;
}
.case-journey {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid #ffffff17;
}
.case-journey ol {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
}
.case-journey li {
  font-size: 14px;
}
.case-journey li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2012h16m-7-7%207%207-7%207%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2012h16m-7-7%207%207-7%207%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  color: #d471e9;
  margin: 0 18px;
}
.case-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 35px;
}
.case-section-head > p {
  max-width: 340px;
  color: #aeb3c2;
}
.case-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.case-feature {
  padding: 30px;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  background: linear-gradient(130deg, #141522, #0d101a);
}
.case-number {
  display: block;
  color: #dc84e9;
  font-size: 12px;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}
.case-feature p {
  color: #aeb3c2;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
}
.case-stella {
  background: radial-gradient(ellipse at 0 60%, #61158130, transparent 65%);
}
.case-page .jis-contact {
  border-top: 1px solid #ffffff17;
}
.case-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .case-intro,
  .case-split,
  .case-network-grid {
    gap: 30px;
  }
  .case-diagram {
    padding: 18px;
  }
}
@media (max-width: 650px) {
  .case-intro,
  .case-split,
  .case-network-grid,
  .case-features {
    grid-template-columns: 1fr;
  }
  .case-section {
    padding: 45px 0;
  }
  .case-facts {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .case-section-head {
    display: block;
  }
  .case-section-head > p {
    margin-top: 20px;
  }
  .case-breadcrumb {
    margin-bottom: 35px;
  }
  .case-feature {
    padding: 24px;
  }
  .case-showcase {
    margin-top: 30px !important;
  }
  .case-journey ol {
    display: block;
  }
  .case-journey li:not(:last-child)::after {
    content: '';
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204v16m-7-7%207%207%207-7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204v16m-7-7%207%207%207-7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    display: block;
    margin: 8px 0;
  }
}

/* Joëlle Anne : commerce, technologies et captures réelles. */
.case-commerce {
  margin-top: 36px;
}
.case-flow {
  padding-left: 22px;
  margin: 24px 0 0;
  color: #e2c9ed;
  font-size: 14px;
}
.case-flow li {
  padding: 6px 0;
}
.case-note {
  margin-top: 24px !important;
  color: #aeb3c2;
  font-size: 13px;
}
.case-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-top: 35px;
}
.case-tech {
  padding: 25px 0;
  border-top: 1px solid #b656cf66;
}
.case-tech p {
  margin-top: 14px;
  color: #aeb3c2;
  font-size: 14px;
}
.case-screen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.case-screen {
  overflow: hidden;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  background: #141521;
}
.case-screen a {
  display: block;
  background: #f9f3ef;
}
.case-screen img {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
  object-position: top;
}
.case-screen-mobile img {
  object-fit: contain;
}
.case-screen figcaption {
  padding: 18px 22px;
  font-size: 14px;
}
@media (max-width: 900px) {
  .case-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .case-tech-grid,
  .case-screen-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le nom Anaghjulia reste lisible sur les petits écrans. */
.case-anagh h1 {
  font-size: clamp(38px, 8.6vw, 112px);
}

/* Texte de la recherche Anaghjulia, sans visuel latéral. */
.case-reading {
  max-width: 820px;
}

/* Un titre long qui conserve sa lisibilité sur mobile. */
.case-camping h1 {
  font-size: clamp(34px, 8vw, 108px);
}

/* Présentation du logiciel ProjectDock et de son architecture. */
.case-projectdock .jis-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.case-projectdock .jis-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #7c64cf66;
  border-radius: 30px;
  background: #ffffff05;
  color: #c8cbdd;
  font-size: 13px;
  line-height: 1.5;
}
.case-projectdock h1 {
  font-size: clamp(32px, 7.7vw, 108px);
}
.dock-brand {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 48px;
  padding: 40px;
  border: 1px solid #665ad555;
  border-radius: 20px;
  background: radial-gradient(ellipse at 20% 50%, #0c46614d, #0c1020 70%);
}
.dock-brand img {
  width: 100%;
  height: auto;
  max-width: 380px;
  margin: auto;
}
.dock-brand p:not(.jis-eyebrow) {
  color: #bdc2d2;
  margin: 22px 0;
}
.dock-architecture {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.dock-architecture li {
  position: relative;
  text-align: center;
  padding: 22px;
  border: 1px solid #7c64cf80;
  border-radius: 12px;
  background: #101827;
}
.dock-architecture li + li::before {
  content: '';
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204v16m-7-7%207%207%207-7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204v16m-7-7%207%207%207-7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  position: absolute;
  top: -28px;
  left: 50%;
  color: #c783f5;
}
.dock-architecture strong,
.dock-architecture span {
  display: block;
}
.dock-architecture span {
  color: #bdc2d2;
  font-size: 14px;
  margin-top: 8px;
}
@media (max-width: 650px) {
  .dock-brand {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
    gap: 24px;
  }
  .dock-brand img {
    max-width: 240px;
  }
}

.case-projectdock .dock-tech-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}