:root {
  --ink: #101820;
  --muted: #6a737b;
  --paper: #f5f5f7;
  --white: #ffffff;
  --teal: #20d6bd;
  --blue: #0874b8;
  --deep: #063f4b;
  --line: rgba(16, 24, 32, 0.12);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 9px clamp(18px, 4vw, 56px);
  background: rgba(251, 251, 253, 0.78);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(22px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  font-size: 14px;
  font-weight: 750;
}
.brand-logo {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 24px;
  color: rgba(16, 24, 32, 0.76);
  font-size: 13px;
}
.header-cta {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: #0071e3;
  font-size: 13px;
  font-weight: 700;
}

.intro {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 54px);
  overflow: hidden;
  padding: clamp(320px, 42vw, 560px) clamp(18px, 5vw, 84px) clamp(64px, 8vw, 116px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(245, 245, 247, 0.1) 0%, rgba(245, 245, 247, 0.9) 48%, #f5f5f7 100%),
    #f5f5f7;
}
.intro-logo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: min(1500px, 112vw);
  height: clamp(300px, 42vw, 560px);
  object-fit: cover;
  object-position: center 47%;
  border-radius: 0;
  margin: 0;
  transform: translateX(-50%) scale(1.06);
  filter: saturate(1.08);
  box-shadow: none;
}
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 0.42) 38%, #f5f5f7 66%),
    radial-gradient(circle at 50% 26%, rgba(32, 214, 189, 0.16), transparent 34%);
}
.intro > :not(.intro-logo) {
  position: relative;
  z-index: 2;
}
.kicker,
.tile-copy span,
.modal-kicker {
  margin: 0 0 12px;
  color: #0071e3;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
h1, h2, h3, p { margin-top: 0; letter-spacing: 0; }
h1 {
  max-width: 980px;
  margin-bottom: 18px;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.94;
  font-weight: 850;
}
.intro h1 {
  margin-bottom: 16px;
  font-size: clamp(76px, 13vw, 184px);
  line-height: 0.86;
}
.intro-tagline {
  max-width: 900px;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 62px);
  line-height: 1;
  font-weight: 840;
}
.intro p:last-child {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
}

.showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}
.story-tile {
  position: relative;
  min-height: 720px;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--white);
  cursor: pointer;
}
.story-tile.hero-tile {
  grid-column: 1 / -1;
  min-height: 780px;
}
.story-tile.dark {
  color: #fff;
  background: radial-gradient(circle at 50% 80%, #0b6d7d 0, #061f28 48%, #02090d 100%);
}
.story-tile.gradient {
  background:
    radial-gradient(circle at 18% 82%, rgba(32, 214, 189, 0.36), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(8, 116, 184, 0.26), transparent 34%),
    #ffffff;
}
.story-tile.ai {
  color: #fff;
  background: radial-gradient(circle at 30% 10%, rgba(32, 214, 189, 0.46), transparent 30%),
    linear-gradient(145deg, #061f28, #0874b8 72%, #20d6bd);
}
.tile-copy {
  position: relative;
  z-index: 2;
  max-width: 820px;
  justify-self: center;
  padding: clamp(42px, 6vw, 76px) clamp(22px, 5vw, 72px) 12px;
  text-align: center;
}
.story-tile:not(.hero-tile) .tile-copy {
  max-width: 540px;
}
.tile-copy h2 {
  margin-bottom: 12px;
  font-size: clamp(34px, 4.5vw, 72px);
  line-height: 0.98;
  font-weight: 850;
}
.story-tile:not(.hero-tile) .tile-copy h2 {
  font-size: clamp(30px, 3vw, 48px);
}
.tile-copy p {
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.38;
}
.dark .tile-copy p,
.ai .tile-copy p {
  color: rgba(255, 255, 255, 0.72);
}
.tile-copy button,
.closing a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #0071e3;
  font-weight: 760;
  cursor: pointer;
}

.tile-media {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  padding: 12px 20px 48px;
}
.hero-tile .tile-media { min-height: 520px; }

.phone {
  position: relative;
  z-index: 2;
  width: min(380px, 70vw);
  min-height: 500px;
  padding: 24px;
  border: 10px solid #0b2028;
  border-radius: 40px;
  background: linear-gradient(180deg, #fff, #eaf9f5);
  box-shadow: var(--shadow);
}
.phone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--ink);
}
.phone-head img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
}
.shift {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
}
.shift.active {
  color: #fff;
  background: linear-gradient(135deg, var(--deep), #0f8b8d);
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.week-grid i,
.kanban i,
.room,
.shelf,
.feed-card,
.task-dot,
.receipt,
.key-card,
.event-card,
.forecast-card,
.tool-card {
  display: block;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(32, 214, 189, 0.3), rgba(8, 116, 184, 0.18));
}
.week-grid i { min-height: 64px; }
.coffee-cup {
  position: absolute;
  right: clamp(58px, 16vw, 220px);
  top: 20px;
  width: 128px;
  height: 128px;
  border: 16px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe5d7 0 28%, #9a5b34 30% 56%, #fff 58%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.media-maintenance { grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.tool-card.large { width: 210px; height: 260px; }
.tool-card.small { width: 160px; height: 190px; transform: translateY(54px); }
.tool-card.line { position: absolute; width: 60%; height: 18px; bottom: 84px; }
.media-feed, .media-tasks, .media-projects, .media-inventory, .media-rooms, .media-service, .media-reception, .media-ai {
  isolation: isolate;
}
.feed-card {
  width: min(380px, 72vw);
  height: 86px;
  margin: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(8, 116, 184, 0.14);
}
.feed-card.short { width: min(300px, 62vw); }
.task-dot {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
}
.task-dot.one { background: #20d6bd; transform: translate(-90px, -46px); }
.task-dot.two { background: #0874b8; transform: translate(86px, 28px); }
.task-dot.three { background: #b7f4df; transform: translate(-8px, 102px); }
.kanban {
  width: min(430px, 76vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.kanban i { min-height: 320px; background: rgba(255, 255, 255, 0.16); }
.shelf {
  width: min(420px, 76vw);
  height: 72px;
  margin: 18px;
  background: linear-gradient(90deg, #fff, #dbf8ef);
  box-shadow: 0 18px 38px rgba(6, 63, 75, 0.12);
}
.media-rooms {
  grid-template-columns: repeat(2, 130px);
  gap: 18px;
}
.room { width: 130px; height: 130px; background: #fff; }
.room.done { background: linear-gradient(145deg, #20d6bd, #0874b8); }
.receipt {
  width: 190px;
  height: 300px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
}
.plate {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 18px solid #fff;
  border-radius: 50%;
  transform: translate(110px, 70px);
  background: #20d6bd;
}
.key-card {
  width: min(420px, 74vw);
  height: 250px;
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(32,214,189,0.18));
  box-shadow: var(--shadow);
}
.desk-line {
  position: absolute;
  width: 70%;
  height: 18px;
  bottom: 86px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
}
.orbit {
  width: min(440px, 76vw);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.38);
  border-radius: 50%;
}
.event-card, .forecast-card {
  position: absolute;
  width: 210px;
  height: 130px;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow);
}
.event-card { transform: translate(-112px, -76px); }
.forecast-card { transform: translate(116px, 96px); }

.image-tile {
  background: #eef8ff;
}
.image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.54) 27%, rgba(255, 255, 255, 0) 58%);
}
.image-tile.image-tile-dark::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.42) 30%, rgba(0, 0, 0, 0.06) 62%);
}
.image-tile .tile-copy {
  max-width: 660px;
  padding-top: clamp(42px, 5vw, 64px);
  padding-bottom: 0;
}
.image-tile .tile-copy h2 {
  font-size: clamp(30px, 3.4vw, 56px);
}
.image-tile .tile-copy p {
  max-width: 560px;
}
.image-tile.image-tile-dark .tile-copy span,
.image-tile.image-tile-dark .tile-copy h2,
.image-tile.image-tile-dark .tile-copy p {
  color: #fff;
}
.image-tile .has-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}
.image-tile .module-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  filter: none;
}
.empty-tile {
  background: #fff;
}
.empty-media {
  min-height: 390px;
}

.closing {
  min-height: 54vh;
  display: grid;
  place-items: center;
  padding: 80px clamp(18px, 5vw, 84px);
  text-align: center;
}
.closing h2 {
  max-width: 880px;
  margin-bottom: 24px;
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 0.98;
}

.story-modal {
  width: min(840px, calc(100vw - 28px));
  border: 0;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 54px);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}
.story-modal::backdrop {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px);
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #ededf0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.story-modal h2 {
  max-width: 680px;
  margin-bottom: 14px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
}
.modal-lead {
  max-width: 720px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}
.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.modal-grid div {
  padding: 22px;
  border-radius: 18px;
  background: #f5f5f7;
}
.modal-grid h3 { margin-bottom: 8px; }
.modal-grid p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .showcase { grid-template-columns: 1fr; }
  .story-tile,
  .story-tile.hero-tile { min-height: 680px; }
  .modal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .header-cta { display: none; }
  .intro { min-height: 58vh; }
  h1 { font-size: 48px; }
  .story-tile,
  .story-tile.hero-tile { min-height: 610px; }
  .tile-copy { padding-top: 38px; }
  .tile-copy p { font-size: 17px; }
  .phone { width: min(320px, 82vw); min-height: 430px; }
  .coffee-cup { width: 94px; height: 94px; right: 28px; }
  .media-rooms { grid-template-columns: repeat(2, 104px); }
  .room { width: 104px; height: 104px; }
}

.module-page {
  color: #f5f5f7;
  background: #111;
}
.module-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px clamp(18px, 4vw, 48px);
  background: rgba(20, 20, 20, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
}
.module-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-weight: 800;
}
.module-brand img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
}
.module-header nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.module-header nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
}
.module-header nav a:last-child,
.module-final a {
  color: #fff;
  background: #0071e3;
}
.module-hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #090909;
}
.module-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}
.module-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), #111 92%);
}
.module-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 980px;
  padding: 0 clamp(20px, 5vw, 72px) clamp(46px, 7vw, 92px);
}
.module-kicker {
  margin-bottom: 12px;
  color: #42d7c6;
  font-size: 14px;
  font-weight: 850;
}
.module-hero h1,
.module-section h2,
.module-image-section h2,
.module-final h2 {
  margin-bottom: 16px;
  color: #fff;
  font-weight: 850;
  letter-spacing: 0;
}
.module-hero h1 {
  max-width: 850px;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
}
.module-hero p:last-child,
.module-image-section p,
.section-title,
.module-checks,
.module-steps {
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
  line-height: 1.55;
}
.module-section,
.module-image-section,
.module-final {
  padding: clamp(48px, 7vw, 92px) clamp(20px, 5vw, 72px);
}
.section-title {
  max-width: 840px;
  margin-bottom: 26px;
}
.module-section h2,
.module-image-section h2,
.module-final h2 {
  font-size: clamp(34px, 4.8vw, 66px);
  line-height: 1;
}
.activity-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.88fr);
  gap: 24px;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1b1b1d;
}
.intervention-list,
.benefit-list {
  display: grid;
  gap: 12px;
}
.intervention-list span,
.benefit-list p,
.module-checks li,
.module-steps li {
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.intervention-list span {
  position: relative;
  padding-left: 54px;
}
.intervention-list span::before,
.benefit-list p::before,
.module-checks li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border-radius: 50%;
  background: #18c96f;
}
.intervention-list span::before {
  position: absolute;
  left: 16px;
}
.intervention-list b,
.intervention-list small {
  display: block;
}
.intervention-list small {
  color: rgba(255, 255, 255, 0.48);
}
.benefit-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}
.module-image-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.78fr);
  gap: clamp(26px, 5vw, 72px);
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.module-image-section.reverse img {
  order: 2;
}
.module-image-section > img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}
.module-checks,
.module-steps {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.module-steps {
  counter-reset: steps;
}
.module-steps li {
  counter-increment: steps;
}
.module-steps li::before {
  content: counter(steps) ".";
  margin-right: 12px;
  color: #42d7c6;
  font-weight: 900;
}
.module-final {
  min-height: 48vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.module-final a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 800;
}

@media (max-width: 880px) {
  .activity-panel,
  .module-image-section {
    grid-template-columns: 1fr;
  }
  .module-image-section.reverse img {
    order: 0;
  }
  .module-header {
    flex-wrap: wrap;
  }
  .module-header nav {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .module-hero {
    min-height: 78vh;
  }
  .module-hero h1 {
    font-size: 44px;
  }
  .module-section h2,
  .module-image-section h2,
  .module-final h2 {
    font-size: 34px;
  }
  .module-header nav a {
    padding: 0 12px;
  }
}

/* Interventions detail page refinement */
.module-page {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(66, 215, 198, 0.08), transparent 30%),
    #101011;
}
.module-page main {
  isolation: isolate;
}
.module-header {
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18);
}
.module-hero {
  min-height: min(920px, 88vh);
}
.module-hero > img {
  object-position: center;
  opacity: 0.88;
}
.module-hero::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.2) 56%, rgba(0, 0, 0, 0.58)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), #101011 94%);
}
.module-hero-copy {
  max-width: 1080px;
}
.module-hero p:last-child,
.section-title p,
.module-image-section p {
  max-width: 920px;
}
.module-section-compact {
  padding-top: clamp(42px, 5vw, 72px);
}
.section-title p {
  margin-bottom: 0;
}
.module-page .module-hero-copy > p:last-child,
.module-page .section-title > p:not(.module-kicker),
.module-page .module-image-section > div > p:not(.module-kicker) {
  color: #fff;
}
.module-page .section-title h2,
.module-page .module-hero h1,
.module-page .module-final h2 {
  color: #fff;
}
.activity-panel {
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    #1a1a1c;
}
.ticket-board {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #151516;
}
.ticket-board-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ticket-board-header h3 {
  margin: 0 auto 0 0;
  color: #fff;
  font-size: 22px;
}
.ticket-tools {
  display: flex;
  gap: 8px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 14px;
}
.ticket-tools span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.ticket-tools b {
  min-width: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 6px;
  border-radius: 50%;
  color: #fff;
  background: #0071e3;
  font-size: 12px;
}
.ticket-list {
  display: grid;
}
.ticket-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 10px 44px 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ticket-item:last-child {
  border-bottom: 0;
}
.ticket-item::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  color: rgba(255, 255, 255, 0.48);
  font-size: 28px;
  line-height: 1;
  transform: translateY(-50%);
}
.ticket-status {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.status-current .ticket-status {
  background-image: url("assets/Interventions/status/current.gif");
}
.status-todo .ticket-status {
  background-image: url("assets/Interventions/status/todo.webp");
}
.status-qr .ticket-status {
  background-image: url("assets/Interventions/status/todo-qr.webp");
}
.status-planned .ticket-status {
  background-image: url("assets/Interventions/status/planned.webp");
}
.status-waiting .ticket-status {
  background-image: url("assets/Interventions/status/waiting.webp");
}
.ticket-item h4 {
  margin: 0 0 3px;
  color: #fff;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.2;
}
.ticket-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
  line-height: 1.3;
}
.stats-section {
  padding: clamp(48px, 7vw, 92px) clamp(20px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stats-hero-image {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}
.stats-section .section-title {
  margin: clamp(24px, 4vw, 44px) 0 24px;
}
.stats-board {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #1b1b1d;
}
.stats-card {
  min-height: 340px;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.stats-card h3 {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(20px, 2vw, 26px);
}
.donut-chart {
  position: relative;
  place-self: center;
  width: min(260px, 56vw);
  aspect-ratio: 1;
}
.donut-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #1b1b1d 0 34%, transparent 35%),
    conic-gradient(
      #2f80ed 0 18%,
      #6d4de2 18% 32%,
      #55d6cb 32% 44%,
      #eb7048 44% 66%,
      #a9e86d 66% 75%,
      #f5d85a 75% 91%,
      #8a98a8 91% 98%,
      #2f80ed 98% 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 54px rgba(0, 0, 0, 0.24);
}
.donut-point,
.wave-point {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0071e3;
  cursor: pointer;
}
.donut-point span,
.wave-point span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 4;
  min-width: 150px;
  padding: 9px 11px;
  border-radius: 6px;
  color: #fff;
  background: rgba(6, 6, 7, 0.94);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 160ms ease, transform 160ms ease;
  text-align: left;
}
.donut-point span::before,
.wave-point span::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.donut-point b,
.wave-point b,
.donut-point strong,
.wave-point strong,
.donut-point em {
  display: block;
  padding-left: 16px;
  font-style: normal;
}
.donut-point b,
.wave-point b {
  margin-bottom: 5px;
  font-size: 13px;
}
.donut-point strong,
.wave-point strong {
  font-size: 13px;
  font-weight: 900;
}
.donut-point em {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
.donut-point:hover span,
.donut-point:focus-visible span,
.wave-point:hover span,
.wave-point:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}
.zone-server { left: 72%; top: 18%; color: #2f80ed; background: #2f80ed; }
.zone-satellites { left: 48%; top: 4%; color: #6d4de2; background: #6d4de2; }
.zone-seminar { left: 17%; top: 21%; color: #55d6cb; background: #55d6cb; }
.zone-rooms { left: 14%; top: 66%; color: #eb7048; background: #eb7048; }
.zone-cleanroom { left: 44%; top: 84%; color: #a9e86d; background: #a9e86d; }
.zone-kitchen { left: 79%; top: 63%; color: #f5d85a; background: #f5d85a; }
.zone-logistics { left: 86%; top: 42%; color: #8a98a8; background: #8a98a8; }
.zone-server span,
.zone-kitchen span,
.zone-logistics span {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}
.zone-server:hover span,
.zone-server:focus-visible span,
.zone-kitchen:hover span,
.zone-kitchen:focus-visible span,
.zone-logistics:hover span,
.zone-logistics:focus-visible span {
  transform: translate(0, 0);
}
.wave-chart {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 260px;
}
.wave-plot {
  position: relative;
  min-height: 230px;
}
.wave-chart svg {
  width: 100%;
  height: 100%;
  min-height: 230px;
}
.wave-fill {
  fill: rgba(0, 113, 227, 0.72);
}
.wave-line {
  fill: none;
  stroke: #1d88ff;
  stroke-width: 4;
}
.chart-grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.chart-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  text-align: center;
}
.wave-point {
  width: 16px;
  height: 16px;
  background: #1d88ff;
}
.wave-point::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 1px;
  height: 180px;
  background: rgba(255, 255, 255, 0.46);
  opacity: 0;
  transform: translateX(-50%);
}
.wave-point:hover::before,
.wave-point:focus-visible::before {
  opacity: 1;
}
.wave-point span {
  min-width: 170px;
}
.wave-point span::before {
  background: #1d88ff;
}
.month-feb { left: 12%; top: 38%; }
.month-apr { left: 33%; top: 12%; }
.month-jun { left: 48%; top: 72%; }
.month-aug { left: 63%; top: 60%; }
.month-oct { left: 80%; top: 41%; }
.month-dec { left: 96%; top: 22%; }
.month-oct span,
.month-dec span {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}
.month-oct:hover span,
.month-oct:focus-visible span,
.month-dec:hover span,
.month-dec:focus-visible span {
  transform: translate(0, 0);
}
.stats-actions {
  display: grid;
  gap: 1px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stat-actions;
  overflow: hidden;
  border-radius: 8px;
}
.stats-actions li {
  counter-increment: stat-actions;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.86);
  background: #1d1d1f;
  font-weight: 760;
  line-height: 1.35;
}
.stats-actions li::before {
  content: counter(stat-actions) ".";
  margin-right: 6px;
  color: #fff;
  font-weight: 900;
}
.automation-section {
  padding: clamp(48px, 7vw, 92px) clamp(20px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.automation-hero-image {
  width: 100%;
  max-height: 310px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}
.automation-section .section-title {
  margin: clamp(24px, 4vw, 42px) 0 24px;
}
.automation-tabs {
  padding: clamp(16px, 3vw, 28px);
  border-radius: 8px;
  background: #1b1b1d;
}
.automation-tab-list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.automation-tab {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.48);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}
.automation-tab.is-active {
  color: #fff;
  border-bottom-color: #0071e3;
}
.automation-panel {
  min-height: 510px;
  padding-top: 18px;
}
.automation-group {
  padding: 0 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.automation-group + .automation-group {
  padding-top: 20px;
}
.automation-group h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 20px;
}
.automation-group article + article {
  margin-top: 14px;
}
.automation-group strong,
.automation-group span {
  display: block;
}
.automation-group strong {
  color: #fff;
  font-size: 16px;
}
.automation-group span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
}
.automation-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.automation-summary .module-steps,
.automation-checks {
  margin-top: 0;
}
.automation-summary .module-steps,
.automation-summary .module-steps li {
  color: #fff;
}
.automation-summary .module-steps li::before {
  color: #fff;
}

/* Taches detail page */
.task-detail-page .module-hero > img {
  object-position: center top;
}
.task-hero .module-hero-copy {
  max-width: 1120px;
}
.task-carousel .slide-card img {
  height: 360px;
  object-fit: cover;
}
.module-benefits {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  list-style: none;
}
.module-benefits li {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 18px 14px 64px;
  color: #fff;
  background: #1d1d1f;
  font-weight: 760;
  line-height: 1.35;
}
.module-benefits li::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 18px;
  height: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: 2px solid rgba(255, 255, 255, 0.78);
  transform: translateY(-65%) rotate(-45deg);
}
.access-section > img,
.qr-task-section > img {
  max-height: 360px;
  object-position: center;
}
.access-list {
  display: grid;
  gap: 34px;
  margin-top: clamp(30px, 5vw, 58px);
}
.access-list article {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
}
.access-list img {
  width: 116px;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}
.access-list h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.06;
}
.access-list p {
  max-width: 1040px;
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.45;
}
.task-detail-page .data-carousel .data-card {
  min-width: min(390px, 86vw);
}

@media (max-width: 900px) {
  .task-carousel .slide-card img {
    height: 300px;
  }
  .access-list article {
    grid-template-columns: 86px minmax(0, 1fr);
  }
  .access-list img {
    width: 86px;
  }
}

@media (max-width: 620px) {
  .task-carousel .slide-card img {
    height: 250px;
  }
  .access-list {
    gap: 28px;
  }
  .access-list article {
    grid-template-columns: 1fr;
  }
  .access-list img {
    width: 92px;
  }
}
.automation-checks {
  display: grid;
  gap: 1px;
  padding: 0;
  list-style: none;
}
.automation-checks li {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 760;
  line-height: 1.35;
}
.automation-checks li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 10px;
  margin-right: 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.68);
  border-bottom: 2px solid rgba(255, 255, 255, 0.68);
  transform: rotate(-45deg);
}
.intervention-list span,
.benefit-list p,
.module-checks li,
.module-steps li {
  border-radius: 8px;
}
.module-banner-section {
  padding: clamp(48px, 7vw, 92px) clamp(20px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.module-banner-section > img {
  width: 100%;
  max-height: 470px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}
.module-banner-section .section-title {
  margin: clamp(26px, 4vw, 48px) 0 24px;
}
.story-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 44vw);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 18px;
  scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
}
.story-carousel::-webkit-scrollbar {
  height: 10px;
}
.story-carousel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}
.slide-card {
  height: 560px;
  display: grid;
  grid-template-rows: 340px 220px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #202022;
}
.slide-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.slide-card div,
.data-card p,
.data-card ul {
  margin: 0;
  padding: 22px;
  min-height: 0;
}
.slide-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.08;
}
.slide-card p,
.data-card li {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  line-height: 1.5;
}
.module-image-section > img {
  max-height: 620px;
  object-fit: cover;
  border-radius: 8px;
}
.data-section > img {
  max-height: 410px;
  object-position: center;
}
.data-carousel {
  grid-auto-columns: minmax(300px, 31vw);
}
.data-card {
  height: 560px;
  grid-template-rows: 300px 260px;
}
.data-card img {
  object-fit: contain;
  padding: 34px;
  background: #f7f7f7;
}
.data-card ul {
  display: grid;
  gap: 10px;
  align-content: start;
  list-style: none;
}
.data-card li {
  position: relative;
  padding-left: 28px;
}
.data-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 15px;
  height: 9px;
  border-left: 2px solid #42d7c6;
  border-bottom: 2px solid #42d7c6;
  transform: rotate(-45deg);
}
.module-final {
  background:
    radial-gradient(circle at 50% 0%, rgba(66, 215, 198, 0.16), transparent 34%),
    #101011;
}

@media (max-width: 880px) {
  .module-hero {
    min-height: 78vh;
  }
  .module-hero::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.32), #101011 92%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.12));
  }
  .story-carousel,
  .data-carousel {
    grid-auto-columns: minmax(300px, 82vw);
  }
  .module-banner-section > img {
    max-height: 360px;
  }
  .stats-board {
    grid-template-columns: 1fr;
  }
  .stats-card {
    min-height: 300px;
  }
  .automation-summary {
    grid-template-columns: 1fr;
  }
  .automation-panel {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .module-hero {
    min-height: 72vh;
  }
  .module-hero-copy {
    width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    padding: 0 22px 42px;
  }
  .module-hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 9vw, 34px);
    line-height: 1;
    overflow-wrap: anywhere;
  }
  .module-hero p:last-child,
  .module-image-section p,
  .section-title p,
  .slide-card p,
  .data-card li {
    font-size: 16px;
  }
  .activity-panel {
    padding: 16px;
  }
  .ticket-board-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .ticket-tools {
    width: 100%;
    overflow-x: auto;
  }
  .ticket-item {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 84px;
    padding: 10px 34px 10px 12px;
  }
  .ticket-item::after {
    right: 12px;
  }
  .ticket-status {
    width: 28px;
    height: 28px;
  }
  .ticket-item h4 {
    font-size: 15px;
  }
  .ticket-item p {
    font-size: 13px;
  }
  .stats-section {
    padding-inline: 16px;
  }
  .stats-hero-image {
    max-height: 260px;
  }
  .stats-board {
    padding: 14px;
  }
  .stats-card {
    min-height: 260px;
    padding: 16px;
  }
  .donut-chart {
    width: min(220px, 64vw);
  }
  .donut-point {
    width: 18px;
    height: 18px;
  }
  .donut-point span,
  .wave-point span {
    min-width: 136px;
    font-size: 12px;
  }
  .wave-point {
    width: 14px;
    height: 14px;
  }
  .chart-labels {
    font-size: 10px;
  }
  .stats-actions li {
    font-size: 14px;
  }
  .automation-section {
    padding-inline: 16px;
  }
  .automation-hero-image {
    max-height: 220px;
  }
  .automation-tabs {
    padding: 14px;
  }
  .automation-tab {
    padding-inline: 10px;
    font-size: 14px;
  }
  .automation-group {
    padding-inline: 2px;
  }
  .automation-group h3 {
    font-size: 18px;
  }
  .automation-group strong,
  .automation-group span,
  .automation-checks li {
    font-size: 14px;
  }
  .story-carousel,
  .data-carousel {
    grid-auto-columns: minmax(282px, 86vw);
    gap: 14px;
  }
  .slide-card,
  .data-card {
    height: 520px;
    grid-template-rows: 280px 240px;
  }
  .slide-card img,
  .data-card img {
    min-height: 0;
  }
  .data-card img {
    padding: 24px;
  }
}

/* Annonces detail page */
.announcements-page {
  --announce-ink: #17202a;
  --announce-muted: #65717d;
  --announce-soft: #f3f7fb;
  --announce-blue: #0876dc;
  --announce-teal: #26d3c2;
  margin: 0;
  color: var(--announce-ink);
  background: #fbfcfd;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.announcements-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px clamp(18px, 4vw, 58px);
  border-bottom: 1px solid rgba(23, 32, 42, 0.08);
  background: rgba(251, 252, 253, 0.82);
  backdrop-filter: blur(20px);
}
.announcements-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-weight: 850;
}
.announcements-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.announcements-header nav {
  display: flex;
  gap: 10px;
}
.announcements-header nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(23, 32, 42, 0.76);
  background: rgba(23, 32, 42, 0.06);
  font-size: 14px;
  font-weight: 760;
}
.announcements-header nav a:last-child {
  color: #fff;
  background: var(--announce-blue);
}
.announcements-hero {
  min-height: calc(100vh - 62px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
  padding: clamp(54px, 8vw, 112px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 82% 20%, rgba(38, 211, 194, 0.18), transparent 32%),
    radial-gradient(circle at 12% 85%, rgba(8, 118, 220, 0.14), transparent 32%),
    linear-gradient(180deg, #fff, #f7fbfd);
}
.announcements-kicker {
  margin: 0 0 14px;
  color: var(--announce-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.announcements-hero h1,
.announcements-section-title h2,
.announcements-feature h2,
.announcements-final h2 {
  margin: 0;
  color: var(--announce-ink);
  font-weight: 900;
  letter-spacing: 0;
}
.announcements-hero h1 {
  max-width: 820px;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
}
.announcements-hero-copy > p:last-child {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--announce-muted);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.35;
}
.feed-stage {
  position: relative;
  min-height: 640px;
}
.feed-card {
  border: 1px solid rgba(23, 32, 42, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 28px 90px rgba(13, 39, 66, 0.13);
  backdrop-filter: blur(18px);
}
.feed-card-large {
  position: absolute;
  right: 7%;
  top: 8%;
  width: min(520px, 92%);
  padding: 22px;
}
.feed-card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #26d3c2);
  font-weight: 900;
}
.avatar-teal {
  background: linear-gradient(135deg, #10b89e, #0876dc);
}
.feed-card h2,
.feed-card h3 {
  margin: 0;
  color: var(--announce-ink);
  line-height: 1.05;
}
.feed-card h2 {
  font-size: clamp(25px, 2.8vw, 40px);
}
.feed-card-head p,
.feed-card > p,
.feed-card-small p,
.announcement-card p,
.feature-grid p {
  color: var(--announce-muted);
  line-height: 1.45;
}
.feed-card-head p {
  margin: 4px 0 0;
  font-size: 14px;
}
.feed-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--announce-blue);
  font-size: 12px;
  font-weight: 850;
}
.welcome-photo {
  height: 210px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 14px;
  margin: 22px 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(38, 211, 194, 0.22), rgba(8, 118, 220, 0.18)),
    #edf7fb;
}
.welcome-photo span {
  width: 76px;
  height: 128px;
  border-radius: 999px 999px 22px 22px;
  background: linear-gradient(180deg, #fff, #bdddf5);
  box-shadow: 0 16px 36px rgba(8, 118, 220, 0.16);
}
.welcome-photo span:nth-child(2) {
  height: 158px;
  background: linear-gradient(180deg, #fff, #88e1d8);
}
.feed-card > p {
  margin: 0;
  font-size: 17px;
}
.feed-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.feed-reactions span,
.announcement-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--announce-blue);
  background: rgba(8, 118, 220, 0.09);
  font-size: 12px;
  font-weight: 850;
}
.feed-card-small {
  position: absolute;
  width: min(300px, 58%);
  padding: 20px;
}
.birthday-card {
  left: 4%;
  top: 18%;
}
.success-card {
  left: 13%;
  bottom: 12%;
}
.mini-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #26d3c2, #0876dc);
  font-weight: 900;
}
.feed-card-small h3 {
  font-size: 24px;
}
.feed-card-small p {
  margin: 10px 0 0;
}
.announcements-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(23, 32, 42, 0.08);
  background: #fff;
}
.announcements-strip p {
  min-height: 84px;
  display: grid;
  place-items: center;
  margin: 0;
  border-right: 1px solid rgba(23, 32, 42, 0.08);
  color: var(--announce-ink);
  font-weight: 880;
}
.announcements-strip p:last-child {
  border-right: 0;
}
.announcements-section,
.announcements-feature,
.announcements-final {
  padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 92px);
}
.announcements-section-title {
  max-width: 920px;
  margin-bottom: clamp(28px, 4vw, 54px);
}
.announcements-section-title h2,
.announcements-feature h2,
.announcements-final h2 {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1;
}
.announcement-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.announcement-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(23, 32, 42, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 70px rgba(13, 39, 66, 0.08);
}
.announcement-card:nth-child(1) {
  grid-column: span 3;
}
.announcement-card:nth-child(2) {
  grid-column: span 3;
}
.announcement-card:nth-child(3),
.announcement-card:nth-child(4),
.announcement-card:nth-child(5) {
  grid-column: span 2;
}
.announcement-card.highlight {
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(38, 211, 194, 0.42), transparent 34%),
    linear-gradient(145deg, #10263b, #0876dc);
}
.announcement-card.highlight h3,
.announcement-card.highlight p {
  color: #fff;
}
.announcement-card h3 {
  margin: 14px 0 12px;
  color: var(--announce-ink);
  font-size: clamp(25px, 2.6vw, 42px);
  line-height: 1.04;
}
.announcement-card p {
  margin: 0;
  font-size: 17px;
}
.announcement-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 760;
}
.reaction-row {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 24px;
}
.reaction-row span {
  width: 32px;
  height: 32px;
  margin-right: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #d7edf8, #55d6cb);
}
.reaction-row b {
  margin-left: 16px;
  color: var(--announce-muted);
}
.soft-photo {
  height: 160px;
  margin: -8px -8px 22px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 42%, rgba(255, 255, 255, 0.95) 0 9%, transparent 10%),
    radial-gradient(circle at 58% 36%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 48%, rgba(255, 255, 255, 0.95) 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(38, 211, 194, 0.45), rgba(8, 118, 220, 0.3)),
    #e8f7fb;
}
.progress-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--announce-blue);
  font-weight: 820;
}
.progress-note i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(var(--announce-blue) 0 78%, rgba(8, 118, 220, 0.12) 78% 100%);
}
.calm-card {
  background:
    radial-gradient(circle at 90% 16%, rgba(38, 211, 194, 0.24), transparent 30%),
    #f4fbfd;
}
.announcements-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
  background: #111820;
}
.announcements-feature .announcements-kicker,
.announcements-feature h2 {
  color: #fff;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.feature-grid article {
  min-height: 210px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}
.feature-grid span {
  color: var(--announce-teal);
  font-weight: 900;
}
.feature-grid h3 {
  margin: 32px 0 10px;
  color: #fff;
  font-size: 30px;
}
.feature-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}
.announcements-final {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(38, 211, 194, 0.16), transparent 36%),
    #fbfcfd;
}
.announcements-final h2 {
  max-width: 980px;
}
.announcements-final a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 0 20px;
  border-radius: 999px;
  color: #fff;
  background: var(--announce-blue);
  font-weight: 850;
}

@media (max-width: 980px) {
  .announcements-hero,
  .announcements-feature {
    grid-template-columns: 1fr;
  }
  .feed-stage {
    min-height: 600px;
  }
  .announcement-card:nth-child(n) {
    grid-column: span 3;
  }
}

@media (max-width: 720px) {
  .announcements-header {
    flex-wrap: wrap;
  }
  .announcements-header nav {
    width: 100%;
  }
  .announcements-hero {
    padding-top: 48px;
  }
  .announcements-hero h1 {
    font-size: clamp(40px, 12vw, 58px);
  }
  .feed-stage {
    min-height: 560px;
  }
  .feed-card-large {
    right: 0;
    width: 100%;
  }
  .feed-card-small {
    width: 72%;
  }
  .birthday-card {
    left: 0;
    top: auto;
    bottom: 20%;
  }
  .success-card {
    left: auto;
    right: 0;
    bottom: 0;
  }
  .announcements-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .announcement-wall,
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .announcement-card:nth-child(n) {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .announcements-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .announcements-page main,
  .announcements-page section,
  .announcements-page article,
  .announcements-page div {
    max-width: 100%;
  }
  .announcements-page h1,
  .announcements-page h2,
  .announcements-page h3,
  .announcements-page p,
  .announcements-page span {
    overflow-wrap: anywhere;
  }
  .announcements-header nav a {
    padding-inline: 12px;
    font-size: 13px;
  }
  .announcements-hero,
  .announcements-section,
  .announcements-feature,
  .announcements-final {
    padding-inline: 18px;
  }
  .announcements-hero,
  .announcements-hero-copy,
  .feed-stage,
  .feed-card {
    min-width: 0;
    max-width: 100%;
  }
  .announcements-hero h1 {
    max-width: calc(100vw - 36px);
    font-size: clamp(30px, 8.6vw, 34px);
    line-height: 1;
    overflow-wrap: anywhere;
  }
  .announcements-hero-copy > p:last-child {
    max-width: calc(100vw - 36px);
  }
  .feed-stage {
    min-height: 620px;
  }
  .feed-card-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .feed-badge {
    display: none;
  }
  .welcome-photo {
    height: 170px;
  }
  .feed-card-small {
    width: 82%;
  }
  .announcements-page .feed-card-small {
    width: 100%;
  }
  .feed-card h2 {
    font-size: 24px;
  }
  .feed-card-small h3 {
    font-size: 22px;
  }
  .announcements-section-title h2,
  .announcements-feature h2,
  .announcements-final h2 {
    font-size: 30px;
  }
  .announcements-strip p {
    font-size: 14px;
  }
  .announcement-card h3 {
    font-size: 24px;
  }
}

/* Annonces hero composition refinement */
.announcements-page .feed-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-content: center;
}
.announcements-page .feed-card-large,
.announcements-page .feed-card-small {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
}
.announcements-page .feed-card-large {
  grid-column: 1 / -1;
  max-width: 620px;
  justify-self: end;
}
.announcements-page .feed-card-small {
  min-height: 210px;
}
.announcements-page .birthday-card {
  transform: translateY(-10px);
}
.announcements-page .success-card {
  transform: translateY(22px);
}

@media (max-width: 720px) {
  .announcements-page .announcements-hero {
    display: block;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .announcements-page .announcements-hero-copy {
    width: 100%;
    max-width: 100%;
  }
  .announcements-page .announcements-hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(36px, 10vw, 42px);
    line-height: 1;
  }
  .announcements-page .announcements-hero-copy > p:last-child {
    width: 100%;
    max-width: 100%;
  }
  .announcements-page .feed-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 44px;
  }
  .announcements-page .feed-card-large,
  .announcements-page .feed-card-small {
    width: 100%;
    transform: none;
  }
}

/* Evenements detail page */
.events-page {
  --event-ink: #f7fbff;
  --event-muted: rgba(247, 251, 255, 0.68);
  --event-night: #111827;
  --event-panel: rgba(255, 255, 255, 0.075);
  --event-line: rgba(255, 255, 255, 0.12);
  --event-amber: #f6b756;
  --event-coral: #ef6f61;
  --event-teal: #28d6c2;
  --event-blue: #1477e8;
  margin: 0;
  color: var(--event-ink);
  background: #0d1420;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.events-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px clamp(18px, 4vw, 58px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 20, 32, 0.78);
  backdrop-filter: blur(20px);
}
.events-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: #fff;
  font-weight: 850;
}
.events-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.events-header nav {
  display: flex;
  gap: 10px;
}
.events-header nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.09);
  font-size: 14px;
  font-weight: 760;
}
.events-header nav a:last-child,
.events-final a,
.event-main-card a,
.event-detail-actions a {
  color: #111827;
  background: var(--event-amber);
}
.events-hero {
  position: relative;
  min-height: calc(100vh - 62px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  overflow: hidden;
  padding: clamp(56px, 8vw, 116px) clamp(20px, 6vw, 92px);
  background:
    linear-gradient(135deg, rgba(13, 20, 32, 0.96), rgba(20, 37, 62, 0.98)),
    #0d1420;
}
.events-hero::before {
  content: "";
  position: absolute;
  inset: 12% -8% auto 36%;
  height: 420px;
  border: 1px solid rgba(246, 183, 86, 0.18);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.event-ribbon {
  position: absolute;
  width: 70vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(40, 214, 194, 0.6), rgba(246, 183, 86, 0.7), transparent);
  transform-origin: center;
  animation: eventDrift 12s ease-in-out infinite alternate;
}
.event-ribbon-one {
  top: 23%;
  right: -12%;
  transform: rotate(-16deg);
}
.event-ribbon-two {
  bottom: 22%;
  left: -16%;
  transform: rotate(11deg);
  animation-delay: -4s;
}
@keyframes eventDrift {
  from { opacity: 0.45; translate: -18px 0; }
  to { opacity: 1; translate: 18px 10px; }
}
.events-kicker {
  margin: 0 0 14px;
  color: var(--event-amber);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.events-hero h1,
.events-section-title h2,
.event-detail-copy h2,
.events-final h2 {
  margin: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
}
.events-hero h1 {
  max-width: 820px;
  font-size: clamp(52px, 7.6vw, 108px);
  line-height: 0.92;
}
.events-hero-copy {
  position: relative;
  z-index: 2;
}
.events-hero-copy > p:last-child,
.events-section-title p,
.event-detail-copy p {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--event-muted);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.42;
}
.event-orchestra {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
}
.event-main-card,
.event-mini-grid article,
.agenda-card,
.calendar-view,
.list-view,
.event-detail-card {
  border: 1px solid var(--event-line);
  border-radius: 8px;
  background: var(--event-panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}
.event-main-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
}
.event-main-date {
  display: grid;
  place-items: center;
  min-height: 112px;
  border-radius: 8px;
  color: #111827;
  background: linear-gradient(145deg, var(--event-amber), #ffe0a3);
}
.event-main-date span {
  font-weight: 900;
  text-transform: uppercase;
}
.event-main-date strong {
  font-size: 54px;
  line-height: 0.9;
}
.event-pill,
.event-type {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #111827;
  background: var(--event-teal);
  font-size: 12px;
  font-weight: 900;
}
.event-main-card h2 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
}
.event-main-card p:not(.event-pill),
.event-mini-grid p,
.agenda-card p,
.list-view p {
  margin: 0;
  color: var(--event-muted);
  line-height: 1.42;
}
.event-main-card a,
.events-final a,
.event-detail-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 900;
}
.event-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.event-mini-grid article {
  min-height: 190px;
  padding: 20px;
}
.event-mini-grid span {
  color: var(--event-amber);
  font-size: 34px;
  font-weight: 900;
}
.event-mini-grid h3 {
  margin: 28px 0 8px;
  color: #fff;
  font-size: 21px;
  line-height: 1.08;
}
.events-marquee {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--event-line);
  background: #101a2a;
}
.events-marquee p {
  min-height: 84px;
  display: grid;
  place-items: center;
  margin: 0;
  border-right: 1px solid var(--event-line);
  color: #fff;
  font-weight: 880;
}
.events-marquee p:last-child {
  border-right: 0;
}
.events-section,
.events-detail,
.events-final {
  padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 92px);
}
.events-section-title {
  max-width: 920px;
  margin-bottom: clamp(28px, 4vw, 54px);
}
.events-section-title.compact {
  max-width: 760px;
}
.events-section-title h2,
.event-detail-copy h2,
.events-final h2 {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1;
}
.event-agenda-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.agenda-card {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
}
.agenda-card:nth-child(1) {
  grid-column: span 3;
  background:
    linear-gradient(145deg, rgba(246, 183, 86, 0.18), rgba(239, 111, 97, 0.12)),
    var(--event-panel);
}
.agenda-card:nth-child(2),
.agenda-card:nth-child(3),
.agenda-card:nth-child(4) {
  grid-column: span 2;
}
.agenda-card h3 {
  margin: 18px 0 12px;
  color: #fff;
  font-size: clamp(25px, 2.7vw, 42px);
  line-height: 1.05;
}
.agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
}
.agenda-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 800;
}
.view-section {
  background: #0f1724;
}
.view-composer {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.78fr);
  gap: 18px;
}
.calendar-view,
.list-view {
  padding: clamp(18px, 3vw, 30px);
}
.calendar-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.calendar-grid span,
.calendar-grid i,
.calendar-grid b,
.calendar-grid strong {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  font-style: normal;
}
.calendar-grid b,
.calendar-grid strong {
  color: #111827;
  background: var(--event-amber);
}
.calendar-grid strong {
  background: var(--event-teal);
}
.list-view {
  display: grid;
  gap: 10px;
}
.list-view article {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.list-view time {
  color: var(--event-amber);
  font-weight: 900;
}
.list-view h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 20px;
}
.events-detail {
  background:
    linear-gradient(180deg, #0f1724, #111827);
}
.event-detail-card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: clamp(20px, 4vw, 48px);
}
.event-detail-visual {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(246, 183, 86, 0.2), rgba(20, 119, 232, 0.26)),
    #152235;
}
.event-detail-visual span {
  position: absolute;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.event-detail-visual span:nth-child(1) {
  width: 58%;
  height: 38%;
  left: 10%;
  top: 12%;
}
.event-detail-visual span:nth-child(2) {
  width: 44%;
  height: 28%;
  right: 10%;
  top: 44%;
}
.event-detail-visual span:nth-child(3) {
  width: 34%;
  height: 18%;
  left: 18%;
  bottom: 12%;
  background: var(--event-amber);
}
.event-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.event-detail-actions span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 850;
}
.events-final {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, #111827, #0d1420);
}
.events-final h2 {
  max-width: 980px;
}
.events-final a {
  margin-top: 26px;
}

@media (max-width: 980px) {
  .events-hero,
  .view-composer,
  .event-detail-card {
    grid-template-columns: 1fr;
  }
  .events-hero {
    min-height: 0;
  }
  .event-agenda-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agenda-card:nth-child(n) {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .events-header {
    flex-wrap: wrap;
  }
  .events-header nav {
    width: 100%;
  }
  .events-hero h1 {
    font-size: clamp(42px, 13vw, 64px);
  }
  .event-main-card {
    grid-template-columns: 1fr;
  }
  .event-main-card a {
    justify-self: start;
  }
  .event-mini-grid,
  .events-marquee,
  .event-agenda-board {
    grid-template-columns: 1fr;
  }
  .events-marquee p {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid var(--event-line);
  }
  .events-marquee p:last-child {
    border-bottom: 0;
  }
  .list-view article {
    grid-template-columns: 1fr;
  }
  .event-detail-visual {
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .events-page {
    width: 100%;
    max-width: 100%;
  }
  .events-page h1,
  .events-page h2,
  .events-page h3,
  .events-page p,
  .events-page span,
  .events-page time {
    overflow-wrap: anywhere;
  }
  .events-hero,
  .events-section,
  .events-detail,
  .events-final {
    padding-inline: 18px;
  }
  .events-hero h1 {
    font-size: 38px;
    line-height: 1;
  }
  .events-section-title h2,
  .event-detail-copy h2,
  .events-final h2 {
    font-size: 32px;
  }
  .event-main-card,
  .calendar-view,
  .list-view,
  .event-detail-card {
    padding: 18px;
  }
  .event-main-card h2,
  .agenda-card h3 {
    font-size: 26px;
  }
  .calendar-grid {
    gap: 5px;
  }
  .calendar-grid span,
  .calendar-grid i,
  .calendar-grid b,
  .calendar-grid strong {
    font-size: 12px;
  }
}

/* Informations detail page */
.info-page {
  --info-ink: #17202a;
  --info-muted: #657483;
  --info-blue: #1b72e8;
  --info-teal: #25c8bd;
  --info-green: #55b989;
  --info-paper: #f7fafc;
  --info-line: rgba(23, 32, 42, 0.1);
  margin: 0;
  color: var(--info-ink);
  background: var(--info-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.info-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px clamp(18px, 4vw, 58px);
  border-bottom: 1px solid var(--info-line);
  background: rgba(247, 250, 252, 0.82);
  backdrop-filter: blur(20px);
}
.info-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-weight: 850;
}
.info-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.info-header nav {
  display: flex;
  gap: 10px;
}
.info-header nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(23, 32, 42, 0.72);
  background: rgba(23, 32, 42, 0.06);
  font-size: 14px;
  font-weight: 760;
}
.info-header nav a:last-child,
.info-final a {
  color: #fff;
  background: var(--info-blue);
}
.info-hero {
  min-height: calc(100vh - 62px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: center;
  padding: clamp(56px, 8vw, 116px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 200, 189, 0.18), transparent 34%),
    radial-gradient(circle at 16% 86%, rgba(27, 114, 232, 0.12), transparent 34%),
    #f7fafc;
}
.info-kicker {
  margin: 0 0 14px;
  color: var(--info-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.info-hero h1,
.info-proof h2,
.info-section-title h2,
.target-section h2,
.rhythm-section h2,
.info-final h2 {
  margin: 0;
  color: var(--info-ink);
  font-weight: 900;
  letter-spacing: 0;
}
.info-hero h1 {
  max-width: 880px;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.94;
}
.info-hero-copy > p:last-child,
.info-proof p,
.info-section-title p,
.target-section p,
.rhythm-section p {
  max-width: 700px;
  margin: 22px 0 0;
  color: var(--info-muted);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.42;
}
.knowledge-console {
  position: relative;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(27, 114, 232, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 34px 100px rgba(37, 92, 130, 0.18);
  backdrop-filter: blur(20px);
}
.knowledge-search {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid var(--info-line);
  border-radius: 10px;
  color: var(--info-muted);
  background: #fff;
  font-weight: 850;
}
.knowledge-search span {
  width: 18px;
  height: 18px;
  border: 3px solid var(--info-blue);
  border-radius: 50%;
  box-shadow: 8px 8px 0 -6px var(--info-blue);
}
.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.knowledge-layout aside,
.knowledge-layout article {
  border: 1px solid var(--info-line);
  border-radius: 10px;
  background: #fff;
}
.knowledge-layout aside {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
}
.knowledge-layout aside p {
  margin: 0 0 8px;
  color: var(--info-muted);
  font-weight: 900;
}
.knowledge-layout aside span {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--info-ink);
  background: #f0f6fb;
  font-weight: 800;
}
.knowledge-layout article {
  min-height: 420px;
  padding: 22px;
}
.doc-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}
.doc-head > span {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--info-blue), var(--info-teal));
}
.doc-head h2 {
  margin: 0 0 4px;
  font-size: clamp(25px, 3vw, 38px);
}
.doc-head p {
  margin: 0;
  color: var(--info-muted);
}
.knowledge-layout article > i {
  display: block;
  height: 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #dfeaf4;
}
.knowledge-layout article > i:nth-of-type(1) { width: 86%; }
.knowledge-layout article > i:nth-of-type(2) { width: 72%; }
.knowledge-layout article > i:nth-of-type(3) { width: 92%; }
.knowledge-layout article > i:nth-of-type(4) { width: 58%; }
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.doc-actions b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--info-blue);
  background: rgba(27, 114, 232, 0.08);
}
.knowledge-orbit {
  position: absolute;
  inset: -24px;
  pointer-events: none;
  border: 1px solid rgba(37, 200, 189, 0.18);
  border-radius: 50%;
  animation: infoOrbit 14s linear infinite;
}
.knowledge-orbit span {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--info-teal);
}
.knowledge-orbit span:nth-child(1) { left: 18%; top: 4%; }
.knowledge-orbit span:nth-child(2) { right: 7%; top: 46%; background: var(--info-blue); }
.knowledge-orbit span:nth-child(3) { left: 42%; bottom: 1%; background: var(--info-green); }
@keyframes infoOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.info-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.9fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: center;
  padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 92px);
  background: #fff;
}
.info-proof-image {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 34px 100px rgba(37, 92, 130, 0.17);
}
.info-proof-image img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}
.info-proof h2,
.info-section-title h2,
.target-section h2,
.rhythm-section h2,
.info-final h2 {
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1;
}
.info-section,
.clarity-section,
.target-section,
.rhythm-section,
.info-final {
  padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 92px);
}
.info-section-title {
  max-width: 920px;
  margin-bottom: clamp(28px, 4vw, 54px);
}
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.knowledge-grid article {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--info-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 70px rgba(37, 92, 130, 0.08);
}
.knowledge-grid span {
  color: var(--info-teal);
  font-weight: 900;
}
.knowledge-grid h3 {
  margin: auto 0 10px;
  color: var(--info-ink);
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.04;
}
.knowledge-grid p {
  margin: 0;
  color: var(--info-muted);
  line-height: 1.45;
}
.clarity-section {
  background: #102033;
}
.clarity-section .info-kicker,
.clarity-section h2 {
  color: #fff;
}
.clarity-board {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 18px;
}
.noise-column,
.source-column {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.noise-column {
  display: grid;
  gap: 10px;
  background: rgba(255, 255, 255, 0.045);
}
.noise-column h3,
.source-column h3 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 28px;
}
.noise-column span {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.055);
}
.source-column {
  display: grid;
  gap: 12px;
  background:
    radial-gradient(circle at 96% 8%, rgba(37, 200, 189, 0.26), transparent 34%),
    rgba(255, 255, 255, 0.075);
}
.source-column article {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}
.source-column strong {
  color: var(--info-ink);
  font-size: 18px;
}
.source-column p {
  margin: 6px 0 0;
  color: var(--info-muted);
}
.target-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
  background: #fff;
}
.target-stack {
  display: grid;
  gap: 12px;
}
.target-stack article {
  min-height: 132px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--info-line);
  border-radius: 12px;
  background: var(--info-paper);
}
.target-stack span {
  color: var(--info-blue);
  font-size: 22px;
  font-weight: 900;
}
.target-stack p {
  margin: 0;
  font-size: 18px;
}
.rhythm-section {
  text-align: center;
}
.rhythm-section h2 {
  max-width: 1040px;
  margin-inline: auto;
}
.rhythm-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(30px, 5vw, 60px);
}
.rhythm-line article {
  min-height: 250px;
  padding: 30px;
  border: 1px solid var(--info-line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
}
.rhythm-line span {
  width: 46px;
  height: 46px;
  display: block;
  margin-bottom: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--info-teal), var(--info-blue));
}
.rhythm-line h3 {
  margin: 0 0 10px;
  font-size: 30px;
}
.rhythm-line p {
  margin: 0;
  font-size: 17px;
}
.info-final {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 200, 189, 0.16), transparent 36%),
    #fff;
}
.info-final h2 {
  max-width: 980px;
}
.info-final a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .info-hero,
  .info-proof,
  .clarity-board,
  .target-section {
    grid-template-columns: 1fr;
  }
  .knowledge-grid,
  .rhythm-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .info-header {
    flex-wrap: wrap;
  }
  .info-header nav {
    width: 100%;
  }
  .info-hero {
    min-height: 0;
  }
  .knowledge-layout,
  .knowledge-grid,
  .rhythm-line {
    grid-template-columns: 1fr;
  }
  .target-stack article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .info-page h1,
  .info-page h2,
  .info-page h3,
  .info-page p,
  .info-page span,
  .info-page strong {
    overflow-wrap: anywhere;
  }
  .info-hero,
  .info-proof,
  .info-section,
  .clarity-section,
  .target-section,
  .rhythm-section,
  .info-final {
    padding-inline: 18px;
  }
  .info-hero h1 {
    font-size: 36px;
    line-height: 1;
  }
  .info-proof h2,
  .info-section-title h2,
  .target-section h2,
  .rhythm-section h2,
  .info-final h2 {
    font-size: 32px;
  }
  .knowledge-console,
  .knowledge-layout article,
  .knowledge-layout aside,
  .noise-column,
  .source-column {
    padding: 16px;
  }
  .knowledge-orbit {
    display: none;
  }
  .knowledge-search strong {
    font-size: 14px;
  }
  .doc-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .doc-head > span {
    width: 42px;
    height: 42px;
  }
  .target-stack span,
  .rhythm-line h3 {
    font-size: 24px;
  }
}

/* Taches module detail page */
.tasks-flow-page {
  --task-bg: #0d1522;
  --task-bg-soft: #101c2c;
  --task-ink: #f8fbff;
  --task-muted: rgba(248, 251, 255, 0.68);
  --task-line: rgba(255, 255, 255, 0.13);
  --task-panel: rgba(255, 255, 255, 0.075);
  --task-blue: #1777ff;
  --task-green: #28d66f;
  --task-amber: #f6b756;
  --task-violet: #8268ff;
  margin: 0;
  color: var(--task-ink);
  background: var(--task-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.tasks-flow-page * {
  box-sizing: border-box;
}

.tasks-flow-page a {
  color: inherit;
  text-decoration: none;
}

.tasks-flow-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 12px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 21, 34, 0.84);
  backdrop-filter: blur(18px);
}

.tasks-flow-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.tasks-flow-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.tasks-flow-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--task-muted);
  font-size: 14px;
}

.tasks-flow-header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
}

.tasks-flow-header nav a:last-child {
  color: #fff;
  background: var(--task-blue);
  box-shadow: 0 12px 30px rgba(23, 119, 255, 0.3);
}

.tasks-flow-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(430px, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: clamp(56px, 8vw, 116px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 74% 20%, rgba(40, 214, 111, 0.23), transparent 34%),
    radial-gradient(circle at 18% 15%, rgba(23, 119, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #0d1522 0%, #101c2c 58%, #0a1220 100%);
}

.tasks-flow-kicker {
  margin: 0 0 14px;
  color: var(--task-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tasks-flow-copy h1 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 7vw, 100px);
  line-height: 0.94;
  letter-spacing: 0;
}

.tasks-flow-copy > p:last-child,
.factory-copy p,
.qr-copy p {
  max-width: 690px;
  color: var(--task-muted);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
}

.task-motion {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 62% 34%, rgba(40, 214, 111, 0.2), transparent 28%),
    radial-gradient(circle at 20% 78%, rgba(23, 119, 255, 0.22), transparent 24%);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.38);
}

.task-motion::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.motion-node {
  position: absolute;
  z-index: 3;
  width: 190px;
  min-height: 92px;
  padding: 18px;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}

.manager-node {
  left: 7%;
  top: 12%;
}

.field-node {
  right: 7%;
  top: 38%;
}

.report-node {
  left: 28%;
  bottom: 10%;
}

.motion-node span {
  display: block;
  color: var(--task-muted);
  font-size: 13px;
}

.motion-node strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 19px;
}

.motion-track {
  position: absolute;
  inset: 0;
}

.motion-track::before {
  content: "";
  position: absolute;
  left: 17%;
  right: 18%;
  top: 49%;
  height: 2px;
  background: linear-gradient(90deg, var(--task-blue), var(--task-green), var(--task-amber));
  transform: rotate(18deg);
  transform-origin: center;
  box-shadow: 0 0 32px rgba(40, 214, 111, 0.45);
}

.motion-track i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--task-green);
  box-shadow: 0 0 26px rgba(40, 214, 111, 0.75);
  animation: taskTravel 3.8s linear infinite;
}

.motion-track i:nth-child(1) {
  left: 27%;
  top: 39%;
}

.motion-track i:nth-child(2) {
  left: 49%;
  top: 49%;
  animation-delay: 1.1s;
}

.motion-track i:nth-child(3) {
  left: 70%;
  top: 58%;
  animation-delay: 2.2s;
}

.floating-task {
  position: absolute;
  z-index: 4;
  width: min(280px, 70%);
  padding: 18px;
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.floating-task b,
.floating-task small {
  display: block;
}

.floating-task small {
  margin-top: 7px;
  color: #64748b;
}

.task-a {
  left: 12%;
  top: 34%;
}

.task-b {
  right: 12%;
  top: 18%;
}

.task-c {
  right: 16%;
  bottom: 18%;
}

@keyframes taskTravel {
  0% {
    opacity: 0.18;
    transform: translate(-22px, -12px) scale(0.76);
  }
  45% {
    opacity: 1;
    transform: translate(12px, 8px) scale(1);
  }
  100% {
    opacity: 0.18;
    transform: translate(48px, 26px) scale(0.76);
  }
}

.tasks-flow-section,
.task-factory,
.qr-bridge-section,
.trace-section,
.task-usecases,
.tasks-flow-final {
  padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.tasks-flow-title {
  max-width: 900px;
  margin-bottom: clamp(28px, 4vw, 54px);
}

.tasks-flow-title h2,
.factory-copy h2,
.qr-copy h2,
.tasks-flow-final h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1;
  letter-spacing: 0;
}

.distribution-section {
  background: #0b1220;
}

.distribution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.distribution-grid article {
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  background: var(--task-panel);
}

.distribution-grid span {
  color: var(--task-green);
  font-size: 13px;
  font-weight: 900;
}

.distribution-grid h3 {
  margin: 34px 0 12px;
  color: #fff;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.distribution-grid p {
  margin: 0;
  color: var(--task-muted);
  line-height: 1.55;
}

.task-factory {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(430px, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: var(--task-bg-soft);
}

.factory-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.56fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.065);
}

.template-stack {
  display: grid;
  gap: 12px;
}

.template-stack article,
.assignee-panel {
  padding: 20px;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.template-stack b,
.template-stack span,
.assignee-panel span,
.assignee-panel strong {
  display: block;
}

.template-stack span,
.assignee-panel span {
  margin-top: 8px;
  color: var(--task-muted);
}

.assignee-panel {
  display: grid;
  align-content: center;
  gap: 16px;
}

.assignee-panel strong {
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
}

.assignee-panel button {
  width: max-content;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #07111f;
  background: var(--task-green);
  font-weight: 900;
}

.qr-bridge-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  color: #101820;
  background:
    radial-gradient(circle at 20% 20%, rgba(40, 214, 111, 0.18), transparent 30%),
    linear-gradient(135deg, #f7fbff, #eef7ff);
}

.qr-bridge-section .tasks-flow-kicker {
  color: #0b7f4c;
}

.qr-bridge-section h2 {
  color: #101820;
}

.qr-bridge-section p {
  color: rgba(16, 24, 32, 0.72);
}

.qr-device {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 18px;
  align-items: center;
  min-height: 500px;
}

.qr-code-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 34px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(18, 46, 86, 0.16);
}

.qr-code-grid i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #101820;
}

.qr-code-grid i:nth-child(2),
.qr-code-grid i:nth-child(5),
.qr-code-grid i:nth-child(8) {
  background: #d7e4f2;
}

.phone-checklist {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 10px solid #101820;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(18, 46, 86, 0.2);
}

.phone-checklist span {
  display: block;
  height: 54px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(23, 119, 255, 0.16), rgba(40, 214, 111, 0.18));
}

.trace-section {
  background:
    radial-gradient(circle at 80% 20%, rgba(246, 183, 86, 0.18), transparent 28%),
    #0b1220;
}

.trace-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 14px;
}

.live-progress,
.pdf-report {
  min-height: 360px;
  padding: 28px;
  border-radius: 8px;
}

.live-progress {
  border: 1px solid var(--task-line);
  background: rgba(255, 255, 255, 0.075);
}

.live-progress h3,
.pdf-report h3 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 28px;
}

.progress-list {
  display: grid;
  gap: 12px;
}

.progress-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 0 18px;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.progress-list b {
  color: #fff;
}

.progress-list i {
  flex: 0 0 auto;
  color: var(--task-green);
  font-style: normal;
  font-weight: 900;
}

.pdf-report {
  color: #101820;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.pdf-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.pdf-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 8px;
  color: #101820;
  background: var(--task-amber);
  font-weight: 1000;
}

.pdf-head strong {
  font-size: 32px;
  line-height: 1.05;
}

.pdf-report p {
  max-width: 420px;
  color: rgba(16, 24, 32, 0.68);
  font-size: 18px;
  line-height: 1.5;
}

.signature-line {
  width: min(280px, 100%);
  height: 3px;
  margin-top: 54px;
  background: linear-gradient(90deg, #101820, transparent);
}

.task-usecases {
  background: var(--task-bg-soft);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.usecase-grid span {
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--task-line);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 800;
}

.tasks-flow-final {
  min-height: 520px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(40, 214, 111, 0.22), transparent 34%),
    #07111f;
}

.tasks-flow-final h2 {
  max-width: 900px;
}

.tasks-flow-final a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #07111f;
  background: var(--task-green);
  font-weight: 900;
}

@media (max-width: 980px) {
  .tasks-flow-hero,
  .task-factory,
  .qr-bridge-section,
  .trace-board {
    grid-template-columns: 1fr;
  }

  .distribution-grid,
  .usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-motion {
    min-height: 540px;
  }
}

@media (max-width: 720px) {
  .tasks-flow-header {
    flex-wrap: wrap;
  }

  .tasks-flow-header nav {
    width: 100%;
  }

  .tasks-flow-hero {
    min-height: 0;
  }

  .task-motion {
    display: grid;
    gap: 12px;
    min-height: 0;
    padding: 18px;
  }

  .task-motion::before,
  .motion-track {
    display: none;
  }

  .motion-node,
  .floating-task {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .distribution-grid,
  .factory-board,
  .qr-device,
  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .tasks-flow-copy h1 {
    font-size: 42px;
  }

  .tasks-flow-title h2,
  .factory-copy h2,
  .qr-copy h2,
  .tasks-flow-final h2 {
    font-size: 34px;
  }

  .live-progress,
  .pdf-report {
    min-height: 0;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .tasks-flow-page h1,
  .tasks-flow-page h2,
  .tasks-flow-page h3,
  .tasks-flow-page p,
  .tasks-flow-page span,
  .tasks-flow-page strong,
  .tasks-flow-page b {
    overflow-wrap: anywhere;
  }

  .tasks-flow-hero,
  .tasks-flow-section,
  .task-factory,
  .qr-bridge-section,
  .trace-section,
  .task-usecases,
  .tasks-flow-final {
    padding-inline: 18px;
  }

  .tasks-flow-header nav a {
    padding-inline: 11px;
  }

  .progress-list span {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 14px;
  }
}

/* Interventions command center page */
.ops-page {
  --ops-bg: #080d12;
  --ops-panel: #121a22;
  --ops-panel-2: #18232d;
  --ops-ink: #f7fbff;
  --ops-muted: rgba(247, 251, 255, 0.68);
  --ops-line: rgba(255, 255, 255, 0.12);
  --ops-cyan: #22d3ee;
  --ops-blue: #1686ff;
  --ops-green: #2fd46b;
  --ops-violet: #a65dff;
  --ops-orange: #ff9f1a;
  margin: 0;
  color: var(--ops-ink);
  background: var(--ops-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.ops-page * {
  box-sizing: border-box;
}

.ops-page a {
  color: inherit;
  text-decoration: none;
}

.ops-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 12px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 13, 18, 0.86);
  backdrop-filter: blur(18px);
}

.ops-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.ops-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.ops-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ops-muted);
  font-size: 14px;
}

.ops-header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
}

.ops-header nav a:last-child {
  color: #041018;
  background: var(--ops-cyan);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(34, 211, 238, 0.28);
}

.ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: clamp(58px, 8vw, 118px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 76% 24%, rgba(34, 211, 238, 0.2), transparent 34%),
    radial-gradient(circle at 15% 20%, rgba(47, 212, 107, 0.16), transparent 28%),
    linear-gradient(135deg, #081018 0%, #111c26 54%, #060a0f 100%);
}

.ops-kicker {
  margin: 0 0 14px;
  color: var(--ops-cyan);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ops-hero h1,
.ops-title h2,
.memory-panel h2,
.qr-flow h2,
.ops-client h2,
.ops-report h2,
.ops-final h2 {
  margin: 0;
  color: #fff;
  letter-spacing: 0;
  line-height: 0.98;
}

.ops-hero h1 {
  max-width: 790px;
  font-size: clamp(54px, 7vw, 104px);
}

.ops-hero-copy > p:last-child,
.ops-title p,
.memory-panel p,
.qr-flow > p,
.ops-client p,
.ops-report p {
  max-width: 760px;
  color: var(--ops-muted);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.ops-map {
  position: relative;
  min-height: 640px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.045);
  background-size: 48px 48px, 48px 48px, auto, auto;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.38);
}

.ops-building {
  position: absolute;
  left: 11%;
  top: 16%;
  width: 52%;
  height: 66%;
  transform: skewY(-8deg);
}

.floor {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-left: 18px;
  height: 14%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.54);
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(255, 255, 255, 0.035));
  font-weight: 900;
}

.floor-6 { top: 0; }
.floor-5 { top: 16%; }
.floor-4 { top: 32%; }
.floor-3 { top: 48%; }
.floor-2 { top: 64%; }
.floor-1 { top: 80%; }

.ops-signal {
  position: absolute;
  z-index: 3;
  width: min(220px, 42%);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 13, 18, 0.78);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
}

.ops-signal b,
.ops-signal span {
  display: block;
}

.ops-signal span {
  margin-top: 6px;
  color: var(--ops-muted);
  font-size: 13px;
}

.signal-a {
  right: 8%;
  top: 18%;
}

.signal-b {
  right: 13%;
  top: 48%;
}

.signal-c {
  left: 16%;
  bottom: 9%;
}

.ops-route {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ops-cyan), transparent);
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.72));
  transform-origin: left center;
  animation: opsRoute 4s ease-in-out infinite;
}

.route-a {
  left: 35%;
  top: 28%;
  width: 38%;
  transform: rotate(-18deg);
}

.route-b {
  left: 44%;
  top: 56%;
  width: 34%;
  transform: rotate(10deg);
  animation-delay: 0.8s;
}

.route-c {
  left: 26%;
  bottom: 22%;
  width: 42%;
  transform: rotate(-8deg);
  animation-delay: 1.6s;
}

@keyframes opsRoute {
  0%, 100% { opacity: 0.2; }
  45% { opacity: 1; }
}

.ops-section,
.ops-structure,
.ops-memory,
.ops-stats,
.ops-qr,
.ops-client,
.ops-preventive,
.ops-report,
.ops-final {
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.ops-title {
  max-width: 960px;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.ops-title h2,
.memory-panel h2,
.qr-flow h2,
.ops-client h2,
.ops-report h2,
.ops-final h2 {
  font-size: clamp(38px, 5vw, 76px);
}

.ops-cockpit {
  background: #090f15;
}

.ops-board {
  overflow: hidden;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #10161d;
}

.ops-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding: 0 22px;
  border-bottom: 1px solid var(--ops-line);
}

.ops-board-top h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
}

.ops-tools {
  display: flex;
  gap: 8px;
}

.ops-tools span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.ops-tools b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--ops-blue);
}

.ops-ticket-list {
  display: grid;
}

.ops-ticket {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 86px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ops-ticket:last-child {
  border-bottom: 0;
}

.ops-status {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
}

.ops-ticket.status-current .ops-status {
  background-image: url("assets/Interventions/status/current.gif");
}

.ops-ticket.status-todo .ops-status {
  background-image: url("assets/Interventions/status/todo.webp");
}

.ops-ticket.status-qr .ops-status {
  background-image: url("assets/Interventions/status/todo-qr.webp");
}

.ops-ticket.status-planned .ops-status {
  background-image: url("assets/Interventions/status/planned.webp");
}

.ops-ticket.status-waiting .ops-status {
  background-image: url("assets/Interventions/status/waiting.webp");
}

.ops-ticket h4 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.ops-ticket p {
  margin: 2px 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 14px;
}

.ops-structure {
  background:
    radial-gradient(circle at 84% 18%, rgba(34, 211, 238, 0.12), transparent 30%),
    var(--ops-panel);
}

.structure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.structure-grid article {
  min-height: 260px;
  padding: 26px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.structure-grid span {
  color: var(--ops-cyan);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.structure-grid strong {
  display: block;
  margin: 52px 0 12px;
  color: #fff;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
}

.structure-grid p {
  margin: 0;
  color: var(--ops-muted);
  line-height: 1.45;
}

.ops-memory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: #070b10;
}

.ops-memory > img,
.ops-stats-image,
.qr-image-panel img,
.ops-preventive > img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.34);
}

.ops-memory > img {
  aspect-ratio: 16 / 9;
}

.memory-list {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.memory-list span {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.ops-stats {
  background: #10161d;
}

.ops-stats-image {
  max-height: 360px;
  margin: calc(clamp(58px, 8vw, 112px) * -1) calc(clamp(20px, 6vw, 92px) * -1) clamp(34px, 5vw, 72px);
  width: calc(100% + (clamp(20px, 6vw, 92px) * 2));
  border-radius: 0;
}

.ops-stats-board {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 14px;
}

.ops-stat-card {
  min-height: 430px;
  padding: 26px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.ops-stat-card h3 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 24px;
}

.ops-donut {
  position: relative;
  width: min(310px, 82vw);
  aspect-ratio: 1;
  margin: 26px auto 0;
  border-radius: 999px;
  background: conic-gradient(
    #ef7654 0 18%,
    #27d3c3 18% 34%,
    #2e82ef 34% 48%,
    #a65dff 48% 57%,
    #f6df63 57% 69%,
    #9fe66d 69% 84%,
    #c7d0d8 84% 100%
  );
}

.ops-donut::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 999px;
  background: #10161d;
}

.donut-tip,
.wave-tip {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--ops-blue);
  cursor: pointer;
}

.donut-tip span,
.wave-tip span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-align: left;
}

.donut-tip:hover span,
.donut-tip:focus-visible span,
.wave-tip:hover span,
.wave-tip:focus-visible span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.donut-tip b,
.donut-tip strong,
.donut-tip em,
.wave-tip b,
.wave-tip strong {
  display: block;
}

.donut-tip em {
  color: rgba(255, 255, 255, 0.62);
  font-style: normal;
}

.tip-it { left: 64%; top: 10%; background: #a65dff; }
.tip-rooms { left: 18%; top: 60%; background: #ef7654; }
.tip-kitchen { left: 77%; top: 45%; background: #27d3c3; }
.tip-lab { left: 42%; top: 84%; background: #f6df63; }

.ops-wave {
  position: relative;
  min-height: 320px;
}

.ops-wave svg {
  width: 100%;
  height: 300px;
  display: block;
}

.ops-wave-fill {
  fill: rgba(22, 134, 255, 0.68);
}

.ops-wave-line {
  fill: none;
  stroke: var(--ops-blue);
  stroke-width: 4;
}

.wave-feb { left: 13%; top: 118px; }
.wave-apr { left: 34%; top: 57px; }
.wave-jun { left: 47%; top: 226px; }
.wave-oct { left: 78%; top: 136px; }

.ops-wave-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
}

.ops-qr {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  background: #070b10;
}

.qr-image-panel img {
  aspect-ratio: 16 / 9;
}

.qr-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.qr-steps article {
  overflow: hidden;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.qr-steps img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.qr-steps h3 {
  margin: 16px 16px 8px;
  color: #fff;
}

.qr-steps p {
  margin: 0 16px 18px;
  color: var(--ops-muted);
  line-height: 1.45;
}

.ops-client {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.48fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  color: #07111f;
  background:
    radial-gradient(circle at 16% 18%, rgba(34, 211, 238, 0.18), transparent 30%),
    linear-gradient(135deg, #f7fbff, #eaf7ff);
}

.ops-client .ops-kicker {
  color: #087a91;
}

.ops-client h2 {
  color: #07111f;
}

.ops-client p {
  color: rgba(7, 17, 31, 0.7);
}

.client-phone {
  padding: 26px;
  border: 12px solid #07111f;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.18);
}

.client-head span,
.client-head strong {
  display: block;
}

.client-head span {
  color: rgba(7, 17, 31, 0.55);
  font-size: 13px;
}

.client-head strong {
  margin-top: 5px;
  font-size: 24px;
}

.client-phone ol {
  display: grid;
  gap: 10px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.client-phone li {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  color: rgba(7, 17, 31, 0.58);
  background: #eef3f8;
  font-weight: 800;
}

.client-phone li.done {
  color: #0b6b3a;
  background: rgba(47, 212, 107, 0.16);
}

.client-phone li.active {
  color: #075eb1;
  background: rgba(22, 134, 255, 0.16);
}

.client-phone > p {
  margin: 0;
  font-size: 14px;
}

.ops-preventive {
  background: #10161d;
}

.ops-preventive > img {
  max-height: 310px;
  margin-bottom: 36px;
  object-fit: cover;
}

.preventive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.preventive-grid article {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.preventive-grid span,
.preventive-grid strong,
.preventive-grid p {
  display: block;
}

.preventive-grid span {
  color: var(--ops-cyan);
  font-weight: 900;
}

.preventive-grid strong {
  margin-top: 36px;
  color: #fff;
  font-size: 24px;
}

.preventive-grid p {
  margin: 8px 0 0;
  color: var(--ops-muted);
}

.ops-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.52fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #070b10;
}

.report-link {
  padding: 28px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.report-link span,
.report-link strong {
  display: block;
}

.report-link span {
  color: var(--ops-cyan);
  font-weight: 900;
}

.report-link strong {
  margin-top: 10px;
  color: #fff;
  font-size: 28px;
  line-height: 1.05;
}

.report-link ul {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ops-muted);
}

.report-link li {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.ops-final {
  min-height: 560px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 36%),
    #05080c;
}

.ops-final h2 {
  max-width: 980px;
}

.ops-final a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #041018;
  background: var(--ops-cyan);
  font-weight: 900;
}

@media (max-width: 1080px) {
  .ops-hero,
  .ops-memory,
  .ops-stats-board,
  .ops-qr,
  .ops-client,
  .ops-report {
    grid-template-columns: 1fr;
  }

  .structure-grid,
  .qr-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-map {
    min-height: 560px;
  }
}

@media (max-width: 740px) {
  .ops-header {
    flex-wrap: wrap;
  }

  .ops-header nav {
    width: 100%;
  }

  .ops-hero {
    min-height: 0;
  }

  .ops-hero h1 {
    font-size: 42px;
  }

  .ops-title h2,
  .memory-panel h2,
  .qr-flow h2,
  .ops-client h2,
  .ops-report h2,
  .ops-final h2 {
    font-size: 34px;
  }

  .ops-map {
    min-height: 470px;
  }

  .ops-building {
    left: 7%;
    width: 64%;
  }

  .ops-signal {
    width: 58%;
  }

  .signal-a {
    right: 5%;
    top: 12%;
  }

  .signal-b {
    right: 5%;
    top: 48%;
  }

  .signal-c {
    left: 8%;
    bottom: 7%;
  }

  .ops-board-top,
  .ops-tools,
  .ops-ticket {
    align-items: flex-start;
  }

  .ops-board-top {
    flex-direction: column;
    justify-content: center;
    padding-block: 16px;
  }

  .ops-tools {
    flex-wrap: wrap;
  }

  .ops-ticket {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-inline: 16px;
  }

  .ops-status {
    width: 30px;
    height: 30px;
  }

  .structure-grid,
  .qr-steps,
  .preventive-grid {
    grid-template-columns: 1fr;
  }

  .ops-stat-card {
    min-height: 0;
    padding: 18px;
  }

  .ops-donut {
    width: min(250px, 76vw);
  }
}

@media (max-width: 480px) {
  .ops-page h1,
  .ops-page h2,
  .ops-page h3,
  .ops-page h4,
  .ops-page p,
  .ops-page span,
  .ops-page strong,
  .ops-page b {
    overflow-wrap: anywhere;
  }

  .ops-hero,
  .ops-section,
  .ops-structure,
  .ops-memory,
  .ops-stats,
  .ops-qr,
  .ops-client,
  .ops-preventive,
  .ops-report,
  .ops-final {
    padding-inline: 18px;
  }

  .ops-stats-image {
    margin-inline: -18px;
    width: calc(100% + 36px);
  }

  .client-phone {
    border-width: 8px;
    padding: 18px;
  }

  .report-link,
  .structure-grid article,
  .preventive-grid article {
    padding: 18px;
  }
}

/* Projets module detail page */
.projects-page {
  --project-bg: #f5f8f6;
  --project-ink: #0d1b16;
  --project-muted: rgba(13, 27, 22, 0.66);
  --project-green: #15b86a;
  --project-green-dark: #087f4b;
  --project-blue: #3b82f6;
  --project-line: rgba(13, 27, 22, 0.12);
  --project-panel: rgba(255, 255, 255, 0.74);
  margin: 0;
  color: var(--project-ink);
  background: var(--project-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.projects-page * {
  box-sizing: border-box;
}

.projects-page a {
  color: inherit;
  text-decoration: none;
}

.projects-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(13, 27, 22, 0.08);
  background: rgba(245, 248, 246, 0.84);
  backdrop-filter: blur(18px);
}

.projects-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.projects-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.projects-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--project-muted);
  font-size: 14px;
}

.projects-header nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
}

.projects-header nav a:last-child {
  color: #fff;
  background: var(--project-green);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(21, 184, 106, 0.24);
}

.projects-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1fr);
  gap: clamp(30px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: clamp(58px, 8vw, 118px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 72% 22%, rgba(21, 184, 106, 0.2), transparent 34%),
    radial-gradient(circle at 16% 20%, rgba(59, 130, 246, 0.12), transparent 30%),
    linear-gradient(135deg, #f9fbfa 0%, #edf7f1 100%);
}

.projects-kicker {
  margin: 0 0 14px;
  color: var(--project-green-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.projects-copy h1,
.projects-title h2,
.dashboard-copy h2,
.deadline-copy h2,
.activity-copy h2,
.projects-final h2 {
  margin: 0;
  color: var(--project-ink);
  letter-spacing: 0;
  line-height: 0.98;
}

.projects-copy h1 {
  max-width: 820px;
  font-size: clamp(52px, 7vw, 98px);
}

.projects-copy > p:last-child,
.projects-title p,
.dashboard-copy p,
.deadline-copy p,
.activity-copy p {
  max-width: 760px;
  color: var(--project-muted);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.project-progress-map {
  position: relative;
  min-height: 610px;
  border: 1px solid var(--project-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(13, 27, 22, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(13, 27, 22, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.66);
  background-size: 44px 44px;
  box-shadow: 0 34px 90px rgba(35, 80, 57, 0.16);
  overflow: hidden;
}

.project-level {
  position: absolute;
  z-index: 3;
  width: min(340px, 62%);
  padding: 24px;
  border: 1px solid rgba(13, 27, 22, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 60px rgba(35, 80, 57, 0.14);
}

.level-project {
  left: 9%;
  top: 11%;
}

.level-goal {
  right: 9%;
  top: 38%;
}

.level-step {
  left: 20%;
  bottom: 12%;
}

.project-level span,
.project-level strong {
  display: block;
}

.project-level span {
  color: var(--project-green-dark);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.project-level strong {
  margin-top: 8px;
  color: var(--project-ink);
  font-size: 26px;
  line-height: 1.05;
}

.progress-track {
  height: 8px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2ebe6;
}

.progress-track i,
.deadline-meter i,
.objective-list i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--project-green), var(--project-blue));
}

.step-check {
  width: max-content;
  margin-top: 22px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--project-green);
  font-weight: 900;
}

.project-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--project-green), var(--project-blue), transparent);
  filter: drop-shadow(0 0 14px rgba(21, 184, 106, 0.45));
}

.line-one {
  left: 38%;
  top: 35%;
  width: 30%;
  transform: rotate(20deg);
}

.line-two {
  left: 31%;
  top: 63%;
  width: 36%;
  transform: rotate(-18deg);
}

.projects-section,
.projects-dashboard,
.deadline-section,
.intervention-link-section,
.activity-section,
.use-projects,
.projects-final {
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.projects-title {
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.projects-title h2,
.dashboard-copy h2,
.deadline-copy h2,
.activity-copy h2,
.projects-final h2 {
  font-size: clamp(38px, 5vw, 76px);
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.levels-grid article {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--project-line);
  border-radius: 8px;
  background: var(--project-panel);
}

.levels-grid span {
  color: var(--project-green-dark);
  font-weight: 900;
}

.levels-grid h3 {
  margin: 52px 0 12px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
}

.levels-grid p {
  margin: 0;
  color: var(--project-muted);
  line-height: 1.5;
}

.projects-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #0e1a15;
  color: #fff;
}

.dashboard-copy h2,
.projects-dashboard .projects-kicker {
  color: #fff;
}

.dashboard-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.dashboard-panel {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dashboard-header span,
.dashboard-header strong,
.dashboard-header b {
  display: block;
}

.dashboard-header span {
  color: rgba(255, 255, 255, 0.58);
}

.dashboard-header strong {
  margin-top: 6px;
  font-size: 32px;
  line-height: 1.05;
}

.dashboard-header b {
  font-size: 48px;
  color: var(--project-green);
}

.objective-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.objective-list article {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.objective-list span,
.objective-list strong {
  display: block;
}

.objective-list span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.objective-list strong {
  margin-top: 5px;
}

.objective-list i {
  height: 7px;
  margin-top: 16px;
}

.deadline-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.58fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
}

.deadline-card {
  padding: 28px;
  border: 1px solid var(--project-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(35, 80, 57, 0.14);
}

.deadline-card span,
.deadline-card strong,
.deadline-card b {
  display: block;
}

.deadline-card span {
  color: var(--project-green-dark);
  font-weight: 900;
  text-transform: uppercase;
}

.deadline-card strong {
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.08;
}

.deadline-meter {
  height: 12px;
  margin: 28px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2ebe6;
}

.deadline-card p {
  color: var(--project-muted);
}

.deadline-card b {
  width: max-content;
  margin-top: 20px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: var(--project-green);
}

.intervention-link-section {
  background:
    radial-gradient(circle at 78% 15%, rgba(59, 130, 246, 0.14), transparent 32%),
    #f9fbfa;
}

.handoff-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.handoff-flow article {
  min-height: 210px;
  padding: 26px;
  border: 1px solid var(--project-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(35, 80, 57, 0.1);
}

.handoff-flow span,
.handoff-flow strong {
  display: block;
}

.handoff-flow span {
  color: var(--project-green-dark);
  font-weight: 900;
}

.handoff-flow strong {
  margin-top: 42px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
}

.handoff-flow p {
  color: var(--project-muted);
}

.handoff-arrow {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--project-blue), var(--project-green));
}

.activity-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: start;
  background: #0e1a15;
  color: #fff;
}

.activity-section .projects-kicker,
.activity-copy h2 {
  color: #fff;
}

.activity-copy p {
  color: rgba(255, 255, 255, 0.7);
}

.activity-feed {
  display: grid;
  gap: 12px;
}

.activity-feed article {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.activity-feed span,
.activity-feed strong {
  display: block;
}

.activity-feed span {
  color: var(--project-green);
  font-weight: 900;
}

.activity-feed strong {
  margin-top: 7px;
  color: #fff;
  font-size: 20px;
}

.activity-feed p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.62);
}

.use-projects {
  background: #f0f6f2;
}

.project-use-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.project-use-grid span {
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--project-line);
  border-radius: 8px;
  background: #fff;
  font-weight: 850;
}

.projects-final {
  min-height: 560px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(21, 184, 106, 0.18), transparent 34%),
    #f9fbfa;
}

.projects-final h2 {
  max-width: 980px;
}

.projects-final a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--project-green);
  font-weight: 900;
}

@media (max-width: 1040px) {
  .projects-hero,
  .projects-dashboard,
  .deadline-section,
  .activity-section {
    grid-template-columns: 1fr;
  }

  .levels-grid,
  .project-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .projects-header {
    flex-wrap: wrap;
  }

  .projects-header nav {
    width: 100%;
  }

  .projects-hero {
    min-height: 0;
  }

  .projects-copy h1 {
    font-size: 42px;
  }

  .projects-title h2,
  .dashboard-copy h2,
  .deadline-copy h2,
  .activity-copy h2,
  .projects-final h2 {
    font-size: 34px;
  }

  .project-progress-map {
    display: grid;
    gap: 12px;
    min-height: 0;
    padding: 18px;
  }

  .project-level {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .project-line {
    display: none;
  }

  .levels-grid,
  .project-use-grid,
  .handoff-flow {
    grid-template-columns: 1fr;
  }

  .handoff-arrow {
    height: 50px;
    width: 3px;
    justify-self: center;
  }

  .dashboard-header {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .projects-page h1,
  .projects-page h2,
  .projects-page h3,
  .projects-page p,
  .projects-page span,
  .projects-page strong,
  .projects-page b {
    overflow-wrap: anywhere;
  }

  .projects-hero,
  .projects-section,
  .projects-dashboard,
  .deadline-section,
  .intervention-link-section,
  .activity-section,
  .use-projects,
  .projects-final {
    padding-inline: 18px;
  }

  .project-level,
  .dashboard-panel,
  .deadline-card,
  .handoff-flow article,
  .activity-feed article {
    padding: 18px;
  }
}

/* Inventaire module detail page */
.inventory-page {
  --inv-bg: #f6f8fb;
  --inv-ink: #07172a;
  --inv-muted: rgba(7, 23, 42, 0.64);
  --inv-blue: #2f80ed;
  --inv-cyan: #29c7d4;
  --inv-green: #20b26b;
  --inv-orange: #f59e0b;
  --inv-red: #ef4444;
  --inv-line: rgba(7, 23, 42, 0.12);
  margin: 0;
  color: var(--inv-ink);
  background: var(--inv-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.inventory-page * {
  box-sizing: border-box;
}

.inventory-page a {
  color: inherit;
  text-decoration: none;
}

.inventory-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(7, 23, 42, 0.08);
  background: rgba(246, 248, 251, 0.86);
  backdrop-filter: blur(18px);
}

.inventory-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.inventory-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.inventory-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--inv-muted);
  font-size: 14px;
}

.inventory-header nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
}

.inventory-header nav a:last-child {
  color: #fff;
  background: var(--inv-blue);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(47, 128, 237, 0.24);
}

.inventory-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(440px, 1fr);
  gap: clamp(30px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: clamp(58px, 8vw, 118px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 74% 26%, rgba(47, 128, 237, 0.18), transparent 34%),
    radial-gradient(circle at 16% 22%, rgba(41, 199, 212, 0.16), transparent 30%),
    linear-gradient(135deg, #fbfcff 0%, #edf4fb 100%);
}

.inventory-kicker {
  margin: 0 0 14px;
  color: #1167bd;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inventory-copy h1,
.inventory-title h2,
.stock-copy h2,
.movement-copy h2,
.threshold-copy h2,
.qr-stock-copy h2,
.inventory-final h2 {
  margin: 0;
  color: var(--inv-ink);
  letter-spacing: 0;
  line-height: 0.98;
}

.inventory-copy h1 {
  max-width: 790px;
  font-size: clamp(52px, 7vw, 98px);
}

.inventory-copy > p:last-child,
.inventory-title p,
.stock-copy p,
.movement-copy p,
.threshold-copy p,
.qr-stock-copy p {
  max-width: 760px;
  color: var(--inv-muted);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.inventory-visual {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 90px rgba(39, 75, 112, 0.16);
}

.inventory-visual img {
  width: 100%;
  display: block;
}

.inventory-section,
.stock-dashboard,
.movement-section,
.threshold-section,
.inventory-qr,
.supplier-section,
.inventory-link,
.inventory-usecases,
.inventory-final {
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.inventory-title {
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.inventory-title h2,
.stock-copy h2,
.movement-copy h2,
.threshold-copy h2,
.qr-stock-copy h2,
.inventory-final h2 {
  font-size: clamp(38px, 5vw, 76px);
}

.inventory-structure,
.supplier-grid,
.shared-structure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.inventory-structure article,
.supplier-grid article,
.shared-structure article {
  min-height: 240px;
  padding: 26px;
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(39, 75, 112, 0.08);
}

.inventory-structure span,
.supplier-grid span,
.shared-structure span {
  color: #1167bd;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}

.inventory-structure strong,
.supplier-grid strong,
.shared-structure strong {
  display: block;
  margin-top: 46px;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1;
}

.inventory-structure p,
.supplier-grid p {
  color: var(--inv-muted);
  line-height: 1.45;
}

.stock-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #07172a;
  color: #fff;
}

.stock-copy h2,
.stock-dashboard .inventory-kicker {
  color: #fff;
}

.stock-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.stock-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.stock-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.stock-header h2 {
  margin: 0;
  color: #fff;
}

.stock-actions {
  display: flex;
  gap: 8px;
}

.stock-actions span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.stock-table {
  display: grid;
}

.stock-table article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 70px 112px;
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.stock-table article:last-child {
  border-bottom: 0;
}

.product-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.product-icon.blue { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.product-icon.orange { background: linear-gradient(135deg, #fbbf24, #f97316); }
.product-icon.green { background: linear-gradient(135deg, #34d399, #059669); }
.product-icon.red { background: linear-gradient(135deg, #fb7185, #dc2626); }

.stock-table h3,
.stock-table p {
  margin: 0;
}

.stock-table h3 {
  color: #fff;
  font-size: 17px;
}

.stock-table p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.stock-table strong {
  color: #fff;
  font-size: 22px;
}

.stock-table em {
  width: max-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #082015;
  background: #bbf7d0;
  font-style: normal;
  font-weight: 900;
}

.stock-table em.low {
  color: #442800;
  background: #fde68a;
}

.stock-table em.critical {
  color: #fff;
  background: var(--inv-red);
}

.movement-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
}

.movement-board {
  position: relative;
  min-height: 360px;
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(7, 23, 42, 0.04) 1px, transparent 1px),
    #fff;
  background-size: 40px 40px;
  box-shadow: 0 26px 70px rgba(39, 75, 112, 0.11);
}

.shelf {
  position: absolute;
  width: min(260px, 42%);
  padding: 22px;
  border: 1px solid var(--inv-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(39, 75, 112, 0.13);
}

.shelf-a {
  left: 8%;
  top: 18%;
}

.shelf-b {
  right: 8%;
  bottom: 18%;
}

.shelf span,
.shelf strong {
  display: block;
}

.shelf span {
  color: #1167bd;
  font-weight: 900;
}

.shelf strong {
  margin-top: 8px;
  font-size: 24px;
}

.shelf p {
  color: var(--inv-muted);
}

.transfer-line {
  position: absolute;
  left: 30%;
  top: 48%;
  width: 42%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--inv-blue), var(--inv-cyan));
  transform: rotate(14deg);
}

.transfer-line i {
  position: absolute;
  top: -5px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--inv-cyan);
  animation: invTransfer 3s ease-in-out infinite;
}

@keyframes invTransfer {
  0% { left: 0; opacity: 0.2; }
  45% { opacity: 1; }
  100% { left: calc(100% - 13px); opacity: 0.2; }
}

.threshold-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.52fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #edf4fb;
}

.threshold-card {
  padding: 28px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(245, 158, 11, 0.14);
}

.threshold-card span,
.threshold-card strong,
.threshold-card b {
  display: block;
}

.threshold-card span {
  color: #b45309;
  font-weight: 900;
  text-transform: uppercase;
}

.threshold-card strong {
  margin-top: 10px;
  font-size: 32px;
  line-height: 1.05;
}

.threshold-card p {
  color: var(--inv-muted);
}

.threshold-card b {
  width: max-content;
  margin-top: 24px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #442800;
  background: #fde68a;
}

.inventory-qr {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 0.9fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #07172a;
  color: #fff;
}

.inventory-qr .inventory-kicker,
.qr-stock-copy h2 {
  color: #fff;
}

.qr-stock-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.qr-stock-device {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 16px;
  align-items: center;
}

.stock-qr,
.quick-action {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.stock-qr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 28px;
}

.stock-qr i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #07172a;
}

.stock-qr i:nth-child(2),
.stock-qr i:nth-child(5),
.stock-qr i:nth-child(8) {
  background: #d8e6f3;
}

.quick-action {
  padding: 24px;
  color: var(--inv-ink);
}

.quick-action span,
.quick-action strong {
  display: block;
}

.quick-action span {
  color: var(--inv-muted);
}

.quick-action strong {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.05;
}

.quantity-stepper {
  display: grid;
  grid-template-columns: 1fr 76px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
}

.quantity-stepper button,
.quantity-stepper b {
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
}

.quantity-stepper button {
  color: #fff;
  background: var(--inv-blue);
}

.quantity-stepper b {
  background: #eef4fb;
  font-size: 24px;
}

.supplier-section {
  background: #f6f8fb;
}

.supplier-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-link {
  background:
    radial-gradient(circle at 80% 16%, rgba(32, 178, 107, 0.14), transparent 28%),
    #edf4fb;
}

.shared-structure {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-usecases {
  background: #07172a;
  color: #fff;
}

.inventory-usecases .inventory-kicker {
  color: #fff;
}

.inventory-use-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.inventory-use-grid span {
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 850;
}

.inventory-final {
  min-height: 560px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 128, 237, 0.14), transparent 34%),
    #f6f8fb;
}

.inventory-final h2 {
  max-width: 980px;
}

.inventory-final a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--inv-blue);
  font-weight: 900;
}

@media (max-width: 1080px) {
  .inventory-hero,
  .stock-dashboard,
  .movement-section,
  .threshold-section,
  .inventory-qr {
    grid-template-columns: 1fr;
  }

  .inventory-structure,
  .inventory-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 740px) {
  .inventory-header {
    flex-wrap: wrap;
  }

  .inventory-header nav {
    width: 100%;
  }

  .inventory-hero {
    min-height: 0;
  }

  .inventory-copy h1 {
    font-size: 42px;
  }

  .inventory-title h2,
  .stock-copy h2,
  .movement-copy h2,
  .threshold-copy h2,
  .qr-stock-copy h2,
  .inventory-final h2 {
    font-size: 34px;
  }

  .inventory-structure,
  .supplier-grid,
  .shared-structure,
  .inventory-use-grid,
  .qr-stock-device {
    grid-template-columns: 1fr;
  }

  .stock-header,
  .stock-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .stock-header {
    flex-direction: column;
    justify-content: center;
    padding-block: 16px;
  }

  .stock-table article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .stock-table strong,
  .stock-table em {
    grid-column: 2;
  }

  .movement-board {
    display: grid;
    gap: 12px;
    min-height: 0;
    padding: 18px;
  }

  .shelf {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .transfer-line {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }
}

@media (max-width: 480px) {
  .inventory-page h1,
  .inventory-page h2,
  .inventory-page h3,
  .inventory-page p,
  .inventory-page span,
  .inventory-page strong,
  .inventory-page b,
  .inventory-page em {
    overflow-wrap: anywhere;
  }

  .inventory-hero,
  .inventory-section,
  .stock-dashboard,
  .movement-section,
  .threshold-section,
  .inventory-qr,
  .supplier-section,
  .inventory-link,
  .inventory-usecases,
  .inventory-final {
    padding-inline: 18px;
  }

  .inventory-structure article,
  .supplier-grid article,
  .shared-structure article,
  .threshold-card,
  .quick-action {
    padding: 18px;
  }
}

/* Emploi du temps module detail page */
.schedule-page {
  --sched-bg: #eef8ff;
  --sched-ink: #071a3b;
  --sched-muted: rgba(7, 26, 59, 0.64);
  --sched-blue: #2478ff;
  --sched-cyan: #48d7d0;
  --sched-violet: #9b72ff;
  --sched-amber: #ffb65c;
  --sched-line: rgba(7, 26, 59, 0.12);
  margin: 0;
  color: var(--sched-ink);
  background: var(--sched-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.schedule-page * {
  box-sizing: border-box;
}

.schedule-page a {
  color: inherit;
  text-decoration: none;
}

.schedule-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid rgba(7, 26, 59, 0.08);
  background: rgba(238, 248, 255, 0.86);
  backdrop-filter: blur(18px);
}

.schedule-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.schedule-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.schedule-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sched-muted);
  font-size: 14px;
}

.schedule-header nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
}

.schedule-header nav a:last-child {
  color: #fff;
  background: var(--sched-blue);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(36, 120, 255, 0.24);
}

.schedule-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1fr);
  gap: clamp(30px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: clamp(58px, 8vw, 118px) clamp(20px, 6vw, 92px);
  background:
    radial-gradient(circle at 74% 25%, rgba(72, 215, 208, 0.2), transparent 34%),
    radial-gradient(circle at 15% 22%, rgba(36, 120, 255, 0.14), transparent 30%),
    linear-gradient(135deg, #f8fdff 0%, #e5f7ff 100%);
}

.schedule-kicker {
  margin: 0 0 14px;
  color: #155fce;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.schedule-copy h1,
.schedule-title h2,
.build-copy h2,
.ai-copy h2,
.clock-copy h2,
.timesheet-copy h2,
.schedule-final h2 {
  margin: 0;
  color: var(--sched-ink);
  letter-spacing: 0;
  line-height: 0.98;
}

.schedule-copy h1 {
  max-width: 780px;
  font-size: clamp(54px, 7vw, 104px);
}

.schedule-copy > p:last-child,
.schedule-title p,
.build-copy p,
.ai-copy p,
.clock-copy p,
.timesheet-copy p {
  max-width: 760px;
  color: var(--sched-muted);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.schedule-visual {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 90px rgba(37, 96, 150, 0.16);
}

.schedule-visual img {
  width: 100%;
  display: block;
}

.schedule-section,
.quick-build,
.ai-section,
.collaborator-section,
.clock-section,
.timesheet-section,
.requests-section,
.schedule-final {
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.schedule-title {
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.schedule-title h2,
.build-copy h2,
.ai-copy h2,
.clock-copy h2,
.timesheet-copy h2,
.schedule-final h2 {
  font-size: clamp(38px, 5vw, 76px);
}

.planning-board {
  padding: 24px;
  border: 1px solid var(--sched-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(37, 96, 150, 0.12);
}

.planning-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.planning-tabs span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--sched-muted);
  background: #eef5fb;
  font-weight: 850;
}

.planning-tabs .active {
  color: #fff;
  background: var(--sched-blue);
}

.planning-grid {
  display: grid;
  grid-template-columns: 128px repeat(7, minmax(70px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.planning-grid > b,
.planning-grid > strong,
.planning-grid > i {
  min-height: 58px;
  border-radius: 8px;
}

.planning-grid > b {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sched-muted);
  background: #f2f7fb;
}

.planning-grid > strong {
  display: flex;
  align-items: center;
  padding-inline: 12px;
  background: #f8fbfe;
}

.planning-grid > i {
  background: #f0f5fb;
}

.planning-grid .shift {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.planning-grid .blue { background: linear-gradient(135deg, #6db6ff, var(--sched-blue)); }
.planning-grid .cyan { background: linear-gradient(135deg, #8cf1ea, var(--sched-cyan)); }
.planning-grid .violet { background: linear-gradient(135deg, #c8b6ff, var(--sched-violet)); }
.planning-grid .amber { background: linear-gradient(135deg, #ffd59b, var(--sched-amber)); }

.quick-build {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #071a3b;
  color: #fff;
}

.quick-build .schedule-kicker,
.build-copy h2 {
  color: #fff;
}

.build-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.build-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.build-flow article {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.build-flow span,
.build-flow strong {
  display: block;
}

.build-flow span {
  color: var(--sched-cyan);
  font-weight: 900;
}

.build-flow strong {
  margin-top: 52px;
  color: #fff;
  font-size: 26px;
  line-height: 1.05;
}

.build-arrow {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sched-blue), var(--sched-cyan));
}

.ai-section {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #f8fdff;
}

.ai-panel {
  padding: 28px;
  border: 1px solid var(--sched-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(37, 96, 150, 0.12);
}

.ai-panel span,
.ai-panel strong,
.ai-signals i {
  display: block;
}

.ai-panel span {
  color: #155fce;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-panel strong {
  margin-top: 16px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
}

.ai-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.ai-signals i {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--sched-muted);
  background: #eef5fb;
  font-style: normal;
  font-weight: 850;
}

.collab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.collab-grid article,
.request-list article {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--sched-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(37, 96, 150, 0.08);
}

.collab-grid span,
.collab-grid strong,
.request-list span,
.request-list strong {
  display: block;
}

.collab-grid span,
.request-list span {
  color: #155fce;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}

.collab-grid strong,
.request-list strong {
  margin-top: 46px;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.05;
}

.collab-grid p,
.request-list p {
  color: var(--sched-muted);
}

.clock-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: #071a3b;
  color: #fff;
}

.clock-section .schedule-kicker,
.clock-copy h2 {
  color: #fff;
}

.clock-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.clock-device {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 16px;
  align-items: center;
}

.clock-qr,
.clock-phone {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.clock-qr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 28px;
}

.clock-qr i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #071a3b;
}

.clock-qr i:nth-child(2),
.clock-qr i:nth-child(5),
.clock-qr i:nth-child(8) {
  background: #dbeafe;
}

.clock-phone {
  padding: 24px;
  color: var(--sched-ink);
}

.clock-phone span,
.clock-phone strong {
  display: block;
}

.clock-phone span {
  color: var(--sched-muted);
}

.clock-phone strong {
  margin-top: 6px;
  font-size: 32px;
}

.clock-phone button {
  width: 100%;
  min-height: 52px;
  margin-top: 26px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--sched-blue);
  font-weight: 1000;
}

.clock-phone p {
  color: var(--sched-muted);
}

.timesheet-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
}

.timesheet-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hours-card,
.pdf-card {
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--sched-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(37, 96, 150, 0.1);
}

.hours-card span,
.hours-card strong,
.pdf-card span,
.pdf-card strong {
  display: block;
}

.hours-card span,
.pdf-card span {
  color: #155fce;
  font-weight: 900;
  text-transform: uppercase;
}

.hours-card strong {
  margin-top: 42px;
  font-size: clamp(46px, 5vw, 72px);
  line-height: 1;
}

.pdf-card strong {
  margin-top: 42px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}

.hours-card p,
.pdf-card p {
  color: var(--sched-muted);
}

.requests-section {
  background: #f8fdff;
}

.request-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.schedule-final {
  min-height: 560px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 215, 208, 0.18), transparent 34%),
    #eef8ff;
}

.schedule-final h2 {
  max-width: 1040px;
}

.schedule-final a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--sched-blue);
  font-weight: 900;
}

@media (max-width: 1080px) {
  .schedule-hero,
  .quick-build,
  .ai-section,
  .clock-section,
  .timesheet-section {
    grid-template-columns: 1fr;
  }

  .collab-grid,
  .request-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 740px) {
  .schedule-header {
    flex-wrap: wrap;
  }

  .schedule-header nav {
    width: 100%;
  }

  .schedule-hero {
    min-height: 0;
  }

  .schedule-copy h1 {
    font-size: 42px;
  }

  .schedule-title h2,
  .build-copy h2,
  .ai-copy h2,
  .clock-copy h2,
  .timesheet-copy h2,
  .schedule-final h2 {
    font-size: 34px;
  }

  .build-flow,
  .collab-grid,
  .clock-device,
  .timesheet-board,
  .request-list {
    grid-template-columns: 1fr;
  }

  .build-arrow {
    width: 3px;
    height: 46px;
    justify-self: center;
  }

  .planning-board {
    padding: 14px;
  }

  .planning-grid {
    grid-template-columns: 72px repeat(7, minmax(28px, 1fr));
    gap: 5px;
    overflow-x: visible;
  }

  .planning-grid > b,
  .planning-grid > strong,
  .planning-grid > i {
    min-height: 44px;
    font-size: 11px;
  }

  .planning-grid > strong {
    padding-inline: 7px;
  }
}

@media (max-width: 480px) {
  .schedule-page h1,
  .schedule-page h2,
  .schedule-page h3,
  .schedule-page p,
  .schedule-page span,
  .schedule-page strong,
  .schedule-page b {
    overflow-wrap: anywhere;
  }

  .schedule-hero,
  .schedule-section,
  .quick-build,
  .ai-section,
  .collaborator-section,
  .clock-section,
  .timesheet-section,
  .requests-section,
  .schedule-final {
    padding-inline: 18px;
  }

  .ai-panel,
  .collab-grid article,
  .request-list article,
  .hours-card,
  .pdf-card {
    padding: 18px;
  }
}

/* Service des etages module page */
.floors-page,
.reception-page {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.floors-page *,
.reception-page * {
  box-sizing: border-box;
}

.floors-page a,
.reception-page a {
  color: inherit;
  text-decoration: none;
}

.floors-page {
  --floor-bg: #f6f3ee;
  --floor-ink: #18201d;
  --floor-muted: rgba(24, 32, 29, 0.64);
  --floor-green: #2da86f;
  --floor-gold: #d9a94f;
  --floor-blue: #5a9fe8;
  --floor-coral: #e77b67;
  --floor-line: rgba(24, 32, 29, 0.12);
  color: var(--floor-ink);
  background: var(--floor-bg);
}

.floors-header,
.reception-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(18px, 5vw, 72px);
  backdrop-filter: blur(18px);
}

.floors-header {
  border-bottom: 1px solid rgba(24, 32, 29, 0.08);
  background: rgba(246, 243, 238, 0.86);
}

.floors-brand,
.reception-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.floors-brand img,
.reception-brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.floors-header nav,
.reception-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.floors-header nav {
  color: var(--floor-muted);
}

.floors-header nav a,
.reception-header nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
}

.floors-header nav a:last-child {
  color: #fff;
  background: var(--floor-green);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(45, 168, 111, 0.24);
}

.floors-hero,
.floors-section,
.assignment-section,
.room-journey,
.quality-section,
.anomaly-section,
.reception-section,
.floors-final {
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.floors-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1fr);
  gap: clamp(30px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 64px);
  background:
    radial-gradient(circle at 76% 28%, rgba(45, 168, 111, 0.16), transparent 34%),
    radial-gradient(circle at 14% 18%, rgba(217, 169, 79, 0.18), transparent 30%),
    linear-gradient(135deg, #fbf8f2 0%, #f1ede4 100%);
}

.floors-kicker,
.reception-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.floors-kicker {
  color: #1d7d54;
}

.floors-copy h1,
.floors-title h2,
.assignment-copy h2,
.quality-copy h2,
.anomaly-copy h2,
.floors-final h2 {
  margin: 0;
  color: var(--floor-ink);
  letter-spacing: 0;
  line-height: 0.98;
}

.floors-copy h1 {
  max-width: 820px;
  font-size: clamp(52px, 7vw, 98px);
}

.floors-copy > p:last-child,
.floors-title p,
.assignment-copy p,
.quality-copy p,
.anomaly-copy p {
  max-width: 760px;
  color: var(--floor-muted);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.hotel-floor {
  position: relative;
  min-height: 610px;
  border: 1px solid var(--floor-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(24, 32, 29, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(24, 32, 29, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.72);
  background-size: 46px 46px;
  box-shadow: 0 34px 90px rgba(78, 63, 43, 0.14);
  overflow: hidden;
}

.floor-corridor {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 45%;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 169, 79, 0.22), rgba(45, 168, 111, 0.16));
}

.room-card {
  position: absolute;
  width: 142px;
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--floor-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(78, 63, 43, 0.12);
}

.room-card span,
.room-card strong {
  display: block;
}

.room-card span {
  font-size: 24px;
  font-weight: 1000;
}

.room-card strong {
  font-size: 14px;
}

.room-departure { left: 10%; top: 12%; border-left: 6px solid var(--floor-coral); }
.room-cleaning { left: 34%; top: 13%; border-left: 6px solid var(--floor-blue); }
.room-ready { right: 12%; top: 14%; border-left: 6px solid var(--floor-green); }
.room-check { left: 14%; bottom: 12%; border-left: 6px solid var(--floor-gold); }
.room-occupied { left: 39%; bottom: 12%; border-left: 6px solid #8a8f98; }
.room-alert { right: 12%; bottom: 12%; border-left: 6px solid #e24d4d; }
.room-arrival { left: 43%; top: 39%; border-left: 6px solid #8d72e8; }
.room-out { right: 9%; top: 40%; border-left: 6px solid #111827; }

.floors-title {
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.floors-title h2,
.assignment-copy h2,
.quality-copy h2,
.anomaly-copy h2,
.floors-final h2 {
  font-size: clamp(38px, 5vw, 76px);
}

.status-grid,
.reception-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.status-grid article,
.reception-strip article {
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--floor-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(78, 63, 43, 0.08);
}

.status-dot,
.reception-status-grid i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.occupied { background: #8a8f98; }
.departure { background: var(--floor-coral); }
.cleaning,
.prep { background: var(--floor-blue); }
.check { background: var(--floor-gold); }
.ready { background: var(--floor-green); }
.out { background: #111827; }
.arrival { background: #8d72e8; }

.status-grid strong,
.reception-strip strong {
  display: block;
  color: var(--floor-ink);
  font-size: 24px;
}

.status-grid p {
  color: var(--floor-muted);
}

.assignment-section,
.quality-section,
.anomaly-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
}

.assignment-section,
.anomaly-section {
  background: #18201d;
  color: #fff;
}

.assignment-section .floors-kicker,
.anomaly-section .floors-kicker,
.assignment-copy h2,
.anomaly-copy h2 {
  color: #fff;
}

.assignment-copy p,
.anomaly-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.assignment-board,
.quality-card,
.anomaly-card {
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  color: var(--floor-ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.16);
}

.assignment-header span,
.assignment-header strong {
  display: block;
}

.assignment-header span,
.quality-card span,
.anomaly-card span {
  color: #1d7d54;
  font-weight: 900;
  text-transform: uppercase;
}

.assignment-header strong {
  margin-top: 8px;
  font-size: 32px;
}

.housekeeper-list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.housekeeper-list article {
  padding: 16px;
  border-radius: 8px;
  background: #f5f2eb;
}

.housekeeper-list span,
.housekeeper-list strong {
  display: block;
}

.workload {
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2ddd3;
}

.workload i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--floor-green), var(--floor-gold));
}

.journey-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.journey-line article {
  min-height: 180px;
  padding: 22px;
  border: 1px solid var(--floor-line);
  border-radius: 8px;
  background: #fff;
}

.journey-line span,
.journey-line strong {
  display: block;
}

.journey-line span {
  color: #1d7d54;
  font-weight: 900;
}

.journey-line strong {
  margin-top: 48px;
  font-size: 24px;
}

.quality-card strong,
.anomaly-card strong {
  display: block;
  margin-top: 10px;
  font-size: 34px;
  line-height: 1.05;
}

.quality-card ul {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.quality-card li {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #f5f2eb;
}

.quality-card b {
  display: inline-flex;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: var(--floor-green);
}

.anomaly-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.anomaly-flow i {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e24d4d;
}

.anomaly-flow b {
  color: var(--floor-green);
}

.reception-strip article {
  text-align: center;
}

.reception-strip span {
  display: block;
  color: var(--floor-green);
  font-size: 54px;
  font-weight: 1000;
}

.floors-final {
  min-height: 540px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 168, 111, 0.16), transparent 34%),
    #fbf8f2;
}

.floors-final h2 {
  max-width: 980px;
}

.floors-final a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--floor-green);
  font-weight: 900;
}

/* Reception module page */
.reception-page {
  --rec-bg: #f5f8fb;
  --rec-ink: #081827;
  --rec-muted: rgba(8, 24, 39, 0.64);
  --rec-blue: #2078f4;
  --rec-teal: #24b8b0;
  --rec-gold: #d9a441;
  --rec-coral: #e86f5d;
  --rec-line: rgba(8, 24, 39, 0.12);
  color: var(--rec-ink);
  background: var(--rec-bg);
}

.reception-header {
  border-bottom: 1px solid rgba(8, 24, 39, 0.08);
  background: rgba(245, 248, 251, 0.86);
}

.reception-header nav {
  color: var(--rec-muted);
}

.reception-header nav a:last-child {
  color: #fff;
  background: var(--rec-blue);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(32, 120, 244, 0.24);
}

.reception-hero,
.reception-section,
.guest-requests,
.guest-qr-section,
.resolution-section,
.activity-log-section,
.reception-final {
  padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 92px);
}

.reception-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1fr);
  gap: clamp(30px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 64px);
  background:
    radial-gradient(circle at 74% 22%, rgba(32, 120, 244, 0.16), transparent 34%),
    radial-gradient(circle at 15% 20%, rgba(36, 184, 176, 0.14), transparent 30%),
    linear-gradient(135deg, #fbfdff 0%, #edf5fb 100%);
}

.reception-kicker {
  color: #1262c9;
}

.reception-copy h1,
.reception-title h2,
.requests-copy h2,
.guest-qr-copy h2,
.activity-log-copy h2,
.reception-final h2 {
  margin: 0;
  color: var(--rec-ink);
  line-height: 0.98;
  letter-spacing: 0;
}

.reception-copy h1 {
  max-width: 780px;
  font-size: clamp(52px, 7vw, 98px);
}

.reception-copy > p:last-child,
.reception-title p,
.requests-copy p,
.guest-qr-copy p,
.activity-log-copy p {
  max-width: 760px;
  color: var(--rec-muted);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.frontdesk-console {
  padding: 26px;
  border: 1px solid var(--rec-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(43, 72, 104, 0.14);
}

.frontdesk-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.frontdesk-top span,
.frontdesk-top strong {
  display: block;
}

.frontdesk-top span {
  color: var(--rec-muted);
}

.frontdesk-top strong {
  font-size: 32px;
}

.frontdesk-rooms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.frontdesk-rooms i {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-style: normal;
  font-weight: 1000;
}

.frontdesk-request {
  margin-top: 18px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--rec-blue), var(--rec-teal));
}

.frontdesk-request b,
.frontdesk-request span {
  display: block;
}

.frontdesk-request span {
  margin-top: 6px;
}

.reception-title {
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 56px);
}

.reception-title h2,
.requests-copy h2,
.guest-qr-copy h2,
.activity-log-copy h2,
.reception-final h2 {
  font-size: clamp(38px, 5vw, 76px);
}

.reception-status-grid,
.request-board,
.resolution-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reception-status-grid article,
.request-board article,
.resolution-flow article,
.reception-log article {
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--rec-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(43, 72, 104, 0.08);
}

.reception-status-grid strong,
.request-board strong,
.resolution-flow strong,
.reception-log strong {
  display: block;
  color: var(--rec-ink);
  font-size: 24px;
  line-height: 1.08;
}

.reception-status-grid p,
.request-board p,
.reception-log p {
  color: var(--rec-muted);
}

.guest-requests,
.activity-log-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: start;
  background: #081827;
  color: #fff;
}

.guest-requests .reception-kicker,
.activity-log-section .reception-kicker,
.requests-copy h2,
.activity-log-copy h2 {
  color: #fff;
}

.requests-copy p,
.activity-log-copy p {
  color: rgba(255, 255, 255, 0.72);
}

.request-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.request-board article,
.reception-log article {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.request-board span,
.reception-log span {
  display: block;
  color: var(--rec-teal);
  font-weight: 900;
  text-transform: uppercase;
}

.request-board strong,
.reception-log strong {
  margin-top: 34px;
  color: #fff;
}

.guest-qr-section {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 0.9fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
}

.guest-qr-device {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 16px;
  align-items: center;
}

.guest-qr,
.guest-phone {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(43, 72, 104, 0.14);
}

.guest-qr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 28px;
}

.guest-qr i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--rec-ink);
}

.guest-qr i:nth-child(2),
.guest-qr i:nth-child(5),
.guest-qr i:nth-child(8) {
  background: #d9e8f7;
}

.guest-phone {
  padding: 24px;
}

.guest-phone span,
.guest-phone strong {
  display: block;
}

.guest-phone span {
  color: var(--rec-muted);
}

.guest-phone strong {
  margin-top: 6px;
  font-size: 30px;
}

.guest-phone ol {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.guest-phone li {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--rec-muted);
  background: #eef5fb;
  font-weight: 850;
}

.guest-phone li.done {
  color: #0f766e;
  background: rgba(36, 184, 176, 0.16);
}

.guest-phone li.active {
  color: #155fce;
  background: rgba(32, 120, 244, 0.16);
}

.resolution-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.resolution-flow span {
  display: block;
  color: var(--rec-blue);
  font-size: 28px;
  font-weight: 1000;
}

.resolution-flow strong {
  margin-top: 46px;
}

.reception-log {
  display: grid;
  gap: 12px;
}

.reception-final {
  min-height: 540px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(32, 120, 244, 0.15), transparent 34%),
    #fbfdff;
}

.reception-final h2 {
  max-width: 980px;
}

.reception-final a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--rec-blue);
  font-weight: 900;
}

@media (max-width: 1080px) {
  .floors-hero,
  .assignment-section,
  .quality-section,
  .anomaly-section,
  .reception-hero,
  .guest-requests,
  .guest-qr-section,
  .activity-log-section {
    grid-template-columns: 1fr;
  }

  .journey-line,
  .resolution-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .floors-header,
  .reception-header {
    flex-wrap: wrap;
  }

  .floors-header nav,
  .reception-header nav {
    width: 100%;
  }

  .floors-hero,
  .reception-hero {
    min-height: 0;
  }

  .floors-copy h1,
  .reception-copy h1 {
    font-size: 42px;
  }

  .floors-title h2,
  .assignment-copy h2,
  .quality-copy h2,
  .anomaly-copy h2,
  .floors-final h2,
  .reception-title h2,
  .requests-copy h2,
  .guest-qr-copy h2,
  .activity-log-copy h2,
  .reception-final h2 {
    font-size: 34px;
  }

  .hotel-floor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
    padding: 16px;
  }

  .floor-corridor {
    display: none;
  }

  .room-card {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .status-grid,
  .reception-strip,
  .reception-status-grid,
  .request-board,
  .journey-line,
  .resolution-flow,
  .guest-qr-device {
    grid-template-columns: 1fr;
  }

  .frontdesk-rooms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .floors-page h1,
  .floors-page h2,
  .floors-page h3,
  .floors-page p,
  .floors-page span,
  .floors-page strong,
  .floors-page b,
  .reception-page h1,
  .reception-page h2,
  .reception-page h3,
  .reception-page p,
  .reception-page span,
  .reception-page strong,
  .reception-page b {
    overflow-wrap: anywhere;
  }

  .floors-hero,
  .floors-section,
  .assignment-section,
  .room-journey,
  .quality-section,
  .anomaly-section,
  .reception-section,
  .floors-final,
  .reception-hero,
  .guest-requests,
  .guest-qr-section,
  .resolution-section,
  .activity-log-section,
  .reception-final {
    padding-inline: 18px;
  }

  .assignment-board,
  .quality-card,
  .anomaly-card,
  .frontdesk-console,
  .guest-phone {
    padding: 18px;
  }
}